How to add a stylish popular post widget into your blogger blog - Hello everyone, how are you doing today? As you guys already know that In my previous article I already shared with a colored popular post widget for your blog, (You can read that article here - Mouse hover colored popular post widget for blog) but as far as I know everyone want to make their blog dashing, so today I'm back with a new popular post widget. The best part of this widget it also comes with some cool effects, so today with the help of this article I'm going to show you how you can easily setup this popular post widget on your own blog without having any problem.
(Recommended - Before you add this widget on your blog, take a look of this widget by clicking on the below download link.)
Now if you're agree with this popular post widget and want to install it on your own blog, then follow the below simple steps.
How To Install Popular Post Widget?
First go to your blogger dashboard - Login
Now go to your "Template" section and then click on the "Edit Html" button.
Now find the below code by pressing "Ctrl + F" key together from your keyboard.
]]></b:skin>
After that, copy the below CSS code and paste it just before ]]><b:skin>.
/* Popular Post Style 1 */
#PopularPosts1 ul{padding:10px 0;margin-top:-15px;}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{text-decoration:none;font-weight:400;font-size:14px;color:#000;line-height:1.4em;transition:all ease-in-out .1s;}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#48d;}
.PopularPosts li:first-child .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;left:11px;color:#fff;background-color:rgba(172,22,172,.83);padding:10px;font-size:90%;line-height:normal;transition:.3s}
.PopularPosts li:hover:first-child .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0!important;padding:0 0 10px!important;line-height:1.3em!important;position:relative;border-bottom:1px solid #f1f1f1}
.PopularPosts li .item-snippet{display:none}
.PopularPosts li .item-thumbnail{width:85px;height:72px;margin:0 10px 0 0;overflow:hidden;float:left}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}
.PopularPosts li:first-child .item-title a{font-size:18px;line-height:1.3em;font-weight:700}
Now once again find the below tag (Code) with the help of search box.
</body>
After that, copy the below jQuery script and paste it just before </body>.
<script type='text/javascript'>
//<![CDATA[
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400);
//]]>
</script>
Now click on the orange save template button to apply the changes and then reload your blog and see the magic.
That's all! I hope you like this popular post widget! Stay tuned for more widgets! Thanks for reading @Prince.
0 Comment to "New Popular Post Widget For Blogger"
Post a Comment