The document provides code snippets and instructions for adding various design elements to blogs such as headings, tables of contents, quotes, call-out boxes, and click-to-tweet buttons. It includes CSS and HTML for styling headings, creating interactive tables of contents, styling quotes and call-out boxes, and inserting clickable tweet buttons. Instructions are provided for how to implement each element on a blog.

1. To Take Your Blog to the Next Level
COPY-&-PASTE DESIGN HACKS

2. HEADINGS
You think I'm going to read
every paragraph?

3. HEADINGS

4. <style>
h2 {
padding: 7px 0px 7px 15px;
margin-left: -15px;
border-left: 4px solid #2196F3;
margin-top: 30px;
}
</style>
THE CSS

5. <p>Your article content.</p>
<h2>Your section header</h2>
<hr>
<p>Your article content.</p>
THE HTML

6. TABLE OF
CONTENTS
I'm only interested in one of
your 23 sections

7. TABLE OF
CONTENTS

8. <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

9. <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

10. <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

11. 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:

12. QUOTES &
TAKEAWAYS
Just give me what's
important, eh?

13. QUOTES &
TAKEAWAYS

14. <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

15. <div class="quote">
<p>Quote Content</p>
</div>
THE QUOTE HTML

16. <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

17. <div class="takeaway">
<h2>Takeaway Heading</h2>
<p>Takeaway Content</p>
</div>
THE TAKEAWAY HTML

18. CLICK TO
TWEET
C'mon, make it easy for me

19. CLICK TO
TWEET

20. 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;
}

21. <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!

22. For more easy-to-use
blog design hacks, check
out the full article at
blog.wishpond.com

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