Wednesday, 12 August 2015

Tutorial Popular post

31 JULY 2015


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- 
ALHAMDULILLAH.. menjadi jgk try buat utk popular post.. sekali ikut je dah menjadi.. senang n clear je.
Fizah share TUTOTIAL POPULAR POST YANG STYLE dari blogger Lyssa Faizureen.

9 comments:

  1. TKSH TUTORIALNYA NAK CUBA JUGA..MMG XRETI TENTANG BLOG NI...

    ReplyDelete
    Replies
    1. sama sama.. sye pn baru lg.. tengah godek godek..tgh bljr jgk.. huhuu

      Delete
  2. mcm cantik je..
    untuk templete denim boloh guna ke erk ?

    ReplyDelete
    Replies
    1. templte denim cmne?fizah pon bru bljr..tgh godek jgk..byk jgk xtau.hehee

      Delete
  3. ala dah try...tak jumpa kod yg ]]> tu...tk menjadi..huhu

    ReplyDelete
    Replies
    1. ehehe.cube ikt step tu sis..kt kotak coding tu..sis tekan jew kt mne mne Tekan Ctrl + F serentak..dia akn kuor ape yg kite nk search..kt situ sis ]]> n paste kn lam box tu..dia akn kuor part yg kite cri..

      Delete
  4. Sayang, meh la jenguk teratak saya nie...baru belajar nie..mohon fizah kasi idea bernas tue :)

    http://wzalehawismail.blogspot.my/

    ReplyDelete
  5. Sayang, meh la jenguk teratak saya nie...baru belajar nie..mohon fizah kasi idea bernas tue :)

    http://wzalehawismail.blogspot.my/

    ReplyDelete