Hello Bloggers, Today I will show you how to add related posts widget to blogger. This related posts widget is very important and must use it in your blog. Many people worried about bounce rate in their blog. They badly need to increase no.of pageviews per user. This related posts widget helps your blog to increase pageviews per user. I strongly recommend you to use this related posts widget in your blog.
Recommended : How To Add Floating Facebook Like Box To Blogger
Many webmasters may be already using related posts widget. They are using 3rd party related posts widget like Linkworth or nRelate. But the problem for those widgets are it will decrease the speed of your blog and those widgets are not that attractive too. This related posts widget is perfect for those people who are looking for different style.
Also See : Add Vertical Social Media Sharing Buttons To Blogger
2. This widget helps you to decrease bounce rate in your blog.
3. You can customize this widget according to your need.
4. This widget is very fast to load and it won't decrease the speed of your blog.
Step 2: Search for </head> and add the following code before </head>
Step 4: Now search for below code.
Step 5: Copy the following code and paste it before <div class='post-footer'>
Customization :
Recommended : How To Add Floating Facebook Like Box To Blogger
Many webmasters may be already using related posts widget. They are using 3rd party related posts widget like Linkworth or nRelate. But the problem for those widgets are it will decrease the speed of your blog and those widgets are not that attractive too. This related posts widget is perfect for those people who are looking for different style.
Also See : Add Vertical Social Media Sharing Buttons To Blogger
Related Posts Widget - Why You Must Use :
1. It is very easy to add in your blog and just need couple of steps.2. This widget helps you to decrease bounce rate in your blog.
3. You can customize this widget according to your need.
4. This widget is very fast to load and it won't decrease the speed of your blog.
Add Stylish Related Posts widget :
Step 1: Firstly Goto Template >> Edit HTML.Step 2: Search for </head> and add the following code before </head>
<!--Related Posts with thumbnails Scripts and Styles from www.bloggingmind.com Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
margin: 1px 0px !important;
background-color: #111;
background-image: -moz-linear-gradientundefined#444, #111);
background-image: -webkit-gradientundefinedlinear, left top, left bottom, fromundefined#444), toundefined#111));
background-image: -webkit-linear-gradientundefined#444, #111);
background-image: -o-linear-gradientundefined#444, #111);
background-image: -ms-linear-gradientundefined#444, #111);
background-image: linear-gradientundefined#444, #111);
height: 300px;
width:590px!important;
padding: 0px !important;
box-shadow: 0px 4px 4px -4px rgbaundefined0, 0, 0, 0.7) !important;
border-radius: 5px 5px 5px 5px;
}
#related-posts h2{
margin: 0px !important;
padding: 10px !important;
color: rgbundefined255, 255, 255);
font-weight: normal;
text-transform: capitalize;
background-color: rgbundefined18, 18, 18);
border-bottom: 1px solid rgbundefined0, 0, 0);
border-top-right-radius: 5px;
border-top-left-radius: 5px;
background-color: #111;
background-image: -moz-linear-gradientundefined#444, #111);
background-image: -webkit-gradientundefinedlinear, left top, left bottom, fromundefined#444), toundefined#111));
background-image: -webkit-linear-gradientundefined#444, #111);
background-image: -o-linear-gradientundefined#444, #111);
background-image: -ms-linear-gradientundefined#444, #111);
background-image: linear-gradientundefined#444, #111);
text-decoration:none!important;
}
#related-posts a{
font-weight:bold!important;
color: white;
font-family: arial!important;
border-right:0px!important;
margin: 10px 0px 10px 10px !important;
}
#related-posts a:hover{
border-right:0px!important;
margin: 10px 0px 10px 10px !important;
background:none!important;
text-decoration:underline!important;
}
#related-posts img{
border: 1px solid #666 !important;
padding: 1px !important;
width: 100px !important;
height: 90px !important;
margin-right: 15px !important;
overflow: hidden;
background:#444!important;
}
#related-posts img:hover{
opacity:0.5;
}
#attb{
font-size:5px!important;
padding-top:200px;
padding-bottom:5px;
padding-left:560px;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL0K-PexTl1c2ejIVVOof5iC0B_15xxzPupKHB10Dxb9FCeLbvV5T-iLXPv0ynhZqc_WsIVXzrQKslpqwBhflu3WK1_GdHXSHz8O70O6nAWVkYpf5K2mjwnt3DhYrn4HzhK2Q5DqK0zDyW/s1600/no_image.jpg";
var maxresults=4;
var splittercolor="#DDDDDD";
var relatedpoststitle="You Might Also Like:";
</script>
<script src='https://related-posts-atb-brandnew.googlecode.com/files/related%20posts%20js.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles from www.bloggingmind.com End-->
Step 4: Now search for below code.
<div class='post-footer'>
Step 5: Copy the following code and paste it before <div class='post-footer'>
<!-- Related Posts with Thumbnails Code from www.bloggingmind.com Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbsundefined);
printRelatedLabels_thumbsundefined"<data:post.url/>");
</script><div id='attb' align='bottom-right'><a href="http://bit.ly/171T6jg">Get</a></div>
</div>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code from www.bloggingmind.com End-->
Customization :
- You can change the width of this widget according to your blog design. Just change 590px if you want to increase or decrease the width.
- If you want to increase the no.of posts to display in your blog, just change maxresults=4.
Thats it. Now "Save Template" and view your blog. Related post widget will appear below in all of your posts. If you unable to add this widget in your blog, comment your problems below.
Subscribe Today And Discover All Tips And Tricks !
Note : Don't forget to click the confirmation link in youe email inbox!
0 comments:
Post a Comment