Popular Post atau yang dikenal dengan artikel populer adalah sebuah
artikel/ karya tulis lengkap yang dikenal dan disukai orang banyak secara umum,
di samping itu sesuai dengan keinginan masyarakat serta dikagumi oleh orang
banyak.
Pada blogspot biasanya selalu dan bahkan merupakan sebuah keharusan
untuk menampilkan Popular Post/ Artikel Populer ini, baik itu diletakkan di
sebelah akan atau di sebelah kiri, ada juga di bawah postingan yang pada
intinya sesuai dengan selera. Penampilan Popular Post/ Artikel Populer ini
biasanya terdiri dari 5 – 10 postingan.
Namun daripada itu sebagian publisher memiliki selera yang
berbeda-beda mengenai tampilan Popular Post/ Artikel Populer ini. Ada yang
menginginkan berjalan ke bawah, ada pula yang menginginkan berputar. Oleh sebab
itu jika ada yang tertarik ingin membuat Popular Post/ Artikel Populer yang ada
pada blog berputar, berikut ini langkah-langkahnya:
1.
Log
In ke Blog.
2.
Masuk
ke Dashboard.
3.
Selanjutnya
pilih Tata Letak.
4.
Tambah
“Gatget” pilih HTML/JavaScript.
5.
Copy
kode di bawah ini dan Paste di HTML/JavaScript.
<style
type="text/css" media="screen">
#PopularPosts1
{
overflow:hidden;
margin-top:5px;
padding:0px
0px;
height:400px;
}
#PopularPosts1
ul {
width:340px;
overflow:hidden;
list-style-type:
none;
padding: 0px
0px;
margin:0px
0px;
}
#PopularPosts1
li {
width:340px;
padding: 5px
5px;
margin:0px
0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow:
hidden;
background:#fff
url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg)
repeat-x;
border:1px
solid #ddd;
}
#PopularPosts1
li .item-title {
color:#A5A9AB;
font-size:1em;
margin-bottom:0.5em;
}
#PopularPosts1
li .item-title a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px
0px;
padding:0px
0px 2px 0px;
}
#PopularPosts1
li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
#PopularPosts1
li .item-snippet {
overflow:hidden;
font-family:Tahoma,Arial,verdana,
sans-serif;
font-size:10px;
color:#262B2F;
padding:0px
0px;
margin:0px
0px;
}
#PopularPosts1
.item-snippet a,
#PopularPosts1
.item-snippet a:visited {
color:#3E4548;
text-decoration:
none;
}
#PopularPosts1
.spyWrapper {
height: 100%;
overflow:
hidden;
position:
relative;
}
#PopularPosts1
{
-webkit-border-radius:
5px;
-moz-border-radius:
5px;
}
.tags span,
.tags a {
-webkit-border-radius:
8px;
-moz-border-radius:
8px;
}
a img {
border: 0;
}
-->
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"
type="text/javascript"></script>
<script
type="text/javascript" charset="utf-8">
$(function ()
{
$('.popular-posts
ul').simpleSpy();
});
</script>
<script
src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js"
type="text/javascript"></script>
|
6.
Selanjutnya,
kilik Simpan.
7.
Selesai..
Demikianlah cara membuat widget Popular Post/ Artikel Populer berjalan
ke bawah, semuga dapat bermanfaat, bagi seluruh pembaca, dan semuga berhasil
bagi yang menerapkan widget ini.