Kumpulan Tips & Trik Seputar Teknologi

Tuesday, 10 March 2015

Cara Membuat Related Post di Blogspot

Cara Membuat Related Post di Blogspot Rating: 4.5 out of 5 1

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.

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 == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' 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.

27 Responses to "Cara Membuat Related Post di Blogspot"

  1. nice share gan, ane coba dulu ya gan.
    jangan lupa kunjungi inma-xp.com

    ReplyDelete
  2. thanks artikelnya gan, bisa dicoba ke blog saya

    ReplyDelete
  3. Info bagus sob!.
    ijin comot!.

    ReplyDelete
  4. Replies
    1. label yang mana gan ya?, klo label nya di hapus related postnya nanti gak muncul.

      Delete
  5. selamat pagi dan salam kenal mas.
    mau tanya ni mas, kok saya coba tutornya masih belum bisa muncul ya? apakah ada kesalahan pada saya atau blog saya? terimakasih infonya.

    ReplyDelete
    Replies
    1. Salam kenal juga mas Antonius
      Pada step ketiga apa mas Antonius menemukan 2 kode, Jika iya pilih kode yang paling bawah

      Delete
  6. makasih mas tutorialnya... Saya pengen pasang di blog saya.

    ReplyDelete
  7. Gak muncul2 mas. dah dicoba beberapa kali g muncul juga

    ReplyDelete
    Replies
    1. sudah saya update silahkan agan coba lagi

      Delete
  8. Replies
    1. maksudnya nggak bisa tampil di tampilan versi Mobile ya? atur dulu template blog untuk seluler menjadi khusus trus beri cek list
      Tidak. Tampilkan template seluler di perangkat seluler.

      Delete
  9. yah , tutorialnya sudah saya ikuti namun belum muncul juga , minta solusinya lagi

    ReplyDelete
    Replies
    1. sudah saya update silahkan di coba kembali gan

      Delete
  10. sala malah dapet kesalahan xml mas kenapa ya ?

    ReplyDelete
  11. ane ko ,masih belum bisa ya gan .

    ReplyDelete
  12. artikel yang sanagat membantu
    salam kenal semuanya
    keyword blog uang

    ReplyDelete
    Replies
    1. salam kenal juga gan, terimakasih

      Delete
  13. Artikel 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....

    ReplyDelete
    Replies
    1. coba cari "post-footer-line" ada tidak gan, setiap template ada yang beda ada juga yang sama.

      Delete

Silahkan berkomentar sesuai dengan topik pada artikel di atas. Dengan ketentuan di larang Menyisipkan Link pada komentar, Berkomentar dengan berlebihan atau SPAM, Promosi dan sebagainya.

Terimakasi telah mematuhi peraturan di Blog ini. Sebagai rasa terimakasih Tentu saya akan berkunjung kembali ke blog Anda.