Membuat Recent Post Per Label
Layaknya sebuah blog yang ingin terlihat profesional, harus juga menampilkan yang sederhana tetapi bisa memudahkan penelusuran. Menu navigasi yang mudah bisa membuat pembaca blog merasa nyaman. Untuk itu blog juga menampilkan recent post atau link tulisan-tulisan terbaru kita di blog.
Blog yang bagus adalah tulisan atau postingan dikategorikan dengan rapi. Jika di blogspot kita menggunakan fitur label untuk mengaktegorikan jenis tulisan yang memiliki kesamaan. Misalnya saja kalau di blog ini ada, tutorial blog, tips ngeblog, widget dan sebagainya.
Untuk menyajikan lebih banyak menu dan pilihan, kita bisa membuat atau memasang widget recent post yang di tampilkan berdasarkan kategori atau recent post per label. Dengan pilihan menu bisa jadi pembaca akan banyak mengklik postingan-postingan terbaru yang tertata rapi sesuai dengan labelnya.
Cara Membuat Recent Post Per Label
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>
5. Lalu cari kode </head> dan letakkan kode di bawah ini tepat di atas:
6. Simpan Template jika sudah selesai.
Langkah-langkah di atas adalah untuk mengkostumisasi template. Jika sudah selesai kita ke langkah berikutnya untuk menambahkan recent post per label, yaitu:
7. Pilih Tata Letak lalu tambahkan Tambah Gadget > HTML/Javascript
8. Kemudian masukan kode berikut ini:
9. Kita dapat menkostumisasi tampilan dengan mengubah kode yang berwarna merah. Dan ganti teks yang berwarna hijau dengan nama lebel yang akan ditampilkan. Simpan jika sudah selesai.
Blog yang bagus adalah tulisan atau postingan dikategorikan dengan rapi. Jika di blogspot kita menggunakan fitur label untuk mengaktegorikan jenis tulisan yang memiliki kesamaan. Misalnya saja kalau di blog ini ada, tutorial blog, tips ngeblog, widget dan sebagainya.
Untuk menyajikan lebih banyak menu dan pilihan, kita bisa membuat atau memasang widget recent post yang di tampilkan berdasarkan kategori atau recent post per label. Dengan pilihan menu bisa jadi pembaca akan banyak mengklik postingan-postingan terbaru yang tertata rapi sesuai dengan labelnya.
Cara Membuat Recent Post Per Label
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}
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{}
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{}
5. Lalu cari kode </head> dan letakkan kode di bawah ini tepat di atas:
<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. Jika sudah selesai kita ke langkah berikutnya untuk menambahkan recent post per label, yaitu:
7. Pilih Tata Letak lalu tambahkan 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>
<script type="text/javascript" src="/feeds/posts/default/-/NAMALABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
<script type="text/javascript" src="/feeds/posts/default/-/NAMALABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
9. Kita dapat menkostumisasi tampilan dengan mengubah kode yang berwarna merah. Dan ganti teks yang berwarna hijau dengan nama lebel yang akan ditampilkan. Simpan jika sudah selesai.
langsung d'coba kak..
BalasHapusThankz atas trik'y.. Hehehe
Mantep dah ^_^)/
tank infonya sobat.. Izin nyedot
BalasHapusudah pernah pake kode ini dari blognya kang rohman
BalasHapuskemarin ane baru saja belajar ngeblok
BalasHapusrecent post untuk blogspot,klo tips blogspot untuk membagi header jadi 2 gimana?
BalasHapusbagaimana mengatur agar recent commentnya datar, soalnya tampilannya semakin ke samping . . ..
BalasHapusTerima kasih tipsnya, akan saya coba ..
BalasHapusDi cobba ,,,, deh,,,,,
BalasHapuskalo seperti diatas gmana sob.?
BalasHapuspengen juga nich coba di blog ane yang versi blogspot
BalasHapusane praktekin dulu gan.. makasih buat trik nya.. :)
BalasHapuswah, keren gan, dicoba dulu ah :D
BalasHapusmantap gan. test dulu. kalo gak mau tampilkan gambar tinggal ganti false aja kan di showpostthumbnails =false
BalasHapusbetul gan?
manteb gan artikelnya..misal posting lebih dari satu terus yang satu ada gambarnya dan yang ke dua cuma judul tanpa gambar gimana gan?
BalasHapus:)] 02519263442
BalasHapusnice info sob
BalasHapusmantaps!! main sini gan
BalasHapusOk, langsung dicoba
BalasHapusTanya sedikit ya mas?
BalasHapusHasil dari tutor diatas itu model recent post yang bergerak dari atas kebawah bukan, mas?
Kalau seandainya bukan, kira-kira tambah apa lagi ya supaya bisa bergerak?
Terima kasih sebelumnya...salam kenal :)
thanks gan, akan saya cobain deh recent postnya
BalasHapusMaturnuwun Infonya Monggo mampir di Blog saya
BalasHapusMakasih sharingnya, mas.
BalasHapusMoga cocok dengan blog saya :)
Salam publisher. Hari ini saya sumbang satu klik untuk adsense anda, gantian dong klik adsense saya di www.newsoftpedia.com
BalasHapusAyo para netter indonesia saling klik adsense biar publisher Indonesia jadi kaya semua.
trimsss..
sip gan.
BalasHapuskalo mau buat tampilan terbaru, komentar, dan random itu yang disidebar gimana cara buatnya. KW nya juga ndak tau :D
Berguna bngt tutorialnya sob! Thanks ya.. :)
BalasHapusInfo yang baguz sekali untuk disimak.....
BalasHapusBermanfaat sekali untuk saya....
Mohon kunjungan baliknya yaa....
Dan saya juga sangat berterima kasih sekali kalau anda berkenan FOLLOW dan Backlink Blog sederhana saya.... :-)
Title: Zamrud News
( www.zamrudnews.com )
terima kasih sudah berbagi gan..salam..
BalasHapusgak world blog gw aduh gimana ni ?
BalasHapuslangsung dicona Nice infonya.
BalasHapuskunjungan balik blog saya juga gan.
terima kasih tuutorialnya kang kurnia :-)
BalasHapuskunjungi juga blog saya
www.umatmuhammad.com
www.fadilsoft.com
terima kasih, kunjungi juga www.umatmuhammad.com dan kolomfadil.blogspot.com :-)
BalasHapustrims infonya
BalasHapustrims infonya
BalasHapustrims infonya
BalasHapuswaw, keren sangat gan...
BalasHapusoh ya, untuk ngasih title link untuk widget ini gmna caranya ya mas bro???
kok ga' muncul?
BalasHapusTernyata mudah, ya, trims infonya Gan.
BalasHapusPrakteknya ternyata tidak semudah itu, Gan.
BalasHapusmas kalo mau posting itu di coba dulu baru posting, agar orang laen yang mngkin newbi kagak malah jadi bingung...
BalasHapusdi penambahan code Gadget > HTML/Javascript sadar ndak ada yang kurang tuh perintahnya?? klo nt mau yang bener silahkan klik di
http://youtube-most-wanted.blogspot.com/
sekali lagi klo mau posting di coba dl aja deh..salam
makasih sob, sangat bermanfaat...
BalasHapusSangat membantu
BalasHapusSetelah dicari-cari akhirnya ketemu juga, makasih ya sobat.!
BalasHapusjangan lupa kunjung balik dan join my site http://blog-medianet.blogspot.com/
mantep tutorialnya gan,, simple dan mudah di mengerti... nice post
BalasHapusartikelnya bagus
BalasHapusCool site, I LOVE this PAGE
BalasHapusThank gan, manfaat banget buat newbie kayak ane.
BalasHapusweh, mantap, langsung coba
BalasHapusmantap dah artikelnya kawan...
BalasHapusbingung... 8-}
BalasHapus