Contents
Features of Awesome Popular Posts Widget
* It can shows thumbnails with post titles.
* When mouse hover, an amazing image zooming effect shows.
* Post titles are shown on the images with transparent dark color.
* Show Counter box.
* No any blurry images.
* Customize as you want. ( colors, width, height )
* And it’s free of cost. ( See below image )
Add Popular Posts Widget into Your Blogger Blogs
Note That : If you installed any other popular post widget then first remove its code from the templates and then install this.
Step 1 : First login to your Blogger Account
Step 2 : Select your blog > Then Go Template > Click on Edit HTML
Step 3 : First Save your template backup and then edit HTML code.
Step 4 : Find this tag.
</body>
Step 5 : Just before this tag, paste the below code .
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <script type='text/javascript'>//<![CDATA[ $(document).ready(function() { var tbn = 150; $('#PopularPosts1').find('img').each(function(n, image){ var image = $(image); image.attr({src : image.attr('src').replace(/sBd{2,4}/,'s' + tbn)}); image.attr('width',tbn); image.attr('height',tbn); }); }); //]]></script>
Step 5 : After adding this, find using “CNTRL + F ” this piece of code.
]]></b:skin>
Step 6 : Copy below CSS Code and paste it just before it.
/***** Sidebar Popular Posts - www.techora.net *****/ .sidebar .popular-posts ul { counter-reset: popcount; margin: 0; padding: 0; } .sidebar .popular-posts ul li:first-child {} .sidebar .popular-posts ul li { font-family:'Oswald','Open Sans','Helvetica Neue',Arial,Tahoma,sans-serif; height: 130px; list-style: none !important; overflow: hidden; padding: 0 !important; position: relative; margin: 2px; border: 0; width: 48%; float: left; } .sidebar .PopularPosts .item-thumbnail {margin: 0; width: 100%;} .sidebar .PopularPosts ul li img { display: block; float: left; padding: 0; width: 100%; height: 130px; -webkit-transition-duration: 1.0s; /*Webkit: Animation duration*/ -moz-transition-duration: 1.0s; /*Mozilla Animation duration*/ -o-transition-duration: 1.0s; /*Opera Animation duration*/ transition:1.0s; } .sidebar .PopularPosts ul li img:hover { -webkit-transform:scale(1.06); /*Webkit: 0.5 times the original Image size*/ -moz-transform:scale(1.06); /*Mozilla 0.5 times the original Image size*/ -o-transform:scale(1.06); /*Opera 0.5 times the original Image size*/ transform:scale(1.06); overflow: hidden; } .sidebar .PopularPosts .item-title { bottom:0; left: 0; right: 0; padding-bottom: 0; position: absolute; z-index: 999; } .sidebar .PopularPosts .item-title a { background: rgba(32, 32, 32, 0.77); color: #FFFFFF; display: block; font-size: 12px; line-height: normal; padding: 5px 0px 2px 5px; text-transform: capitalize; transition: all .4s ease-in-out; } .sidebar .popular-posts ul li:hover .item-title a { color: rgba(255, 255, 255, 1); background: rgba(231, 76, 60, 0.88); text-decoration: none; } .sidebar .popular-posts ul li:before { background: rgba(255, 252, 8, 1); color: #000; content: counter(popcount, decimal); counter-increment: popcount; float: left; font-size: 14px; line-height: 20px; list-style-type: none; padding: 0px 8px 1px 1px; border-radius: 0px 0px 10px 0px; position: absolute; top: 0; z-index: 4; border: solid #FFF; border-width: 0px 2px 2px 0px; }
Step 7 : Now save you template and see out the result.
Change Setting from Layout Area in Blogger Blogs
Now everything is done, only one main step is behind, go to your Layout Area and click on popular posts widget and change its setting. Only change the setting as i display in the image below. Check the Image Thumbnail and un-check snippet option and then save your widget.
Hope you will like this widget , and if you have any question then please feel free to ask me in the comment section below. For more blogging tutorials , simply subscribe my newsletter’s in sidebar form, and get my new updates into your inbox.
Stay tuned for more updates!
nice information…but, what is the responsive design? Thanks
Thanks SL BLogger, for liking my article,Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries.Site is user and mobile friendly and it provide catchy optimal view and interactional experience. So always use Responsive designs for your websites or blogs. Thanks Again
Thanks SL BLogger, for liking my article,Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries.Site is user and mobile friendly and it provide catchy optimal view and interactional experience. So always use Responsive designs for your websites or blogs. Thanks Again
Comments are closed.