The
related posts widget it’s very important role in every blog and every website because
your visitor stay on your blog and website to very long time. So your blogger
impression and blogger traffic are increase day by day. But the blogger are not
available for this facility to the simple blog so I have to manually implement
this widget. If you have to add related post widget on your blog then don’t
search just follow my all the step and implement to your blogger.
Methods to Implements:-
1.
Now Logging to your blogger
Note: -
Backup your current template coding after you have to apply this process.
2.
Go to Dashboard---> Template ---> Edit
HTML
3.
Press CTRL+F in the code window and find </head> this code.
4.
Copy below Code and paste in above/Before </head> this code.
<script src='http://rpb.googlecode.com/files/rp.js'
type='text/javascript'/>
5.
Press CTRL+F in the code window and find <data:post.body/> this code.
6.
Copy below Code and paste in after <data:post.body/> this code.
<font face='Georgia' size='4'><b>You might also like
: </b></font><font color='#FFFFFF'><b:loop
values='data:post.labels' var='label'><data:label.name/><b:if
cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType
== "item"'>
<script expr:src='"/feeds/posts/default/-/" +
data:label.name +
"?alt=json-in-script&callback=related_results_labels&max-results=6"'
type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates();
printRelatedLabels();
</script>
</div></b:if>
7.
Press CTRL+F in the code window and find ]]></b:skin> this code.
8.
Copy below Code and paste in above/Before ]]></b:skin> this code.
#related-posts
{
float :
left;
width :
480px;
margin-top:70px;
margin-left
: 5px;
margin-bottom:16px;
font : 14px
Verdana;
color:#333333;
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 : 20px
Verdana;
font-weight:
bold;
margin : 5px 7px 0;
padding : 0 0 5px;
color:#111111;
}
#related-posts a
{
text-decoration
: none;
color:#333333;
}
#related-posts
a:hover
{
text-decoration : none;
color:#ffffff;
}
#related-posts
ul
{
border :
medium none;
margin : 10px;
padding :
0;
}
#related-posts ul li
{
display :
block;
background
:
url('http://3.bp.blogspot.com/-rOovw4Gms5c/UPVlXUJvuHI/AAAAAAAAA1I/KVkRG4CP670/s1600/ul-icon.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:2px
dotted #333333;
}
#related-posts
ul li:hover
{
background:#222222;
color:#ffffff;
}
0 Response to "How to Add Related Posts widget to blogger."
Post a Comment