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 Add a PopUp message in Blogger
    If you want to add a Pop Up message to your blog , you can do it. Lets say , you are blogging about porn or adults only things. Then you...
  • How To Remove Blogger Icon
    As you know there are separated icons ( favicons ) for every site. They are the symbols represent that site. Wikipedia has a favicon as ...
  • How To Open MobiCash Mobile Account
     Mobicash Mobile Account is an actual bank account that is tagged with your mobile number and can be operated through your phone. Through...
  • Create Skype Account
      Creating a Skype Account : 1. Click on this shortcut to execute the application: 2. The first time you run the application you wil...
  • Youtube Most Importents Tips And Tricks
     How To Get the Transcript of a YouTube Video  This article will provide you with step-by-step instructions on how to get a transcript ...
  • How To Change Author's Name in Blogger
    Above your every post , you will see your name ( or the Author's name ). It will always display your Blogger accounts name , But yo...
  • 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 ...
  • Speed Up Internet in Windows
    Some users have really a slow internet connection (because they are paying for only slow internet connection) and searching on the intern...
  • Adsense share Content and Search Revenue
    AdSense is most amazing platform for generating income. Every Blogger try to earn money from their Blog. For this reason they must ...
Template by Malik HassanHome - Sitemap - Privacy Policy - Terms And Conditions - Disclaimer - Author