Related posts widget with photo thumbnails

Beberapa hari yang lalu saya menemukan sebuah situs yang menawarkan sebuah Widget "Related posts widget with photo thumbnails" yang apabila kita menginstallnya, widget tersebut akan muncul persis diakhir artikel yang kita posting.

Widget "Related posts widget with photo thumbnails" saya dapatkan di situs Linkwithin.com. Witget ini gratis, tanpa register dan sangat mudah diinstall pada blog kita. Widget "Related posts widget with photo thumbnails" sangat unik, sesuai dengan judulnya maka Widget "Related posts widget with photo thumbnails" akan muncul dalam bentuk tampilan gambar, dimana terdapat judul artikel pada setiap gambar yang ada.

Jika Anda tertarik, Anda hanya diminta untuk mengisi alamat email, link blog, Platform, kemudian centang kotak di depan "My blog has light text on a dark background" (Jika blog Anda dengan latar belakang gelap), kemudian klik "Get Widget"



Kemudian anda akan dibawa pada halaman "Install Widget on Blogger"

1. Klik INSTALL Widget Blogger untuk membuka jendela baru, dan ikuti langkah 2 dan 3. Silahkan login jika diperlukan.

2. Pilih sebuah blog jika anda memiliki lebih dari satu, kemudian klik Add Widget.




3. Klik Simpan. Dan selesai! Widget seharusnya sekarang muncul di blog Anda, yang terletak di bagian akhir artikel yang telah ditulis.

Nah, memang mudah bukan ? Mudah bagi yang mereka menggunakan template sederhana, tidak berbentuk Magazine dan tidak memasang "READMORE". Karena, tampilan widget "Related posts widget with photo thumbnails". tidak memakan ruang muat daripada Main-Wrapper dari blog tersebut. Tapi bagi mereka yang menggunakan template berbentuk Magazine dan memasang Readmore, ini justru kendala karena wajah halaman utama dari blog anda akan nampak lucu dan berantakan.

Tapi anda tidak perlu kuatir, saya telah mencoba merubah susunan kode dari script widget "Related posts widget with photo thumbnails" ini untuk mereka yang menggunakan template Magazine. (Hal ini sebenarnya saya mencari solusi untuk blog saya sendiri mengingat blog yang telah saya buat menggunakan tipe model ini ).

Oke, setelah anda menginstall widget "Related posts widget with photo thumbnails", maka langkah yang anda kerjakan adalah sebagai berikut :

Setelah melaksanakan langkah yang ketiga, maka langsung ke Layout | Elemen Halaman, kemudian klik Edit gadget "LinkWithin ."



Skrip kode yang muncul adalah sebagai berikut:

<script>
var linkwithin_site_id = xxxxx;
(function () {
var elem = document.createElement('script');
elem.type = 'text/javascript';
elem.src = 'http://www.linkwithin.com/widget.js?rand=' + Math.random();
document.getElementsByTagName('head')[0].appendChild(elem);
})();
</script>
<a href="http://www.linkwithin.com/"><img alt="Blog Widget by LinkWithin" style="border: 0" src="http://www.linkwithin.com/pixel.png"/></a>

( kode xxxxx pada Var linkwithin_site_id =..... adalah Id anda )

Silahkan Copas dalam Notepad, setelah itu Anda klik Edit HTML, kemudian centang "Expand Template Widget".

Dengan menggunakan kontrol F silahkan cari kode:

<b:widget id='HTML5' locked='false' title='LinkWithin' type='HTML'>
<b:includable id='main'> <data:content/> </ b: includable>
</ b: widget>

Kemudian salin kode script di Notepad. Setelah menyalin dua skrip di atas, silakan menghapus kode keduanya, Konfirmasi dan simpan .

Dari dua skrip yang Anda salin di Notepad tadi, anda dapat memodifikasinya menjadi satu script yang nantinya akan kita tambahkan. Kode tersebut adalah :

<b:if cond='data:blog.pageType == "item"'>
<div class='widget-content'>
<div expr:id='&quot;main&quot; + data:content.id'><data:content/></div>
<script type='text/javascript'>
var linkwithin_site_id = 19881;
(function () {
var elem = document.createElement('script');
elem.type = 'text/javascript';
elem.src = 'http://www.linkwithin.com/widget.js?rand=' + Math.random();
document.getElementsByTagName('head')[0].appendChild(elem);
})();
</script>
<a href="http://www.linkwithin.com/"><img alt="Blog Widget by LinkWithin" style="border: 0" src="http://www.linkwithin.com/pixel.png"/></a>
</div>
</b:if>

Setelah itu, Anda klik Edit HTML, kemudian centang "Expand Template Widget".
Menggunakan kontrol F untuk mencari kode:

<div style='clear: both;'/> <!-- clear for photos floats -->

Kemudian tambahkan kode script yang telah dimodifikasi, sebelum kode di atas.

Sukses dech, dan hasilnya widget "Related posts widget with photo thumbnails" tidak muncul di halaman utama dari blog anda namun widget "Related posts widget with photo thumbnails" akan muncul di sub halaman, disaat READMORE telah ditekan oleh anda atau pengunjung blog anda.

Saya masih mencoba untuk mencari solusi, bagaimana agar widget "Related posts widget with photo thumbnails" tersebut tidak hanya muncul dalam jumlah 3 artikel. Tapi nampaknya butuh sharing dengan pengunjung setia blog jadulku.

Oh ya, perlu anda ketahui. Terkadang widget "Related posts widget with photo thumbnails" hanya muncul berupa link dari judul artikel saja, seperti di blog "AYOMAOS" yang merupakan blog baruku dengan domain sendiri . Terkadang muncul lengkap dengan gambar seperti di Sketch Ideas.

Nah, silahkan anda coba trik saya ini, semoga sukses. Saya suka SHARING, jika anda masih bingung silahkan tinggalkan pesan dikotak komentar.