Widget Blog dengan Responsive dan SEO Friendly
Pada kali ini saya coba membagikan widget untuk blog secara gratis. Widget blog jelas akan mempercantik tampilan blog kamu, namun tetap responsive loading dan SEO Friendly tentunya membuat blog kamu menjadi ringan.
Scrip ini sudah cukup banyak blogger yang membaginya semoga saja tetap bermanfaat untuk mempercantik tampilan blog kalian.
Baiklah, widget blog kalli ini yang akan menampilkan postingan terbaru (widget recent post), dilengkapi tampilan gambar (tumbnail) dan deskripsi . meJadikan tampilan semakin cakep sob, namun tetap loading blog tidak akan berat.
Berdasarkan GT Metrix, widget ini tidak terlalu memperberat loading blog.
Cara membuat widget recent post pada blogger akan semakin gampang, tidak perlu susah - susah edit template dan juga update css, melainkan cukup menambahkan widget html saja pada sidebar.
Ok langsung saja kita simak saja berikut ini:
- Pertama - tama kita login dulu ke dashboard blogger dengan email dan password yang di miliki, lalu 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.
Categories:
Widget untuk Blog
0 komentar:
Posting Komentar