Mempercantik Tampilan Entri Popular (New Update)

Contoh : Tampilan Entri Populer

Selamat malam hadir kembali dengan senyuman yang memberi semangat untuk berbagi tips and trik blog, kali ini saya akan memberikan suatu ilmu atau suatu pembelajaran yang baru mengenai Entri Populer, Apa arti Entri Populer itu sendiri Entri Populer adalah secara bahasa Kata Poko atau Kata Kepala, tapi bukan itu yang dimaksud saya, Entri Populer itu tmapilan artikel yang paling terpopler atau artikel yang paling banyak di baca oleh sahabat blogger atau bisa juga dibaca oleh Mbah Google seperti Contoh : Klik Disini

Setelah anda membaca Entri Populer atau Artikel Yang Paling Banyak Dibaca Google. Sekarang kita masuk ke tahap Tips and Trik Cara Mempercantik Tampilan Entri Populer :

Langkah 1

Terlebih dahulu silahkan anda masuk ke Akun Blog anda

Langkah 2

Masuk ke Menu Rancangan setelah itu Edit HTML

Langkah 3

Jangan lupa untuk mencentang Expand Template Widget, menjaga takut ada kejadian galat didalam kode HTML tersebut.

Langkah 4

Carilah kode ]]></b:skin>

Langkah 5

Masukkan kode dibawah ini tepat dibawah kode ]]></b:skin>

<style type="text/css">
        .PopularPosts .item-title{display:none}
        .PopularPosts ul li {
        border-radius:50px 0px 0px 50px;
        float: left;list-style: none outside none;margin: 1px !important;padding: 1px !important;
        border: 1px solid #444;
        overflow: hidden;
        box-shadow: 0px 0px 1px #333;
            font-style: italic;
            width: 100%;
            height:60px;
        border-radius:35px 5px 5px 35px;
        }
        .PopularPosts ul li:hover{
        background: -moz-linear-gradient(top, #FFFFFF 1%, #5c5c5c 50%);
        overflow: hidden;
            color: #414141;
            width: 100%;
            height:60px;
        border: 1px solid #ffffff;
        box-shadow: 0px 0px 2px #ffffff;
        }
        .PopularPosts ul li img {
        padding:1px  ;
        margin:1px;
        margin-top:3px;
        border-radius:35px 35px 35px 35px;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        transition: all 0.3s ease;
        border: 1px solid #333;
        height: 50px;width:50px;
        overflow: hidden;
        }
        .PopularPosts ul li img:hover {
        border:1px solid #ffffff;
        border-radius:25px 25px 25px 25px;
        background: -moz-linear-gradient(top, #FFFFFF 1%, #5c5c5c 50%);
        box-shadow: 0px 0px 10px #ffffff;
        }
    </style>

Langkah 6

Setelah anda memasukkan kode tersebut silahkan simpan template anda

Langkah 7

Aktifkan Widget Entri Populer anda dan lihat hasilnya

Catatan Akhir :

Jika anda ingin menampilan Title blog anda harus merubah kode .PopularPosts .item-title{display:none} Menjadi seprti ini .PopularPosts .item-title{display:yes}

Alhamdulillah sudah selesai postingan kali ini semoga bermamfaat buat sahabat blogger semuanya. Thank's you atas kunjungan dan komentarnya.