Modifikasi Popular Post Bag.1 - Hallo Sob Jody Blog, artikel kali ini berjudul Modifikasi Popular Post Bag.1, kami telah menuliskan yang kami tahu pada artikel ini, semoga bermanfaat.

Judul : Modifikasi Popular Post Bag.1
link : Modifikasi Popular Post Bag.1

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

Demikianlah Artikel Modifikasi Popular Post Bag.1

Sekian Modifikasi Popular Post Bag.1, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.

Anda sedang membaca artikel Modifikasi Popular Post Bag.1 dan artikel ini url permalinknya adalah http://caratutorialgratis.blogspot.com/2013/04/modifikasi-popular-post-bag1.html Semoga artikel ini bisa bermanfaat.

Tweet