copy & paste design hacks to take your blog to the next level
Post on 28-Jan-2018
143 Views
Preview:
TRANSCRIPT
<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
<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:
<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
<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
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/822/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.
top related