Membuat Widget Popular Posts Elegant dengan CSS

Halo, apa kabar semua ? saya harus semuanya dalam keadaan baik ! Pada kesempatan hari akan saya bagikan sebuah widget keren Yaitu widget popular posts berbeda dengan popular posts yang lainnya, Popular posts kali ini lebih elegan dan cantik.

Popular posts kali ini memiliki bentuk yang cantik dengan gambar, judul dan rinkasan dari artikel tersebut, Widget ini menggunakan css yang membuat widget ini menjadi lebih keren, langsung saja kalau sobat semua mau coba, ini dia tutorialnya 

Pertama : Memasukan kode CSS

• Pertama login ke blogger
• pergi ke menu Template
• Klik Edit HTML
• Setelah itu, cari kode ]]><b:skin setelah ketemu masukan kode di bawah ini di atas kode tadi

/* Popular Posts Widget */


.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; }


.PopularPosts .item-title { position: relative; }


.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }


.item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-family: Impact; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; }


.item-snippet { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; left: 12%; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; }


.item-content:hover img {transform: rotate(10deg) scale(1.2);}


.item-content { position: relative; }

Kedua : Memasukan kode js

• Masih di Edit html, setelah itu cari kode </body> setelah ketemu masukan kode dibawah ini di atas kode tersebut

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
</script>
<script type='text/javascript'>
//<![CDATA[
// Popular Posts customization by AllBloggerTricks.com
// Trim Code by MS-potilas 2012
$('.popular-posts ul li .item-snippet').each(function(){
var txt=$(this).text().substr(0,120);
var j=txt.lastIndexOf(' ');
if(j>10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
//]]>
</script>

• Catatan : Kode di atas, Yang berwarna merah itu , kalau seandainya kalau di template anda sudah memiliki kode jquery, silakan kamu hapus kode yang berwarna merah di atas.
• Setelah selesai Klik Simpan

Demikianlah artikel ini, semoga artikel yang baru saya bagikan ini bermanfaat dan berguna untuk anda, Silakan beri pendapat tentang artikel ini, atau kalau sobat punya masalah tentang artikel silakan, komentar di bawah ini, Terima Kasih..

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit