Sunday, 16 March 2014

Cara Membuat Widget Daftar Post Berdasarkan Label Dengan Gambar


Cara Membuat Widget Daftar Post Berdasarkan Label Dengan Gambar. Kembali lagi Blog Jona Rendra hadir memberikan informasi mengenai widget blogger lebih tepatnya widget post. Widget yang satu ini ditampilkan menurut kategori dari blog kita. Dilihat dari tampilannya, terdapat thumbnail post, judul post, deskripsi, tanggal dan jumlah komentar serta tombol read more.

Widget yang satu ini menurut saya cocok dipasang di halaman beranda blog saja, dengan di beri tag kondisional home page. Supaya membuat blog anda terkesan seperti website magazine yang memiliki banyak widget di halaman beranda, tetapi sedikit di halaman posting. Sebab, apabila dipasang pada sidebar, terlihat tidak menarik. Langsung saja saya berikan cara pemasangannya di blogger.

Cara Membuat Widget Post Label Dengan Thumbnail



Kode HTML


<style>
img.recent_thumb {padding:1px;width:60px;height:60px;float:left;margin:0 5px 5px 10px;}.recent_posts_with_thumbs {float: right;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}
</style>
<script src='https://sites.google.com/site/blogjonarendra/data/postlabel.js'/>
<script>
var numposts = 5;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = true;var numchars = 200;
</script>
<script src="http://jonarendra.blogspot.com/feeds/posts/default/-/Blogger?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs">
</script>

Kustomisasi

5 pada var numposts berarti jumlah post yang ditampilkan
showpostthumbnails = true untuk menampilkan thumbnail, false untuk tidak
200 pada var numchars merupakan jumlah karakter pada deskripsi
Ganti jonarendra.blogspot.com dengan url blog anda
Blogger merupakan contoh label blog ini, ganti dengan label blog anda

Tutorial Pemasangan

1. Masuk ke Blogger lalu Tata Letak / Layout
2. Tentukan kolom, lalu klik tambah gadget
3. Copy kode HTML dari widget ini, lalu paste ke dalam HTML/Javascript
4. Edit edit sedikit sesuai panduan kustomisasi, terakhir Simpan.

Mudah kan pemasangannya? Tampilannya yang sederhana dan simpel tidak membuat loading blog jadi berat alias ringan. Kalau ingin berkreasi lagi, silahkan tambahkan beberapa CSS buatan anda supaya lebih menarik. Sekian info dari Blog Jona Rendra yang berjudul Cara Membuat Widget Daftar Post Menurut Label Dengan Gambar, semoga bermanfaat.

KATEGORI:
arrow_back
arrow_forward

6 komentar

Thanks, Sob atas tipsnya....

gk ngeboenin ya gan klo bisa pake gambar hehe

slma ini yg saya tau hanya text yang muncul ternyata bisa to pake gambar.. mantab nih infonya mksi gan :)

ok, sama sama
makasih juga sudah berkunjung

minta ijin nyobain mas bro...

sekalian klo ada waktu mampir ke web kita ya
salam kenal......

Berkomentarlah dengan baik dan benar, dilarang SPAM!
Tata Tertib Berkomentar
EmoticonEmoticon