Elegant Popular Posts
Elegant Popular Posts merupakan widget Popular Posts yang indah untuk blog.
Demo widget Elegant Popular Posts dapat sobat lihat pada blog 1 lagi.
Tutorial Membuat Widget Elegant Popular Posts
Buka dasboard blog ▬►Template ▬►Edit HTML
Kode CSS berikut diletakan di atas </head> template blog sobat
Cari (CTRL+F) Kode ]></b:skin> masukan kode CSS berikut tepats di atas ]]></b:skin> template sobat
CSS Elegant Widget Popular Posts
/* Popular Posts Widget customized by AllBloggerTricks.com */
.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; }
Lalu cari (CRTL+F) kode </body> letkan kode berikut tepat di atas ataupun dibawah kode </body> tsb.
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {$('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});});
</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>
URL jquery dapat dihapus jika dalam template blog sobat sudah terdapat url jquery yang sama.
dan terakhir simpan template.
Ditulis Oleh : Robby Armansyah
Anda baru saja membaca artikel dengan judul Elegant Popular Posts Widget. Di tulis oleh Robby Armansyah. Hak cipta di lindungi DMCA dan UUDURL laman ini.
1 comments:
@@,
Show Konversi KodeHide Konversi KodeShow EmoticonHide Emoticon