Create Custom Rotating Popular Posts Images Widget In Blogger

Omg, it’s been FORRREVER since I last wrote a post regarding blogging tools and design. I should have known I was onto something when I shared the 5 Ways Bloggers Can Make Money. That post was pretty popular and I’ve had a few bloggers find great resource in it.

I recently updated my blog design again as many of you may have noticed. I get bored with my own blog look pretty often lol. I’ve gotten a few compliments on how my popular posts are set up and figured I’d share with the blogsphere how I achieved the customized version of my popular posts widget.

For starters, let’s make sure we have the obvious. You want to have your “popular posts” widget already visible on your blog. If you’re unsure, just go to you Blogger dashboard and hit “Layout”. In Layout, select “Add Widget” in your sidebar and scroll to select “Popular Posts”. Be sure to have both check boxes select so that an image thumbnail and small text snippet appear. You can choose to show how ever many posts you please.

Next, you need to add CSS code to your template. Don’t be scared. ALWAYS back up your template before making changes to it. Do so by selecting “Backup/Restore” in the upper right corner of your dashboard when you select “Template”. When done, click on “Edit Template”.

Now we have to search for a specific tag. To do this quickly, we can use quick commands. For Mac Users, hit CMD+F and for PC Users, hit CTRL+F within the template. You’ll see a search bar pop up to the right corner. Type in the “b skin” tag highlighted and place the code you see blow right above the tag you searched.

/* Popular Posts Widget */<br /> .PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; } <br /> .PopularPosts .item-title { position: relative; } <br /> .PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }<br /> .item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-family: Impact; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; } <br /> .item-snippet { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; left: 12%; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; }<br /> .item-content:hover img {transform: rotate(10deg) scale(1.2);}<br /> .item-content { position: relative; }

NOTE: Remove any previous CSS for popular posts if you have it. Do not take the shortcut by pasting this code via template designer using the ‘Add CSS” field. That could result in a combination of both codes.

Since popular posts don’t normally have a need for this, it’s needed for this particular customization so we’re going to add some Javascript to your template. This will allow the images to resize and get all fancier. Go back to “EDit Template” and within it search for the closing “body” tag highlighted. Place the code right above that tag.

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/> <script type='text/javascript'> $(document).ready(function() {$('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});}); </script><br /> <center><br /> <script type='text/javascript'> //<![CDATA[ // Popular Posts customization by AllBloggerTricks.com // Trim Code by MS-potilas 2012 $('.popular-posts ul li .item-snippet').each(function(){ var txt=$(this).text().substr(0,120); var j=txt.lastIndexOf(' '); if(j>10) $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...')); }); //]]> </script>

...and BOOM, you have a fancy popular posts widget that makes your images rotate a bit. You like? If you want to further customize the colors of the fancy widgets, you may do so. Feel free to leave your comments below to tell me how you love this feature on your blog!

What else would you like to learn how to DIY within Blogger?