Modifikasi Popular Post Bag.1

Cuplikan Yang dilingkari merah akan muncul saat didekati cursor

E

ntri populer sering juga biasa kita sebut Popular Post,adalah postingan yang paling sering di klik/dibaca oleh pengunjung pada suatu website/ blog,banyak style yang bisa kita gunakan untuk merubah tampilan Popular Post itu sendiri,menjadi lebih keren sehingga membuat pengunjung blog berkeinginan untuk membuatnya juga,sperti halnya pada Popular Post Yang full blog design gunakan ,untuk melihat demonya silahkan sobat review sejenak kearah Popular Post di bagian Sidebar Yang Paling atas (kalau Belum dirubah) atau lihat screenshotnya di bagian kiri postingan ini.Buat sobat blogger yang kebetulan menemukan website sederhana saya ini dan kebetulan juga menemukan tutorial ini silahkan jika ingin mencoba Memodifikasi Popular Post sobat dengan contoh yang sudah saya tampilkan ,silahkan ikuti tutorialnya secara lengkap .

1. loggin ke blogger.com
2. Pilih tata letak == tambah gadget == Pilih widget Entri Popular /Popular Post atur seperti contoh pada gambar di bawah ini :
   

   

   Pengaturan Seperti yang dilingkari merah
3. Save Pengaturan ,Lalu kita menuju ke pengaturan template ,caranya gampang masih di dasboard  pilih Template == Edit Html ,gunakan (Ctrl+F) cari kode ]]></b:skin> lalu taruh kode css berikut tepat di atas nya :

.PopularPosts .widget-content ul li {
    padding: 0;
    position: relative;
}

.item-snippet {
    font-size: 90%;
    line-height: 1.2em;
    position: absolute;
    width: 230px;
    background-color: whiteSmoke;
    padding: 7px;
    border-top: 2px solid #FF0202;
    z-index: 2;
    left: 300px;
    top: 60%;
    height: 4.5em!important;
    visibility: hidden;
    opacity: 0;
    transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
    -moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
    -webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
    -o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
}

.PopularPosts .widget-content ul li:hover .item-snippet {
    left: 60px;
    opacity: 1;
    visibility: visible;
}

.PopularPosts img {
    width: 50px;
    height: 50px;
}

.PopularPosts .item-title {
    font-family: 'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;
    font-size: 125%;
}

Selamat Mencoba Dan juga tunggu kelanjutannya Modifikasi Popular Post Bag.2 tentunya dibagian postingan berikutnya jika ada yang kurang paham silahkan tanya langsung pada Admin di form komentar

Judul Artikel :Modifikasi Popular Post Bag.1

Terima Kasih Sobat sudah membaca Artikel saya Tentang Modifikasi Popular Post Bag.1 Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih