Thursday, March 2, 2017

Tutorial: Popular Post Yang Cantik & Kemas

       Nak tak popular post yang macam ni? Selalunya kita nampak yang warna warni, kan? Ada jugak popular post yang warna berselang-seli. Yang aku punya ni, totally warna yang seragam, sebab aku tak suka sangat banyak-banyak colour. Tu yang aku ubah tu. 

       Heheh (sorry saya memang pengubah sikit). Tapi basecode ni daripada Nabila Medan. Jadi jangan copy ya? Kesian dia. Aku ubah part warna, font, size font, border radius je. Yang basecode memang totally dia. Ok, lets check it out.
1. Dashboard > Layout > Add a Gadget > Popular Post
2. Sila untick Image thumbnail dan jugak Snippet.
3. Save. Ok tak habis lagi gais, sabar jap. Hihi
4. Pergi ke Template > Edit HTML > Tekan anak panah kat number 11 tu > 
5. CTRL + F, dan carik code ni
]]></b:skin>
6. Jumpa? Kalau dah, copy code kat bawah ni 
/* Rainbow Popular Post by Nabila Medan and reedit by Eyja Masliza*/
#PopularPosts1 ul li a:hover{
font-style: normal; font-weight: bold; color:#ffffff;text-decoration:none}
#PopularPosts1 ul li a {
-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #000000; display: block;
font-family: 'Itim';
font-size: 16px; font-style: justify; font-variant: normal; font-weight: normal;
letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{
float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{
font-family: 'Itim';
position:absolute;top:10px;right:5px;border:2px solid #fff;background:#fceaef;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px; text-align:center; border-radius:0px 25px 0px 0px; color:#F7819F}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {
background:#F7819F;width:90%}
 #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{
content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{
background:#F7819F;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{
content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{
background:#F7819F;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{
content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{
background:#F7819F;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{
content:"7"}
 #PopularPosts1 ul li:first-child + li + li + li + li + li +li{
background:#F7819F;width:90%}
 #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{
content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li{
background:#F7819F;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{
content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{
background:#F7819F;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{
content:"4"}
 #PopularPosts1 ul li:first-child + li + li{
background:#F7819F;width:90%}
 #PopularPosts1 ul li:first-child + li + li:after{
content:"3"}
 #PopularPosts1 ul li:first-child + li{
background:#F7819F; width:90%}
#PopularPosts1 ul li:first-child + li:after{
content:"2"}
#PopularPosts1 ul li:first-child{
background:#F7819F;width:90%}
#PopularPosts1 ul li:first-child:after{
content:"1"}
 #PopularPosts1 ul{
margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{
position:relative;margin:6px 0;border-radius:0px 30px 0px 30px;border:2px solid #ffffff;padding:10px;}
7. Dan pastekan code yang dah copy tadi atas ]]></b:skin>
8. Warna kuning: warna font bila cursor dihalakan.
9. Warna hijau: warna tajuk entri anda,
10. Warna turqoise: font yang digunakan.
11. Warna jingga: background color untuk number
12. Warna purple: border radius untuk kotak number
13. Warna pink: border untuk taju entry anda.
14. Warna merah: tu semua warna background untuk tajuk-tajuk entries anda.
15. Boleh Preview dulu, dah tengok cantik kena dengan warna anda suka, click Save Template.

Nota Pink: Boleh tanya kat komen kalau tak tahu :)

19 comments

  1. Cantik satu warna sahaja...

    ReplyDelete
  2. Hai.. Cakk..
    done follow sini no ..123
    Jom berkenal kenalan kita..
    Sudilah kiranya follow teman yea..
    http://tengkubutang.blogspot.my/

    kalau minat kucen.. boleh follow sini juga
    http://kucenkucenbelog.blogspot.my/

    ReplyDelete
  3. boleh letak tak kalau template yang macam teman tu? ke lain cara dia ye?

    ReplyDelete
  4. @tenku butang hai tengku :) dah lama follow tengku dah :) insyaAllah nanti BLOG EYJA balas kunjungan ya? :)

    ReplyDelete
  5. bgs tutorial ni..

    slmt berpuasa eyja..

    ReplyDelete
  6. Memang cantik dan kemas.. i like

    ReplyDelete
    Replies
    1. kaann. tapi yang rainbow pun cantik cuma ni version pinklah heheh

      Delete
  7. salam ramadhan...

    jom join GA..

    http://ayubarbydol.blogspot.my/2016/06/first-giveaway-ramadhan-2016-by-ayu.html

    ReplyDelete
  8. dulu rajin buat fancy2 mcm nih, sekarang dah tak sempat.. huhuhu..

    ReplyDelete
    Replies
    1. tulah, kalau dapat up post pun dah syukur dah sekarang kan? :P

      Delete
  9. thank you sebab share :)

    ReplyDelete
    Replies
    1. welcome sayang. moga bermanfaat :)

      Delete
  10. Nice tutor..

    ReplyDelete


"Burung serindit terbang melayang,
Mari hinggap di ranting mati,
Bukan ringgit pandangan orang,
Budi bahasa tangkaian hati."

Berbudi dan berbahasalah seolah-olah esok kita akan mati.
Be courteous like it seems we are going to die tomorrow.

- http://www.blogeyja.com

© Reedit by Eyja Masliza for Blog Eyja Dot Com. Design by FCD.