Pages

Friday, December 4, 2015

Popular Post Yang Lebih Style

Tutorial : Popular Post Yang Lebih Style

.Assalamualaikum 

Alhamdulillah, Wanza baru ja berjinak-jinak belajar buat blog nie, menarik rupanya..heeee, patot la ramai yang buat blog nie ye, da alang2 wanza belajar buat blog..wanza terjumpa blog kawan wanza, pijah namenye, Fifi Fizah duk usha2 blog dia, nampak la tutorial dari Lyssa nie..macam menarik, wanza godek2 sendiri, last2 menjadi JUga..hee..panjang pulak duk bobek2. Apa kata korang baca tutorial sis Lysaa nie.

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- 

Wanza pon Nak share TUTOTIAL POPULAR POST YANG STYLE dari blogger Lyssa Faizureen.

2 comments: