The related post widget helps, you display your old blog post just under the footer of any of your new blog post, helping Reader read your old and important articles with was.
Don't want to right a book down here, let's get to Bussiness.
Read the instructions below to begin.
Login to your blogger account>> click on Template>>Edit Html.
Using your key board press ctrl+f to search for the </head> tag, copy and past the code below above it.
<!-- Related Posts widget with Thumbnails Code Before Head Start--> <b:if cond='data:blog.pageType =="item"'> <script type='text/javascript'> //<![CDATA[ var borelatedTitles=new Array();varrboTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];borelatedTitles[rboTitlesNum]=entry.title.$t;try{thumburl[rboTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[rboTitlesNum]=d}else thumburl[rboTitlesNum]='thumburl[rboTitlesNum]='http://ift.tt/2foojrg'}if(borelatedTitles[rboTitlesNum].length>35)borelatedTitles[rboTitlesNum]=borelatedTitles[rboTitlesNum].substring(0,45)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[rboTitlesNum]=entry.link[k].href;rboTitlesNum++}}}}function removeDuplicate_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=borelatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}borelatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabel_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==findcurrentposturl)||(!(borelatedTitles[i]))){relatedUrls.splice(i,1);borelatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((borelatedTitles.length-1)*Math.random());var i=0;if(borelatedTitles.length>0)document.write('<h4><span>'+titleofrelatedpost+'</span></h4>');document.write('<sl class="related-posts-list">');while(i<borelatedTitles.length&&i<20&&i<maxpost){document.write('<ci><a href="'+relatedUrls[r]+'"><span class="rthumb"><img class="related_img" src="'+thumburl[r]+'"/></span><p><span class="related-title">'+borelatedTitles[r]+'</span></p></a></ci>');if(r<borelatedTitles.length-1){r++}else{r=0}i++}document.write('</sl>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);borelatedTitles.splice(0,borelatedTitles.length)}//]]></script> </b:if> <!-- Related Posts widget with Thumbnails Code Before Head Ends-->
Now search for <div class='post-footer'>, copy the code below and paste it right above this line.
<!-- Related Posts widget with Thumbnails Code Before Post Footer Start--> <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=7"' type='text/javascript'/> </b:loop> <script type='text/javascript'> var findcurrentposturl="<data:http://ift.tt/2fc04cM var maxpost=6; var titleofrelatedpost="<b>Related Posts</b>"; removeDuplicate_thumbs(); printRelatedLabel_thumbs(); </script> </div> </b:if> <!-- Related Posts widget with Thumbnails Code Before Post Footer Ends-->
How to customize the above code.
Use any text to replace the highlited Related posts text.
Change the highlited number 6, to the number of Post you want it to appear on the widget.
Adding the css part of the code
Search for <b:skin>…. </b:skin> and click on the right pointing arrow to expand, scroll down to locate ]]></b:skin>, paste the below code before or above this code. Hen click on the save button.
/* CSS For related post widget ----------------------------------------------- */#related-posts {float:left;width:101%;}#related-posts sl{margin:0!important;padding:0!important;} #related-posts h4{text-align:center;margin:10px 0px 20px;font:18px Oswald;color:#696868;text-transform:uppercase} .related-posts-list ci{background-color:#fff;box-shadow:0 0 4px rgba(180, 180, 180, 0.55);width:27%;float:left;position:relative;margin:0 3% 3% 0;padding:2%;} .related-posts-list ci:nth-child(3n){margin-right:0 !important;} #related-posts a{color:#696868;font:400 12px 'Oswald',sans-serif;text-decoration:none;} #related-posts sl ci p{margin-bottom:0;padding-top:1px;}#related-posts.related_img{height:64px;margin-bottom:0;width:64px;object-fit:cover;} .related-title{text-align:center;padding:5px 0px;}.rthumb{float:left;margin-right:10px;}
Nice!!, you have added the related post widget to your blog.
Tags: CH
October 30, 2016 at 10:51PM
Open in Evernote
Posts
0 comments:
Post a Comment