Cara Saya Membuat Widget Artikel Terbaru Keren Di Blog

Cara untuk membuat widget artikel terbaru keren dan responsive di blogger lengkap dengan gambar thumbnail postingan. Contohnya bisa dilihat pada sidebbar sebelah kanan dari blog ini cukup menarik bukan ?
Sekarang jamanya memasang widget yang berisikan artikel terbaru, yang artinya sebuah widget menampilkan artikel paling baru dipublikasikan. Jadi jika pengunjung langsung menemukan halaman yang mereka butuhkan dari search google seketika dia bisa mengetahui artikel yang baru diterbitkan dari blog tersebut

Berbeda dengan widget Pupular Post yang menampilkan artikel paling sering dibaca atau halaman yang sering dikunjungi. Setiap saya mencari sesuatu di google banyak menemukan blog yang memasang artikel terbaru di sidebbar seperti punya saya

Memang menurut saya papan artikel terbaru sangat cocok dipasang pada blog terutama terletak pada sidebbar. Semua blog saya pasang widget ini malah popular post saya tidak tertarik memasangnya di blog

Membuat Widget Artikel Terbaru Keren

Ada bermacam-macam bentuk tampilan widget artikel terbaru jika kamu search di google menyesuaikan dari kode css dan java script yang dibuat, ada yang hanya menampilkan judul artikel, dan ada juga yang menampilkan judul dan gambar thumbnail

Cara terbaru membuat widget artikel terbaru keren di blog


Naaah postingan kali ini saya akan menuliskan caranya membuat widget artikel terbari di blog seperti punya saya bisa dilihat pada sebelah kanan dari blog ini, tampilanya bisadibilang sangat keren lengkap dengan gambar thumbnail dan juga tidak terlalu membebani loading blog

Jika kamu tertarik untuk membuat seperti punya saya bisa diikuti tutorial dibawah ini
Login Blogger tambhakn Gadget
Pilih HTML/Javascript copy paste kode berikut ini


<script>
var galihd_thumbs_wid = 300;
var galihd_thumbs_hei = 190;
var galihd_title = true;
</script>
<script src="/feeds/posts/summary?max-results=4&amp;alt=json-in-script&amp;callback=galihdgrid"></script>

Ganti angka yang saya beri tanda warna biru dengan jumlah yang diinginkan, kemudian simpan
Langkah selanjutnya
Pilih menu Tema kemudian Edit HTML
Copy paste kode dibawah ini letakkan diantara kode CSS blog kamu


/* Artikel Terbaru */
.recent-galeri{padding:10px;clear:both}.recent-galeri:after{content:&quot;&quot;;display:table;clear:both}.recent-galeri .gallerytem{display:block;float:left;position:relative;margin:0 auto 15px auto;overflow:hidden;padding:0;text-align:center;width:100%;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1);border-radius:1px}.recent-galeri .gallerytem:last-child{margin:0 auto}.recent-galeri .gallerytem a{position:relative;float:left;margin:0;overflow:hidden;text-decoration:none;width:100%}.recent-galeri .gallerytem .ptitle{background:rgba(255,255,255,.97);display:inline-block;clear:left;font-size:14px;line-height:1.3em;position:absolute;bottom:15px;left:15px;right:15px;color:#888;padding:15px;word-wrap:break-word;text-align:center;backface-visibility:hidden;box-shadow:0 8px 10px -5px rgba(0,0,0,0.15);border-top:2px solid #a4b0be;transition:all .2s}.recent-galeri .gallerytem:hover .ptitle{background:rgba(255,255,255,.97);color:#222;border-top-color:#FF5A00}.recent-galeri a img{background:#fdfdfd;float:left;margin:auto;text-align:center;width:100%;transition:all .3s}

Dan selanjutnya copy paste kode Java Script dibawah ini letakkan diatas kode <head/> atau &lt;/head&gt;&lt;!--<head/>--&gt;



<script type='text/javascript'>
//<![CDATA[
// Recent Post
function galihdgrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-galeri">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-vvay9E2qnj6EAAFhAWM9iwJQarAKOfvG-rpsOirbxSoBMsG2z1MwxByL8vvRhNKFDx0mNilh3IIbWopgaChb9dClAs4bkg7TBtglsgB7aSDKyBtnkJQTIq8CZuIYCmtGZF7x7fKm1FS-/s1600/default.png",s=n.replace("/s72-c/","/w"+galihd_thumbs_wid+"-h"+galihd_thumbs_hei+"-c/"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+galihd_thumbs_wid+'" height="'+galihd_thumbs_hei+'"/>',p=galihd_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" title="'+r+'">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>

Terakhir simpan dan selesai, sekarang lihat hasilnya harusnya sudah muncul dan tampilanya sama seperti punya saya. Yang saya pasang juga seperti tutorial diatas jadi bisa dipastikan berhasil dan tampilanya sama persis seperti yang ada di blog ini

Tapi jika menurut kamu tampilanya kurang menarik atau kurang bagimana kamu bisa edit sendiri otak-atik kode css diatas, silahkan berkreasi sesuai dengan selera

Manurut saya pribadi lebih suka memasang widget Recet post atau artikel terbaru ketimbang widget popular post, yang mungkin saja dapat mendongkrak popularnya artikel yang baru dipublikasikan. Bukan artikel yang sudah popular malah tambah popular.

Tapi kembali lagi ke selera masing-masing, pasang dua-duanya juga tidak masalah aslahkan tampilan blog tetap mendukung banyak widget

Oke sampai disini cara untuk memasang widget artikel terbaru keren diblog semoga bermanfaat jika ada yang ingin ditanyakan silahkan ditingalkan dikolom komentar, semoga sukses
Pemalas yang senang mencari kesibukan supaya bisa ngeluh dan kemudian minta libur untuk kembali bermalas-malasan.

Post a Comment

Gak gelem komentar ben copot jempol e !