To Take Your Blog to the Next Level
COPY-&-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/8
22/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

Questions?
Feel free to email us at
content@wishpond.com
and we'll help you out.