6 Widget Popular Post Keren Warna Warni - Warna menjadi salah satu daya tarik visual, dengan mengkombinasikan beberapa warna menciptakan tampilan baik itu benda ataupun gambar menjadi lebih indah.
Salah satunya pengkominasian warna tersebut ada pada widget Populer post, ke akselerasian warna menciptakan tampilanya menjadi lebih indah, apa lagi kalau kau padukan dengan warna template kau yang pastinya akan lebih hidup.
Terkait :
Munculnya widget popular posts warna warni ini mungkin terinspirasi dari pelangi, lihat saja kalau dikala hujan rintik-rintik dan hujan tersebut terkena sinar matahari maka akan munculah pelangi dengan banyak sekali warna dengan keindahannya.
Tidak harus menunggu hujan turun terkena sinar matahari untuk melihat pelangi, kamupun dapat melihatnya cukup di template kau dengan memasang salah satu widget popular posts warna warni di bawah ini. Warna warni pada widget ini tercipta dari properti CSS yang dapat kau atur warnanya sesuai dengan cita-cita kamu.
1. Pertama anda login keakun Blogger
2. Klik Layout/Tata letak
3. Add Gatget
4. Pilih Entri populer
Note :
Populer Posts Warna-warni 1
Selanjutnya, silahkan pilih Template, kemudian klik Edit HTML, kemudian kau cari kode
]]></b:skin> , kemudian copy arahan dibawah ini dan pastekan sempurna diatasnya.
Kemudian kau cari arahan </body>, kau cari arahan di bawah ini dan pastekan diatasnya.
Hasilnya :
Populer Posts Warna-warni 2
Selanjutnya, silahkan pilih Template, kemudian klik Edit HTML, kemudian kau cari kode
]]></b:skin> , kemudian copy arahan dibawah ini dan pastekan sempurna diatasnya.
Hasilnya :
Populer Posts Warna-warni 3
Selanjutnya, silahkan pilih Template, kemudian klik Edit HTML, kemudian kau cari kode
]]></b:skin> , kemudian copy arahan dibawah ini dan pastekan sempurna diatasnya.
Hasilnya :
Hasilnya :
Hasilnya :
Populer Posts Warna-warni 6
Selanjutnya, silahkan pilih Template, kemudian klik Edit HTML, kemudian kau cari kode
]]></b:skin> , kemudian copy arahan dibawah ini dan pastekan sempurna diatasnya.
Kemudian kau cari arahan </body>, kau cari arahan di bawah ini dan pastekan diatasnya.
Hasilnya :
Tahap selanjutnya, simpan template.
Penampilan widgetnya anggun dan indah bukan? Monggo dipilih mana yang kau suka. Sumber http://www.websiteedukasi.com/
Salah satunya pengkominasian warna tersebut ada pada widget Populer post, ke akselerasian warna menciptakan tampilanya menjadi lebih indah, apa lagi kalau kau padukan dengan warna template kau yang pastinya akan lebih hidup.
Terkait :
- 2 Cara Membuat Popular Post Gambar Keren dan Elegan
- 3 Widget Popular Post dengan Satu Gambar
- 4 Cara Membuat Popular Post Keren di Blog
Munculnya widget popular posts warna warni ini mungkin terinspirasi dari pelangi, lihat saja kalau dikala hujan rintik-rintik dan hujan tersebut terkena sinar matahari maka akan munculah pelangi dengan banyak sekali warna dengan keindahannya.
Tidak harus menunggu hujan turun terkena sinar matahari untuk melihat pelangi, kamupun dapat melihatnya cukup di template kau dengan memasang salah satu widget popular posts warna warni di bawah ini. Warna warni pada widget ini tercipta dari properti CSS yang dapat kau atur warnanya sesuai dengan cita-cita kamu.
5 Style Widget Popular Posts Warna-warni
1. Pertama anda login keakun Blogger
2. Klik Layout/Tata letak
3. Add Gatget
4. Pilih Entri populer
- Untuk menampilkan gambar anda beri tanda ceklis image Thumbnail
- Jika anda ingin menampilkan beri ceklis juga pada cuplikan, disini saya hanya memakai image tanpa mengunakan cuplikan.
Langkah Penerapan CSS
Populer Posts Warna-warni 1
Selanjutnya, silahkan pilih Template, kemudian klik Edit HTML, kemudian kau cari kode
]]></b:skin> , kemudian copy arahan dibawah ini dan pastekan sempurna diatasnya.
/* Popular Posts warna warni1 */
.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-ti
Kemudian kau cari arahan </body>, kau cari arahan di bawah ini dan pastekan diatasnya.
<script type='text/javascript'>
// Popular Post Thumb
$(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>
Hasilnya :
Populer Posts Warna-warni 2
Selanjutnya, silahkan pilih Template, kemudian klik Edit HTML, kemudian kau cari kode
]]></b:skin> , kemudian copy arahan dibawah ini dan pastekan sempurna 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}
Hasilnya :
Populer Posts Warna-warni 3
Selanjutnya, silahkan pilih Template, kemudian klik Edit HTML, kemudian kau cari kode
]]></b:skin> , kemudian copy arahan dibawah ini dan pastekan sempurna 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}
Hasilnya :
Populer Posts Warna-warni 4
Selanjutnya, silahkan pilih Template, kemudian klik Edit HTML, kemudian kau cari kode
]]></b:skin> , kemudian copy arahan dibawah ini dan pastekan sempurna diatasnya.
Selanjutnya, silahkan pilih Template, kemudian klik Edit HTML, kemudian kau cari kode
]]></b:skin> , kemudian copy arahan dibawah ini dan pastekan sempurna 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 "Arial Narrow",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%}
Hasilnya :
Populer Posts Warna-warni 5
Selanjutnya, silahkan pilih Template, kemudian klik Edit HTML, kemudian kau cari kode
]]></b:skin> , kemudian copy arahan dibawah ini dan pastekan sempurna diatasnya.
Selanjutnya, silahkan pilih Template, kemudian klik Edit HTML, kemudian kau cari kode
]]></b:skin> , kemudian copy arahan dibawah ini dan pastekan sempurna 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}
Hasilnya :
Populer Posts Warna-warni 6
Selanjutnya, silahkan pilih Template, kemudian klik Edit HTML, kemudian kau cari kode
]]></b:skin> , kemudian copy arahan dibawah ini dan pastekan sempurna 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 ' Oswald' ,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 " Times New Roman" ,Times,FreeSerif,serif; padding-right:5px; }
.sidebar .PopularPosts .widget-content ul li { padding:0 5px 0 0 !important; }
Kemudian kau cari arahan </body>, kau cari arahan di bawah ini dan pastekan diatasnya.
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$('.popular-posts img').attr('src', function(e, t) {
return t.replace('/s72-c/', '/s350-c/')
});
$('.popular-posts ul li .item-snippet').each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(' ');
if(j>10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
$('.popular-posts ul li .item-content a').each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(' ');
if(j>=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
</script>
Hasilnya :
Tahap selanjutnya, simpan template.
Penampilan widgetnya anggun dan indah bukan? Monggo dipilih mana yang kau suka. Sumber http://www.websiteedukasi.com/
