• Sitemap
  • About Me
  • Contact Me
  • Privacy Policy
  • Blog Tools ▼
    • Kode Warna
    • Parse HTML
    • Check Pagerank
    • Check Speed Blog
  • Mobile
Ghiyats Blogs
  • Home
  • Blogger
  • Widget
  • SEO
  • Template
  • CSS
  • Menu Bar
  • JQuery
Home » CSS » Tutorial Blogger » Widget » Membuat Popular Posts Dengan Efek Geser di Blog

Friday, November 1, 2013

Membuat Popular Posts Dengan Efek Geser di Blog

Membuat Popular Posts Dengan Efek Geser di Blog
Membuat Popular Posts Dengan Efek Geser di Blog | Widget Popular Posts bisa membantu para pengunjung untuk mengetahui artikel artikel apa yang banyak di kunjungin blog kita, Banyak sekali Popular Posts dengan aneka bentuk yang berbeda beda. 

Tapi, Popular posts yang akan saya bagikan ini, Memiliki keunikan, Widget  di sertakan gambar artikel dan memiliki efek geser, kalau kursor mengarah ke dalam widget ini, dan ke judul artikel popular posts, secara otomatis akan ada penjelasan singkat tentang artikel tersebut.

Artikel dan tutorial nya cara membuatnya seperti di bawah ini :

  • Login ke Blogger.com
  • Setekah itu, klik Menu ''Template''
  • Klik ''Edit HTML''
  • Cari kode ]]></b:skin Kalau sudah ketemu masukan kode dibawah ini, Sebelum kode ]]></b:skin
/* Popular Post  */
.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%}
/* Popular Post */
  • Setelah itu, klik SIMPAN

Demikianlah artikel ini, Semoga artikel yang saya bagikan bermanfaat dan mudah di pratekkan,Silakan Berkomentar di kolom komentar dibawah ini,Terima Kasih..

Via : All Blogger Tricks
Unknown Waktu 15:27

4 komentar untuk "Membuat Popular Posts Dengan Efek Geser di Blog"

  1. AnonymousNovember 5, 2013 at 2:41 AM

    sipp ueyy widgetnya mantap banget mas.. tapi kalo mau ganti biar gambarnya biar bulet2 caranya gimana mas :) maklum masih newbie hehe

    ReplyDelete
    Replies
    1. UnknownNovember 5, 2013 at 11:00 AM

      tenang, mas akan saya bagikan tutorial yang mas inginkan, tunggu aja ya..

      Delete
      Replies
        Reply
    2. PotretpediaNovember 8, 2013 at 12:56 PM

      tinggal kasih border radius aja mas beres kan.. :) dari pada share ulang

      Delete
      Replies
        Reply
    3. UnknownNovember 8, 2013 at 3:09 PM

      Ok mas

      Delete
      Replies
        Reply
    4. Reply
Add comment
Load more...

Silakan Tinggalkan Komentar Di Blog Ini
Kami sangat menghargai atas pertanyaan dan komentar sobat, Di harapkan Berkomentar dengan sopan dan tidak menyingung orang lain, Dan tidak mengunakan Link aktif karena akan Terhapus.
Terima Kasih

‹
›
Home
View web version
Find Us :
Powered by Blogger.
Copyright 2013 Ghiyats Blogs - All Rights Reserved
Template by Mas Sugeng | Blogger