Grid Layout For the Popular Posts Widget

Popular Posts Widget kini dapat kita modifikasi hanya dengan menggunakan CSS saja sehingga tampilannya akan lebih menarik. Ingat, dengan postingan saya tentang Putar Gambar dengan CSS3 tanpa Javascript? mudah2an masih ingat. klo ingat efeknya kan sama dengan postingan tersebut. ketika cursor mendekati image maka akan ada efek yang muncul. Berikut screen shot dari widget ini

Trus bagaimana cara memasangnya? ikuti saja langkah dibawah ini! 1. Masuk ke layout >> tambahkan sebuah gadget >> pilih Popular post.

2. Hilangkan tanda di kotak snippet

3. sekarang masuk ke Template/Design > Edit HTML. jangan klik kotak Expand Widget Templates. lalu cari teks PopularPosts1 seperti kode di bawah ini <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/> 4. Setelah ketemu, gantikan kode tersebut dengan kode di bawah ini <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == "false"'> <b:if cond='data:showSnippets == "false"'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == "false"'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' src='http://www.prismestate.com/images/noimages.png' expr:width='data:thumbnailSize'/> </b:if> </a> </div> </div> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget> 5. setelah itu pindahkan kode di bawah ini tepat di atas ]]></b:skin> .popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;} .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);} 6. Lalu simpan template dan lihat hasilnya.

Baca Selengkapnya →

Menghilangkan Icon Tang/Quick Edit

Atas pertanyaan Antonius_Zevani (salah satu pengunjung blog ini) mengenai cara menghilangkan icon obeng pada template blogspot maka saya buatkan saja Tutorialnya, siapa tahu saja teman teman yang lain ada yang belum tahu. Bagi yang belum tahu saya kasih sedikit penjelasan agar lebih paham, begini nih teman-teman, jika kita sedang mengedit template dan melihat hasilnya maka pada sudut-sudut element akan terlihat icon bergambar obeng dan tang. berikut contoh screenshotnya :

Icon tersebut di sebut juga dengan icon Quick Edit atau dengan kata lain untuk mengedit secara cepat. Fungsinya jika kita ingin melakukan editing terhadap elemen tersebut tinggal klik saja icon nya dan kita bisa langsung mengeditnya. Icon tersebut sebenarnya hanya bisa di lihat apabila kita sedang login ke blogger saja, sedangkan pengunjung yang lain tidak bisa melihat icon tersebut.

Nah bagi kamu yang tidak suka atas kehadiran Icon Tang/Quick Edit pada template blogspot kamu bisa menghapusnya, bagamana caranya? Mudah tinggal ikuti saja cara di bawah ini.

1. Seperti biasa kamu login terlebih dahulu ke blogger
2. masuk ke Rancangan >> Edit HTML
   
   
   
   
   
   
   
   
3. cari kode ]]></b:skin> lalu tambah kode CSS di bawah ini
   
   .quickedit{
   display:none;
   }
   
   
   
   
   
   
4. Setelah itu klik tombol simpan Template dan lihat hasilnya

Baca Selengkapnya →