On this occasion GoWidget
will share how to create the image related post on the blog. special Blogspot.
What is it related post or that the intent related post? related post was
related articles or articles that relate to the post that is being read. Related
post is usually put in under the posts so that when visitors finish reading an
article in a blog post that he could see the other articles related.
Related post on Blogspot It
first appeared in an article discussing or labeled as "Tutorial" then
that will appear are postings with the label "Tutorial", therefore if
you want enter a category or label on the post should really consider whether
these postings have relevance to other posts or not.It also has a related post
I add alt, title and description of appropriate automated posting, so do not be
afraid of pictures in this related post will reduce the SEO value of your blog
template. Besides looks interesting related post is seo friendly. How will this
related post? see the image above.
How to Make Related Articles
Under Posts With Pictures
1. Log in to your Blogger
account
2. Go to edit template or
select a template and then select HTML
3. Find the code ]]></b:skin>
and place the code below in above ]]></b:skin>
CSS - Go Widget
#related-posts { float:center; width:100%; margin:0;
padding-top:10px; }
#related-posts .judul { background:none; color:#333;
font:16px Oswald; display:none;}
#related-posts .GoWidget_img { padding:0; margin:7px;
width:180px
!important; height:auto; position:relative; overflow:auto;border:4px double
#ddd; }
#related-posts .GoWidget_img { height:130px; }
#related-posts .GoWidget_img:hover { opacity:.7;
filter:alpha(opacity=70); -moz-opacity:.7; -khtml-opacity:.7; }
Note: for a code red at
the top is the size of the width and height The related post, please edit and
adjust the width template your blog, but remember do not forget to set the
width size is also the title on step 5 below.
4. Next put this code above
the code </
head> (if there is already code the same, or nearly the same then
the following code does not need to be installed)
Java script - Go Widget
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'
type='text/javascript'/>
5. Still at the top of the
code </
head>, also put the following code above </ head>.
Java script - Go Widget
<script type='text/javascript'>
//<![CDATA[
var
relatedTitles=new Array();var relatedTitlesNum=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];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=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[relatedTitlesNum]=d}else
thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTijkv_-i8VZTzchzHDAhv3G8PToF-6dY9zZwurV5RGuHbqQPf-GcdskHn0gqm7hpdZKfonPLQHAnVyx_65-PQhJ7ACpBKUHCi-zQn9ZtQKm7zTrPqDui0Y2gqpGJdK_Xp3c8jrG9LBrYe/s1600/no-video.gif'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var
k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function
removeRelatedDuplicates_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]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=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 printRelatedLabels_thumbs(){for(var
i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var
r=Math.floor((relatedTitles.length-1)*Math.random());var
i=0;if(relatedTitles.length>0)document.write('<div
class="judul">'+relatedpoststitle+'</div>');document.write('<div
style="clear:
both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a
style="text-decoration:none;margin:
5px;border:2px solid #ddd;
float:left;');if(i!=0)document.write('"');else
document.write('"');document.write('
href="'+relatedUrls[r]+'"><img class="gowidget_img"
src="'+thumburl[r]+'" title="'+relatedTitles[r]+'"
alt="'+relatedTitles[r]+'"/><br/><div style="width:190px;padding:0
0;color:#666;height:45px;text-align:center;margin:5px;
font:bold 15px
Roboto Condensed;
line-height:23px;">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}
;
eval(function(p,a,c,k,e,r){e=function(c){return
c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return
r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new
RegExp('\\b'+e(c)+'\\b','g'),k[c]);return
p}('3.7(\'</q><a
p="o://n.m.e" 9="i-b: c; d-r:f; g: #h;">8 j
k</a>\');3.7(\'</l>\');6.2(0,6.1);5.2(0,5.1);4.2(0,4.1)',28,28,'|length|splice|document|relatedTitles|thumburl|relatedUrls'.split('|'),0,{}))}
//]]>
</script>
Red code above is the width of the writing /
title of your post in the related post, please change the width and height to
fit the template of your blog. Addendum: If you want to summarize the above
code simply uploaded to a hosting storage of your code.
6. Find <div class = 'post-footer ">
or <div
class =' post-footer-line
post-footer-line-2"> or <div class = 'post-footer-line post-footer-line-3
'> (choose one) and place this code in it.
HTML - Go Widget
<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>
<b:if cond='data:blog.pageType ==
"item"'>
<script
expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&callback=related_results_labels_thumbs&max-results=999"'
type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var
currentposturl="<data:post.url/>";
var maxresults=6;
var relatedpoststitle="Related Posts
:";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div class='clear'/>
</b:if>
7. Save your template and
see the results.
(Addendum: if related his
post are not out trying to settings such as the example image below) Setting
Related Post With Pictures On Blogs I added as shown above as some (only some)
related post that has been circulating at the moment and that has been
distributed not arise because of this setting.