Pada kesempatan kali ini saya akan membagikan
widget untuk blog secara secara Cuma-Cuma alias gratis. Widget blog ini
tentunya untuk mempercantik tampilan, namun tetap menjaga responsive loading
dan SEO Friendly tentunya.
Maklum, scrip ini sudah banyak
blogger yang share namun masih saja bermanfaat untuk mempercantik tampilan
blog.
Widget apa sih yang akan dibagikan
kali ini dan apa fungsinya?
Baiklah, kali ini saya akan berbagi
widget blog yang akan menampilkan postingan terbaru (widget recent post),
dilengkapi dengan gambar (tumbnail) dan deskripsi singkat. Jadi tampilan
semakin ciamik tentunya sob, namun tetap menjadi agar loading blog nggak berat.
Artikel terkait: 3
Langkah Mudah Menjadikan Blog Valid HTML5.
Berdasarkan ujicoba GT Metrix,
widget ini tidak terlalu memberatkan loading blog.
Cara membuat widget recent post pada
blogger juga makin gampang, tidak perlu edit template dan update css, melainkan
hanya menambahkan widget html pada sidebar.
Nah, baiklah kita simak saja
paduannya berikut ini:
- Pertama login ke dashboard blogger
sesuai email dan password yang Anda miliki, kemudian jika memiliki lebih dari 1
blog, pilih blog mana yang akan di tambahkan widget.
- Selanjutnya pilih Tata Letak (Lay
Out)>>HTML/JavaScript.
- Copy paste kode script dibawah ini pada bagian kolom yang tersedia.
<style scoped="scoped">#dte_recent-post { font:normal normal 11px/normal Helmet,Freesans,Sans-Serif; color:#333; margin:0 auto; padding:0; min-height:100px; background:white url('data:image/gif;base64,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') no-repeat 50% 50%;} #dte_recent-post li { list-style:none; margin:0; padding:7px; background-color:white; border-bottom:1px solid #ddd;} #dte_recent-post li a img { float:left; margin:0 10px 0 0; padding:0; border:none; background:none; outline:none;} #dte_recent-post li a.title { display:block; font-size:12px; text-decoration:none; color:#990000;} #dte_recent-post li a.title:hover { text-decoration:underline;} #dte_recent-post li span.foot { clear:both; display:block; color:#ccc; margin-top:7px; font-size:10px;}</style><ul id="dte_recent-post"></ul><script>//<![CDATA[var rp_homePage = "http://nama-blog-ku.blogspot.com",
rp_numPosts = 5,
rp_thumbWidth = 72,
rp_numChars = 100,
rp_sortByLabel = false,
// Example: rp_sortByLabel = "JQuery", to sort posts by label "JQuery" rp_noImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A 'no-image' image rp_monthNames = [ "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember" ], rp_newTabLink = true,
rp_loadTimer = "onload";//]]></script><script src="http://dte-project.googlecode.com/svn/trunk/blogger-recent-post-with-preloader.js"></script>
- Klik tombol “Simpan”
Keterangan Tambahan Widget untuk Blog:
Untuk tulisan berwarna pada script (yang dicopykan dibawah ini) diganti dengan keterangan yang bisa kita custom sesuai keinginan.var rp_homePage = "http://nama-blog-ku.blogspot.com",
rp_numPosts = 5,
rp_thumbWidth = 72,
rp_sortByLabel = false,
- homepage diganti sesuai dengan nama blog/url blog masing-masing.
- numPost di ganti sesuai jumlah post yang akan Anda tampilkan, secara default menampilan 5 gambar.
- thumbWidth 72 ingin menampilkan tumbnail/gambar, ganti dengan 0 jika tidak ingin menampilkan gambar.
- Ganti ‘false’ pada sortByLabel dengan ‘True’ jika ingin mensortir berdasarkan label postingan.
Artikel terkait: Cara
Mengetahui Loading Blog dengan Google Develovers.
Demikian ulasan singkat tentang widget
recent post gratis untuk blogger pada kesempatan kali ini, semoga bermanfaat.