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

Office Coordinator at iSSi - Integration Solution Services Inc. um Wishpond
16. Oct 2017

Más contenido relacionado


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?
  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
  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=" 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. For more easy-to-use blog design hacks, check out the full article at
  23. Questions? Feel free to email us at and we'll help you out.