Wednesday, 2 July 2014

Widget Popular Posts dengan Paparan Rank

Widget Popular Posts dengan Paparan Rank
Widget popular post adalah sangat bermanfaat sekiranya diletakkan pada blog anda. Widget popular post tersedia pada blogspot dan anda boleh meletakkannya dengan menambahkan widget ini pada layout template blog anda

Dalam tutorial kali ini saya akan berkongsi sedikit trik untuk meletakkan nombor/rank post pada paparan widget ini. Widget popular post berfungsi untuk menambahkan bilangan pageview pada blogspot anda dalam masa yang sama dapat mengambarkan artikel mana yang menjadi pilihan pembaca.

Saya akan tunjukkan cara menghasilkan widget seperti paparan rajah diatas

Langkah 1:
Login ke akaun blogspot anda >> Kemudia klik Layout

Langkah 2:
Add Gadget >> Pilih Widget Popular Post

Langkah 3:
Set jumlah artikel yang anda ingin paparkan >> Uncheck Snipped dan Image Thumbnil jika perlu >> Klik Save
Widget Popular Posts dengan Paparan Rank

Langkah 4:
Klik Template >> Edit Html

Langkah 5:
Tekan Ctrl+F (win) bagi menghidupkan fungsi carian >> Kemudian Cari Kode </b:skin>
Widget Popular Posts dengan Paparan Rank

Langkah 6:
Copy Kode berikut dan Pastekan di ATAS kode </b:skin>

    /*--- SEO.RG Popular Posts --- */
    .popular-posts ul {
    padding-left: 0px;
    counter-reset: popcount;
    }

    .popular-posts ul li:before {
    list-style-type: none;
    margin-right: 15px;
    padding: 0.3em 0.6em;
    counter-increment: popcount;
    content: counter(popcount);
    font-size: 16px;
    background: #F59423;
    color: #ffffff;
    position: relative;
    font-weight: bold;
    font-family: georgia;
    float: left;
    border: 2px solid #dddddd;
    box-shadow: 1px 2px 9px #666666;
    border-radius:15px; }

    .popular-posts ul li {
    border-bottom: 1px dashed #dddddd;
    }

    .popular-posts ul li:hover {
    border-bottom: 1px dashed #696969;
    }

    .popular-posts ul li a {
    text-decoration:none; color:#5A5F63;
    }


    .popular-posts ul li a:hover {
    text-decoration:none;
    }


Langkah 7:
Tukar Kode background #F59423; pada kode warna yang anda mahukan
Tukar Kode #ffffff warna tulisan mengikut warna yang anda mahukan.

Langkah 8:
Klik Preview Tenmplate >> Jika tidak ada masalah Klik Save Template dan lihat Hasilnya
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 
banner

Delivered by FeedBurner