Cara Menghasilkan Widget Recent Post Untuk Blog

Widget Recent Post atau disebut juga dengan widget postingan modern ialah salah satu widget yang mesti anda pasang di blog. Kenapa mesti dipasang ? Karena hal tersebut akan membuat lebih mudah terhadap hadirin anda untuk menyaksikan dan mendatangi postingan yang gres diterbitkan. Misalnya ketika anda sedang membaca postingan blog ini perihal "Cara memperbaiki harddisk bad sector ," anda tidak mesti membuka homepage blog ini untuk menyaksikan postingan modern dari blog ini , anda cuma cukup melihatnya di widget postingan modern yang sudah saya pasang , berikut screenshot nya :

Jadi , anda tidak usah membuka apalagi dulu homepage blog ini , anda tinggal menyaksikan nya pada widget postingan terbaru. Nah , alasannya yakni hal ini penting untuk ketentraman hadirin maka saya akan membahas nya perihal cara menghasilkan widget postingan modern (recent post) ini.

Banyak sekali opsi untuk menghasilkan widget postingan gres ini , mulai dari yang bergerak otomatis , dengan memperlihatkan thumbnail (gambar) , atau pun cuma memperlihatkan judul link saja. Nah , disini saya akan diskusikan beberapa saja , berikut pilihannya :

• Membuat Widget Recent Post cuma memperlihatkan judul saja

Langkah-langkah nya :
1. Masuk ke akun blogger apalagi dahulu
2. Pilih hidangan Tata Letak dan klik Tambahkan Gadget
3. Setelah itu pilih HTML/Javascript
4. Lalu masukan arahan dibawah ini :

<div style='overflow:auto;height:230px'><br /><br /></div>

5. Jangan lupa beri judul widget anda , misal nya recent post atau postingan terbaru. Setelah itu klik simpan.
Dan jangan lupa juga untuk mengganti dengan alamat blog anda pada :

Dan juga jumlah postingan yang mau ditampilkan pada :
var numposts = 5;
Script diatas saya peroleh dari SCH-XP blog. Untuk demo widget ini , seumpama yang digunakan pada blog ini.

•  Membuat Widget Recent Post dengan Thumbnail

Sumber : dte.web.id

Untuk widget yang satu ini , yang tampil cuma gambar saja tetapi dengan perhiasan tooltip beserta deskripsi nya. Script nya saya peroleh dari blog DTE. Berikut tindakan nya :

1. Masuk ke hidangan Tata Letak kemudian klik Tambahkan Gadget
2. Setelah itu pilih HTML/Javascript
3. Masukan arahan dibawah :

<br /><style scoped="scoped">#mini-gallery { width:380px; /* Tentukan lebar yang sempurna sesuka hati atau buang saja deklarasi ini */ margin:0 auto; font:normal wajar 11px/normal Verdana ,Arial ,Sans-Serif; color:#666; padding:8px; background-color:#222; -webkit-box-shadow:0 1px 3px rgba(0 ,0 ,0 ,.4); -moz-box-shadow:0 1px 3px rgba(0 ,0 ,0 ,.4); box-shadow:0 1px 3px rgba(0 ,0 ,0 ,.4); -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;}#mini-gallery h2 { font:normal wajar 14px/normal Impact ,"Arial Narrow" ,Arial ,Sans-Serif; color:#999; text-shadow:0 1px 0 black; text-transform:uppercase; margin:2px; padding:7px 14px; background-color:#3c3c3c;}#mini-gallery .rp-item { float:left; display:inline; position:relative; margin:2px; padding:0; background:white url('data:image/gif;base64 ,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') no-repeat 50% 50%; width:72px; height:72px;}#mini-gallery .rp-item img { width:72px; height:72px; border:none !important; margin:0 !important; padding:0 !important; background:none !important; display:none;}#mini-gallery .rp-item .rp-child { position:absolute; top:95%; left:95%; z-index:1000; width:200px; background-color:white; border-top:4px solid #3399ff; -webkit-box-shadow:0 0 3px rgba(0 ,0 ,0 ,.7); -moz-box-shadow:0 0 3px rgba(0 ,0 ,0 ,.7); box-shadow:0 0 3px rgba(0 ,0 ,0 ,.7); padding:10px 15px; overflow:hidden; word-wrap:break-word; display:none;}#mini-gallery .rp-item .rp-child h4 { font-size:12px; margin:0 0 5px; color:#2473A8;}#mini-gallery .rp-item:hover .hidden {display:block}</style><br /><br />

Untuk pengaturan widget ini sanggup dikelola pada bab :
var widgetTitle = "Artikel Terbaru" , // Tentukan judul widget
numPosts = 20 , // Tentukan jumlah thumbnail/posting
numChars = 300 , // Tentukan jumlah huruf pada deskripsi tooltip
tooltipFadeSpeed = 200 , // Tentukan kecepatan pengaruh .fadeIn() dikala tooltip tampil
pictureBlank = "data:image/png;base64 ,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQ
d1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAA
AElFTkSuQmCC" , // Thumbnail cadangan jikalau posting yang tampil tak punya gambar
blogUrl = "http://nama_blog.blogspot.com"; // Alamat blogmu

Untuk demo widget ini , berikut referensi nya pada DTE Demo. Dan yang terpenting jangan lupa untuk mengubah blogUrl dengan alamat blog anda. Mungkin cuma itu saja yang sanggup saya diskusikan perihal cara menghasilkan widget recent post , biar bermanfaat.

Bagikan Artikel ini