How To Show Or Hide Blogger Widget On Homepage, Post Pages, Static Pages, Or On Selected Pages

It is always important that you control how widget function in your blog, because their are some widget that are suitable mostly for homepage only while some makes sense post pages, archive pages, and so on. Most frequently asked question by my blog readers is that how can they hide a particular widget (especially recent post widget) from displaying in homepage in other to reduce the load time of their homepage, while some are interested in showing a widget on only homepage. So if you are also interested in controlling your widget performance, then this tutorial will trash out your worries.
We will be using different conditional tag to selectively display widget on any preferred pages.

How To Show Widget Only On Homepage

Use the following conditional tag to show widget on homepage only.

<b:if cond='data:blog.url == data:blog.homepageUrl'>

WIDGET CODE HERE

</b:if>

How To Hide Widget On Homepage

<b:if cond='data:blog.pageType == "item"'>

WIDGET CODE HERE

</b:if>

How To Show Widget Only On Static Pages

<b:if cond='data:blog.pageType == "static_page"'>

WIDGET CODE HERE

</b:if>

How To Hide Widget On Static Pages

<b:if cond='data:blog.pageType != "static_page"'>

WIDGET CODE HERE

</b:if>

How To Show Widget Only On Archive Pages

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

WIDGET CODE HERE

</b:if> 

How To Hide Widget On Archive Pages

<b:if cond='data:blog.pageType != &quot;archive&quot;'>

WIDGET CODE HERE

</b:if> 

How To Show Widget On A Selected Post

<b:if cond='data:blog.url == "URL Of Selected Post"'>

WIDGET CODE HERE

</b:if>

How To Hide Widget On A Selected Post

<b:if cond='data:blog.url != "URL Of Selected Post"'>

WIDGET CODE HERE

</b:if>

How To Wrap Widget With The Conditional Tag

The conditional tag can be applied to any widget using the same procedure.

• Go to your blogger dashboard
• Click on Template > Edit HTML > Proceed (Mark/Tick Expand Widget Template)

Every widget has a code structure, but you can easily locate a widget using the widget title. Each widget code structure will look like the following:

<b:widget id='Widget-ID' locked='' title='Widget-Title' type=''>
<b:includable id='main'>


LARGE CODE


</b:includable>
</b:widget> 

Wrapping the widget with any conditional tag, the final result will look like the following:

<b:widget id='Widget-ID' locked='' title='Widget-Title' type=''>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

LARGE CODE

</b:if>
</b:includable>
</b:widget>

The conditional tag used above is just an example, you can choose any condition tag of your choice, and the same procedure applies to all.
Any queries or contribution/appreciation is highly welcome, and don't forget to share it with friends/followers.

How To use Automatic Read More Jump Break With Thumbnail On Blogger

The steps involve in adding a automatic jump break to your Blog post is simple if you follow the instruction carefully, jump break makes your blog look neater and make ease for reader to read summery of your post, the posts will be displayed with just a short summery on the home page and a link to read the full post will be below. the advantages of break jump was that, it will reduce the content on your blog and speed up your browser to load your blog much faster, Also applying jump break to your blog, allow visitors to click on your summary before having access to the full post, it increases page views.

Update 06/12/2012

If you have been using this hack before, you may observe that it has stop working. Please find http://bloggerblogwidgets.googlecode.com/files/auto_readmore_blogger.js and replace it with http://widgets.way2blogging.org/blogger-widgets/w2b-auto-readmore-blogger.js

We are sorry for any inconvenience this may have caused you.

> Your posts will automatically be displayed as short summary's with a read more link.
> An image from the post will be re sized into a thumbnail and displayed beside the summery.
> You can choose how much text is displayed in the summery.
> The Read more will also apply to all your previous post
> Your thumbnail size can also be adjust to your preferred size.

To get this apply to your site, follow the few steps below;

> Login to your blogger dashboard
> Click Design
> Click on Edit Html (Remember to back up your template)
> Tick/Mark "Expand Widget Templates"
> Press ctrl F on your keyboard, the find </head>
> Copy and paste the code below, before </head>

 <script type='text/javascript'>

var thumbnail_mode = "no-float" ;

summary_noimg = 430;

summary_img = 340;

img_thumb_height = 120;

img_thumb_width = 120;

</script>

<script type='text/javascript' src='http://bloggerblogwidgets.googlecode.com/files/auto_readmore_blogger.js' ></script>

> Find this next code again <data:post.body/>

> Replace it with the code highlighted in yellow below;

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

<b:else/>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<data:post.body/>

<b:else/>

<div expr:id='&quot;summary&quot; + data:post.id'>

<data:post.body/>

</div>

<script type='text/javascript'>

createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

</script>

<div style='clear: both;'/>

<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more ... </a></span>

</b:if>

</b:if>

Note: <data:post.body/> must be cancel before you replace it with the code above, and the highlighted "Read more" above can be change to your own text.

> Save your Template
Then you are done, if your post contain an image, it will be automatically use as your thumbnail.

Please feel free to use the comment box if any problem persist, and use the share button below too.
Thanks.

How To Add Share Buttons To Your Blogger/Blogspot Blog Via AddThis

In my previous post we have discuss on how to add ShareThis share buttons to your blog, but now am sharing with you, how to add AddThis share buttons to your blog. as we all knew that people love sharing interesting content with there followers or friends, and before this can be done, you will need to provide a share buttons for your readers, which i know that AddThis buttons will help you with that. AddThis offers different size and style of buttons, and very easy to implement. Sharing interesting content will help you drag more traffic to your blog/site and circulate your content to the entire web.
Before anything can be done, you must have a AddThis account which you can register here.

Let's get started

• Login to your blogger dashboard
• Click on "Design" > "Edit HTML" > Back up your template
• Mark/Tick "Expand Widget Templates"
• Use ctrl F to find </head>

Add the code below immediately before/above </head> tag

<script type='text/javascript'>
var addthis_config = {"data_track_clickback": true, "data_track_addressbar":false};

var addthis_share =
{
 templates:
 {

   twitter: "{{title}} {{url}} via @mrqasimashraf"

 }
};
</script>
<script src='http://s7.addthis.com/js/300/addthis_widget.js#pubid= AddThis Profile Id' type='text/javascript'/>

> Click back tracking [true]:- This will enable click back for your shared content, but you can disable it by replacing it with false.

> Address bar tracking [false]:- This will track your content being shared by copying the page url from your user's address bar, to enable this replace it with true

> Replace mrqasimashraf with your twitter username.

> Replace "AddThis Profile Id" with your addthis profile id which you can get from AddThis Publisher Profiles, you may need to add a profile before you can be given a profile id.

• Find <data:post.body/> if you which to add your buttons below your post.
• Find <div class='post-header-line-1'/> if your which to add your buttons below your post title.

Choose any of your desired button style and paste the code immediately after any of the two code above.

Share Button 1

<b:if cond='data:blog.pageType == "item"'>

<div class="addthis_toolbox addthis_default_style">

<a class="addthis_button_facebook_like" fb:like:layout="button_count"/>

<a class="addthis_button_tweet" tw:via="Your Twitter Username"/>

<a class="addthis_button_google_plusone" g:plusone:size="medium"/>

<a class="addthis_counter addthis_pill_style"/>

</div>

</b:if>

Share Button 2

<b:if cond='data:blog.pageType == "item"'>

<div class="addthis_toolbox addthis_default_style addthis_32x32_style">

<a class="addthis_button_preferred_1"/>

<a class="addthis_button_preferred_2"/>

<a class="addthis_button_preferred_3"/>

<a class="addthis_button_preferred_4"/>

<a class="addthis_button_compact"/>

<a class="addthis_counter addthis_bubble_style"/>

</div>

</b:if>

Share Button 3

<b:if cond='data:blog.pageType == "item"'>

<div class="addthis_toolbox addthis_default_style ">

<a class="addthis_button_preferred_1"/>

<a class="addthis_button_preferred_2"/>

<a class="addthis_button_preferred_3"/>

<a class="addthis_button_preferred_4"/>

<a class="addthis_button_compact"/>

<a class="addthis_counter addthis_bubble_style"/>

</div>

</b:if>

Share Button 4

<b:if cond='data:blog.pageType == "item"'>

<div class="addthis_toolbox addthis_default_style ">

<a href="http://www.addthis.com/bookmark.php?v=300&amp;pubid=AddThis Profile Id" class="addthis_button_compact">Share</a>

<span class="addthis_separator">|</span>

<a class="addthis_button_preferred_1"/>

<a class="addthis_button_preferred_2"/>

<a class="addthis_button_preferred_3"/>

<a class="addthis_button_preferred_4"/>

</div>

</b:if>

Share Button 5

<b:if cond='data:blog.pageType == "item"'>

<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=300&amp;pubid=AddThis Profile Id"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>

</b:if>

Share Button 6

<b:if cond='data:blog.pageType == "item"'>
<a class="addthis_counter"/>
</b:if>

Share Button 7

<b:if cond='data:blog.pageType == "item"'>
<a class="addthis_counter addthis_pill_style"/>
</b:if>

Share Button 8

<b:if cond='data:blog.pageType == "item"'>

<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=300&amp;pubid=AddThis Profile Id"><img src="http://s7.addthis.com/static/btn/sm-share-en.gif" width="83" height="16" alt="Bookmark and Share" style="border:0"/></a>

</b:if>

Share Button 9

<b:if cond='data:blog.pageType == "item"'>
<a href="http://www.addthis.com/bookmark.php?v=300&amp;pubid=AddThis Profile Id" class="addthis_button_compact">Share</a>
</b:if>

• Click "SAVE TEMPLATE"

Check any of your post to confirm your buttons working, hope you enjoyed this, if so, take few seconds to share this.

How To Add Google Custom Search Box To Navigtion/Menu Bar For Blogger Blog

Adding Google custom search box to your blog is another best way of providing a easy navigation to your readers, google custom search engine is more efficient than the default google search box in the sense that, it is capable of displaying relevant result unlike the default search box. This will also increase your pages views and impressions because it will kept your readers with articles related to their search queries.
Before the google custom search box can work for your blog/site, you will need a google custom search box ID, so let's get started with how to get that.

How To Get Google Custom Search Engine Id

• The first step for you is to get your custom search code, for procedure on how to do this, read How to add google search box to blog.
• After you have got your code, look for your id in the code given to you, we are only interested in the id, your id will look, something very similar to this: 004697161763279382635:f2dccf1y31k, copy the id and let's move on.

Search Box Code

The code below is the code for the search box which you will use.

<!-- Google custom search box Start - Designed by Realcombiz.com -->
<div class='cse' style='color:#000000;float:right;margin:6px 10px 0 0 ;'>
<form action='http://www.google.com/cse' id='cse-search-box'>
<input name='cx' type='hidden' value='partner-pub-004697161763279382635:f2dccf1y31k'/>
<input type='text' name='q' size='35' />
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>
</div>
<!-- Google custom search box End -->

• If you want your search results to show in a new window, simply add target="_blank" after id='cse-search-box' as highlighted above, but make sure you put space in-between.
• Replace 004697161763279382635:f2dccf1y31k with the id which you copied from your google cse code in the first step.

 How To Integrate The Search Box

• Log-in to your blogger dashboard
• Click on "Design" > "Edit HTML" > back up your template
• Mark/Tick "Edit Widget Templates"
• Use ctrl F to find the following code

<b:loop values='data:links' var='link'>

• Look above the code, you should see <ul>, if you don't find <ul> above the code above, keep searching by clicking "Next" on your search bar until you see a line where <ul> appear above it.
• Now paste the search box code After <ul>
• Click "SAVE TEMPLATE"

Check your blog to see your google custom search box (CSE) working perfectly well.

How To Add Drop Down Menu In New Blogger Template

Template editing have been so much difficult ever since blogger introduce new blogger template designer, especially picture window template and watermark, which have cause a great headache for most blogger newbies.
In my next post i will be publishing how you can add a drop down menu to your blog, and i know most newbies are going to experience a little difficulties in implement the code, so i think i have to share this with you before releasing my awesome drop down menu widget.


How To Add Drop Down Menu To New Blogger Template

• Go to your blogger dashboard
• Click on "Design" > Edit HTML" > back up your template
• Now find your tab/menu tag code, it will look very similar to the code below, you can scroll through your template until you find it

/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
  border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}

.tabs-inner .section:first-child ul {
  margin-top: -$(header.border.size);
  border-top: $(header.border.size) solid $(tabs.border.color);
  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

.tabs-inner .widget ul {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none;
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);

  margin-top: $(tabs.margin.top);
  margin-left: -$(tabs.margin.side);
  margin-right: -$(tabs.margin.side);
}

.tabs-inner .widget li a {
  display: inline-block;

  padding: .6em 1em;

  font: $(tabs.font);
  color: $(tabs.text.color);

  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: $(tabs.selected.text.color);
  background-color: $(tabs.selected.background.color);
  text-decoration: none;
}

Remove the comment quote (*/) from the top and add it the bottom of your tab tag like the example below.

/* Tabs
-----------------------------------------------
.tabs-inner .section:first-child {
  border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}

.tabs-inner .section:first-child ul {
  margin-top: -$(header.border.size);
  border-top: $(header.border.size) solid $(tabs.border.color);
  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

.tabs-inner .widget ul {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none;
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);

  margin-top: $(tabs.margin.top);
  margin-left: -$(tabs.margin.side);
  margin-right: -$(tabs.margin.side);
}

.tabs-inner .widget li a {
  display: inline-block;

  padding: .6em 1em;

  font: $(tabs.font);
  color: $(tabs.text.color);

  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: $(tabs.selected.text.color);
  background-color: $(tabs.selected.background.color);
  text-decoration: none;
}

Let Readers Choose Font Style & Size Widget

It is very important that you let your blog to be easily accessible by any user's, that's why we come up with this awesome widget that allow visitors to view your blog in any font style and size they wish. Considering user's with bad sight, large or small screen resolution, so it will make sense if you can provide them an option to view your blog according to their own convenience. One thing i love most about this widget is that, it apply the changes made automatically without refreshing the page, cool right? Now let's get to work.

DEMO:

Times New Roman Arial Book Antiqua Bookman Old Style Century Gothic Comic Sans Ms Tahoma Trebuchet Ms Verdana 8 9 10 11 12 14 16 18

How to Add Font Style And Size Widget

• Go to your dashboard
• Click on Layout > Add a Gadget > HTML/JavaScript 
• Paste the following code in the content box and give it any title.

<script>
function go1(){
if (document.selecter2.select2.options
[document.selecter2.select2.selectedIndex].value != "none") {
document.getElementById('main').style.fontSize
=document.selecter2.select2.options
[document.selecter2.select2.selectedIndex].value
}
}

function go2(){
if (document.selecter2.select3.options
[document.selecter2.select3.selectedIndex].value != "none") {
document.getElementById('main').style.fontFamily
=document.selecter2.select3.options
[document.selecter2.select3.selectedIndex].value
}
}
</script>
<form id="forma" name="selecter2" method="POST">

<select onchange="go2()" style="font-family:verdana;font-size:8pt" name="select3" size="1">
<option value="Times New Roman"/>Times New Roman
<option value="Arial"/>Arial
<option selected value="Book Antiqua"/>Book Antiqua
<option value="Bookman Old Style"/>Bookman Old Style
<option value="Century Gothic"/>Century Gothic
<option value="Comic Sans Ms"/>Comic Sans Ms
<option value="Tahoma"/>Tahoma
<option selected value="Trebuchet Ms"//>Trebuchet Ms
<option value="Verdana"/>Verdana
</select>
<select onchange="go1()" style="font-family:verdana;font-size:8pt" name="select2" size="1">
<option value="8px"/>8
<option value="9px"/>9
<option value="10px"/>10
<option value="11px"/>11
<option selected value="12px"/>12
<option value="14px"/>14
<option value="16px"/>16
<option value="18px"/>18
</select></form>

•  Save your widget and you are done.

Google Translate Widget With Flags For Blogger

The Google Translate Widget for Blogger allows the visitors to translate your site or blog in their own language.
This widget also auto-detect your blog language and then translate it to the readers chosen language.

It supports 12 different languages:
English, French, German, Spanish, Italian, Dutch, Brazilian, Russian, Japanese, Korean, Arabic And Chinese.

How To Add The Google Translate Widget To Blogger

Step 1. Go to your Blogger Dashboard >> Layout and click on "Add A Gadget" link

Step 2. From the pop-up window, scroll down and choose HTML/JavaScript

 Step 3. Paste the code below in the empty box:

<center> <div dir="ltr" style="text-align: center;" trbidi="on"> script type="text/javascript"><br /> function showHide(shID) {<br />     if (document.getElementById(shID)) {<br />         if (document.getElementById(shID+'-show').style.display != 'none') {<br />             document.getElementById(shID+'-show').style.display = 'none';<br />             document.getElementById(shID).style.display = 'block';<br />         }<br />         else {<br />             document.getElementById(shID+'-show').style.display = 'inline';<br />             document.getElementById(shID).style.display = 'none';<br />         }<br />     }<br /> }<br /> </script><br /> <br /> <style><br /> <br />  .google_translate img {<br /> margin: 10px 20px 0px 20px;<br />     height: 24px;<br />     width: 24px;<br />         }<br />         .google_translate:hover img {<br /> filter:alpha(opacity=0.30);<br />         -moz-opacity: 0.30;<br />         opacity: 0.30;<br />         border:0;<br />         }<br /> <br /> .more {<br />     display: none;<br /> a.showLink, a.hideLink {<br />     text-decoration: none;<br />     color: #0880C4;<br />     padding-left: 18px;<br />     background: transparent('down.gif') no-repeat left; }<br /> <br /> a.hideLink {<br />     background: transparent url('up.gif') no-repeat left; <br /> color: #0880C4;}<br /> <br /> a.showLink:hover, a.hideLink:hover {<br /> color: #0880C4;<br />  }<br /> <br />  </style><br /> <br />  <div> <br /> <br />  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf5Rjln3VMNzF-0mzHXZiCvBe0xY8SrdkcvnGoyCyFXQLkNInYRw4UQzj3GZbgmHPCouE9ytAzG28lbaxbth9Y0hZLF5K-eO3C4ZOcJTlG_-zxVIL756v5grJVhRPGLUBSHNDWog9oN63L/s1600/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br />  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgVJobfEIVj1der9crN2no2NRyVNVDyiHBh_DxbZ0HUegd8s9wOsYPJZBYAsCgTRmsROj8zt6Pi8frD5-cI5CSqoITXuQICy_-zdXB5Pl2gTXy01F5VjvtqFmIHx1Yke1JnyrI46wBmIjO/s1600/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br />  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlo0IeA7eZ32m59R_HoS4UW6TCXkOxp0-aBODwdbbLo3tAiH3xyJ57gnjquLHVOWXBmy_dYg9lm4YTdV0b5PVlQ_87XYsRMCl2XVzNjvCb08i4127t-nIvvjCFwNDHjUcJprJRShFtemt_/s1600/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br />  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQKDczkkDwXBXZIt5c73YFyJPS4S_zNPitusrpKcvAqX8EfwIfcP8WJdh2Aq85-RBrgZourR8pHEYg0XcE7_FB8fYnH1sFbjB-7_j5pZITtLVEypljPIC3Vx8KmWtsCrrwX33DPstvyy4N/s1600/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a href="#" id="example-show" class="showLink" <br /> onclick="showHide('example');return false;">More</a><br /> <div id="example" class="more"> <br />  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMEv4mr0TOisfO0VwXN1_DDWWcnIh2BvJhzplmcEu8cvpxpUIeoLk6Sn4dUfqK7x2oLrOv2JIKp0hBXFha8PcNaMHMyyyN8sREe1ZSYli-qtQUYI-eQspZ7hX8TG2wPA99Su1pcHPyH5LP/s1600/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br />  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj850RTQiqYZWu3DTEXwugkfL2Osbg96D2MW5JWL6fQgYZp2ch64BXAHj-6zkvStEjnos8qDTj1dxBo3c0tzdbvBm4WQPVGQT1_uOhGH-1rdDm9w3BdrKxUkYXaWCHT2tMf41NqCyd0BjKb/s1600/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br />       <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrUejvI6lwHQZy9AnIiFkDAyXhQxyvG9LF1-JrwEVtUfvTaPaisGEMLeb9NeceY3GxUeMgBaKMgt53SgQHHqrm2M5MAQ6lZp94ykjzmf9eWd07Hv8Fn6lh0wHlo_F0GT7C-B5dlh1nzsvd/s1600/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br />  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-TDnfzbKC-z4GP1aUetoA2D9Vyn_OliUj6J8zytJAzZeH6ZYTtBjqmdmaMLBU9iF0c0jkzkM_5fqzag14EjlrNccT7XHeHrWAlVNv45vGFnhCxK7wy46KfkracY3JfPamr4EdKWrdY9jE/s1600/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br /><br />  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4lJwK9uGRxMo3IqugsjYdPjaWif0XKvLj2rU13Vaqig_Hm5mlcs0vNPCR9MAikUSqbmb9F8yLaDEl44p07eTZIpLcprDXiH9bHO2Vqb-r1p-j35_QOdTxiaUXB01RmpU3LiD9CNtLNWuM/s1600/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br />  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCsbBVWr-g_UZO1q4oyiLnceF8kR2zk8Gd3JDAdYOeTNfGOBaGL201_Fm-I-mtkm63YzC4pxNewGTLd9fqaQMbZWk_lco3ByDOyVZELwuTyi3nkfjGWzY6z5TYMr7ZT1ZmayV1u19E2Nv9/s1600/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br />  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzWwlF79lX4HcIkDWcrXbqNqhsfrIFzdK-XimQKM2884ancAV-j-p7AsXMd5iA9_WDR8Am-VzxnW5pq4vjizvop-DfeaQdGLkPo2hYHbZOcpgQb63-txXoFNBsR73tMjnxmsY12Wn4YLvc/s1600/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br />  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7czh-cn&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj0M3ROloZSmH4yo5SZ1m4J_Wd86jL-9BUi83WrYvPC7uoZwViYNjElzgdb7bO3gMkzgOpP6-N-xqJfZzs0tXtZbXS5Hi_bkbuFQdqxJ3Ug6fvyEM_hHZt5ttLqtGhVQ9h0soP3e_Q1H3V/s1600/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br />     <p> <a href="#" id="example-hide" class="hideLink" <br />     onclick="showHide('example');return false;">Hide / </a><a href="http://mrqasimashraf.blogspot.com"><font size="1px">Get this widget</font></a></p> <br /> </div> <br />      </div> </div> <br /> <span style="color: #0b5394;"><b>Step 4.</b></span> Now click on Save<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5UomUc5PrclhLXbY0ghYY0w2FDuMCUuwS-oUDcIxc1kB1Es2Pt-DgNQbEv2o94p1fJg1o0fLjn7H-S1jlqVQaQMSFupBMDdXV49GZbYtffEOl9nfoP6o-3w0TZUzJqkLCjnRqg0hAZZ22/s1600/save-html-javascript-blogger-widget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="google translate, blogger widgets, gadgets for blogspot" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5UomUc5PrclhLXbY0ghYY0w2FDuMCUuwS-oUDcIxc1kB1Es2Pt-DgNQbEv2o94p1fJg1o0fLjn7H-S1jlqVQaQMSFupBMDdXV49GZbYtffEOl9nfoP6o-3w0TZUzJqkLCjnRqg0hAZZ22/s1600/save-html-javascript-blogger-widget.png" title="Add google translate widget to blogger" /></a></div> And you're done! Enjoy (:<br /> <br /></div>

How To Use Image Inplace Of Automatic Read More Jump Break On Blogger

Read more button function is to give a short summary of your post, it will reduce the content of your homepage and speed up your browser load time. It will also helps in google search ranking as your blog is receiving more clicks, and if your post contain any image it will be use as your thumbnail.
In my previous post have discuss on how to add automatic read more jump break without image, which you may need to apply this to your template, before inserting this, because you might not be able to find the keyword you are about to search for now.



Let's get started

1. Login to your blogger dashboard
2. Click on "Design" > "Edit HTML" (remember to back up your template)
3. Mark/Tick "Expand Widget Template"
4. Use ctrl F to find "Read More", if probably you can't fine Read More, find <data:post.jumpText/>
5. Choose any image of your desire below and replace "Read More" or <data:post.jumpText/> with the code of the image.

IMAGE 1:

 Code for the image above  

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCcE2r61wZOxaaNLFT2NqyS9BzHNLhPhwFhGGZbCyJVFO-YwC8Saz7q8QicW2hyphenhyphenVSwbdmnWfq906cNEjfkK6VX-VMl7-PhLFOyDyQfD2mnu2nfjbY3pwFqeDGKJSYATlG2yg4u9OF5eUhp/s1600/read-more-6.png" border="0" alt="Read Full Post" />

IMAGE 2 :

Code for the image above

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhtPYo-G-DbU55-5djkB7D5Yt0RSHjK4_0K6bam1GrYrE9pz6-7aFJ34bw_aBw_O_Lb4RUPToarDrjfSMeSjJVgM4396xHrWXODF1nux6JDN8JcSjOLsqqnquQVCF2pB1BPGLp_2cHPihz/s1600/read-more-4.png" border="0" alt="Read Full Post" />

IMAGE 3 :

Code for the image above

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3YC4YnHG9Y5ZgJJKuRkt5SPmh54sq24Pe9CGJSWoctjpeaA-BxQBevtzIyDzCVbzEqc8Z46ziKP8XkYIkUl-XYkwx-msn2eHb5AopfFcRchCquJQ3UM9D7F1P1xTz6c7SI1sRLdagylD1/s1600/read-more-10.jpg" border="0" alt="Read Full Post" />

IMAGE 4 :

Code for the image above

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLlltmN5QUqSs6NW9nWhCTagGnK6gwShypruCWsB08_Dym2uVMN1QMrxyaxlBzIsjD87IzzC7bVD11mSWzxnv0H46d-biz2GjSwV_iJGspk6tc2pXHrX6PzXkpKazTLJF4Ub5Bt-QJsIdX/s1600/read-more-9.gif" border="0" alt="Read Full Post" />

IMAGE 5 :

Code for the image above

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxjIzekeopmXfvulSK5NzRaNMEx1B-YXfBSgWReEwu-Tc5xbPIb6OHQFJ-Ze8WqECMVqz6piVy4WtHcL5PfsOlDGjtfICV7KaPAgJ_TO2FQ_jzDbp-E_QnnJL4shseEuxUGOOkSHehgZNG/s1600/readmore-3.gif" border="0" alt="Read Full Post" />

IMAGE 6 :

 Code for the image above

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7PdxxcviglAVmufpIHWqWbiATc5cs0li6O9eTcA2Jo9qbl3GJU4p5AtFGExgZTqse6OaSAL4FOpht-xjzFYmKLEEpaQ1OWlQnfm5-VFUAHpmHO54Lz9k6fBEiFsYYz0wrv9Juz3gfubbp/s1600/read-more-2.jpg" border="0" alt="Read Full Post" />

IMAGE 7 :

Code for image above

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0XAG_bHg56EUOYxJN3LJFEB4xwlOMo_PvsN-AmgVbXtQ3YM9rpNl5G0Esi0HSKQ7COxKRIGVjjEPt9SwG4dzJSn-m4ApgrVfFzlQGTkQAmlEhaDzQPrTlEcxn5s3u_2WBU7KeXpfmELLN/s1600/read-more-1.gif" border="0" alt="Read Full Post" />

IMAGE 8 :

Code for image above

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAwrdTE2ZuCksXHDKe0nVbRqTkO2O0BzbJLPdN8oeC1mhbbvfIQFbyz2jrhq91p9_6bBXj6VWA3OGVFN8JuoAqOhyphenhyphenTMIn-JTfmUlHCjLZ7uRrye8Uho4az5IPon-QH8bNEB-1BeON6_VkP/s1600/read-more-8.gif" border="0" alt="Read Full Post" />

IMAGE 9 :

Code for the image above

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjirEg_Mq6WQcPkgTydW0iCs68sULqKa_8XYpc0i5w7UcGdXx5WF-SrNQTMr_xtAu0LBDRMwNUSCH51t8a_hz3CNayt_JXRRCbmy_SblT3thA2bFopG6FxYt2heJCQEHV7fXRTFwwGA_akg/s1600/read-more-7.png" border="0" alt="Read Full Post" />

IMAGE 10 :

Code for the image above

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdYI0SN8oNMJ8jwLTGFqpAN-Lrd0ombpzp-cBred7S_Ne3BaoYOwYeZYQM5XT0uaCZPwRX1vabmHU8pETpvdjhS5Vv9m06mRdRwqOewzG-rnIbwJRdAyYUBwlG0oxs026cVvmfwER2da2_/s1600/read-more-3.png" border="0" alt="Read Full Post" />

After replacing the code in your template, click "SAVE TEMPLATE"

How To Add Stylish Subscription Box With Share Buttons Below Post

Adding subscription box below your each post is another best way of increasing your blog subscribers. This widget comprises of a subscription box, RSS link, twitter link, facebook link, and google + link. It will appear at the bottom of your post and this is one of the best way to get your readers attention.

 

How To Add The Subscription Box

• Go to your blogger dashboard
• Click on "Design" > "Edit HTML" > Back up your template
• Mark/Tick "Expand Widget Templates"
• Use crtl F to find the code below

<data:post.body/>

Now paste the code below immediately after the code above

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.RBstyle{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAuU6SgAOlDSiVSai_o_4P-yMMTEia6cFt6ClpBL6VeAQ5eu2Z3N_pQNmpZPtoONvja6H9ZlT8ApHIBN3HVcp8rm0JCzbcY6oNwPY1_ASDMId7uNudzX3wcQkIViXM2mf-FKuDU6-We376/s400/email_icon.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.RBsubmit{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

#emailwidget-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#emailwidget-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#emailwidget-outer td{
padding:3px 0;
}
</style>

<center>
<div id='emailwidget-outer'>
<div id='emailwidget'>
<table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
<tbody>

<tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>

<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 22px; margin:0px 0px 5px 0px; '>Get free daily email updates!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=mrqasimashraf&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='mrqasimashraf'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='RBstyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>

<input alt='' class='RBsubmit' title='' type='submit' value='Submit'/>
</form>
</td>

<td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px; '>Follow us!</p>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=mrqasimashraf' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxvRb8Zq-lMEVoyWyRUD4rdQW3swfxwEeSSKU1RydYqi8P9vf_IBO_uuWB0-mYLISXFPW39nRquMhyVJihew_eHn7wb0OYNNLRiVv9RqjizfXO53Lc2a0AAGCm3YpkLc2bNUlTjAmmp4Q/s1600/rss-30×43.png'/></a>

<a href='http://twitter.com/mrqasimashraf' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikJlnuf64VyzUhaFI0aNtO3H1QIICqlTOwRGx4-T8RIdv2EgGUG6zcVVugHj4XzjMRHnAiTHUU9WMABASvczlVSEMoei44ldJJhn5aO3pd1ufq3e0ZLLndCEHgqa-O9EQpXCG_ao3MXe4/s1600/twitter-30×43.png'/></a>

<a href='http://www.facebook.com/mrqasimashraf' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGm7I1SO5uZhTkfKJrYCypBU6lK0SVv0rnU4_rj4ojA1IalTNEU_G8fIRGqI_wYaHD9sWXhVyuYSIcZtj37XKKFO_aQGDSlMr-bb6vsdT6FXvVs6XeVfbVP9YSXAlPT5vx6Ln1mo-T-pc/s1600/facebook-30×43.png'/></a>

<a href='https://plus.google.com/u/0/109044510220593388639/' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0EQBgFfmGLCM6SZRH3jV3jAZEG4drFIXqpnYIowR2mtP8bxB_60GzLb3-W4l7zj1SPN9FP8OOfMLmOR1TyFgDOKNjKNqvioob_cMhlSK1xi6QuaAj_q7lIb0oooG6N44V6Nsy5D1CfxE/s1600/googleplus-30×43.png'/></a>

</td>
</tr>
</tbody></table>
<div align='right'><span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://www.realcombiz.com/2012/06/add-stylish-subsription-box-with-share.html' style='text-decoration: none;' target='_blank'><font color='#ffffff' decoration='none'>[Get this widget]</font></a></span></div>

</div></div>
</center>
</b:if>

• Replace http://feedburner.google.com/fb/a/mailverify?uri=mrqasimashraf with your your feedburner url
• Replace http://twitter.com/mrqasimashraf with your twitter profile url
• Replace http://www.facebook.com/mrqasimashraf with your facebook page url
• Replace https://plus.google.com/u/0/109044510220593388639/ with your google + profile url
• Click "SAVE TEMPLATE"