Tutorial - Letak Popular Posts Widget

Tweet

Kebanyakan blogger menggunakan tools yang mudah untuk diubahsuai mengikut kesesuaian blog masing2. Kini korang tidak perlu bersusah payah lagi untuk mencarinya. Ia boleh didapati dalam official blogger widgets. Official Popular Post widget boleh memaparkan sedikit penerangan tentang post bersama dengan image post. Contoh popular widgets, korang boleh tengok di sebelah kanan sidebar blog Khai ^_^ kat bawah

Kebaikan widget ini, korang tidak perlu install javascript yang berat kat blog korang, dan ia memang sangat sesuai dengan blogspot blogs.

Tutorial - Letak Popular Posts Widget

Korang kena ikut langkah ini :

1) Login ke Blogger Dashboard > Add a gadgets

2) Korang cari dan klik pada "Popular post" (Gambar di bawah). Boleh didapati pada Tab "Basics" blogger widgets

3) Korang boleh ubah setting mengikut kemahuan korang

• Set Most viewed kepada All time
• Korang boleh Uncheck image thumbnail (gambar post) dan snippet (Penerangan ringkas) sekiranya korang tidak memerlukannya
• Pilih jumlah post yang korang nak letak. 

4) Save widget korang dan boleh View Blog untuk melihat hasilnya

Ok!, seterusnya, jika korang nak letakkan border dan  ubah warna border popular popular post korang, boleh ikut langkah ini

5) Blogger Dashboard > Template > Edit HTML > Tandakan Expand Widget Templates

6) Tekan CTRL+F dan cari kod di bawah ni

]]></b:skin>

7) Kemudian copy code di bawah dan letakkannya di ATAS kod yang korang cari tadi

/*--- MBT Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/ SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dddddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;

}

.popular-posts ul li:hover {
border:1px solid #6BB5FF;
}

.popular-posts ul li a:hover {
text-decoration:none;
}

• Untuk menukarkan icon tukarkan link yang bewarna Biru kepada link ikon yang korang nak letak
• Tukarkan kod yang bewarna Kuning untuk mengubah warna border
• Tukarkan kod yang bewarna Oren untuk mengubah warna border apabila mouse over

8) Last sekali, Korang klik Save dan View Blog untuk melihat hasilnya ^_^

Selamat Mencuba :D


Peace~


Tags: Tutorial - Letak Popular Posts Widget, Popular Posts Widget, Popular Posts Widget dalam blogger
Source: MyBloggerTricks