Tutorial Membuat & Memasang Widget Related Post Keren (Tema Blogger Terbaru Emporio)

Related Post Widget

Hello guys..

Kali ini kita akan membahas tutorial tentang cara membuat dan memasang widget Related Post (Artikel Terkait) pada tema Blogspot terbaru. Tujuan dari pembuatan Related Post ini adalah untuk menampilkan sebuah widget yang berisi postingan-postingan yang saling terhubung satu sama lain dengan artikel yang sedang dibuka oleh pengunjung/pembaca pada blog kita.

Dengan adanya widget Related Post ini, sebenarnya kita mencoba untuk memanjakan pengunjung blog dengan menampilkan sebuah navigasi menuju artikel-artikel lainnya yang masih berada pada satu topik tertentu dari artikel yang telah mereka baca, dan diharapkan agar pengunjung mau membaca postingan lainnya yang telah ditampilkan pada widget tersebut.

Jadi sederhananya widget ini bisa dikatakan sebagai salah satu trik rayuan kepada para cewe.. eh pengunjung blog maksudnya 😅 agar mereka tertarik untuk membaca artikel-artikel lainnya dan menggali lebih dalam apa saja yang ditawarkan dalam blog kita, sehingga widget ini menjadi cukup efektif untuk menunjang page views (kunjungan halaman).

Oleh karena itulah pada umumnya widget Related Post diletakan diakhir setiap postingan pada artikel, walaupun saya juga menambahkan beberapa artikel terkait yang bercampur di tengah-tengah teks postingan dengan menulis "Baca juga" yang saya tuliskan secara manual, supaya tidak terlalu banyak Java Script yang di load dan agar akses blog menjadi agak ringan.

Setelah utak-atik beberapa kombinasi kode akhirnya bisa fix tampilan yang cocok untuk blog Labalaba Wirata ini, karena sebelumnya saya mencoba berselancar internet untuk mendapatkan beberapa widget Related Post, namun hasilnya ada yang tidak tampil, ada juga yang tampilannya berantakan, dan ternyata kebanyakan kode-kode tersebut adalah untuk tema-tema Blogspot yang menggunakan template model lawas.

Saya sendiri menggunakan tema model baru yaitu Emporio, karena tampilannya yang lebih modern dan tidak kalah menarik dengan template-template Premium.

Baiklah langsung saja kita bahas tutorialnya berikut ini:

👉 Pertama kita masuk dulu ke pengaturan blog, lalu pilih tema, lalu pilih opsi < > edit HTML

👉 Cari kode ]]></b:skin> atau </style> lalu copy kode CSS di bawah ini dan letakan di atas kode tersebut (gunakan kombinasi tombol CTRL + F untuk mempermudah pencarian).

#related_posts{margin-top:20px} #related_posts h4{color:#fff;background:#00CED1;padding:10px;margin:0 0 5px;font-size:110%;} #related_img{margin:0;padding:0;} #related_img:hover{background:0} #related_img ul{list-style-type:none;margin:0;padding:0} #related_img li{min-height:62px;border-bottom:1px solid #FFD700;list-style:none;margin:0 0 5px;padding:5px;} #related_img li a{color:#00CED1;} #related_img li a:hover{text-decoration:underline} #related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:14px;} #related_img .news-text{display:block;font-weight:normal;text-transform:none;color:#888;font-size:11px;} #related_img img{float:left;margin-right:10px;width:60px;height:60px;max-width:100%;background:#000}

Keterangan Pengeditan Kode CSS:

Kode CSS #related_posts h4{color:#fff;background:#00CED1;padding:10px;margin:0 0 5px;font-size:110%;} adalah kotak judul dari artikel terkait.

#fff adalah kode warna tulisan dari artikel terkait yang berwarna putih, dan #00CED1 adalah kode warna dari kotaknya yang berwarna biru.

Kode CSS #related_img li{min-height:62px;border-bottom:1px solid #FFD700;list-style:none;margin:0 0 5px;padding:5px;} adalah garis pembatas dari setiap judul, dan #FFD700 adalah kode warnanya yang berwarna kuning emas.

Kode CSS #related_img li a{color:#00CED1;} #related_img li a:hover{text-decoration:underline} adalah link judul dari artikel/postingan dengan kode warna biru dan hovernya atau jika disorot linknya akan muncul garis bawah, dan #related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:14px;} adalah style dari tulisan judulnya.

Kode CSS #related_img .news-text{display:block;font-weight:normal;text-transform:none;color:#888;font-size:11px;} adalah snippet/cuplikan deskripsi dari artikel/postingan, dengan #888 adalah kode warna grey/abu-abu.

Kode CSS #related_img img{float:left;margin-right:10px;width:60px;height:60px;max-width:100%;background:#000} adalah style dari gambar artikel dan kolom widgetnya, dengan #000 adalah kode warna hitam untuk backgroundnya, dan silahkan atur ukuran gambar yang saya tandai berwarna merah, dengan merubah width (lebar) dan height (tinggi) dalam satuan px

👉 Tambahkan kode CSS berikut ini dan letakan tepat dibawah kode CSS yang saya sebutkan di atas:

.gradient-icon {background: -webkit-gradient(linear, left top, left bottom, from(#1E90FF), to(#FFC0CB));-webkit-background-clip: text;-webkit-text-fill-color: transparent; display: initial;}

Keterangan:

Kode CSS di atas adalah untuk memunculkan style efek gradasi warna pada icon widget Related Post, yang merupakan icon dari kelompok font awesome dan kita bisa mengubah gradasi warnanya dengan mengubah kode yang saya tandai kuning.

Kode CSS ini optional, jadi bisa dipasang boleh juga tidak jadi tergantung selera ya guys.. 😁

👉 Letakan kode Java Script di bawah ini di atas kode </head>

<script type='text/javascript'>

/*<![CDATA[*/var relnum=0;var relmaxposts=3;var numchars=135;var morelink=" ";function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length))

;return e=e.join(""),e=e.substring(0,l-1)}function relpostimgthum(r){for(var l=0;l<r.feed.entry.length;l++)

{var e=r.feed.entry[l];reljudul[relnum]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[relnum]=saringtags(postcontent,numchars),postimg="media$thumbnail"in e?e.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzJSNZWHFw1LiD3fe5oSUpWQf98nEyu9RzkSKPL4U5IrgGxwgevuBxSWPLb-sFIw5SRQDvJm3TVN9mYMCA3wQJVKyiq9kchyspvPghP3-8M1g4t-HGG94rwiZMfR9mvtgb0rk-qzM0Hoj_/d/noimagethumb.gif"

,relgambar[relnum]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnum]=e.link[n].href;break}relnum++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function relatpost(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]

=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(var t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)

*Math.random()),u=reljudul[t],s=relurls[t],i=relcuplikan[t],o=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=s,relcuplikan[a]=i,relgambar[a]=o}for(var g,m=0,h=Math.floor((reljudul.length-1)

*Math.random()),c=h,d=document.URL;m<relmaxposts&&(relurls[h]==d||(g="<li class='news-title clearfix'>",g+="<a href='"+relurls[h]+"' rel='nofollow' target='_top' title='"+reljudul[h]+"'><img src='"+relgambar[h]+"' /></a>",g+="<a href='"+relurls[h]+"' target='_top'>"+reljudul[h]+"</a>",g+="<span class='news-text'>"+relcuplikan[h]+" ... <a href='"+relurls[h]+"' target='_top'>"+morelink+"</a><span class='news-text'>",g+="</li>",document.write(g),m++,m!=relmaxposts))&&(h<reljudul.length-1?h++:h=0,h!=c););}var reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;/*]]>*/</script>

<link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Keterangan:

Pada kode var relmaxposts=3 adalah jumlah artikel/postingan yang ingin ditampilkan, dan var numchars=135; adalah jumlah karakter snippet, jadi silahkan diganti angkanya sesuai dengan kebutuhan.

👉 Letakan kode Java Script di bawah ini tepat di bawah kode <data:post.body/> atau jika terdapat lebih dari satu kode tersebut, maka pilih yang paling akhir.

<div id='related_posts'> <h4><center><i class="fa fa-book gradient-icon" aria-hidden="true">Related Posts</i></center></h4> <b:loop values='data:post.labels' var='label'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgthum&max-results=50"' type='text/javascript'/> </b:loop> <ul id='related_img'> <script type='text/javascript'>relatpost();</script> </ul> </div>

Keterangan:

Pada judul Related Posts yang saya tandai pada kode di atas bisa kita ganti dengan judul Artikel terkait/Baca juga/Artikel menarik lainnya atau apa saja kalimat rayuan seperti saat gombalin cewe guys.. 😂

👉 Langkah terakhir adalah simpan tema (save)

💬 Catatan:

Sebelumnya kita harus membuat label pada tiap-tiap postingan terlebih dahulu agar nanti semua postingan yang berada pada tiap label tersebut dapat terkait dan bisa tampil pada widget Related Post yang akan kita pasang ini.

Jika mengalami error dan widget Related Post tidak muncul maka telitilah dan cermati kembali langkah-langkah yang kita lakukan dari awal mulai dari penulisan kode dan yang lainnya.

Contoh tampilan dari widget Related Post ini seperti gambar yang ada di atas postingan ini. Tampilannya berbentuk list disertai dengan thumbnail (gambar) dan juga snippet (cuplikan deskripsi artikel).

Mungkin cukup sekian yang dapat saya sampaikan pada Tutorial Membuat & Memasang Widget Related Post Keren (Tema Blogger Terbaru Emporio) ini, semoga dapat bermanfaat.

Jika terdapat pertanyaan dan kendala saat pemasangannya silahkan meninggalkan komentar ya guys.. Terima Kasih.

Cari Blog Ini

LABALABA WIRATA