Kembali ke atas

Cara Membuat Widget Popular Post Responsive Dan Menarik


Cara Membuat Widget Popular Post Responsive Dan Menarik - Hallo sahabat sahabat netizen sekalian, Selamat datang kembali di Blog bang ariel, Selamat membaca artikel ini, Yang Di buat spesial untuk kalian semua.



Pada senja yang sunyi ini, Telah terpikir sebuah ide untuk membuat sebuah tutorial, Yang mungkin akan menjadi informasi yang bermanfaat sekali untuk kalian semua.

Disini saya akan mengajarkan kepada kalian memodifikasi widget untuk bagian popular post, Menjadi lebih responsive dan menarik tentunya, Dengan sedikit Penambahan Css.

Dijamin para pengunjung blog kalian menjadi betah berlama lama di blog kalian.
Bagaimana sih cara nya ?

Tidak perlu berlama lama lagi, Mari kita langsung menuju ke inti dari pembahasan nya.

Note : Jika di dalam template blog kalian sudah di pasang css popular post yang lain, Di harapkan untuk segera menghapus nya, Di takutkan akan terjadi bentrok dengan Css ini.

Langkah - Langkah


  1. Seperti biasa, Pertama - tama kita masuk ke akun blogger kita masing masing.
  2. selanjutnya pilih bagian template, Lalu pilih bagian edit html.
  3. Tambahkan Css di bawah ini tepat diatas kode ]]></b:skin> Atau </style>.
     CSS di sini 
    /* CSS Popular Post */
    .PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
    .PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:10;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
    .PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
    .PopularPosts .item-title a{color:rgba(255, 255, 255, 0.88);font-weight:700;font-size:100%;text-shadow:0 0 5px rgba(0,0,0,0)}
    .PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
    .PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
    .PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
    .PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
    .PopularPosts .item-snippet{display:none;}
    .PopularPosts ul li .item-content{position:relative;overflow:hidden;}
    .PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
    .PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;}
    .PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:11;transition:all .4s;}
    .PopularPosts .widget-content ul li:hover:before{right:-55px;}
    .PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}
    


  4. Selanjutnya , Silahkan kalian tambahkan Script Dibawah ini tepat di atas tag </body>
    <script type='text/javascript'>
    // Thumbnail Popular Post
    $(document).ready(function() {$('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});});
    //<![CDATA[
    // Custom Popular Post
    $(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
    //]]>
    </script>
    

  5. Selanjutnya Kalian Simpan & lihat lah hasilnya, Dengan mencoba untuk menanbahkan widget popular post tepat pada tempat yang kalian inginkan.
Dengan Di modifikasi nya Widget popular post menjadi Responsive dan keren, Tentunya akan menjadi daya tarik tersendiri untuk para pengunjung blog kalian semua.


Penutup

Demikianlah artikel ini bisa saya sampaikan kepada kalian semua, Semoga bisa bermanfaat buat kalian semua, Dan jangan lupa juga untuk selalu berkunjung Di blog saya ini, Cukup sekian dari saya.

Terima kasih.
Komentar Facebook
0 Komentar Blogger

0 Response to "Cara Membuat Widget Popular Post Responsive Dan Menarik"

Post a Comment

Silahkan Berkomentar Dengan Baik, Dilarang !
- Sara
- Provokasi
- Menggunakan Kata Kasar
- Spam
- Phissing
- Sebar Url
- Dan Lain Lain yang melanggar ketentuan Google.

Berkomentarlah Dengan Sopan Dan Santun,

Jika komentar kalian melanggar ketentuan blog bang ariel, Dalam Sekejap Komentar Anda Akan Saya Hapus.

Terimakasih.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel