Copy & Paste Design Hacks To Take Your Blog to the Next Level
1 like780 views
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.
![<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](https://image.slidesharecdn.com/copy-pastedesignhacks-171016235730/85/Copy-Paste-Design-Hacks-To-Take-Your-Blog-to-the-Next-Level-9-320.jpg)
Copy & Paste Design Hacks To Take Your Blog to the Next Level
- 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
- 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?
- 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.