Cara dan metode Membuat Related Post (Tulisan Terkait) dengan Gambar Thumbnail & Judul
BERIKUT ini CB share isyarat dan cara membuat Related Post, Posting Terkait, atau Artikel Terkait, berupa Gambar Thumbnail dan Judul di bawah atau di simpulan tiap posting blog.
Bahasa Inggrisnya mah Cool Related Posts with Thumbnail Image. Penampakannya menyerupai ini:
Cara dan metode membuat related post yang satu ini Cepat, cepat dan gampang \, Gak Pake Ribet! CB sudah pasangkan di salah satu blog klien CB, yaitu Sepakbola Magz. Silakan lihat demonya di salah satu posting sana.
Anda juga dapat eksklusif memakai isyarat aslinya. Sumbernya di DTE. Ada banyak pilihan di sana, mulai related post simple (judul doang) sampai plus gambar thumbnail.
Kode related post di bawah ini sudah CB edit, modif, dan dijamin berhasil dipasangkan alasannya ialah sering CB gunakan dalam desain template, termasuk sejumlah template yang ada di Galeri Template CB.
Lumayan Fast Loading, meski pake gambar, alasannya ialah isyarat javascriptnya eksklusif dipasang di template, tidak ngelink keluar.
Fungsi utama Widget Related Posts ialah mempersembahkan pilihan bagi pembaca untuk melanjutkan baca-baca posting blog kita, sehingga menaikkan Pageviews dan popularitas blog.
Fungsi lainnya ialah sebagai Navigasi Internal atau Link Internal yang dianjurkan Google, guna memudahkan pengunjung mengeksplorasi konten blog kita.
Related Post ini menampilkan posting yang ada dalam satu Tag atau Label. Jadi, pastikan posting Anda diberi label. Jika tidak ada label, maka kemungkinan muncul error. (Baca: Cara dan metode Mengatasi Error Related Post Undefined).
1. Copy + Paste isyarat berikut ini DI ATAS isyarat </head>
2. Copy & Paste Kode HTML & XML JavaScript berikut ini DI ATAS kode <div class='post-footer'> atau <div class='post-footer-line post-footer-line-2'> atau <div class='post-footer-line post-footer-line-3'> atau di mana saja asalkan di dalam isyarat <b:includable id='post' var='post'/> and <b:includable id='mobile-post' var='post'/>
3. Save Template!
Jika ingin Related Post Simple, Judulnya doang, gunakan isyarat yang ada di sini: Cara dan metode Membuat Related Post Simple.
Demikian Cara dan metode Membuat Related Post (Tulisan Terkait) dengan Gambar Thumbnail & Judul di Bawah Postingan Blog secara cepat, mudah, khusus dalam tiga langkah. Good Luck! (www.contohblog.com).*
Sumber http://www.contohblog.com/
BERIKUT ini CB share isyarat dan cara membuat Related Post, Posting Terkait, atau Artikel Terkait, berupa Gambar Thumbnail dan Judul di bawah atau di simpulan tiap posting blog.
Bahasa Inggrisnya mah Cool Related Posts with Thumbnail Image. Penampakannya menyerupai ini:
Cara dan metode membuat related post yang satu ini Cepat, cepat dan gampang \, Gak Pake Ribet! CB sudah pasangkan di salah satu blog klien CB, yaitu Sepakbola Magz. Silakan lihat demonya di salah satu posting sana.
Anda juga dapat eksklusif memakai isyarat aslinya. Sumbernya di DTE. Ada banyak pilihan di sana, mulai related post simple (judul doang) sampai plus gambar thumbnail.
Kode related post di bawah ini sudah CB edit, modif, dan dijamin berhasil dipasangkan alasannya ialah sering CB gunakan dalam desain template, termasuk sejumlah template yang ada di Galeri Template CB.
Lumayan Fast Loading, meski pake gambar, alasannya ialah isyarat javascriptnya eksklusif dipasang di template, tidak ngelink keluar.
Fungsi Related Posts
Sebelum ke action, kita bahas sebentar fungsi Related Post atau kalu dalam situs informasi istilahnya "Berita Terkait" atau "Artikel Lainnya".Fungsi utama Widget Related Posts ialah mempersembahkan pilihan bagi pembaca untuk melanjutkan baca-baca posting blog kita, sehingga menaikkan Pageviews dan popularitas blog.
Fungsi lainnya ialah sebagai Navigasi Internal atau Link Internal yang dianjurkan Google, guna memudahkan pengunjung mengeksplorasi konten blog kita.
Related Post ini menampilkan posting yang ada dalam satu Tag atau Label. Jadi, pastikan posting Anda diberi label. Jika tidak ada label, maka kemungkinan muncul error. (Baca: Cara dan metode Mengatasi Error Related Post Undefined).
Cara dan metode Membuat Related Post Gambar Thumbnail & Judul
Hapus dulu semua isyarat Related Post yang ada di template Anda. Kalo belum ada, tinggal lakukan langkah gampang berikut ini:1. Copy + Paste isyarat berikut ini DI ATAS isyarat </head>
<!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --><b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related-posts{float:left;width:auto;border-bottom:3px solid #48d;border-top:2px solid #ddd;margin-top:2px} #related-posts a{border-right:none} #related-posts a:hover{background: #f2f2f2;} #related-posts h2{margin-top: 10px;background:none;font:16px Oswald;padding:3px;color:#555; text-transform:uppercase;} #related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:128px;height:80px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;} #related-title {color:#222;text-align:left;padding:5px;font-size:13px Arial;line-height:15px;height:75px;width:128px;} #related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1vd6WUBzCth5jvi7P-pu8Nwv7PSFEZ8kp1FqX4p96Vj_g5UD1MUzsrz7Zb5S7a4FjjH0ulWjNU-kpq2pQka9m9hGf3eUkyTwHJSQ2Yj9PNKjrGzhUmWRf1PhW4FxXmlYRUnFd-GrGb_d5/s1600/no-thumbnail.png";showRandomImg=true;aBold=true;summaryPost=400;summaryTitle=30;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;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!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="related_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}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/AVvXsEg1vd6WUBzCth5jvi7P-pu8Nwv7PSFEZ8kp1FqX4p96Vj_g5UD1MUzsrz7Zb5S7a4FjjH0ulWjNU-kpq2pQka9m9hGf3eUkyTwHJSQ2Yj9PNKjrGzhUmWRf1PhW4FxXmlYRUnFd-GrGb_d5/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>55)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,55)+"...";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('<h2>'+relatedpoststitle+'</h2>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<30&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+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><!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1vd6WUBzCth5jvi7P-pu8Nwv7PSFEZ8kp1FqX4p96Vj_g5UD1MUzsrz7Zb5S7a4FjjH0ulWjNU-kpq2pQka9m9hGf3eUkyTwHJSQ2Yj9PNKjrGzhUmWRf1PhW4FxXmlYRUnFd-GrGb_d5/s1600/no-thumbnail.png";showRandomImg=true;aBold=true;summaryPost=400;summaryTitle=30;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;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!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="related_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}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/AVvXsEg1vd6WUBzCth5jvi7P-pu8Nwv7PSFEZ8kp1FqX4p96Vj_g5UD1MUzsrz7Zb5S7a4FjjH0ulWjNU-kpq2pQka9m9hGf3eUkyTwHJSQ2Yj9PNKjrGzhUmWRf1PhW4FxXmlYRUnFd-GrGb_d5/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>55)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,55)+"...";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('<h2>'+relatedpoststitle+'</h2>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<30&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+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><!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->
2. Copy & Paste Kode HTML & XML JavaScript berikut ini DI ATAS kode <div class='post-footer'> atau <div class='post-footer-line post-footer-line-2'> atau <div class='post-footer-line post-footer-line-3'> atau di mana saja asalkan di dalam isyarat <b:includable id='post' var='post'/> and <b:includable id='mobile-post' var='post'/>
<!-- Related Posts with Thumbnails Code 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> <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=4"' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=4; var relatedpoststitle="<b>Related Posts:</b>"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div class='clear'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://contohblognih.blogspot.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe0BApVOYTtMS7R-EuUFkVMOyzKuMclI7f9k0Hjb3QYHLkrVqhUu7s0SSjR8D6GyYN7pRjyPC-bnA-vFSOpqgAnZVyWhEhlwVxV6yOxP8hq_0AdN1HbgfoPUoXt_G_hb-a9G7yomQN3ef1/s1600/best+blogger+tips.png'/></a> </b:if> </b:if> <!-- Related Posts with Thumbnails Code End-->
3. Save Template!
Jika ingin Related Post Simple, Judulnya doang, gunakan isyarat yang ada di sini: Cara dan metode Membuat Related Post Simple.
Demikian Cara dan metode Membuat Related Post (Tulisan Terkait) dengan Gambar Thumbnail & Judul di Bawah Postingan Blog secara cepat, mudah, khusus dalam tiga langkah. Good Luck! (www.contohblog.com).*
Membuat Related Post (Tulisan Terkait) Dengan Gambar Thumbnail & Judul
4/
5
Oleh
Unknown
