Stylize Your Popular Posts And Show Random Content On Every Page

Jquery and CSS3 Logo
Today we would like to share awesome blogger hacks, that will allows you to stylize your blogger popular gadget. Since there is lot of tutorials also were published on the internet for styling blogger popular post gadget, so today we are not going to repeat them. The gadget is really look great after applying CSS code, but the question is that, it will attract your visitor? If you have always the same content in the same sequence in your popular widget on every page, users will surely ignore it. But if you shuffle the content in the gadget, then content looks fresh on every page refresh, and I could not tell, which one of my most popular posts, i will always say they are all good :-p. In this tutorial we will learn how to stylize popular posts images, title, change images resolution and how to show random post on every page refresh, it's mean whenever user refresh the current page it will show random content, so let's go ahead and follow the steps below, for demo just look at our popular gadget on the sidebar column.
image resize Jquery hack developed by MS-potilas and CSS3 by Spicyblogging.

Note:- ensure that you have installed latest jquery library in your template for showing random post on every page. If Not then please follow the step below and install jquery first:

Adding jquery

  1. Go to blogger dashboard > template > edit html
  2. Search for the following code (Need Help?)
    3. <head>
  3. and paste the below code just after opening <head>
    4. <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
That's it, the first step is completed successfully. if you have already installed jquery just skip above steps.

how to shuffle popular posts content

  1. Go to blogger dashboard > template > edit html
  2. Search for the following code
    3. </body>
  3. and paste the following code just before colsing body tag
    4. <script type="text/javascript"> //<![CDATA[ // Random order to Popular Posts using jQuery / MS-potilas 2011 // Put this code in a html/javascript gadget or before </body>. // code written by: Ms-politas var ul = $(".popular-posts ul"); var lis = $(".popular-posts ul li"); if(lis.length>1) { for(var i=lis.length-1;i;i--) { // fisher-yates/knuth var j=parseInt(Math.random()*i); lis[j] = lis.splice(i,1,lis[j])[0]; // swap lis[i]&lis[j] } lis.appendTo(ul); } //]]> </script>
That's it you have reach third step of the tutorial go a head to the next step and stylize your popular posts images and title.

Stylize Your Popular Content

Note that if you have already added a custom css code for styling popular posts gadget, remove completely before following the steps below, in case if you are satisfied with your current look just skip the below step and save your current editing by clicking on save button.
  1. Search for the follow code in your template
    2. ]]></b:skin>
  2. and paste the following code just above the "]]></b:skin>"
  3. .popular-posts ul li {
    font-weight: 700;
    list-style: none !important;
    margin: 0 0 10px !important;
    overflow: hidden;
    padding: 0 !important;
    position: relative;
    border: 0;
    max-width: 100% !important;
    height: 180px;
    }
    .popular-posts li a {
    color: #FFF !important;
    }
    .popular-posts li a:hover {
    color: #fff !important;
    text-decoration: underline;
    }
    .PopularPosts .item-thumbnail {
    margin: 0;
    width: 100%;
    height: 180px;
    }
    .PopularPosts ul li img {
    display: block;
    float: right;
    padding: 0;
    width: 100%;
    height: 180px;
    }
    .PopularPosts .item-title {
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 0;
    position: absolute;
    z-index: 999;
    }
    .PopularPosts .item-title a {
    background: rgba(142, 68, 173, 0.9);
    display: block;
    font-size: 16px;
    line-height: normal;
    padding: 15px 10px;
    text-transform: capitalize;
    }
    .popular-posts ul li:before {
    background: rgba(142, 68, 173, 0.8);
    color: #fff;
    content: float: left;
    font-size: 25px;
    line-height: 2px;
    list-style-type: none;
    padding: 5px 5px;
    position: absolute;
    top: 0;
    }

How To Change The Resolution Of Popular Post images

Update:- 2/9/2016 The parameter -c from /s72-c/ has been removed to ensure images are not cropped. The thumbnails will now look as you uploaded rather than cropped:
  1. Search for the follow code in your template
    2. </body>
  2. and paste the following code just above the "</body>"
  3. <script type="text/javascript">
    //<![CDATA[
    var newSize = 400; // this is the new thumbnail size, you can change this
    $('.popular-posts .item-thumbnail img').each(function() {
    var oldSize = $(this).attr('width');
    $(this).attr('width', newSize); $(this).attr('height', newSize);
    $(this).attr('src', $(this).attr('src').replace('/s'+oldSize+'-c/', '/s'+newSize+''));
    });
    //]]>
    </script>

    Note:-In the code above the variable "var newSize = 400;" which is calling the new size for images. You can increase the image size by changing variable i.e "150, 300, 400, 800 and last dimension is 1600". Note that the code will work If your images are uploaded to picasa.

I hope you enjoyed the above tips and applied successfully on your blog, if in case of any trouble please don't hesitate to ask us anything. Share your thoughts with us or if something missing here please let us know in the comment box below. Peace and Blessing bodies :)
Author on

No comments Post Yours!

Post a Comment