Populare Posts Blogger Gadget Novel Style

Popular Posts Gadget of Blogger has a specific fixed agency that isn't changed. Here nosotros volition furnish a novel agency for this widget. You tin edit it easily past times yourself if you lot convey basic data inwards HTML, CSS as well as JAVA.

Popular Posts Style 1 - Live Demo

Step 1: the CSS code
Copy the next css code as well as glue it earlier </head> tag

 <style type='text/css'> .popular-posts ul {   list-style: none;   padding: 0; } .popular-posts ul li {   float: left;   width: 150px;   height: 150px;   padding: 10px !important;   overflow: hidden;   box-sizing: border-box;   position: relative; } .popular-posts .item-thumbnail {   margin: 0;   background-color: #000; } .popular-posts img {   height: 100%;   width: 100%;   box-sizing: border-box;   padding:0;   -webkit-transition: all 0.5s repose 0s;   -moz-transition: all 0.5s repose 0s;   -ms-transition: all 0.5s repose 0s;   -o-transition: all 0.5s repose 0s;   transition: all 0.5s repose 0s; } .popular-posts .item-content:hover img, .popular-posts .item-thumbnail-only:hover img {   -webkit-transform: scale(1.2);   -moz-transform: scale(1.2);   -ms-transform: scale(1.2);   -o-transform: scale(1.2);   transform: scale(1.2);   opacity: 0.5; } .popular-posts .item-title a {   color: #fff;   position: absolute;   text-align: center;   left: 12px;   right: 12px;   bottom: 40px;   opacity: 0;   visibility: hidden;   -webkit-transition: all 0.5s repose 0s;   -moz-transition: all 0.5s repose 0s;   -ms-transition: all 0.5s repose 0s;   -o-transition: all 0.5s repose 0s;   transition: all 0.5s repose 0s; } .popular-posts .item-content:hover .item-title a, .popular-posts .item-thumbnail-only:hover .item-title a {   opacity: 1;   visibility: visible; } .popular-posts .item-snippet {   display: none; } </style>

Step 2: the Java code
Copy the next coffee code as well as glue it earlier </body> tag

 <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script> <script type='text/javascript'>   $('.popular-posts .item-snippet').remove();   $('.popular-posts img').attr('src', function(e, t) {     render t.replace('/s72-c/', '/s200-c/')   }); </script>

Popular Posts Style ii - Live Demo

Step 1: the CSS code
Copy the next css code as well as glue it earlier </head> tag

 <style type='text/css'> .popular-posts ul {   list-style: none;   padding: 0; } .popular-posts ul li {   width: 100%;   height: 100%;   padding: 10px !important;   overflow: hidden;   box-sizing: border-box;   position: relative; } .popular-posts .item-thumbnail {   margin: 0;   background-color: #000;   overflow: hidden; } .popular-posts img {   height: 100%;   width: 100%;   box-sizing: border-box;   padding:0;   -webkit-transition: all 0.5s repose 0s;   -moz-transition: all 0.5s repose 0s;   -ms-transition: all 0.5s repose 0s;   -o-transition: all 0.5s repose 0s;   transition: all 0.5s repose 0s; } .popular-posts .item-content:hover img, .popular-posts .item-thumbnail-only:hover img {   -webkit-transform: scale(1.2);   -moz-transform: scale(1.2);   -ms-transform: scale(1.2);   -o-transform: scale(1.2);   transform: scale(1.2);   opacity: 0.5; } .popular-posts .item-title {   padding: 10px 0px;   display: inline-block; } </style>

Step 2: the Java code
Copy the next coffee code as well as glue it earlier </body> tag

 <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script> <script type='text/javascript'>   $('.popular-posts img').attr('src', function(e, t) {     render 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(/[?,!\.-:;]*$/,' ...'));   }); </script>