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 » Thumbnails for Blogger

Thumbnails for Blogger

Unknown
Add Comment
Blogger Tricks
Thumbnails for Blogger
I had got quite some number of questions regarding how I display post thumbnails here on my blog. So I decided to write a tutorial about the different methods that you can use to display post thumbnails. Post Thumbnails will look good on your blog if you are using the Blogger Jump Break Feature to efficiently control the post excerpt that gets displayed on non-post pages.  So here are the methods:

1. Using the data:post.thumbnailUrl Template Tag
This tag will give you a 72x72px thumbnail of your post image.So you can use this tag in your template to render a small thumbnail image.This is the same image which will be displayed on the Mobile version of your Blog.This tag also renders YouTube Thumbnails(small version) and Flickr Thumbnails. To render the thumbnail, you can use the following code snippet
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:post.thumbnailUrl'>
<img class="postthumb" expr:src ="data:post.thumbnailUrl" expr:alt="data:post.title"/>
</b:if>
</b:if>
This code should be added just before <data:post.body/> in your template(Expand your Widget templates, and use the keyboard shortcut Ctrl +F to find)
Remove the Green lines if you want the thumbnails on Post Pages as well
Now to spice up the Thumbnail image, you can add the Following CSS.
CSS can be added at Template Designer > Advanced  > Add CSS
.postthumb {
padding: 5px;
float:left;
border: 1px solid #eeeeee;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
2. A bigger thumbnail image using data:post.thumbnailUrl tag
As I had mentioned above, you get a 72px image using this Blogger Template tag.If you need something bigger than 72px, then you will have to add a small flavor of JavaScript to your Template. This is the code that I’m talking about, and it should be added above <data:post.body/> in your template.(Expand your Widget templates, and use the keyboard shortcut Ctrl +F to find)
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:post.isFirstPost'> 
<script type="text/javascript">
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size=150;
var show_default_thumbnail=true;
var default_thumbnail="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnQNuJd_EuwxT471q_Z8FHdiZC7ADP_Z6oJFa2tKtxSEZ0k-mr9ew1zsS3JuZc-f6W4Qo8I9hENgvJ2BNc3Bwjyh0HA6bHdvJiIqj8MGMubd_xNW-tPU1yn6mJjynjrvE7VWGrXgDTkhM/s72-c/default.png";
if(show_default_thumbnail == true && image_url == "") image_url= default_thumbnail;
image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" class="postthumb" alt="'+post_title+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
</b:if>
<script type="text/javascript">
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script>
</b:if>
The script above will display a image of size 150 pixels(you can alter that by modifying the code). It also uses a default thumbnail if the post has no image in it(you can turn it off by setting show_default_thumbnail to false. You can also alter the default thumbnail if you want). If you want the thumbnail to appear on the post page as well, then remove the 2 green lines in the code.
You can use the same CSS(as in method 1) to decorate the thumbnail.
Note: This method won’t give you bigger YouTube thumbnails. The next available size of the YouTube Thumbnail is 480x360px, and I don’t want to load such a huge image as a thumbnail. so the script doesn’t handle that.Similarly this Script doesn’t handle Flickr Thumbnails. So you will be getting the default versions of these thumbnails.
The next 2 methods are for advanced users
3. I know what to do.
Just add an image to the beginning of the post, and add the class name postthumb to it.
So your post should be in the following format:
<img src=”the post thumbnail url” class=”postthumb” align=”left” title=”Post name”/> The Post excerpt <!—more –> The Rest of the post
You can use the same CSS mentioned in the first method.It will be a better idea to specify the width and height parameters in the CSS.This image will appear in your Feed as well.
Now if you want to hide this thumbnail on the post pages, then add the following snippet above </head> in your template
<b:if cond='data:blog.pageType != "index"'> 
<style type="text/css">
.postthumb{display:none;}
</style>
</b:if>
This is the method that I use here on my blog
4. Using Enclosure Links and making them work similar to Word Press Custom Fields
You can hack up the blogger enclosure links and make them work like Word Press Custom Fields
The code to render the Enclosure image(post thumbnail):
<b:if cond='data:blog.pageType == "index"'>
<b:loop index='i' values='data:post.enclosures' var='enclosure'>
<b:if cond='data:i == "0"'>
<b:if cond='data:enclosure.mimeType == "image/jpeg"'>
<img expr:src="data:enclosure.url" class="postthumb" expr:alt="data:post.title"/>
<b:else/>
<b:if cond='data:enclosure.mimeType == "image/png"'>
<img expr:src="data:enclosure.url" class="postthumb" expr:alt="data:post.title"/>
<b:else/>
<b:if cond='data:enclosure.mimeType == "image/gif"'>
<img expr:src="data:enclosure.url" class="postthumb" expr:alt="data:post.title"/>
<b:else/>
<b:if cond='data:enclosure.mimeType == "image/bmp"'>
<img expr:src="data:enclosure.url" class="postthumb" expr:alt="data:post.title"/>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:loop>
</b:if>
This code can be added above <data:post.body/> and you can use the same CSS as in the other methods . Remove the Green lines if you want the thumbnails on Post Pages as well. .It would be a good idea to specify the width and height in the CSS.When you add an Enclosure link, Blogger post editor will automatically set the mime Type. This mime type is used in the above code. So don’t give any wrong values for mime Type. Always provide the valid mime type. The code uses the First enclosure link only. So your post thumbnail should be added as the first enclosure link.
image
The Enclosures added to the post will appear in the Blog Feed.
5. The Old way of doing it.
Using the automatic post summary JavaScript is an old outdated method. If you are using it, make sure that you use jump breaks as well
Share This!--- Facebook Twitter Google+

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

Search Hare

Populer Posts

  • 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 ...
  • Ufone SIM Lagao Offer
    Ufone brings new Ufone SIM Lagao Offer for all of its customers nationwide. Ufone brings Re-inserting SIM offer to its prepaid customer...
  • Money Transfer By MobiCash
       Now it just takes a few moments for you to transfer money to your family, friends or business partners using services of Mobicash. Any...
  • How to verify your Google Adsense Account
    Want to earn money online ? Google Adsense is the best advertising network to generate revenue for webmaster and bloggers. It is no...
  • How To Increse Reddit Link Karma
    Reddit is awesome place to generate huge traffic, but to get good traffic from reddit first you should have good reddit link karma. The...
  • How To Fully Approve Google AdSense Account Complate Guidance
    Google AdSense is the best ads network company to monetize a blog or a website. Many other Ads networks are available in the Internet ...
  • AdSense achievement card
    The most popular and leading legit advertising platform is Google AdSense where billions of people earning money by monetizing their...
  • Facebook send button for Blogger
    It had been some time since Facebook released their new Send Button. The Send button is a social plugin that websites can use to let p...
  • 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...
Template by Malik HassanHome - Sitemap - Privacy Policy - Terms And Conditions - Disclaimer - Author