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

  • 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 Hack Twitter Account Password
    How To Hack Twitter Account Password  you might have been wondering about good ways to hack twitter account't password. In order to...
  • 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...
  • Get desktop notifications for WhatsApp chats
      You'll need the WhatsApp Web Chrome extension to get WhatsApp desktop notifications. Then, all you need to do is install a simple...
  • 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...
  • WhatsApp Switch Your Chat History
      If you haven't received the update that allows Google Drive backups yet, and you need to move your WhatsApp history over to a new...
  • Google’s Data Highlighter
    We all know the importance of Schema markup and rich snippets on your search results. We’ve written about the importance of getting mar...
  • Google SEO Ranking Factors in 2016
    The same number of you may realize that Google is utilizing 200 elements for positioning sites and pages. Nobody precisely k...
Template by Malik HassanHome - Sitemap - Privacy Policy - Terms And Conditions - Disclaimer - Author