Oct 15, 2015

Stylish Popular Posts Widget! Add to Blogger Sidebar

data:blog.title
If you are searching for Stylish Responsive Popular Posts Widget For Blogger Blog then you are on right platform because today we are going to share stylish looking responsive popular widget for blogger. This widget you can implement to any blogger widget easily. If you are using a third party blogger widget and if your theme is responsive then you can also implement this stylish looking popular posts widget on your blogger blog.

Stylish Popular Post Widget for Blogger Blog

Now days there are many blogs on same niches and topics but if we are using some stylish widgets on  our blog and a fast loading theme then our blog is going to way of success and this popular posts widget is made pure CSS Coding and it will not affect to your blog loading speed. Below we have shared some features of this widget with all of you. We have also attached a screenshot of this widget and you can guess how was look like this widget on your blog. Hope you will like this widget and once try it.


Features Of Popular Posts Widget:

  1. Made With Pure CSS Coding.
  2. Nice Hover effect.
  3. Stylish Numbering.
  4. No need to say but it is also too stylish. :-) lol

How To Add Popular Posts Widget To Blogger

  • Go To Blogger Dashboard.
  • Template >> Edit HTML.
  • Now search for ]]></b:skin> tag and paste below code just above of this tag.
/*****************************************
Sidebar Popular Posts By MBG
******************************************/
.sidebar-wrapper .popular-posts ul { counter-reset: popcount; margin: 0; padding: 0; } .sidebar-wrapper .popular-posts ul li:first-child {} .sidebar-wrapper .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.65%; float: left; } .sidebar-wrapper .PopularPosts .item-thumbnail {margin: 0; width: 100%;} .sidebar-wrapper .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-wrapper .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-wrapper .PopularPosts .item-title { bottom:0; left: 0; right: 0; padding-bottom: 0; position: absolute; z-index: 999; } .sidebar-wrapper .PopularPosts .item-title a { background: rgba(58, 57, 57, 1); color: #CFCFCF; display: block; font-size: 12px; line-height: normal; padding: 4px 0px 2px 5px; text-transform: capitalize; } .sidebar-wrapper .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-wrapper .popular-posts ul li:before { background: rgba(58, 57, 57, 1); color: #FFF; content: counter(popcount, decimal); counter-increment: popcount; float: left; font-size: 14px; text-align: center; line-height: 20px; list-style-type: none; padding: 3px 6px 2px 6px; height: 20px !important; width: 14px !important; border-radius: 20px; position: absolute; border: 2px solid #fff; top: 1px; left: 1px; z-index: 4; }
  • Now Save Template.
  • Now Go To Layout >> Add A Gadget.
  • Select Popular Posts From the list and done the setting as you want and click on save.
  • That's it.
  • You have successfully added nice looking popular posts widget to your blogger blog. Now open your blog and enjoy this widget.

Conclusion:

So above guide is about How To Add Popular Posts Widget To Blogger Blog. Hope by this guide you can easily add this widget to your blog. If anyhow problem persist after following all steps then drop a comment below. We will help you out of sure. Do Share.

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.