Blog CARA GAMPANG kali ini akan berbagi tips-trik tentang membuat Recent Post Per Label (with thumbnail). Jika kita mempunyai sebuah blog, membuat recent post per label (with thumbnail) ini tentu akan memberikan kesan lebih professional pada blog kita bilamana memiliki banyak menu yang tertata rapi. Widget ini akan secara otomatis
menampilkan update posting kita hanya pada label/kategori yang tentunya
bisa anda pilih sendiri label mana yang akan ditampilkan.
Dengan menyajikan lebih banyak menu dan pilihan menu bisa jadi pembaca akan banyak mengklik postingan-postingan terbaru yang tertata rapi sesuai dengan labelnya. Nah bagi anda yang tertarik untuk mempraktekkannya, silahkan ikuti langkah berikut ini.
Dengan menyajikan lebih banyak menu dan pilihan menu bisa jadi pembaca akan banyak mengklik postingan-postingan terbaru yang tertata rapi sesuai dengan labelnya. Nah bagi anda yang tertarik untuk mempraktekkannya, silahkan ikuti langkah berikut ini.
Cara Membuat Recent Post Per Label With Thumbnail
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Masukkan kode css berikut di atas kode ]]></b:skin>
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Masukkan kode css berikut di atas kode ]]></b:skin>
img.label_thumb{float:left; padding:5px; border:1px solid #8f8f8f; background:#D2D0D0; margin-right:10px; height:55px; width:55px}5. Lalu cari kode </head> dan letakkan kode di bawah ini tepat di atas
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left; width:100%; min-height:70px; margin:0px 10px 2px 0px; adding:0}
ul.label_with_thumbs li{padding:8px 0; min-height:65px; margin-bottom:10px}
.label_with_thumbs a{}
.label_with_thumbs strong{}
<script src='http://adablogku.googlecode.com/files/lebelgambar.js' type='text/javascript'/>6. Simpan Template jika sudah selesai.
Langkah-langkah di atas adalah untuk mengkostumisasi template, dan jika sudah selesai kita akan menuju ke langkah berikutnya untuk menambahkan recent post per label, yaitu:
7. Pilih Tata Letak lalu Tambah Gadget >> HTML/Javascript
8. Kemudian masukan kode berikut ini:
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>9. Kita dapat menkostumisasi tampilan dengan mengubah kode yang berwarna merah. Dan ganti teks NAMALABEL dengan nama label yang akan ditampilkan.
<script type="text/javascript" src="/feeds/posts/default/-/NAMALABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
10. Simpan jika sudah selesai.
Bilamana anda ingin menambahkan kotak pembatas berikut semacam text area (seperti gambar di bawah ini), maka anda tinggal mengganti script pada nomor 8 dengan script di bawah ini :
Maka, hasilnya akan menjadi seperti di bawah ini :
Demikianlah uraian tentang CARA GAMPANG membuat recent post per label, semoga bermanfaat.
<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px;
width:285px; height:200px; background-color: transparant;
border: 3px inset rgb(8, 8, 8);
box-shadow: 0 0 10px black;">
width:285px; height:200px; background-color: transparant;
border: 3px inset rgb(8, 8, 8);
box-shadow: 0 0 10px black;">
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script></div>
<script type="text/javascript" src="/feeds/posts/default/-/NAMALABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
Maka, hasilnya akan menjadi seperti di bawah ini :
Demikianlah uraian tentang CARA GAMPANG membuat recent post per label, semoga bermanfaat.
kalo buat link aja gimana gan?
BalasHapus@kaos couple : Anda buat aja daftar isi sesuai dengan tag atau label postingan yang ada dalam blog anda. Thanks for coming.
BalasHapus