Tutorial : Popular Post Yang Lebih Style

.Assalamualaikum ♥

Hari ni hakak Lyssa nak kasi cara untuk korang mencantikkan popular post korang bagi sesiapa yang letakkan popular post di blog .

Apa benda Popular Post ni ? Popular Post ni sebenarnya entry-entry di blog korang yang menjadi perhatian orang ramai . Maknanya , ramai yang masuk entry tu untuk baca apa yang korang tulis dalam 30 hari , 7 hari atau atau sepanjang hari sejak korang mula berblog.

Macam ni lah contoh nya :

Comel tak popular post Lyssa ni ? Baik korang cakap comel cepat ! haha . Nak Lyssa ajar tak ? 

Boleh boleh . Ikut steps kat bawah ni :

1. Dashboard > Layout > Add a Gadget > Pilih Popular Post ..

2. Nanti akan keluar macam ni : (ikut korang lah nak setting macam mana ok ?)

3. Lepas dah SAVE , ikut step ini pula :

4. Template > Edit Html 

5. Klik mana-mana dalam bahagian coding , then  Tekan Ctrl F serentak dan cari kod ini :

]]></b:skin>

6. Ada jumpa ? Bagus ! Copy kod ini pula :

 #PopularPosts1 h2{
width:100%;
font-size:1.3em;
text-indent:-12px;
font-size:14px;
text-align:center;
color: #000000; /* Ini color untuk tajuk widget korang */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width:290px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:285px;
}
#PopularPosts1 ul li{
background: #ffffff;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #FFFFFF;
border: solid #FF99CC;
width: 170px; /* Ini saiz kelebaran popular post itu */
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* text color of numbers */
background: #FF99CC; /* Ini color untuk background number */
border: .2em solid #fff; /* Ini color untuk color border */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #CCFFFF;* Ini color untuk hover . Macam Lyssa punya warna biru */
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg);
}
#PopularPosts1 ul li a{
font: 12px Calibri, serif; /* Ini font size dan jenis font */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: uppercase;
}
#PopularPosts1 ul li a:hover{
color: #444;
}

7. Paste di bahagian ATAS kod yang korang jumpa tadi .

8. Lepas tu boleh lah korang setting WARNA , WIDTH , FONT SIZE dan jenis FONT yang korang suka .. Tahu kann macam mana nak tukar ? Semua Lyssa dah tulis kan kat warna hijau tu ....

*Untuk tukar WARNA , korang tengok ada # Hashtag tu , korang boleh tukar dan ambil kod > DI SINI

Contoh coding kat atas ni kan , memang sebijik macam kat blog Lyssa ni punya tau.
Kalau tak tahu , boleh terus comment kat bawah ni , dan nanti Lyssa akan reply ok ?

Siapa dah cuba and menjadi pun boleh bagitau =]

- SELAMAT MENCUBA- 

TerimaKasihSudiBaca 

KONGSIKAN ARTIKEL INI..

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest