Add Stylish Email Subscription widget to blogger

One of the most important elements of blogs. To increase the number of page views, we have to try to keep the reader for a while after finishing the entry. We can do it by presenting him with topics similar to the one currently read.

 There is such an element  on  blogspot  blogs, but why has Google forgotten to add such an important element to the blogger? No idea, but today we'll install a widget like this in less than a minute.

Before making any changes, we should make a copy of the template. To do this, go to:

Navigation Panel> Layout> Edit HTML Code



Recommended posts

Posts are selected by reading labels. If one post the reader is reading has a tag such as cars, the script will look for posts with the same tag and present it on a nice list.

1. Go to the Navigation Panel> Layout> Edit HTML code

2 . Click on Extend Widget Templates .

 

3 . We are looking for a </head> tag , BEFORE it we paste the following code:
<style>
# related-posts {
float: left;
width: 540px;
margin-top: 20px;
margin-left: 5px;
margin-bottom: 20px;
font: 11px Verdana;
margin-bottom: 10px;
}
# related-posts .widget {
list-style-type: none;
margin: 5px 0 5px 0;
padding: 0;
}
# related-posts .widget h2, # related-posts h2 {
color: # 940f04;
font-size: 20px;
font-weight: normal;
margin: 5px 7px 0;
padding: 0 0 5px;
}
# related-posts a {
color: # 054474;
font-size: 11px;
text-decoration: none;
}
# related-posts a: hover {
color: # 054474;
text-decoration: none;
}
# related-posts ul {
border: medium none;
margin: 10px;
padding: 0;
}
# related-posts ul li {
display: block;
background: url ("http://i299.photobucket.com/albums/mm297/zozuglogger/weed-bullet.gif") no-repeat 0 0;
margin: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 1px;
padding-left: 16px;
margin-bottom: 5px;
line-height: 2em;
border-bottom: 1px dotted #cccccc;
}
</style>
<script src = 'http: //torrentmoon.com/javascripts/Related_posts_hack.js' type = 'text / javascript' />

4 . Now we are looking for the <data: post.body /> tag and add the following PO code :

<b: if cond = 'data: blog.pageType == "item"'>
<div id = "related-posts">
<font face = 'Arial' size = '3'> <b> Recommended posts: </b> </font> <font color = '# FFFFFF'> <b: loop values ​​= 'data: post.labels' var =' label '> <data: label.name /> <b: if cond =' data: label.isLast! = & quot; true & quot; '>, </ b: if> <b: if cond =' data: blog.pageType = = & quot; item & quot; '>
<script expr: src =' & quot; / Feeds / posts / default / - / & quot; + data: label.name + & quot;? alt = json-in-script & amp; callback = related_results_labels & amp; max-results = 5 & quot; ' type = 'text / javascript' /> </ b: if> </ b: loop> </font>
<script type = 'text / javascript'> removeRelatedDuplicates (); printRelatedLabels ();
</script>
</div> </ b: if>

5 . Click Save Template . If everything went well, we won't get any errors while parsing the template.

Modifications

First, I recommend that you download http://torrentmoon.com/javascripts/Related_posts_hack.js and upload it to your own hosting. Secondly, I also recommend a small edit. If you do not want a link  to be displayed at the bottom of the recommended posts, you need to remove:

document.write ('</ul>' );
document.write ('<a rel="dofollow" href="http://techno-ahmad.blogspot.com"> Related Posts Widget [?] </ a> </ font> ');
}

from Related_posts_hack.js .

The next thing I have to mention is that the script is not perfect and the recommended posts change with every refresh (maybe it's not a huge disadvantage, but still) and the post currently being read may appear on this list.

Coming back to further modifications. max-results = 5 means that the script will compare the first five labels and select recommended posts based on them. If we want to set a limit of 10 maximum displayed posts, in the Related_posts_hack.js filewe need to modify one value.

So we look for the line:
while (i <relatedTitles.length && i <20) {
and change the value 20 to 10 .

The icon on the left side of the post ( http://i299.photobucket.com/albums/mm297/zozuglogger/weed-bullet.gif ) can of course be replaced with your own.

We can also change the fonts. You can probably see things like: " font face = 'Arial' size = '3' " etc. By changing these options, you will adjust the widget's appearance to your blog.

stylish email subscription widget(box) for blogger simple 

 Everybody knows the significance of RSS feeds. So it's more valuable to give the visitors an option to subscribe to your blog feed via email. Another email subscription Widget with stylish looks, as earlier I have also shared feed email subscription Widget for blogger user. But today In this post I discuss stylish email subscription box for blogger. In Email Subscription widget visitors can subscribe your blog’s daily updates. Attractive subscription box helps in increasing the number of your blog visitors. This is the best way to draw readers' attention. So here We give you step by step guide how to install the email subscription widget. Add Stylish Email Subscription widget to blogger Go To Blogger >> Template >> Backup Your Template Click Edit HTML and Search For Below Code After Finding The Above Code Paste The Following Code in below

Subscribe To Our Newsletter

Sign Up Now To Get Free Pro Tutorials About Search Engine Optimization, Blogging Guide, Making Money Online, Giveaways and Much More. It's 100% Free!

We Hate Spam! Really, It's terrible and we never do it.

Replace Techno-ahmad With Your Feedburner Username. Warning : Don't remove the credits. Click Save! This widget is first shared on BloggerTipsTricks.net.Visit our blogs to see the new eye-catching change. I am sure this will extremely increase the number of your blog subscribers. Let me know if I missed anything or you face any issue!!! Thanks for reading our post.