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..
Previous
Next Post »

49 000 orang Comment Di Sini

Write 000 orang Comment Di Sini
Mimi Rheem
AUTHOR
July 31, 2015 at 1:54 PM delete

Yeah..tq..menjadi..ehek..

avatar
PeRdU cINta
AUTHOR
July 31, 2015 at 2:00 PM delete

Terima kasih lyssa share tuto..in sya Allah akak nak cantikkan juga popular post akk yang tak berapa nak popular..tapi kena cari masa yang cool..sebab akk tak mahir bab coding..takut akk buat salah walau ada tuto..

avatar
PeRdU cINta
AUTHOR
July 31, 2015 at 2:00 PM delete

Terima kasih lyssa share tuto..in sya Allah akak nak cantikkan juga popular post akk yang tak berapa nak popular..tapi kena cari masa yang cool..sebab akk tak mahir bab coding..takut akk buat salah walau ada tuto..

avatar
Emy Effendi
AUTHOR
July 31, 2015 at 2:07 PM delete

nakk buat, tp sy xde lagi popular post tuu ..
yang mane ye tutorial nk buat popular tu? tq akak :)

avatar
July 31, 2015 at 2:13 PM delete

@Amelia Effendi

huhu . .ikot je step kat atas niii ^^

avatar
July 31, 2015 at 2:13 PM delete

@PeRdU cINta

hehe , free nnti boleh lah akak cuba :P

avatar
Emy Effendi
AUTHOR
July 31, 2015 at 2:24 PM delete

@Lyssa Faizureen

orait, sy try! hope menjadi. hehe

avatar
Emy Effendi
AUTHOR
July 31, 2015 at 2:30 PM delete

/* Ini color untuk tajuk widget korang */

perkataan ni kena delete tak?

avatar
July 31, 2015 at 2:35 PM delete

@Amelia Effendi
nak delete boleh ,, tak nak delete punn tak pee ^^


sbeb perkataan tu tak efek punnn nnti ^^

avatar
Emy Effendi
AUTHOR
July 31, 2015 at 2:41 PM delete

dah buat kak :)
tp xde warna2 pink tu.. hehe
kasi usha sikit kak..

avatar
July 31, 2015 at 2:44 PM delete

@Amelia Effendi
aikk . takkan kot ..

dah letak coding panjang2 tu kat atas ]]> ??

avatar
Unknown
AUTHOR
July 31, 2015 at 3:11 PM delete

tq lyssa, tapi akak punya dia terlalu tepi... macam mana nak centerkan?

avatar
July 31, 2015 at 3:14 PM delete

@Sanisah eeiyss

kan coding ni :

#PopularPosts1 ul li{
background: #ffffff;
position: relative;

cuba tukar jadi

#PopularPosts1 ul li{
background: #ffffff;
position: center;

menjadi tak ?

avatar
July 31, 2015 at 5:30 PM delete

Rajinnya syg :) hehehhe

TQ share tuto :)

avatar
Amani
AUTHOR
July 31, 2015 at 7:25 PM delete

Wahhh ! hebbat nya hakak..
Jom comment kat blog kite pulak *heret tangan dengan muka gedik * hikss

avatar
Anonymous
AUTHOR
July 31, 2015 at 11:20 PM delete

Stylenya kak lyssa, nak cubalah hias popular post nanti :-)

avatar
Anum Abdullah
AUTHOR
August 1, 2015 at 12:05 PM delete

nanti lah i try buat ni tuto...hihi...

avatar
ieyra h.
AUTHOR
August 2, 2015 at 12:00 AM delete

nak cubaaaaa. thanks for the tutorial! banyak lagi sy kena belajar ni. huhuh. blog tak cantik :<

avatar
aboya
AUTHOR
August 2, 2015 at 1:26 AM delete

jawab soalan 1.. comey

avatar
aeinnamusa
AUTHOR
August 2, 2015 at 2:25 PM delete

Nak try jugak..tunggu free sikit

avatar
FatihahFazlin
AUTHOR
August 2, 2015 at 3:15 PM delete

thanks lyssa sudi share tuto ni.. dah lama carii.

avatar
Unknown
AUTHOR
August 4, 2015 at 2:11 AM delete

Tq lyssa.I've been looking for the best tutorial for this part. Wanna to try =)

avatar
Nadia Johari
AUTHOR
August 5, 2015 at 9:32 PM delete

patut nampak lain..kemas lagi

avatar
ietams
AUTHOR
August 10, 2015 at 3:14 PM delete

yeyy berjaya!
terima kasih lyssa

avatar
August 11, 2015 at 10:26 AM delete

thanz lyysa..dh jd pon..skli try jew trs blh..ehhehe

avatar
Unknown
AUTHOR
August 20, 2015 at 7:53 AM delete

lyssa, kalau nak center-kan tulisan dalam kotak tu mcm mna ye?

avatar
Unknown
AUTHOR
August 20, 2015 at 1:01 PM delete

tak menjadi pon... huuuu

avatar
CikguSiti
AUTHOR
August 27, 2015 at 11:42 PM delete

kita ikut tuto nihh.. walaupun mula2 tak jadi godek2 jadi jugak.. tq lyssa :)

avatar
CikguSiti
AUTHOR
August 27, 2015 at 11:54 PM delete

lyssa nak tanya.. mcm mana nak edit title post tu ye.. terlindung belakang no tu.. hihi

avatar
Anonymous
AUTHOR
September 3, 2015 at 1:10 PM delete

Akak dah buat...sejibik mcm Lyssa ajaq..tapi tak jadi...( Garu kepala sampai rambut guguq )

avatar
Unknown
AUTHOR
October 13, 2015 at 4:57 AM delete

yeayy ! jadiii .. suka suka ! :'D macehhh kak lyssa! <3

avatar
Unknown
AUTHOR
October 13, 2015 at 5:18 AM delete

kak lyssa , godek2 tadi dah jadi elok balik dah tajuk kat sidebar.. mwehehe.. sorry kak lyssa banyaakk tanya.. tutorial kak lyssa semua mudah faham ! yeayy .. sukkaa ! :'D

avatar
Ana Fatihah
AUTHOR
October 27, 2015 at 3:25 PM delete

Thank you!!! Really appreaciate this tuto. Hehe

avatar
alyachan
AUTHOR
February 25, 2016 at 9:40 PM delete

terima kasih, kita ambil tutorial ni ye. ^^

avatar
Záty Rose
AUTHOR
February 27, 2016 at 10:04 AM delete

Yeah! Menjadilah! cantik sangat! thanks!

avatar
Maryam Sofea
AUTHOR
March 1, 2016 at 11:53 PM delete

Why tak jadi? Banyak kali try T_T

avatar
Maryam Sofea
AUTHOR
March 1, 2016 at 11:54 PM delete

Why tak jadi? Banyak kali try T_T

avatar
Unknown
AUTHOR
May 15, 2016 at 6:44 PM delete

thank you kak lyssa :* sangat menjadi hehe

avatar
Unknown
AUTHOR
May 28, 2016 at 2:56 PM delete

akk tulisan tu bole tukar ape2 tulisan je ke,,trima kasih sbb blg akk byk mmbntu

avatar
Unknown
AUTHOR
December 14, 2016 at 3:20 PM delete

assalamualaikum lysa,akak buat xmnjadi lh.jd naik tulisan kt blog.akak copy paste je yg lisa punya code tu.xsetting pe2 pn.atau kena setting jg code warna tu??
ap2 pn trima kasih lisa sb xkedekut ilmu.smoga dipermudahkan oleh Allah sgla urusan lisa dunia akhirat..

avatar
Anonymous
AUTHOR
January 29, 2017 at 12:47 PM delete

THANKS sahabat blog ekin dah copy bulat2 kena dengan tema blog ekin hihihi muahh muahhh

avatar
February 8, 2017 at 9:55 PM delete

lyssa dah cuba buat..tapi sis copy code lysa je tau..xsure la sbb baru nak merangkak
azzaazyra.blogspot.my

avatar
Azwani Aziz
AUTHOR
June 4, 2017 at 5:55 PM delete

Tq..tutorial menarik. tp sy xreti gk nk buat bab coding2 ni.huhu..
Sila lah tinggalkan jejak di blog saya ye.tq

http://madamwani.blogspot.my/2017/05/fall-in-love-with-oste.html

avatar
Nur Syafiqah
AUTHOR
October 27, 2017 at 12:03 AM delete

Salam kak, macam mana nak centerkan dia

avatar
Fatin Nadiah
AUTHOR
October 6, 2018 at 9:52 AM delete

Terima kasih lyssa...tips yang sangat membantu

avatar

.Assalamualaikum.
.Sila Tinggalkan Comment Anda Di Sini.
SATU pun jadi lah ! hehe. EmoticonEmoticon