Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Copy & Paste Design Hacks To Take Your Blog to the Next Level


Published on

In this guide, we're going to highlight a few awesome design hacks you can add to your blog to take your content marketing efforts to the next level. We'll give you all of the HTML, CSS and JavaScript that you need to implement them, so all you need to do is copy and paste from the transcript below.

Published in: Marketing
  • Be the first to comment

Copy & Paste Design Hacks To Take Your Blog to the Next Level

  1. 1. To Take Your Blog to the Next Level COPY-&-PASTE DESIGN HACKS
  2. 2. HEADINGS You think I'm going to read every paragraph?
  3. 3. HEADINGS
  4. 4. <style> h2 { padding: 7px 0px 7px 15px; margin-left: -15px; border-left: 4px solid #2196F3; margin-top: 30px; } </style> THE CSS
  5. 5. <p>Your article content.</p> <h2>Your section header</h2> <hr> <p>Your article content.</p> THE HTML
  6. 6. TABLE OF CONTENTS I'm only interested in one of your 23 sections
  8. 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. 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. 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. 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. 12. QUOTES & TAKEAWAYS Just give me what's important, eh?
  14. 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. 15. <div class="quote"> <p>Quote Content</p> </div> THE QUOTE HTML
  16. 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. 17. <div class="takeaway"> <h2>Takeaway Heading</h2> <p>Takeaway Content</p> </div> THE TAKEAWAY HTML
  18. 18. CLICK TO TWEET C'mon, make it easy for me
  19. 19. CLICK TO TWEET
  20. 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. 21. <div class="twitter-box"><img src=" 22/original.png?1466626805"> <p>YOUR TWEET TEXT HERE.</p> <p><a href="!" 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!
  22. 22. For more easy-to-use blog design hacks, check out the full article at
  23. 23. Questions? Feel free to email us at and we'll help you out.