Cara Memasang Widget Popular Post Pada Blog valid amp

Cara Memasang Widget Popular Post Pada Blog valid amp - Sebenarnya cara membuat popular post ini tidak terlalu sulit, kita hanya perlu memberi sedikit kode CSS Pada HTML Blog kita, dan fungsinya menurut saya untuk memberi tahu kepada pengunjung blog kita bahwasanya ada beberapa artikel yang ada di blog kita yang menjadi topik hangat sehingga banyak diminati oleh pengunjung. Jadi tidak heran lagi apabila sobat banyak melihat banyak blog ataupun wordpress diluaran sana yang menerapkan ini pada blognya

Memasang widget popular post agar blog terlihat keren

Mungkin ada beberapa widget popular post yang memang sudah terpasang otomatis pada sebagian template, namun tidak sedikit juga yang kurang puas dengan alasan yang bermacam - macam, atau bisa juga karna memang tampilanya yang kurang menarik atau standart. untuk itu disini saya akan mencoba memberikan beberapa tutorial cara pemasanganya beserta dengan tampilan style yang berbeda - beda agar sobat dapat dengan mudah memilih, mengatur dan mengedit tampilnya baik untuk warna, serta keresponsiveanya agar menjadi daya tarik visual, dan tentunya dengan memadukan warna template sobat agar terlihat jauh lebih hidup.

Cara Menambah widget Popular Post Pada Blog

Mungkin sobat sudah tidak sabar lagi untuk memasang widget ini pada blognya adi langsung saja yuk simak dan ikuti tutorial dibawah ini

1. Pertama anda login keakun Blogger

2. Klik Layout/Tata letak

3. Add Gatget

4. Pilih Entri populer

note :
Untuk menampilkan gambar anda beri tanda ceklis image Thumbnail
Jika anda ingin menampilkan beri ceklis juga pada cuplikan, disini saya hanya menggunakan image tanpa mengunakan cuplikan.

5. Lalu kamu simpan

Tampilan Populer Posts Warna-warni Bagian 1

Selanjutnya, silahkan pilih Template, lalu klik Edit HTML, kemudian kamu cari kode

]]></b:skin> , lalu copy kode dibawah ini dan pastekan tepat diatasnya.


/* Popular Posts */


.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:50;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);font-weight:700;font-size:120%;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:51;transition:all .4s;}


.PopularPosts .widget-content ul li:hover:before{right:-55px;}


.PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);}


.PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);}


.PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);}


.PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);}


.PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);}


.PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}


.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);}

Kemudian kamu cari kode , kamu cari kode di bawah ini dan pastekan diatasnya.


<script type='text/javascript'>
// Popular Post Thumb
$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
//<![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>