Cara Membuat Related Posts With Thumbnails Dengan LinkWithin – Kali ini saya akan memberikan sebuah tutorial yaitu membuat Related post With Thumbnails seperi yang ada pada widget Kang Ismet.
namun dalam Tutorial yang akan saya berikan di sini menggunakan pihak ke tiga yaitu LinkWithin, cara nya simple dan sangat mudah untuk di terapkan dalam Blogger dan tidak ribet bagi pemula.
Nanti kalau ada waktu saya coba membuat tutorial yang menggunakan Coding sendiri atau kita bisa menunggu Kang Ismet bikin artikel terkait tersebut 😀
Cara Membuat Related Posts With Thumbnails Dengan LinkWithin
Penjelesan singkat sudah sampai situ saja, sekarang kita menuju ke tahap tutorial nya 🙂
– Langkah awal silahkan kunjungi situs ini : http://www.linkwithin.com/learn
– Langkah kedua silahkan isi Form sesuai informasi kamu. lalu klik Get it Widget. Ikuti instruksi yang tertera seperti pada gambar 🙂 kemudian klik Instal Widget
– Langkah Ketiga adalah Membuat Widget pada Blog kita. Pilih Blog yang ingin di tambahkan widget Related Posts With Thumbnails yang kita buat tadi. kemudian Edit script jika di butuhkan 🙂 Jika tidak silahkan klik Menambahkan widget .
Menghapus Logo LinkWithin
#linkwithin_logolink_0 {
display: none;
}Pure CSS LinkWithin
Untuk mengedit CSS / Tampilan LinkWithin bisa kamu ganti kode berikut dan tambahkan di atas ]]></b:skin>
/* atur sesuai kebutuhan saja */
.linkwithin_img_0 {
/* untuk CSS Gambar */
margin: 0;
border: 1px solid rgb(85, 85, 85);
padding: 2px;
width: auto;
height: auto;
}
#linkwithin_link_last {
display: block;
float: left;
border-left-width: 1px;
border-left-style: solid;
border-left-color: rgb(85, 85, 85);
border-bottom-style: none;
margin: 0px;
padding: 6px;
text-decoration: none;
text-align: left;
cursor: pointer;
}
#linkwithin_posts_0 {
margin: 0;
border: 0;
padding: 0;
}
#linkwithin_text_0 {
margin: 0;
border: 0;
padding: 16px 0 5px;
text-align: left;
font-weight: bold;
}
.linkwithin_title.linkwithin_title_0 {
margin: 3px 0px 0px;
border: 0px;
padding: 0px;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 12px;
line-height: normal;
font-family: arial;
color: rgb(85, 85, 85);
}
#linkwithin_inner {
margin: 0;
border: 0;
padding: 0;
width: 596px;
}Kustomisasi Tampilan Related Posts With Thumbnails Hanya Pada Artikel Saja
– Kamu cari Kode HTML ini terlebih dahulu
<b:widget id='HTML1' locked='false' title='LinkWithin' type='HTML'>
<b:includable id='main'><data:content/></b:includable>
</b:widget>– setelah itu silahkan silahkan tambahkan kode ini di antara kode <data:content/> 🙂
<b:if cond='data:blog.pageType == "item"'> ... </b:if>
– Sehingga Kode nya menjadi seperti ini
<b:widget id='HTML1' locked='false' title='LinkWithin' type='HTML'>
<b:includable id='main'><b:if cond='data:blog.pageType == "item"'><data:content/></b:if></b:includable>
</b:widget>Sekian dulu yah artikel dari saya 🙂 semoga bermanfaat 😀 jika masih bingung kamu bisa bertanya lewat komentar 🙂
