Ads Kiri Khusus Desktop

Cara Memasang Widget Popular Post Pada Blog valid amp

Generating Link...

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>
Maka akan tampak hasilnya seperti pada gambar dibawah

Tampilan Populer Posts Warna-warni Bagian 2

Selanjutnya, silahkan pilih Template, lalu klik Edit HTML,  kemudian kamu cari kode
]]></b:skin> , lalu copy kode dibawah ini dan pastekan tepat diatasnya.


/* Popular Post warna-warni2*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0}.PopularPosts ul{list-style:none;font-size:15px;color:#fff;margin:0 !important;width:100% !important;font-weight:bold}.PopularPosts ul li img{display:block;transition:all 400ms ease-in-out;width:60px;height:60px;float:left;margin:0 15px 0 0;border:4px solid rgba(0,0,0,0.2)}.PopularPosts ul li img:hover{border:4px solid rgba(0,0,0,0.5);transition:all 400ms ease-in-out}.PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px;height:70px;}.PopularPosts .item-title{text-overflow: ellipsis;overflow:hidden;height:64px}.PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-size:15px !important;color:inherit;text-decoration:none}.PopularPosts ul li:before{content:counter(num);display:block;position:absolute;font-size:35px !important;font-weight:700;color:rgba(0,0,0,0.2);top:40%;left:9px;}
.PopularPosts ul li{margin:0 !important;padding:10px 5px 10px 40px}
.PopularPosts ul li:nth-child(1){background-color:#5d93b2}.PopularPosts ul li:nth-child(2){background-color:#67b8b3}.PopularPosts ul li:nth-child(3){background-color:#67c27a}.PopularPosts ul li:nth-child(4){background-color:#ee9f7e}.PopularPosts ul li:nth-child(5){background-color:#ea6868}.PopularPosts ul li:nth-child(6){background-color:#b65757}.PopularPosts ul li:nth-child(7){background-color:#e9c462}.PopularPosts ul li:nth-child(8){background-color:#84d558}.PopularPosts ul li:nth-child(9){background-color:#4dd38c}.PopularPosts ul li:nth-child(10){background-color:#b44d7a}
Maka akan tampak hasilnya seperti pada gambar dibawah

Tampilan Populer Posts Warna-warni Bagian 3

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 warna warni3 */


.popularposts{ color:#fff; line-height:1.6; font-size:100%; border-radius:5px 5px 0 0; padding}


.popular-posts{line-height:1.6; font-size:100%; border-radius:0; color:#fff}


.popular-posts a{color:#fff}


.popular-posts a:hover{color:#fff}


.PopularPosts ul{list-style:none; margin:0; margin-left:-18px; padding:0; counter-reset:popcount}


.popular-posts ul li:before{list-style-type:none;margin-top:10px;margin-right:15px;margin-left:5px; padding:0.3em 0.8em; counter-increment:popcount; content:counter(popcount); font-size:16px; color:#fff; position:relative; float:left; border:1px solid #fff;border-radius:100%}


.PopularPosts li{text-transform:uppercase; background:none; margin:0; padding:10px 18px; display:block; clear:both; overflow:hidden; list-

style:none; font:13.5px/140%;border-bottom:none}


.PopularPosts li:hover{background:#0FB9BB}


.PopularPosts li a{text-decoration:none}


#PopularPosts1 .widget-content{padding:0px 0 0 17px; margin-bottom:-2px}


.PopularPosts ul li{padding:3px 7px;border:none}


.PopularPosts ul li:nth-child(1){background-color:#F48067;margin-right:0}


.PopularPosts ul li:nth-child(2){background-color:#2ba6e1;margin-right:0}


.PopularPosts ul li:nth-child(3){background-color:#718397;margin-right:0}


.PopularPosts ul li:nth-child(4){background-color:#11b7b5;margin-right:0}


.PopularPosts ul li:nth-child(5){background-color:#d9ba71;margin-right:0}


.PopularPosts ul li:nth-child(6){background-color:#d9ba71;margin-right:0}


.PopularPosts ul li:nth-child(7){background-color:#2ba6e1;margin-right:0}


.PopularPosts ul li:nth-child(8){background-color:#718397;margin-right:0}


.PopularPosts ul li:nth-child(9){background-color:#11b7b5;margin-right:0}


.PopularPosts ul li:nth-child(10){background-color:#d9ba71;margin-right:0}
Maka akan tampak hasilnya seperti pada gambar dibawah

Tampilan Populer Posts Warna-warni Bagian 4

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 warna warni4 */


.PopularPosts ul,


.PopularPosts li,


.PopularPosts li img,


.PopularPosts li a,


.PopularPosts li a img { margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none;}


.PopularPosts ul {margin:.5em 0;list-style:none;font:normal normal 13px/1.4 &quot;Arial Narrow&quot;,Arial,Sans-Serif;color:black;counter-reset:num;}


.PopularPosts ul li img {display:block;margin:0 .5em 0 0;width:50px;height:50px;float:left;}


.PopularPosts ul li {background-color:#eee;margin:0 10% .4em 0;padding:.5em 1.5em .5em .5em;counter-increment:num;position:relative;}


.PopularPosts ul li:before,.PopularPosts ul li .item-title a {font-weight:bold;font-size:120%;color:inherit;text-decoration:none;}


.PopularPosts ul li:before {content:counter(num);display:block;position:absolute;background-color:black;color:white;width:30px;height:30px;line-height:30px;text-align:center;top:50%;right:-10px;margin-top:-15px; -webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;}


/* Set color and level */


.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:2%}


.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}


.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:2%}


.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:2%}


.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:2%}


.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:2%}


.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:2%}


.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:2%}


.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:2%}


.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:2%}
Maka akan tampak hasilnya seperti pada gambar dibawah

Tampilan Populer Posts Warna-warni Bagian 5

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 warna warni5 */


.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none}


.PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}


.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}


.PopularPosts ul li a{color:#fff!important}


.PopularPosts ul li a:hover{color:#2c3e50!important}


.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}


.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}


/* Custom Color */


.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}


.PopularPosts ul li:nth-child(2){background-color:#f39c12;}


.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}


.PopularPosts ul li:nth-child(4){background-color:#27ae60;}


.PopularPosts ul li:nth-child(5){background-color:#e67e22;}


.PopularPosts ul li:nth-child(6){background-color:#d35400;}


.PopularPosts ul li:nth-child(7){background-color:#3498db;}


.PopularPosts ul li:nth-child(8){background-color:#2980b9;}


.PopularPosts ul li:nth-child(9){background-color:#ea6153;}


.PopularPosts ul li:nth-child(10){background-color:#c0392b;}


.PopularPosts .item-thumbnail{margin:0 0 0 0}


.PopularPosts .item-snippet{font-size:11px}
Maka akan tampak hasilnya seperti pada gambar dibawah

Tampilan Populer Posts Warna-warni Bagian 6

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 warna warni6 */


.sidebar .PopularPosts ul { padding:0; margin:0; }


.sidebar .PopularPosts .item-thumbnail a { clip:auto; display:block; height:auto; overflow:hidden; }


.sidebar .PopularPosts .item-thumbnail { width:130px; height:130px; border-right:5px solid #fff; margin:0 10px 0 0 !important; position:relative; }


.sidebar .PopularPosts .item-thumbnail img { position:relative; height:100%; width:100%; object-fit:cover; }


.sidebar .PopularPosts ul li { float:left; margin-bottom:5px; max-height:130px; min-width:250px; overflow:hidden; }


.sidebar .PopularPosts ul li:first-child { background:#D9EDF7; }


.sidebar .PopularPosts ul li:first-child + li { background:#F2DEDE; }


.sidebar .PopularPosts ul li:first-child + li + li { background:#DFF0D8; }


.sidebar .PopularPosts ul li:first-child + li + li + li { background:#FFEEBC; }


.sidebar .PopularPosts ul li:first-child + li + li + li + li { background:#E0E0E0; }


.sidebar .PopularPosts .item-title { font:13px &#39; Oswald&#39; ,sans-serif; text-transform:uppercase; padding:10px 5px 10px; }


.sidebar .PopularPosts .item-title a { color:#000; text-decoration:none; }


.sidebar .PopularPosts .item-snippet { font:13px &quot; Times New Roman&quot; ,Times,FreeSerif,serif; padding-right:5px; }


.sidebar .PopularPosts .widget-content ul li { padding:0 5px 0 0 !important; }
Kemudian kamu cari kode , kamu cari kode di bawah ini dan pastekan diatasnya

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/s72-c/&#39;, &#39;/s350-c/&#39;)
});
$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
</script>
Maka akan tampak hasilnya seperti pada gambar dibawah

Sebenarnya masih banyak lagi style yang lainya, mulai dari yang menggunakan font awesome dan popular post yang bergerak ataupun berjalan tapi  mudah - mudahan dengan beberapa style popular post di atas mudah - mudahan saja ada yang sobat suka dan bisa sobat terapkanya pada blog sobat agar terlihat lebih cantik dan membuat pengunjung semakin betah untuk berlama - lama di blog sobat. Mungkin itu saa yang bisa saya sampaikan pada kesemptan kali ini, apabila ada masukan kritik pesan dan saran bisa sobat sampaikan pada kolom komentaar yang sudah admin siapkan guna membantu menyempurnakan artikel ini dan membantu blog ini agar lebih berkembang. Trimakasih dan semoga bermanfaat
  • What is Linku?

    safelinku is the security website link or shortener url, you can make your own short link on Linku.ml for free

  • What is Shortener url?

    As the name implies, shortlink or is a short link. Usually these shortlinks are provided by most advertising-based companies, such as Linku.ml and much more. Shortlink own point to shorten a link or url, be it a download link or url to a particular website. For what? of course for easy to remember. For example, I have a link "http: //site*.com/profile.php? HGgyawewihjassd", now I ask, are you easy to memorize the url? there is a once read already memorized and also there are many times read not memorized. Now I try to shorten the url into Linku.ml/iuYS which is shorter and easier to know even though it is a bit complicated, you can customize the shortened url Shortlink or url shortener is very easy to use by its users, because you do not spend a bit, even you who get money.

Ads Kanan Khusus Desktop