Assalam,.. Sobat, masih seputar blog lagi nih. Kali ini saya akan
berbagi cara menambahkan widget Artikel terkait/Related post yang menakjubkan dan benar-benar
unik. Ini adalah sebuah widget Related Post/ artikel terkait dengan thumbnail
gelembung . Widget Related Post/Artikel terkait ini mampu menampilkan hingga 10
atau lebih thumbnail bersama dengan judul postingan dan akan bergulir ke kiri
ke kanan dan akan bergulir ke kanan ke samping kiri lagi. Dan ketika
penggunaan mouse berakhir pada gambar thumbnail maka gambar akan berhenti bergulir dan
gelembung akan muncul bersamaan dengan judul postingan. Ini benar-benar
menakjubkan ketika pengunjung blog Anda akan melihatnya. Dan
pemasangan widgetpun ini pun sangat sederhana dan simpel. Untuk
menambahkan widget ini silahkan ikuti langkah-bawah ini.
==> Langkah pertama, Log-in ke Blog sobat dan masuk ke Dashboard
==>Kedua, klik Template-> Edit HTML->
==> Ketiga, Sekarang temukan kode </head> dengan menekan Ctrl+F(Windows) atau CMD+F (Mac)
==> Ke empat, Pastekan kode di bawah ini sebelum atau tepat di atas kode </head>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {float:center;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
#related-posts h2{font-size: 1.6em;font-weight: bold;color:#000;font-family:Arial, Georgia;margin-bottom:0.75em;margin-top: 0em;padding-top: 0em;}
#related-posts a{-webkit-transition: background 1s ease, color 1s ease;-moz-transition: background 1s ease, color 1s ease;-o-transition: background 1s ease, color 1s ease;}
#related-posts a:hover{background-color:#1194F9;-webkit-transition: background 1s ease, color 1s ease;-moz-transition:background 1s ease, color 1s ease;-o-transition:background 1s ease, color 1s ease;-webkit-border-radius: 5px;-moz-border-radius:5px;border-radius:5px;-o-border-radius:5px;}
.tooltip{width: 115px; color:#000;font:lighter 12px/1.3 Arial,sans-serif;text-decoration:none;text-align:left}
.tooltip span.top{padding:20px 5px 0;background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnm17K9PM6329CqgNrfkqpj7qbmGGc7l7ct5c31fKLnXh9DbyuNrEmeqVzxejfLsypqEm5jWcOZAFhsD3QvAK5UYV3L83NXdFapTCRvoL3jwNDIyc4yAnzHyYZW2ikt017uOgTfJpCgUve/s1600/BloggerSpice+bubble.png) no-repeat top;}
.tooltip b.bottom{padding:2px 5px 6px;color:#548912;background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnm17K9PM6329CqgNrfkqpj7qbmGGc7l7ct5c31fKLnXh9DbyuNrEmeqVzxejfLsypqEm5jWcOZAFhsD3QvAK5UYV3L83NXdFapTCRvoL3jwNDIyc4yAnzHyYZW2ikt017uOgTfJpCgUve/s1600/BloggerSpice+bubble.png) no-repeat bottom;}
</style>
<script type='text/javascript'>window.onload=function(){enableTooltips("calcList")};imgBT=new Image();imgBT.src='http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhls5NliQ7HoynFEWefXGGbUxo3dscf7TEl_BgqoFS-ZywrIxnezDZmSi97CCtKoMmZ2yOYqi0qP8-u9dzzRyR_DJ4MpIgGanbtl5QQ2C4LIUiIqXOIXNKIsmqV3L4OPUGh5oMP106d_gDv/s1600/BS+No+Image+White.png';</script>
<script src='https://googledrive.com/host/0B9kc_Su2qRHNTS0xdDNRM0NVRDA' type='text/javascript'></script>
</b:if>
==> Ke lima, Sekarang tekan Ctrl+F (Windows) or CMD+F(Mac) Temukan kode ini <data:post.body/> atau <div class='post-footer-line post-footer-line-1'>
==> Ke enam, Sekarang pastekan kode di bawah ini setelah atau di bawah kode <data:post.body/> or <div class='post-footer-line
post-footer-line-1'>
<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=12"' type='text/javascript'/></b:if></b:loop>
<h3>Related Posts</h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=10;
var relatedpoststitle="";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
PENYESUAIAN
Ubah maxresults = 10; untuk membatasi jumlah postingan yang akan ditampilkan pada widget.
==> Ke tujuh, Klik tombol simpan.
Sekarang periksa posting Anda untuk melihat bergulir pasca widget terkait. Ini akan menjadi benar-benar indah dan menambahkan gerak dalam template Blogger Anda. Untuk setiap pertanyaan lebih lanjut jangan ragu untuk memberikan komentar. Semga bermanfaat" ?
Wassalam,..
Baca juga:
- 5 Aplikasi Ini Diciptakan Untuk Memudahkan Hidup Orang Indonesia
- 13 Hal-hal yang Harus Dihindari Ketika Berada di Luar Negeri
- Yes! Kesempatan terakhir untuk mendapatkan boneka Polar Bear yang cute ini.
- Lakukan ini saat bulan Ramadan, dan lihat apa yang terjadi kemudian.
- Luar biasa! Inilah 15 nasihat sederhana yang sudah mengubah hidup banyak orang.
- Siapa sangka, tantangan 15 detik ini yang bisa mendekatkan anak dan orangtuanya.
- Buka bersama, tarawih bareng, itikaf bareng. Sekarang waktunya bikin video
- Banyak orang berhasil mendapat gaji idamannya setelah mempraktekkan 7 trik ini.
- Mau THR istimewa dari Coca-Cola? Taklukkan tantangan 15 detik ini.
- 7 Alasan Utama Orang Indonesia Suka Banget Nge-Mall. Tebak #1?
EmoticonEmoticon