Cara Membuat Related Post di Blogspot - Umumnya template blogger sekarang sudah di katakan rata-rata telah memenuhi kreteria sebagai template user friendly, salah satu komponen pada template yang user friendly adalah related post, tapi berbeda dengan template standar bawaan dari blogger, template tersebut belum di sertai dengan komponen related post sehingga anda harus menambahkan sendiri konten tersebut ke dalah template html. sudah bicara panjang lebar tapi belum tahu related post itu yang seprti apa, dan apa fungsinya untuk blog kita.
Berikut penjelasan sedikit tentang related post. Related post merupakan komponen yang biasanya berada di akhir suatu kontent website atau blog yang menampilkan daftar dari artikel yang terkait dengan konten web atau blog tersebut. bagi yang belum tahu silahkan lihat gambar di bawah ini.
Related post merupakan komponen penting dalam suatu website atau blog agar terlihat lebih profesional, selain itu juga membantu pengunjung menavigasi blog anda. nah itulah sekilas deskripsi tentang related pos. langsung saja pada penerapan-nya silahkan ikuti langkah-langkah berikut.
2. Template / Edit HTML / kemudian copy dan pastekan kode CSS di bawah ini tepat diatas kode
3. Kemudian copy dan pastekan kode HTML di bawah ini tepat di bawah kode
4. Kemudian Copy dan pastekan kode di bawah ini di atasta g
Tutorial ini bekerja jika di dalam tamplate agan sudah terpasang fremwork jquery bagi yang belum silahkan copy dan paste kode di bawah ini di atas kode
Berikut penjelasan sedikit tentang related post. Related post merupakan komponen yang biasanya berada di akhir suatu kontent website atau blog yang menampilkan daftar dari artikel yang terkait dengan konten web atau blog tersebut. bagi yang belum tahu silahkan lihat gambar di bawah ini.
Related post merupakan komponen penting dalam suatu website atau blog agar terlihat lebih profesional, selain itu juga membantu pengunjung menavigasi blog anda. nah itulah sekilas deskripsi tentang related pos. langsung saja pada penerapan-nya silahkan ikuti langkah-langkah berikut.
Cara membuat related post di blogspot
1. Langkah pertama Login di akun Blogger Anda.2. Template / Edit HTML / kemudian copy dan pastekan kode CSS di bawah ini tepat diatas kode
]]></b:skin>
.terkait{margin-bottom: 25px;text-align:left;margin-top:10px;float: left;}
.terkait ul {padding-top: 10px;
margin: 0 0px;float: left;
-webkit-padding-start: 0px;}
.terkait ul li{list-style-type: none!important;
padding: 5px;
margin: 0;height: auto;
margin-bottom:5px;float: left;display: inline;
}
span.news-text {
font-size: 14px;
line-height: 0px;
color: #666;
}
.terkait ul li a{display:block}
.terkait ul li img{float: left;
width: 85px;
margin-right: 10px;
padding: 0px 0px 0px 0px;
border: 1px #F1F1F1 solid;}
.terkait ul li a.terkait_title{ display: block;
margin-bottom: 5px;
background-image: none;
text-decoration: none;
color: #111;font-weight: 500;}
3. Kemudian copy dan pastekan kode HTML di bawah ini tepat di bawah kode
<div class=’post-footer-line post-footer-line-1′>.
<div class='terkait'> <h4>Baca Juga Artikel Terkait </h4> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgcuplik&max-results=50"' type='text/javascript'/> <ul> <script type='text/javascript'>artikelterkait();</script> </ul> </b:if> </b:loop> </b:if> </div
4. Kemudian Copy dan pastekan kode di bawah ini di atasta g
</head>
/*Related Post with Thumbnail & Summary 1.0 */
var relnojudul = 0;
var numpost = 5;
var numchars = 100;
var reljudul=new Array();
var relurls=new Array();
var relcuplikan=new Array();
var relgambar=new Array();
function saringtags(g,h){var e=g.split("<");for(var f='0;f<e.length;f++){if(e[f].indexOf("'>")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g='h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content"' in g){postcontent='g.content.$t}else{if("summary"' in g){postcontent='g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail"' in g){postimg='g.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var' f='0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function' contains(a,e){for(var f='0;f<a.length;f++){if(a[f]==e){return' true}}return false}function artikelterkait(){var v='new' array(0);var w='new' array(0);var x='new' array(0);var a='new' array(0);for(var u='0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var' u='0;u<reljudul.length;u++){var' b='Math.floor((reljudul.length-1)*Math.random());var' i='reljudul[u];var' s='relurls[u];var' y='relcuplikan[u];var' c='relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var' r='0;var' d='Math.floor((reljudul.length-1)*Math.random());var' z='D;var' q;var t='document.URL;while(r<numpost){if(relurls[D]!=t){q="<li' class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'>
<div class='overlayb'></div>
<img src='"+relgambar[D]+"'/></a>";q+="<a class='terkait_title' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="
</li>
";document.write(q);r++;if(r==numpost){break}}if(D<reljudul.length-1){d++}else{d='0}if(D==z){break}}};' //]]></script>
5. Kemudian save/simpan template. selesai silahkan reload salah satu kontent anda untuk melihat hasilnya.
Tutorial ini bekerja jika di dalam tamplate agan sudah terpasang fremwork jquery bagi yang belum silahkan copy dan paste kode di bawah ini di atas kode
</head>
<script src='http://code.jquery.com/jquery-2.0.3.min.js'/>
demikianlah tutorial dari saya tentang cara membuat related post di blogspot semoga bermanfaat. jika ada pertanyaan seputar tutorial di atas silahkan tinggalkan komentar anda di bawah ini.
nice share gan, ane coba dulu ya gan.
ReplyDeletejangan lupa kunjungi inma-xp.com
Kesalahan saat mengurai XML, baris 781, kolom 32: The entity name must immediately follow the '&' in the entity reference.
Deletethanks artikelnya gan, bisa dicoba ke blog saya
ReplyDeleteSma-sama gan, sip
DeleteInfo bagus sob!.
ReplyDeleteijin comot!.
menghapus label nya gmn mas??
ReplyDeletelabel yang mana gan ya?, klo label nya di hapus related postnya nanti gak muncul.
Deleteselamat pagi dan salam kenal mas.
ReplyDeletemau tanya ni mas, kok saya coba tutornya masih belum bisa muncul ya? apakah ada kesalahan pada saya atau blog saya? terimakasih infonya.
Salam kenal juga mas Antonius
DeletePada step ketiga apa mas Antonius menemukan 2 kode, Jika iya pilih kode yang paling bawah
dicoba dulu gan mas... makasih
ReplyDeletesilahkan gan, sama-sama
Deletemakasih mas tutorialnya... Saya pengen pasang di blog saya.
ReplyDeleteyoosh sama-sama gan
DeleteGak muncul2 mas. dah dicoba beberapa kali g muncul juga
ReplyDeletesudah saya update silahkan agan coba lagi
Deletedi hp ga bisa dimasukin ya mas
ReplyDeletemaksudnya nggak bisa tampil di tampilan versi Mobile ya? atur dulu template blog untuk seluler menjadi khusus trus beri cek list
DeleteTidak. Tampilkan template seluler di perangkat seluler.
yah , tutorialnya sudah saya ikuti namun belum muncul juga , minta solusinya lagi
ReplyDeletesudah saya update silahkan di coba kembali gan
Deleteoh, iyh mmakasih mas
ReplyDeletesala malah dapet kesalahan xml mas kenapa ya ?
ReplyDeletecoba lebih sepesifik gan
Deleteane ko ,masih belum bisa ya gan .
ReplyDeletebelum bisanya gimana gan??
Deleteartikel yang sanagat membantu
ReplyDeletesalam kenal semuanya
keyword blog uang
salam kenal juga gan, terimakasih
DeleteArtikel yang saya cari ini, tapi waktu saya cari kode div class=’post-footer-line post-footer-line-1." di html kok nggak nemu ya gan....
ReplyDeletecoba cari "post-footer-line" ada tidak gan, setiap template ada yang beda ada juga yang sama.
Deleteudah saya pasang semua kodenya tapi kok gak muncul yaa...
ReplyDeleteartikel yang sangat menarik, kalau boleh tau cara ini yang agan gunakan di web ini juga kah? terima kasih dan salam kenal
ReplyDeleteSudah saya coba, kenapa tidak muncul ya gan
ReplyDeletethanks gan
ReplyDeletePoin 3 scripnya kurang tanda tutup ">" mas
ReplyDelete