Salah satunya pengkominasian warna tersebut ada pada widget Populer post, ke akselerasian warna membuat tampilanya menjadi lebih indah, apa lagi jika kamu padukan dengan warna template kamu 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 jika saat hujan rintik-rintik dan hujan tersebut terkena sinar matahari maka akan munculah pelangi dengan berbagai warna dengan keindahannya.
Tidak harus menunggu hujan turun terkena sinar matahari untuk melihat pelangi, kamupun bisa melihatnya cukup di template kamu dengan memasang salah satu widget popular posts warna warni di bawah ini. Warna warni pada widget ini tercipta dari properti CSS yang bisa kamu atur warnanya sesuai dengan keinginan 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 menggunakan image tanpa mengunakan cuplikan.
Langkah Penerapan CSS
Populer Posts Warna-warni 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 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 kamu cari kode </body>, kamu cari kode 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, 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}
Hasilnya :
Populer Posts Warna-warni 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}
Hasilnya :
Populer Posts Warna-warni 4
Selanjutnya, silahkan pilih Template, lalu klik Edit HTML, kemudian kamu cari kode
]]></b:skin> , lalu copy kode dibawah ini dan pastekan tepat diatasnya.
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 "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, lalu klik Edit HTML, kemudian kamu cari kode
]]></b:skin> , lalu copy kode dibawah ini dan pastekan tepat diatasnya.
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}
Hasilnya :
Populer Posts Warna-warni 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 ' 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 kamu cari kode </body>, 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'>
$('.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 cantik dan indah bukan? Monggo dipilih mana yang kamu suka.
No comments:
Post a Comment