Saturday, 25 July 2015

How To Prettify 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? 

10 comments:

  1. Thank you so much for this tutorial! I've been wondering how to do this for ages. I will try it out tomorrow.

    ReplyDelete
  2. That's awesome - I'm definitely trying it!

    ~Lydia~ <3

    ReplyDelete
  3. thank you so much for this tutorial <3 i've always loved the way this looks but never been able to figure it out ^_^ your design is just so cute. oh, and congrats on 101 followers!!

    ReplyDelete
    Replies
    1. Thank yoooouuu! And glad you enjoyed the tutorial! :)

      Delete
  4. So pretty! Your blog is bae. <3

    ReplyDelete
    Replies
    1. Thank you very much! Well, your comment is ultra bae

      Delete
  5. I love the Bloomin Rouge blog! Holly is such a babe, thanks for sharing this tutorial! x

    Emily // Lynde Avenue

    ReplyDelete
    Replies
    1. Your welcome Emily - I'm glad I helped x

      Delete

Hello! Feel free to leave a comment, but please be nice! See my full commenting rules here