Cara Membuat Widget Related Post dengan Mudah dan Simpel

UTARAPOST.ID - Widget related post merupakan sebuah widget yang bisa kamu gunakan dalam sebuah website baik blogger maupun wordpress tergantung tema yang digunakan.

Widget Related Post ini biasanya muncul dibawah atau di akhir artikel kalian, yang memiliki kegunaan yaitu jika orang sudah selesai membaca artikel yang kalian bagikan maka mereka bisa memilih artikel yang lainnya lagi karena mereka melihat widget related post ini.

Namun cara ini di khususkan hanya untuk platform Blogger saja ya sobat, kalo untuk platform Wordpress ini gak bakalan berhasil.

Apa Sih Widget Related Post ?

Widget Related Post merupakan sebuah JavaScript tambahan yang bisa membantu anda agar visitor anda betah berlama-lama di blog atau situs anda.

Dengan menggunakan javascript ini kemungkinan besar visitor anda akan selalu mencari apa yang mereka inginkan di blog anda, oleh karena itulah usahakan blog anda memiliki banyak konten.

Nah mungkin kurang lebihnya seperti itu, sekarang kita akan lanjutkan tutorial cara membuat widget related post, untuk tutorial selengkapnya sobat boleh simak langkah-langkahnya dibawah ini.

Cara Membuat Related Post di Blogspot

• Langkah pertama kalian bisa login terlebih dahulu menggunakan akun blogger kalian.
• Jika kalian sudah masuk dan sudah didalam dashboard blogger kalian, sekarang kalian cari menu “Tema”
• Setelah Tema di temukan sekarang kalian langsung saja klik “Edit HTML”
• Setelah itu kalian silahkan cari kode </head> di template kalian masing-masing lalu kalian tambahan kode di bawah ini tepat di atas kode head tadi.

<gaya>

/* Posting Terkait Blog Acids*/ #related-post {display:block; margin:20px 0px; tinggi garis: 1.5em;}

#related-post h4{ ukuran font:17px; font-berat: 600; perataan teks:pusat; transformasi teks:huruf besar; tinggi garis:awal; } #related-post h4 span{ background-color:#fff; bantalan:0px 15px; posisi: relatif; indeks-z:1; } #related-post h4:sebelum{ konten: ‘’; tampilan: blok; posisi: relatif; atas:15px; lebar: 100%; border-top: 2px solid #068488; }

#related-summary .news-text {display:none;}

Ul#related-summary{margin:20px 0px 0px; bantalan: 0 piksel; tampilan: fleksibel; tampilan:-webkit-flex; bungkus fleksibel: bungkus; -webkit-flex-wrap:bungkus; -ms-flex-wrap:bungkus;}

Ul#ringkasan-terkait li{gaya-daftar:tidak ada; lebar:calc((100% / 3) – 15px); perataan teks:kiri; margin-kanan:20px; margin-bawah:20px; bantalan: 0 piksel; -webkit-margin-start:0px !important;}

Ul#ringkasan-terkait li img{ overflow:hidden; tinggi garis:0px; batas-radius:4px; }

Ul#ringkasan-terkait li:nth-of-type(3n){ margin-kanan:0px; } ul#related-summary li a{ display:block; }

Ul#ringkasan-terkait li img{lebar:100%; tinggi: 117 piksel; transisi: semua .3s mudah; batas: 0 piksel; margin:0px;}

Ul#related-summary li:hover img {transform:scale(1.1); filter: kecerahan (75%); -webkit-filter: kecerahan (75%);}

Ul#related-summary li a.relinkjdulx{background-image:none;color:#000;display:block;font-size:13px;font-weight:600;line-height:normal;overflow:hidden;padding:0 ;text-align:left;text-transform:none;margin-top:7px}

Ul#related-summary li a.relinkjdulx:hover{color:#066;}

@media saja layar dan (max-width:480px){

Ul#ringkasan-terkait li{ lebar: calc((100% / 2) – 7.5px); margin-kanan:15px; margin-bawah:15px; }

Ul#related-summary di img{ height:85px;}

Ul#related-summary li:nth-of-type(3n){ margin-kanan:15px; } ul#related-summary li:nth-of-type(2n){ margin-right:0px; }}

</ gaya>

<script type=’text/javascript’>

//<![CDATA[

//Pos Terkait

Var relnojudul = 0;

Var relmaxtampil = 6;

Var angka = 120;

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}fungsi 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” di g){postcontent=g.content.$t}else{if(“summary” di g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent ,numchars);if(“media$thumbnail” dalam g){postimg=g.media$thumbnail.url}else{postimg=https://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU /s1600/abu-abu.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++}}fungsi berisi(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true }}return false}fungsi 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;sementara(r<relmaxtampil){if(relurls [D]!=t){q=”<li class=’news-title clearfix’>”;q+=”<a href=’”+relurls[D]+”’ rel=’nofollow’ target=’_top ‘ title=’”+reljudul[D]+”’><img src=’”+relgambar[D]+”’ /></a>”;q+=”<a class=’relinkjdulx’ href=’” +relurls[D]+”’ target=’_top’>”+reljudul[D]+”</a>”;q+=”<span class=’news-text’>”+relcuplikan[D]+”< /span>”;q+=”</li>”;document.write(q);r++;if(r==relmaxtampil){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};

//]]>

</skrip>

• Kalo kalian mau menampilkan widget ini di bawah postingan, kalian bisa cari kode <data:post.body/> dan tempelkan kode ini tepat dibawahnya.

<!—Posting Terkait Blog Acidsà

<b:if cond=’data:blog.pageType == “item”’>

<div id=’related-post’>

<div class=’relhead’>

  <h4><span>Pos Terkait</span></h4>

<div class=’clear’/>

          <b:loop values=’data:post.labels’ var=’label’>

               <script expr:src=’”/feeds/posts/default/-/” + data:label.name + “?alt=json-in-script&amp;callback=relpostimgcuplik&max-results=50”’ type=’text/javascript’/>

          </b:loop>

          <ul id=’related-summary’>

               <script type=’text/javascript’>artikelterkait();</script>

          </ul>

     </div>

</div>

<div class=’clear’/>

</b:jika>

<!—Posting Terkait Selesai>

• Dan Selesai, lalu Klik Simpan.

Nah mungkin demikian saja informasi yang dapat utarapost sampaikan seputar Tips Memilih Layanan Hosting, semoga artikel ini bisa membantu dan bermanfaat untuk kita semua yang membacanya.

Masih ada banyak lagi artikel lainnya yang belum saya sampaikan semoga di kesempatan selanjutnya saya dapat membagikannya pada kalian semua agar kita semua mendapatkan pelajaran yang memang sangat dibutuhkan, Sekian dan Terima kasih.

“Baca Artikel Lainnya di Google News”