Recent Posts

Best Blogger | Tech Tutorials
Subscribe Via Rss Subscribe To The Latest Tips & Tricks
Follow On Twitter Follow @naijaclub10_com On Twitter
Receive The Latest Posts Directly To Your Email - It's Free: Email rss Enter Your Email And Click Subscribe
What is rssHave You Subscribed ?

September 02, 2013

How to make headlines sticky

How to make headline stick and stand alone in blog post
Step 1. Go to edit blogger templates

Step 2. Search </body>

and paste following code before it.

.notes { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOcS76oMFUV7o2B-jbtMPxL0w3eY9o9a7nW5oS_Sjqmf0z1czWpRCW-8daoV4Fa0BDyMRf03qoYEFz2t8wvRcQZtQq682jm9VwAFMpxg6-txF7pOBMuIGGxLhGDpPwEVtJJFPWKhqSPqkf/s1600/notes.jpg);color: #000000; background-color: #E3F0F2;background-repeat: no-repeat; border:1px solid #333333; font-family:Georgia; line-height:1.4em; -moz-border-radius:5px; padding:0.9em; -webkit-border-radius:5px;  list-style:none; margin:5px; font-size:12px; text-indent: 30px; padding-right:40 }.alert { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOcS76oMFUV7o2B-jbtMPxL0w3eY9o9a7nW5oS_Sjqmf0z1czWpRCW-8daoV4Fa0BDyMRf03qoYEFz2t8wvRcQZtQq682jm9VwAFMpxg6-txF7pOBMuIGGxLhGDpPwEVtJJFPWKhqSPqkf/s1600/notes.jpg);color: #000000; background-color: #E3F0F2;background-repeat: no-repeat; border:1px solid #333333; font-family:Georgia; line-height:1.4em; -moz-border-radius:5px; padding:0.9em; -webkit-border-radius:5px;  list-style:none; margin:5px; font-size:12px; text-indent: 30px; padding-right:40 }.help { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy7KAc2TgFS2iZMfVFfyGupaLz4ZxEZ80GdkbHcAcAKRYv_2XZdlkHrA4_j3iD1F3AeJwPYDIlkqISQriqRXLInBsSXwMDOCZu-yvWiMQHxDjgQX6BIRzOsVCLAO_hj9x7nDsOGyipMOEC/s1600/help.jpg);color: #000000; background-color: #CCFFFF;background-repeat: no-repeat; border:1px solid #333; font-family:Georgia; line-height:1.4em; -moz-border-radius:5px; padding:0.9em; -webkit-border-radius:5px;  list-style:none; margin:5px; font-size:12px; text-indent: 30px; padding-right:40 }.impnotes { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX1Aky9Y4aLY0GBriRM2Z0bQM0A2vNU_5IZQdBQ9ebNVCxhGu58OOGgs0f28BzacCGUP7lHL2uMZdzrDnkyVTvoZ3CDg_uV8eo6yysyFHCT1yeEZ-m3XiuvIrlvc8dx-RJObluqmNoCPj7/s1600/impnotes.jpg);color: #000000; background-color: #159EC7;background-repeat: no-repeat; border:1px solid #333; font-family:Georgia; line-height:1.4em; -moz-border-radius:5px; padding:0.9em; -webkit-border-radius:5px;  list-style:none; margin:5px; font-size:12px; text-indent: 30px; padding-right:40 }.tips { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX1Aky9Y4aLY0GBriRM2Z0bQM0A2vNU_5IZQdBQ9ebNVCxhGu58OOGgs0f28BzacCGUP7lHL2uMZdzrDnkyVTvoZ3CDg_uV8eo6yysyFHCT1yeEZ-m3XiuvIrlvc8dx-RJObluqmNoCPj7/s1600/impnotes.jpg);color: #000000; background-color: #159EC7;background-repeat: no-repeat; border:1px solid #333; font-family:Georgia; line-height:1.4em; -moz-border-radius:5px; padding:0.9em; -webkit-border-radius:5px;  list-style:none; margin:5px; font-size:12px; text-indent: 30px; padding-right:40 }

Step 3. Save template and you are Done. 

During write the post use following 
code for headlines or bold lines.

<div class='notes'>your headline here</div><div class='help'>your headline here</div>

No comments:

Post a Comment