Belajar Cara Memodifikasi Widget Popular Post Blogger
Bagi admin sendiri, cara ini cukup mudah dilakukan. Karena yang perlu dilakukan hanyalah menyalin kode widget HTML saja.
Pada dasarnya, untuk membuat sebuah tampilan diblogspot ini sesuai selera kita hanya perlu paham dibagian bidang HTML, CSS & JavaScript.
Baca juga : Cara Memasang jQuery di Blogspot dan WordPress
Cukup 3 kode diatas saja sudah dipahami, maka semua tampilan yang ada diblogspot bisa kita atur sesuai keinginan.
Namun, tidak semua orang memiliki otak daya pikir yang sama maka disini saya buatkan sedikit bantuan buat yang ingin merubah tampilan widget popular post agar jadi lebih menarik lagi.
Sebelum mengikuti cara saya dibawah ini, perlu diperhatikan lagi agar kamu sudah paham beberapa kode HTML dasar.
Tips ini saya bagikan tanpa ada kode JavaScript, cuma kode HTML dan CSS saja.
Ubah dulu kode template blogger ke versi terbaru dengan cara menganti kode dibawah ini yang berada dibagian atas kode Memodifikasi Widget Populart Post Blogger
<head>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.3.0' expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection' lang='id' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Otomatis semua kode template akan berubah ke versi terbaru atau yang lebih dikenal layout versi 2.
Lalu salin kode HTML dibawah ini.
Lalu salin kode HTML dibawah ini.
<b:defaultmarkups> <b:defaultmarkup type='Common'> <b:includable id='widget-title'> <b:if cond='data:defaultTitle or data:title'> <div class='widget-title'> <h4 class='title'> <data:title/> </h4> </div> </b:if> </b:includable> </b:defaultmarkup> <b:defaultmarkup type='PopularPosts'> <b:includable id='main' var='this'> <b:include name='widget-title'/> <div class='widget-content'> <b:loop values='data:posts' var='post'> <b:include data='post' name='postContent'/> </b:loop> </div> </b:includable> <b:includable id='postContent' var='post'> <div class='post'> <div class='post-content'> <a class='post-image-link' expr:href='data:post.url'> <img class='post-thumb' expr:alt='data:post.title' expr:src='data:post.featuredImage resizeImage 100' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='/> </a> <div class='post-info'> <h3 class='post-title'> <a expr:href='data:post.url'><data:post.title/></a> </h3> <div class='post-meta'> <span class='post-date published' expr:datetime='data:post.date.iso8601'><data:post.date/></span> </div> </div> </div> </div> </b:includable> </b:defaultmarkup> </b:defaultmarkups>
Kode diatas adalah kode widget blogger version layout 2, yang mana kode tersebut berbeda dari kode versi lama blogger.
Letakan kode HTML diatas dibagian atas
</head>
atau </body>
.
Sudah selesai di tahap kerangka HTML nya, maka langkah berikutnya kita beri make up menggunakan CSS.
Apapun minuman dan makanan nya, kalo sudah berkaitan dengan tampilan situs maka CSS ini adalah salah satu skin carenya.
Salin kode CSS dibawah ini.
<style> /* CSS Popular Posts */ .PopularPosts .post{overflow:hidden;padding-bottom:26px;margin:0;border:0} .PopularPosts .post-image-link{position:relative;width:100px;height:70px;float:left;overflow:hidden;display:block;vertical-align:middle;margin:0 12px 0 0} .PopularPosts .post-info{overflow:hidden} .PopularPosts .post-title{font-size:14px;line-height:20px;margin:0 0 4px} .PopularPosts .post-title a{display:block;font-weight:500;color:#111} .PopularPosts .post-meta {font-size:11px} </style>
Letakan kode CSS diatas dibagian atas kode
</head>
Klik simpan.
Cara Menggunakannya :
- Buka menu Tata Letak / Layout
- Klik Tambahkan Gagdet > Pilih Postingan Populer
- Lalu simpan
Tambahan
- Untuk mematikan thumbnail gambar postingan, Anda cukup atur CSS
.PopularPosts .post-image-link
menjadidisplay:none
- Jika ingin menghilangkan tanggal
.PopularPosts .post-meta
menjadidisplay:none
Jika kamu ingin meletakan widget popular post dibagian letak tertentu.
Silahkan tambahkan kode
<b:section class='baku_hantam' id='baku_hantam' name='Popular Post' showaddelement='false'/>
Akhir Kata
Demikian panduan singkat dari saya tentang cara memodifikasi widget popular post di blogspot dengan mudah dipraktekan.
Jika ada pertanyaan yang masih kurang dipahami tentang penjelasan saya diatas, Jangan ragu untuk menulis pertanyaannya di kolom komentar.
6 komentar untuk "Belajar Cara Memodifikasi Widget Popular Post Blogger"
Kami memiliki kebijakan dalam berkomentar di Blog ini :
— Dilarang promosi suatu barang
— Dilarang jika memasang link aktif di komentar
— Dilarang keras melakukan promosi iklan
— Dilarang menulis komentar yang berisi sara, bully atau cemuhan
NB :Komentar yang melanggar tidak akan ditampilkan
Kebijakan komentar yang bisa Anda temukan selengkapnya disini
Dukungan :
Jika menyukai dengan artikel blog kami, silahkan Ikuti blog ini
Copas boleh
BalasHapusBiasakan sertakan sumbernya
HapusKalo widget populer post di hapus apakah akan berpengaruh untuk seo?
BalasHapusTidak ada pengaruhnya dari segi sisi SEO
Hapussaya terapin di template boshjn amp kok thumbnail gak muncul ya?
BalasHapusYa gak muncul karena ini bukan untuk versi AMP
Hapus