Blogger HTML section allows you do add whatever you wish to add and the more we keep on learning about HTML, JavaScript and CSS we keep on coming up with new gadgets that make our blogging experience great. This is one of the reasons why I love blogger platform. It lets you add whatever you want a long as you know how to add it without creating in errors.
Today we will be adding to our ogbonge blog template the same related posts, subscription box and share button used on Jide's blog. The three widgets are very important for our blog both the desktop view and the mobile view. We will also be adding them to our custom mobile template so do keep in touch for that more!.
Why Add a Related Post Widget Below Each Post in blogger?
Related post widget which is also referred to as recommended post widget is a special widget that enlists for your blog visitors any article that is related to the one being read. This system makes use of the labels on each post. It's important in navigating your visitors round similar posts on your blog.
Another important reason for it is that it increases your page views and also have a positive impact on your blog. Related post is of different types.
- With thumbnail and post title
- As a slider carousel
- With just post title
Why Add Email Subscription Form Below posts
Subscription boxes can be placed in the sidebar, header, footer but what is special about placing the box below each post?. It is a simple logic. A blog reader will be more likely to subscribe to your blog after reading your blog content.
If you have composed a great post on increasing blogger avatar thumbnail resolution, and the visitor loves what he read, then he is more likely to subscribe to your blog newsletter for more cool articles like the one he just read.
What about the Share Buttons?
Just like the subscription box, a reader would really want to share your post with his social media friends after reading the quality of your post and also if he gains something new. Share buttons can be placed at the beginning of the post, beside the post and also at the footer of the post.
My previous post on share buttons (MBT blogger share buttons with counter), shows how you can add responsive share buttons below post title and at the footer of the post. I really like the widget because, with it, you can share a post to over 8 social networks and can see the number of post shares for each post.
How To Add Related Post Gadget To Blogger Post Footer
If you have been following ogbonge series, then adding this will be very easy for you but if you have not, then I advise you check out the series.
Step 1
Log in to blogger.com >> visit the template section >> backup your template >> clink on edit HTML
Step 2
Using CTRL+F search for the second <div class='post-footer'>
Step 3
Just below the second <div class='post-footer'> paste the below code.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related 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>
<!-- Related Posts with Thumbnails Code End-->
Step 4 - Customization
Using CTRL+F search for </head>. Just above it, paste the below code.
<!--Related Posts Scripts and Styles Start-->
<style>
#related-posts {
float : left;
width : 350px;
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 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuNhsJNvN35hxHO6Hnq4deBfVmOp10i6HccRSmW0_s0IW44vqDajz0t2ZmNEO10r8zs6IVx7NWl4_5agzKIlQyjysxozLxKIQ7Vz_ND1LvHf40r-ypafBDmnmsG0Rvs8HBv1pcyWQkw6I/s200/greentickbullet.png) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
document.write('<a href="https://obhiabablog.blogspot.com.ng/2016/09/related-posts-subscription-box-share-button-blogger.html" target="_blank" rel="nofollow"><font size="1" color="black">[Get Related Posts Widget for Your Blog]</font></a>');
}
//]]>
</script>
<!--Related Posts Scripts and Styles End-->
Step 5.
Save the template and that's all.
Show Feedburner Subscription Box Below Blogger Post
Just like I earlier explained, adding Feedburner subscription box below blogger posts, is really important for keeping active/dedicated readers.
Step 1
Log in to blogger.com >> visit the template section >> backup your template >> clink on edit HTML
Step 2
Using CTRL+F search for the second <div class='post-footer'>.
Step 3
Just below the second <div class='post-footer'> copy and paste the below code.
&lt;form style=&quot;border:1px solid #ccc;padding:3px;text-align:center;&quot; action=&quot;https://feedburner.google.com/fb/a/mailverify&quot; method=&quot;post&quot; target=&quot;popupwindow&quot; onsubmit=&quot;window.open(&#039;https://feedburner.google.com/fb/a/mailverify?uri=obhiabablog&#039;, &#039;popupwindow&#039;, &#039;scrollbars=yes,width=550,height=520&#039;);return true&quot;&gt;&lt;p&gt;Enter your email address:&lt;/p&gt;&lt;p&gt;&lt;input type=&quot;text&quot; style=&quot;width:70%&quot; name=&quot;email&quot;/&gt;&lt;/p&gt;&lt;input type=&quot;hidden&quot; value=&quot;obhiabablog&quot; name=&quot;uri&quot;/&gt;&lt;input type=&quot;hidden&quot; name=&quot;loc&quot; value=&quot;en_US&quot;/&gt;&lt;input type=&quot;submit&quot; value=&quot;Subscribe&quot; /&gt;&lt;p&gt;Delivered by &lt;a href=&quot;https://feedburner.google.com&quot; target=&quot;_blank&quot;&gt;FeedBurner&lt;/a&gt;&lt;/p&gt;&lt;/form&gt;&lt;p&gt;Gadget by &lt;a href=&quot;https://obhiababablog.blogspot.com&quot; target=&quot;_blank&quot;&gt;Obhiaba Blog&lt;/a&gt;&lt;/p&gt;&lt;/form&gt;
Step 4 - Customization
Make the following changes to the code.
- Replace obhiabablog with your Feedburner username
- Change border:1px to border:0px to remove the border.
- Change Enter your email address: to any line of phrase you want.
Step 5.
Save the template and that's all.
Add Twitter, Facebook, Google Plus Share Buttons Below Posts
The share button I am offering on this post will only show twitter, Facebook and google plus share buttons for more buttons like Pinterest, Whatsapp, StumbleUpon, LinkedIn, add them here.
Step 1
Log in to blogger.com >> visit the template section >> backup your template >> clink on edit HTML
Step 2
Using CTRL+F search for the second
Step 3
Just below the second <div class='post-footer'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span style='font-size: 15px;font-weight:bold;'>Share : </span>
<p align='center'>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='true' data-show-faces='false'/>
<a href="http://twitter.com/share" class="twitter-share-button" data-count-value="horizontal">Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
</p>
</b:if>
Step 5.
Save the template and that's all.
Note: All the above gadgets will be added to the mobile version of my next post where I will talk about editing the header, post thumbnail, show ads in mobile and many other tutorials related to the blogger custom template.
Show About Author Gadget Below Every Post
Well am not a big fan of this widget, that is why you don't see it on my blog but it is important since it lets your blog viewers know who you also relate more with you. Some persons said it makes your followers trust you more.
Step 1
Log in to blogger.com >> visit the layout section >> Main section (Blog1) >> clink on "Add Gadget".
Step 2
In the pop-up box, just try and locate the "show author box below post", tick it and clink on save.
Tip: This same trick can be used to show AdSense ads between posts in blogger. Read about it - Properly show AdSense ads in Blogger.
Final Words
I have jut showed you how to add Feedburner subscription form, share buttons and related post to blogger. Should in case you want to add YouTube subscription button, you can simply visit this page, while for twitter follow button visit this page.
Have any questions? free feel to ask and also suggest an article for us in the comment box. Sharing is caring!
This Man you are the bomb oh, but have increased my knowledge on css oo
ReplyDeletethanks mightly
Welcome.. and thanks for the encouraging words.
ReplyDelete