Enlarging Your Popular Posts Gadget

When I came to redesigning this blog, I wanted to prettify, if you like, my popular posts gadget. I came across a few tutorials online, but only Holly, from Bloomin Rouge, had the answer I was looking for. I thought I would share the same tutorial for you, but add my own CSS code so it looks like my popular posts gadget in the sidebar.

First of all, you need to add the popular posts gadget to your sidebar, which you can do by heading to your dashboard and clicking 'Layout', 'Add a Gadget', 'Popular Posts'. Make sure snippet is unchecked and decide how many posts you want displayed. At the moment, I have 5 posts as this is a good selection of posts.

Next, go to your dashboard and click on 'Template' and then 'Edit HTML'. Then, click CTRL + F, and type in the searchbar </head>. Just above this tagline add:

<style type='text/css'>
      .PopularPosts .item-thumbnail a {
        clip: auto;
        display: block;
        height: 180px;
        overflow: hidden;
        width: 240px;
        margin-left: -8px;
      }
      .PopularPosts .item-thumbnail img {
        position: relative;
        top: -30px;
        transition:all .2s linear;
        -o-transition:all .5s linear;
        -moz-transition:all .2s linear;
        -webkit-transition:all .2s linear;
      }
      .PopularPosts .item-thumbnail img:hover{
        opacity:.6;
        filter:alpha(opacity=60)
      }
      .PopularPosts .widget-content ul li {
        color: #555555;
      }
      .PopularPosts .item-title {
        clear:both;
        font: 10px cantarell;
        color: #222222;
        text-transform: uppercase;
        text-align: center;
        margin-right: 10px;
      }
      .PopularPosts .item-snippet {
        display: none;
      }
      .widget .widget-item-control a img {
        height: 18px;
        width: 18px;
      }
    </style>

Now still in the template editor, type in the searchbar </body>. Again, just above it you need to add this following code:


<script type='text/javascript'>
      function changeThumbSize(id,size){
        var blogGadget = document.getElementById(id);
        var replacement = blogGadget.innerHTML;
        blogGadget.innerHTML = replacement.replace(/s72-c/g,&quot;s&quot;+size+&quot;-c&quot;);
        var thumbnails = blogGadget.getElementsByTagName(&quot;img&quot;);
        for(var i=0;i&lt;thumbnails.length;i++){ 
          thumbnails[i].width = size; 
          thumbnails[i].height = size; 
        }
      }
      changeThumbSize(&quot;PopularPosts1&quot;,240);                   

    </script>

Click 'Preview Template' to check it is how you like it, and then click 'Save Template'.

Do you like your new popular posts widget?