Cara membuat realated tumbnail keren di blog Cara membuat realated tumbnail keren di blog - Berguru IT - Tutorial Visual Basic, Networking, Tips dan Trik
VB.Net

VB.Net Tutorial Untuk pemula

Instant Article

Cara Membuat Instant Article Untuk Blogger

logo

Cara membuat realated tumbnail keren di blog

Cara Membuat Related Tumbnails keren di blog

Related Posts with tumbnails. Mohon kiranya fokus sebentar untuk membaca artikel ini, dalam artikel kali ini saya ingin membagi pengalaman utak atik tampilan blog. Kebetulan saya baru saja merubah tampilan related posts saya, sebelumnya mari kita pahami dulu apa sih Related Posts ?

Cara membuat related post keren di blog

Related posts atau artikel terkait adalah artikel atau bacaan yang berhubungan dengan artikel yang sedang dibaca, related posts ini biasanya ditaruh di bawah postingan agar nantinya bila pengunjung membaca dapat dengan mudah membaca artikel atau melihat artikel yang lainnya dan tentu saja berkaitan dengan bacaan awalnya.



Kalau di blogspot mungkin kita pernah membuat tutorial atau tips n trik apa lah gitu, dan postingan itu diberi label contoh "tutorial" atau tips n trik" maka apabila pengunjung membuka label tersebut maka akan menemukan postingan-postingan yang berkaitan dengan "tutorial". Oleh sebab itu jika sobat mau membuat artikel tolong dipikirkan akan dikaitkan dengan postingan mana dan dikategori apa. Hal ini sangat diperlukan agar betul-betul si pengunjung mengetahui relevansi dari postingan tersebut (dalam arti si pengujung tuh paham banget isi dari blog kite).

Related posts yang akan saya bagikan ini tidak akan mengurangi SEO Friendly sobat malahan malah makin keyen dah (biasa aja sih.. heheheh alay). Inget ya related post ini bukan untuk gaya-gayaan tapi murni untuk relevansi postingan yang terkait ada atau tidak.

1. Tolong buka pintu sobat,,, ehhh maaf buka blog ente  dan login.
2. Masuk ke template lalu pilih edit html
3. Cari kode </head> (catatan kode </head> harus ketemu)
4. Taruh kode dibawah ini di atas </head>


<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>

#related-posts {
float:left;
width:100%;
border-top:3px solid #ddd;
margin:5px 0
}

#related-posts .judul{
background:none;
color:#333;
font:16px Oswald;
padding:5px 0
}

#related-posts .image {
padding:0 0;width:140px;
height:95px;
transition:all 400ms ease-in-out;
-webkit-transition:all 400ms ease-in-out;
-moz-transition:all 400ms ease-in-out;
-o-transition:all 400ms ease-in-out;
-ms-transition:all 400ms ease-in-out
}

#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}


</style>
<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://3.bp.blogspot.com/-RSN9Q_i4W6Y/WI2jLTtD52I/AAAAAAAABCs/okbhHW5aQiM4-ZlHTDhZa7rE4iyVB4XSQCEw/s1600/Empty%2BFolder%2525%2524%252555.png'}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:0 12px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="image" src="'+thumburl[r]+'"/><br/><div style="width:140px;padding:0 0;color:#666;height:35px;text-align:center;margin:0px 0px; font:bold 11px Arial; line-height:14px;">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}//]]>
</script>
</b:if>
<!-- Related Posts with Thumbnails Code End-->


Jika sudah maka lanjut ke berikutnya
5. cari kode <div class='post-footer'> lalu copy kode dibawah ini diatas kode <div class='post-footer'>

<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=8"" type="text/javascript">
</b:if>
</b:loop>
<script type='text/javascript'>
var currentposturl="<data:post .url="">";
var maxresults=4;
var relatedpoststitle="Related Posts :";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</b:if></b:loop></div>
<div class="clear">
</div>


7. Kalau sudah save atau simpan ya dan lihat hasilnya
Tags

0 Komentar untuk "Cara membuat realated tumbnail keren di blog"