 |
| Optimizing Blogger Header and Avoiding them as Post thumbnails |
The very first thing that a blogger designs on his newly opened blog or website is none other than a beautiful logo image or a unique header image to make their blog look attractive especially
blogspot sites which are highly customizable to one's own desire but the problem begins when on sharing a post from the blog the thumbnail icon instead of showing the correct post image pulls the blogs logo or header image as the thumbnail giving an unclear and undesired concept of the content shared and the thumbnail pulled. This happens more frequently in frequently changing social networks like Facebook and Google+ wherein the thumbnail pulled is of the blogs header's or logo image which is unrelated to the content shared giving a vague idea of the content shared and decreasing the circulated click through rates via the social networking circle. Now to do this there are two ways one is
Facebook's open graph meta tag technology and other one is going to be discussed in this how to but the best part is nobody will be able to pull your header image at all and will not be able to download your image by right clicking on it as the option will be simply not available to them. Let's get started with the process of avoiding your blog's header image from showing up as post thumbnail on sharing.
Noting Blog's header Image dimensions and URL
Begin by going to your site or blog and open the image in new tab by right clicking on it and choosing the option open in "Open image in new tab". Now hover over the title tab of the image to get the dimensions of the image at the end of title tag and also make a note of the image URL for later use in the process. For example in this image the dimensions are written after the title tag in the image url tab like this " photo.jpg (512x512) ".
Tweaking the Blogger's Header in Template Editor
Now after finishing the first step go to your Blogger Template → Click edit HTML → and look for the Header widget inside the template by clicking anywhere inside the html editor and pressing CTRL+F to find the <b:widget id='Header1' tag which would look like the below code:
<b:widget id='Header1' locked='true' title='Your Blog's Name (Header)' type='Header'>
►<b:includable id='main'>...</b:includable>
►<b:includable id='description'>...</b:includable>
►<b:includable id='title'>...</b:includable>
</b:widget>
Expand the one with id='main' as the remaining are of no interest to us at all. On expanding (click the ► arrow to expand) the code will look like the one below
<b:widget id='Header1' locked='true' title='Your Blog Name (Header)' type='Header'>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "BEHIND"'>
<!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
<b:else/>
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
You need not worry about the huge code above as all you have to do is expand the ► arrow and select the whole code and replace it with the below code in the next step.
Tweaking the Blog's header Image to Perfection
Replace the expanded code in step-2 with the below code where you will be using the image settings from the step-1:
<b:widget id='Header1' locked='false' title='Your Blog Name (Header)' type='Header'>
<b:includable id='main'>
<div align='left'><a href='/'><div
style='background-image: url('your copied Image url');
width:512px; height:512px;'/>
<!--image header tutorial via http://geniushowto.blogspot.com (keep intact)--></a></div>
</b:includable>
In the above code replace the "your copied Image url" section with your copied image url and the values 512 and 512 in green with the respective width and height values of the image as noted earlier in step-1. Now just save your template and enjoy as now your header image is no longer interferes with the wrong Image thumbnail problem for your post thumbnails. In case you wish to center your blogs image or align it right simply change "left" attribute with center or right to align it according the way you like.
The Above code works best when you just wish to show your blog's logo or header image on the top without the header text or description, so turn the option of showing only the image instead of blog's title and text in your blogger blog layout section. In case you wish to add something else apart from the image then just add the below piece of code just before the ending
</b:includable> tag in the step-3.
<div align="center">Your desired Text or slogan!</div>
To display the
Blog's description or blog's title below the image just use the below codes instead of the above code and in case you wish to show only one of them then delete one of the respective codes from below line. The first code is for blog description and next one if for blogs title.
<div align="center" class='description'><data:description/></div>
<div align="center" id='title'><data:title/></div>
Now have fun as your blog's
header image is all locked and unextractable as post thumbnail or downloading as an image. You can see a live example on Genius How to's very blog's header. Cool right! Although this technique excludes your logo image from thumbnail suggestions on Facebook or Google+ still consider
adding in the Facebook Graph extension to your blog so that it extracts only the first image from your post and shows a default thumbnail for posts without any image.