Toturial : Popular Post Berstyle.

by - September 14, 2015


Assalammualaikum to all readers,

Macam biasa, aku nak ajar lagi toturial. Hari ni rasa rajin sebab nak ajar toturial popular post. Disebabkan, Emy Effendi dah cuba banyak kali tapi tak menjadi. Popular post macam dekat atas tu memang sangat femes! Macam pisang goreng cheese, femes dan laris. Okay, taip panjang panjang pun tak guna jugak. Better you all's try this toturial first. Lets follow the step. 

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

2. Nanti akan keluar macam ni :



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 ?  Copy kod ini pula :

#PopularPosts1 h2{
width:100%;
font-size:1.3em;
text-indent:-12px;
font-size:14px;
text-align:center;
color: #000000;
}
#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: .17em;
margin: .5em 2em;
background: #FFFFFF;
border: solid #81BEF7;
width: 170px;
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;
background: #81BEF7;
border: .2em solid #81BEF7;
-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;*
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg);
}
#PopularPosts1 ul li a{
font: 12px Calibri, serif;
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 tulisan yang berwarna di atas tu.  Tahu kann macam mana nak tukar ? 

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

* Untuk warna merah : Ini saiz kelebaran popular post
* Untuk warna biru : Text colour of numbers
* Untuk warna oren : Ini colour untuk backgroung number dan colour border
* Untuk warna purple : Ini color untuk hover . Macam Om punya warna biru (tengok gambar atas)


Siapa dah cuba and menjadi pun boleh bagitau di komen ye ><


Selamat mencuba.



You May Also Like

4 0000 orang comment sini

  1. wah bagus2..akak nak cuba..terima kasih om..

    BalasPadam
  2. huaaa T_T
    tak jadi jugak OM *nangis*
    problem kot blog emy :(

    BalasPadam
  3. Hi ... Jalan-jalan dari Segmen Ucing Nak Url ... Jangan lupa join contest kat Jom Bercontest dan singgah jenjalan kat  SiNi ... Semoga sentiasa sihat dan dimurahkan rezeki ... Maaf xsempat blog walking bulan lepas ...

    BalasPadam

Sila tinggalkan comment korang disini!