copy & paste design hacks to take your blog to the next level
TRANSCRIPT
To Take Your Blog to the Next LevelCOPY-&-PASTE DESIGN HACKS
HEADINGS
You think I'm going to read every paragraph?
HEADINGS
<style> h2 { padding: 7px 0px 7px 15px; margin-left: -15px; border-left: 4px solid #2196F3; margin-top: 30px;}</style>
THE CSS
<p>Your article content.</p>
<h2>Your section header</h2>
<hr>
<p>Your article content.</p>
THE HTML
TABLE OF CONTENTS
I'm only interested in one of your 23 sections
TABLE OF CONTENTS
<style> .toc-container { margin: 15px;}.toc{ list-style-type: none; padding: 0; margin: 0 auto; width: 500px;}.toc li{ width: 100%; display: inline-block; float: left; text-align: center; padding: 0 !important; margin: 0 0 10px !important;}
</style>
THE CSS
<script> setTimeout(function () { var anchorlinks = document.querySelectorAll('a[href*="#"]'); for(var i = 0; i < anchorlinks.length; i++) { anchorlinks[i].setAttribute('target', '_self'); } }, 1000);</script>
THE JAVASCRIPT
<div class="row toc-container"> <ol class="toc"> <li><a href="#HEADING1" target="self">Heading 1</a></li> <li><a href="#HEADING2">Heading 2</a></li> <li><a href="#HEADING3">Heading 3</a></li> </ol></div>
THE HTML
NOTE...
To make your Table of Contents interactive, add anchor tags to each section you want to link to from your table of contents.
Add these tags right above the heading you’re linking to.
Here's what it looks like in the backend:
QUOTES & TAKEAWAYS
Just give me what's important, eh?
QUOTES & TAKEAWAYS
<style> .quote { padding-left: 15px; border-left: 4px solid #555; margin-bottom: 20px; font-style: italic;}.quote p { font-weight: 300; padding: 5px 0 5px;}</style>
THE QUOTE CSS
<div class="quote">
<p>Quote Content</p>
</div>
THE QUOTE HTML
<style> .takeaway { background-color: #FCFCFC; padding: 40px 50px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.3); border-top: 6px solid #2196F3; margin: 40px 0px;}.takeaway h2 { text-transform: uppercase; letter-spacing: 1.5px; font-size: 18px; border: none !important;}.takeaway p { margin-bottom: 0;}</style>
THE TAKEAWAY CSS
<div class="takeaway"> <h2>Takeaway Heading</h2> <p>Takeaway Content</p> </div>
THE TAKEAWAY HTML
CLICK TO TWEET
C'mon, make it easy for me
CLICK TO TWEET
THE CSS
.twitter-box p{ font-size: 1.2em !important; text-align: center; margin: 0 0 20px; padding: 0 !important; color: #777 !important;}.twitter-box a{ font-size: 0.85em !important; text-align: center; text-transform: uppercase; letter-spacing: 0.05em; margin: 30px 0 0 !important; padding: 3px 0; }</style>
<style> .twitter-box { display: block; margin: 20px auto 35px; max-width: 520px; padding: 0 25px 12px; border-radius: 3px; border: 2px solid #55acee;}.twitter-box img{ display: block; margin: -30px auto 15px !important; width: 60px; height: 60px; background-color: #FFF;}
<div class="twitter-box"><img src="https://s3.amazonaws.com/media.wishpond.com/media/009/242/822/original.png?1466626805"> <p>YOUR TWEET TEXT HERE.</p> <p><a href="http://twitter.com/intent/tweet?text=YOURTWEETHERE!" target="_blank">Click to Tweet</a></p></div>
THE HTML
Make sure you change the paragraph text and "YOURTWEETHERE" in the URL to whatever you’d like it to say. For example, I might use twitter.com/intent/tweet?text=Hello%20World!
For more easy-to-use blog design hacks, check
out the full article at
blog.wishpond.com
