SkyUrdu | The Largest Hub Of Tutorials
Select Menu
  • Home
  • Google Adsence
    • Google Adsence Tricks
    • Supports Languages
    • 11 Tips For Adsence
    • 12 Tips For Adsence
    • 100% Approval Tip
    • Achievement Card
    • Adsense Revenue
    • Verify Account
  • Make Money
    • Earn With Bidvertiser
    • Earn With Freelance
    • Earn With Blogging
    • Earn With You Tube
    • Earn With Ads Cash
    • Earn With Adsence
    • Earn With Infolinks
    • Earn With Typing
  • Blogging
    • 404 ERROR Page
    • Google+ Fallow
    • BackUP/Restore
    • Mobile Templet
    • Custom Domain
    • Blogger Tricks
    • Custom Fonts
    • Templetes
  • SEO
    • Google Algorithm
    • Google Analytics
    • Select Keywords
    • Blogger Vistors
    • Alexa Ranks
    • Robots.txt
    • SEO Tricks
    • SEO Tools
  • Social Media
    • Whatsapp
    • Facebook
    • Pinterest
    • Google+
    • Twitter
    • Skype
    • Imo
    • VK
  • Networks
    • Easypaisa
    • Mobicash
    • Mobilink
    • Telenor
    • Warid
    • Ufone
    • Zong
  • Much More
    • How To
    • Much More
Home » Blogger Tricks » Popular Posts with Thumbnails

Popular Posts with Thumbnails

Unknown
Add Comment
Blogger Tricks
Popular Posts with Thumbnails
A few days back, I published the JavaScript version  of the Recent Posts widget, and I loved the Grid Layout of the Widget. One of the most popular Widgets used by Bloggers is Blogger’s Official Popular Post Widget. So I decided to edit the gadget, and give it the Grid Style.

How does the Gadget Look like after tweaking it?

So Here are the Steps to make your Popular Posts Widget act like an Image Grid
1. Go to the Layout Page and add the Popular Posts Gadget, if you haven’t already added it.
image
2. Edit the Gadget Settings so that it displays the Thumbnails and not the Snippet
image
3. Now Go to Template/Design > Edit HTML . DO NOT Click on the Expand Widget Templates checkbox. Leave it unchecked, and look for  PopularPosts1 (Do a Ctrl +F to find it in your template) and you will get some line like this
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
4. Change This line to
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              
                <div class='item-thumbnail'>
   <a expr:href='data:post.href' expr:title='data:post.title'>
    <b:if cond='data:post.thumbnail'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
       <b:else/>
        <img alt='' border='0' expr:height='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnQNuJd_EuwxT471q_Z8FHdiZC7ADP_Z6oJFa2tKtxSEZ0k-mr9ew1zsS3JuZc-f6W4Qo8I9hENgvJ2BNc3Bwjyh0HA6bHdvJiIqj8MGMubd_xNW-tPU1yn6mJjynjrvE7VWGrXgDTkhM/s72-c/default.png' expr:width='data:thumbnailSize'/>
       </b:if>
                  </a>
                </div>         
             </div>
            <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
5. Save your Template
6. Now Go to Template Designer > Advanced > Add CSS and paste the following CSS snippet there, and apply to your Blog
.popular-posts .item-thumbnail{float:left;}
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;}
The image URL present in the Widget Code is the Default Thumbnail which will be displayed if the post doesn’t have a thumbnail associated with it. You can modify it to get a custom default thumbnail. You can spice up the CSS to make the grid look more eye catching. I would leave that to you :)

Reverting Back to the old one

If you are not satisfied by the way it looks, then revert it back. Here are the steps:
    1. Just Remove the Popular Posts Widget from the Layout Page.If you need the original version, then add it back again
    2. Remove the CSS which you added to Template Designer > Advanced > Add CSS
    3. That’s it.

I think that this Hack would work out well on Recipe and Photography Blogs. Try it out, and let me know if it is useful :)
Share This!--- Facebook Twitter Google+

Newer Post Older Post Home
Subscribe to: Post Comments (Atom)

Search Hare

Populer Posts

  • How To Make Responsive Images For Blogger
    Have you a Blogger blog? If yes, are you using responsive images into your Blogger posts? If no, read this post to make any image from yo...
  • Why PIN Hold appear on New AdSense Account
    While using AdSense Account then you should know well the terms and conditions of AdSense . Because there are several terms and con...
  • YouTube Support in Blogger
    Blogger allows you to upload your own videos via the Blogger Post Editor. It also allows you to embed YouTube videos into your posts(...
  • Edit Blogger Mobile Templates
    There is some Good news from the Blogger Team on the Blogger Code Blog . If you have enabled the Mobile Templates, you will be able...
  • How to change facebook group name after 5k members
    HOW TO SETUP FACEBOOK GROUP then read this article. You can only change the name of Facebook group if you are the admin of that GROUP and...
  • Make Money with Bidvertiser (PPC) Network
    Bidvertiser:  is an easy way to make money online from your blog & website. Bidversiter is a PPC network that allows publishers...
  • Create a Gmail Account
    ‘Google mail’ or ‘Gmail‘ is a web-based email account in which emails are stored on the internet rather than on your computer . Inte...
  • Zong Internet Packages
    Zong Internet Packages are attracting the attention of the subscribers internet is the need of every lay man and Zong is taking care of...
  • How To Remove Blogger Title
    Blog title and description is very important in every blog. Search engines when indexing your blog use the title and description tags.But ...
Template by Malik HassanHome - Sitemap - Privacy Policy - Terms And Conditions - Disclaimer - Author