welcome to techxguide.today I will show how to add related post widget without thumbnail.it,s
Simple Blogger Related Post Widget Without Thumbnails,Related Posts Widget Without Thumbnails for Blogspot Blog ,How To Add Related Posts Widget To Blogger with Thumbnails,Related Posts Widget for Blogger Without Thumbnail,Related Post blogger widget code without Thumbnails,Simple Related Posts Widget Without Thumbnail for Blogger
frist log in your blogger account and click template.then take backup your template and click edit html.now search the
now searce
most important for blog or website because it increase pageviews and decrease bounce rate.when you wiil add related post widget without thumbnail it,s decrease loading tine and make more faster your website.
Simple Blogger Related Post Widget Without Thumbnails,Related Posts Widget Without Thumbnails for Blogspot Blog ,How To Add Related Posts Widget To Blogger with Thumbnails,Related Posts Widget for Blogger Without Thumbnail,Related Post blogger widget code without Thumbnails,Simple Related Posts Widget Without Thumbnail for Blogger
frist log in your blogger account and click template.then take backup your template and click edit html.now search the
</head>code by pressing CTRL+F
when find the code paste the bellow code just above </head> tag
<!--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/AVvXsEiLISvVZC3AzJOwV0MctrG68obnyuL2s2i5KcfilYCiUXxclvYrMqtZjvc73PLT6jLsFIQzBev9fSnW1lzrD4asYuUraKUY8AWzmKIrsmTs7zahc7Ys-d7qC3Id1wXsl9eNi5f1GcNlgR8/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++;
}
}
//]]>
</script>
<!--Related Posts Scripts and Styles End-->
now searce
<b:includable id='postQuickEdit' var='post'>you can find this code more time.frist for mobile template and second for pc template.
once you find it, click the just above arrow at the left side and paste the below HTML code above </b:includable> tag
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<font face='Arial' size='5'><b>You May 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=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
customization: max-results=5 here you can add as your wish number you want to show.
Hope all you relize how to add related post widget without thumbnail.Don,t forget share and comment.thank you.
nice programming
ReplyDeletethank you
Delete