Elegant Popular Posts Widget

Elegant Popular Posts Widget

Posted by Robi Armansyah

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() {$(&#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>

URL jquery dapat dihapus jika dalam template blog sobat sudah terdapat url jquery yang sama.
dan terakhir simpan template.

Ditulis Oleh : Robby Armansyah

DMCA.com Protection StatusAnda baru saja membaca artikel dengan judul Elegant Popular Posts Widget. Di tulis oleh Robby Armansyah. Hak cipta di lindungi DMCA dan UUD
URL laman ini.
✚

1 komentar:

Subscribe to:Post Comments (Atom)