6 Widget Popular Post Cool Colorful Colors into one visual appeal, combine some color to make look good it's an object or image to become more beautiful.
One of them pengkominasian color is there on the widget Popular post, to akselerasian color make tampilanya become more beautiful, what more if you combine with the color of the template you will certainly be more to life.
The appearance of the widget popular posts colorful this may be inspired from the rainbow, just see if when spatter and rain is exposed to sunlight then it will comes the rainbow with a variety of colors with its beauty.
Do not have to wait for the rain drops exposed to the sun to see the rainbow, you can see it quite in the template you to install one of the popular posts widgets colorful below. Colorful on the widget is created from the CSS properties that you can adjust the color according to your desire.
5 Style the Widget Popular Posts colorful
1. Your first login is charged to the account Blogger
2. Click Layout/layout
3. Add Gatget
4. Select the Entry popular
Note :
- To display your image mark check image Thumbnails
- If you want to show give check also to the snippet, here I am just using the image without using the snippet.
5. Then you save
Step the Application of CSS
Popular Posts colorful 1
Next, please select the Template and click Edit HTML, then you find the code
]]></b:skin> , then copy the code below and open right on top of them.
/* 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
Then you find the code </body>, you find the code below and open above.
<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>
The result :
Popular Posts colorful 2
Next, please select the Template and click Edit HTML, then you find the code
]]></b:skin> , then copy the code below and open right on top of them.
/* 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}
The result :
Popular Posts colorful 3
Next, please select the Template and click Edit HTML, then you find the code
]]></b:skin> , then copy the code below and open right on top of them.
/* 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}
The result :
Popular Posts colorful 4
Next, please select the Template and click Edit HTML, then you find the code
]]></b:skin> , then copy the code below and open right on top of them.
/* 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%}
The result :
Popular Posts colorful 5
Next, please select the Template and click Edit HTML, then you find the code
]]></b:skin> , then copy the code below and open right on top of them.
/* 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}
The result :
Popular Posts colorful 6
Next, please select the Template and click Edit HTML, then you find the code
]]></b:skin> , then copy the code below and open right on top of them.
/* 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; }
Then you find the code </body>, you find the code below and open above.
<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>
The result :
The next stage, save template.
Appearance widgetnya beautiful and beautiful isn't it? Monggo selected where you like.
Post A Comment: