How to make headlines stick and stand alone in to blog post

Normally you write your blog post with quality contents but didn't get attention of readers. Readers don't have patience to read full post. Do you think why? The most common reason behind it - Your post did not look interesting to read but if you make your post attractive and beautiful your it will automatically force readers to read full post. This simple but yet powerful blogger snippet help you to create headlines, bold line more attractive.

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/AVvXsEiQ4L0oO3PGZNGkx9b0EWCc7i-pF-_clfdScKO15KTsbV3sFKuo8dG7ywnIWTKhwzyP5bnFCAkDDJHbAtKW72PjmweGLWIfzwEOzuhPAxwlu-XHiGtcBYGsjqRbHOQoMyezrSn2oQALW80j/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/AVvXsEiQ4L0oO3PGZNGkx9b0EWCc7i-pF-_clfdScKO15KTsbV3sFKuo8dG7ywnIWTKhwzyP5bnFCAkDDJHbAtKW72PjmweGLWIfzwEOzuhPAxwlu-XHiGtcBYGsjqRbHOQoMyezrSn2oQALW80j/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/AVvXsEh6O4XHeTLNaPJZVBiDZCLT3HGxa0Rm4zjOEot1heJm1QeX5WuywJ4vSLRhwp8S2P5yHIw7S5pm5JZ8WNS0SPmY9M0ANjY3esBXsh10w6dnColzZnOkkYWjv_r_C2YTGStrL6VI28GXbNTq/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/AVvXsEga1O9W73QaukoKRL00DYQzfkZi_Z7vh-NfYoMVdslW8bsGvTfY8R9CLbNpgP-ojfWtN6GRpdQKAsbGt_gMyj1ZnLXN014VyLzM4aBlY2f8-iXVn2qDlyOd02-AruimjoXAIEzQLAr_VYA2/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/AVvXsEga1O9W73QaukoKRL00DYQzfkZi_Z7vh-NfYoMVdslW8bsGvTfY8R9CLbNpgP-ojfWtN6GRpdQKAsbGt_gMyj1ZnLXN014VyLzM4aBlY2f8-iXVn2qDlyOd02-AruimjoXAIEzQLAr_VYA2/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. 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>

You are done now. Pl consider sharing with friends if you liked the post. Thanks

Kindly Bookmark this Post using your favorite Bookmarking service: