Blogger Tutorials, Tricks and Hacks

Here you will find all our blogger tutorials listed from all our categories and sections, Tutorials that covers every thing about blogger.

44

How To Change Blogger Mouse Cursors In Easy Way ( + 1000 Free Cursors )
I know a lot of blogger who want to control the look of every part of the blog, from template, to colors, font size, to style, and some people asked about changing the blogger mouse cursor, So today we are gonna talk about it in the easy way,
It can be done in only one step. Want to see a demo, then please click below and look how mouse is looking.

How to add it.

Go to your blogger account, And navigate to dashboard >> design >> edit html >>
And find the following code,
```
]]></b:skin>
```
And exactly before it, add the following code
```
body, a, a:hover {cursor: url(http://cursors3.totallyfreecursors.com/thumbnails/apple-tmani.gif), progress;}
```
And now click Save Template

The above step will give you a mouse cursor just like the one in the above demo blog, And because the aim of this tutorial is to give you all control over your blog cursor, So you can just change the red part in the above code
http://cursors3.totallyfreecursors.com/thumbnails/apple-tmani.gif
To What ever cursor url you like, So the code should be
```
body, a, a:hover {cursor: url(Cursor-Url), progress;}
```
And the question now is how to get another cursors.

Free sources for +1000 ready to use mouse cursors.

On this 2 links you’ll find more than 1000 free and ready to use cursors well categorized, so you just browse and find your favorite one, once you found your favorite one, replace the red words in the above code with it’s url.
- Totally Free Cursors
- Cursors @ Fun Utilities
Tip: To know more about how to get any image url from the above sites, Please read this.

39

Upgrade The Old facebook Comments Box For The New One in Blogger.
Hi all, As we all know, facebook released an updated version of the comments plugin, with some great features, So all my loyal visitors who used the old tutorial was wondering how to upgrade the comments box without loosing the current comments,
Actually I searched for the best and most simple solve for this upgrade and today i’m coming for you with one simple step,
so here is how to do it.

Please note: This post explain how to upgrade the comments box for the users who already installed it, If you want to install it from the beginning, Please follow this tutorial.

Warning : Before you start applying any changes to your blogger template code, We encourage you to Backup it, by clicking on Download Full Template link.

just go to your blogger account, and navigate to Dashboard >> design >> edit html , and check expand template widgets box, Now find the following code, ( It must be in your template if you are get the comments box through tutorial )
```
<fb:comments 
```
And replace it with
```
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <fb:comments migrated='1' 
```
please make sure to copy all the code including the space after the code,
Now click Save Template , that’s it,
To read the new comments box features please read this tutorial.

310

Surprise, New Facebook Comments Box For Blogger In Very Easy And Simple Steps – Fixed ( Full Guide ).
Again, this is the most waited feature for blogger users ( specially from allblogtools.com ), and now it’s available for allblogtools.com visitors only ( Exclusively again ), this is the first and the only tutorial around the web that tells you in really easy steps the integration of the new facebook comments box and blogger (blogspot) blogs.

Please note: If you think that you saw this tutorial before, The answer is no, it looks exactly like the old tutorial but this is an updated one, And a lot of problem are solved now, If you met any problems with our old tutorial, please try this one out.

For Upgrade: If you already have the old comments box on your blog, And don’t want to lose your current comments, Please Click here to learn how to upgrade easily.

Warning : Before you start applying any changes to your blogger template code, We encourage you to Backup it, by clicking on Download Full Template link.

What is the new facebook comments features.
- Threaded comments : reply to comments.
- User network : now it’s displaying the comment author not only name, but his profile info as well
- Permalink to specific comments : Permalinks have now been assigned to each comment so people can share links and be directed to specific comments.
- Notifications : sent to users will also go to the permalink, making it easier to respond. For example, clicking on the notification below will take you to the permalink of the original comment.
- 2 Color schemes, regular light, and the new dark colors.
now let’s do it, don’t worry, i know that must of you tried to add it to blogger blogs, with no result, but today you’ll see how to add it in really easy steps and it’s 100% working. but please be careful and pay attention for all the details.
This tutorial is updated.

Step 1. Disable Default Comments.

The first thing you should do it to disable blogger default comments. because you don’t want to have 2 comments forms.
go to your blogger account, navigate to settings >> comments
and next to comments field choose Hide, then scroll down and click Save Settings

Step 2. Generate your Facebook App ID.

now you should generate your own facebook app id, it’s really easy and one step process,
just go to this page, facebook developers

then click + Set Up New Application

enter your application name, ( you can type any name )

and check agree and click Create Application

then click on Connect tab (on the left tabs-list) or see the next image.

and fill the following info.
Connect URL : Enter your blog url and you must enter it with an ending dash. (for example: http://myblogname.blogspot.com/) .

Base Domain you must type blogspot.com

then click strong>agree and click Save Changes
on the next page facebook will generate you alot of info. you’ll need only one line, it’s App ID:
just copy it and keep any where, we’ll need it in the next steps. please see the following image to see where you’ll find your facebook App ID:.

Step 3. Codes To Add To Your Template.

you must add the following codes to your blogger template to ensure that the comments box will work for your blog in the right way.
and in this step we’ll add the following codes,

xmlns attribute

SDK script

Open Graph protocol tags
- Adding the xmlns attribute :
please go to your blogger account again, and navigate to, layout >> edit html >> and check Expand Widget Templates
then find the following code,
```
<html
```
you’ll find it on the top of your code. second or third line, and after it add the following code,
```
xmlns:fb='http://www.facebook.com/2008/fbml'
```
you must type a space before it and after it,
here is an example.
```
 <html  xmlns:fb='http://www.facebook.com/2008/fbml'  expr:dir='data:blog..............2005/gml/expr'  >
```
- Adding the SDK script Code :
search for
```
<body>
```
and after it add the following code,
```
<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : 'YOUR   APP ID',
      status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the   session
      xfbml  : true  // parse XFBML
    });
  };

    (function() {
    var e = document.createElement('script');
      e.src = document.location.protocol +   '//connect.facebook.net/en_US/all.js';
    e.async = true;
      document.getElementById('fb-root').appendChild(e);
    }());
</script>
```
but please don’t forget to change YOUR APP ID to your app id ( you got it in the previous step ).
- Adding the Open Graph protocol tags:
copy the following code.
```
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta   expr:content='data:blog.pageTitle' property='og:title'/>
<meta   expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta   expr:content='data:blog.title' property='og:title'/>
<meta   expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta   content='MY-SITE-NAME' property='og:site_name'/>
<meta   content='http://google.com/help/hc/images/logos/blogger_logo.gif'   property='og:image'/>
<meta content='YOUR-APP-ID'   property='fb:app_id'/>
<meta content='YOUR-FACEBOOK-PROFILE-ID'   property='fb:admins'/>
<meta content='article'   property='og:type'/>
```
and change the colored text to the following,
Change MY-SITE-NAME with the one you want to appear when a user likes a page. (Gil likes Helping on Facebook)

Changehttp://google.com/…/blogger_logo.gif with your blog logo, or remove the all tag if you don’t want it.

Change YOUR-APP-ID with your application ID number.

Change YOUR-FACEBOOK-PROFILE-ID with your own facebook user profile ID.

after making this changes add the above code just before
```
</head>
```
now we finished adding the facebook codes to your template, please don’t touch anything and continue to the next step.

Step 5. Adding the Comments Box to your blogger template.

please find the following code.
```
<data:post.body/>
```
and after it, please paste one of the following codes.
For Light Comments box ( like the one in the demo )
```
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><img alt='' class='icon-action' height='51' src='http://4.bp.blogspot.com/_JwD5r652h00/S_K3UAPbbuI/AAAAAAAAAWQ/sZRBQArO34k/comments-facebook.gif' width='331'/></p>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url'   expr:xid='data:post.id'/></div>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='http://allblogtools.com/imgup/1-2010/allblogtools-blogger-templa.gif' width='16'/> <b><a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogToolsFacebook comments for blogger</a>  brought to you by <a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogTools.com , Get Yours?</a></b></div>
</b:if>
```
For Dark Comments box ( If you prefer to display the comments box in a dark colors. )
```
<data:post.body/>
```
and after it, please paste one of the following codes.
For Light Comments box ( like the one in the demo )
```
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><img alt='' class='icon-action' height='51' src='http://4.bp.blogspot.com/_JwD5r652h00/S_K3UAPbbuI/AAAAAAAAAWQ/sZRBQArO34k/comments-facebook.gif' width='331'/></p>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url' colorscheme='dark' expr:xid='data:post.id'/></div>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='http://allblogtools.com/imgup/1-2010/allblogtools-blogger-templa.gif' width='16'/> <b><a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogToolsFacebook comments for blogger</a>  brought to you by <a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogTools.com , Get Yours?</a></b></div>
</b:if>
```
To change the width of your comments box, please change 450 to what ever you want, it’s in pixels,

and now please click Save Template , then check your blog. i wish it looks great and works perfectly.

Demo and Credits.

to see a demo for this comments box in live blogger blog please click here.

please don’t remove my link or name from this widget, i worked so hard to make it easy and simple with this great features.
leaving my link, encourage me to provide you with more and more tutorials like this.

warning, if you have facebook like button installed on your blog please remove it before applying this tutorials.

25

Add FaceBook Send Button To Blogger ( BlogSpot ) And Customize It.
Few day ago, face book announced and amazing new button as usual, This time it’s made specially for who loves sharing in private ,
This button features are amazing and it’s completely different from the “facebook like button”
This button allows you visitors (if they logged in FB accounts) to send your blog posts to their facebook friends, there is no need to mention how important is this and facebook for marketing your blog as we all know that facebook already sending blogs thousands of visitors every day. First of all, lets see a demo button on a blogspot blog.

Now lets learn how to do it, and i’ll list the tutorial steps to make it easy and not to make you loos your self into the details and customization,
Don’t worry, the button it self can be added only in 1 step, but for the advanced users, you can apply the additional steps.
- 1 ) Facebook send button code.
- 2 ) Facebook send button + Like button code.
- 3 ) Where to put the button code.
- 4 ) Customize it’s style ( dark or light )
- 5 ) Advanced customizations.
1 ) Facebook send button code.

Here is the new send button code if you want to add it alone to your blogger blog.
```

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:send colorscheme='light' expr:href='data:post.url' font='arial'/>

```
2 ) Facebook send button + Like button code.

And this is the code that you will use if you want to add like + send buttons together.
```

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><fb:like colorscheme='light'  action='like'  layout='standard' expr:href='data:post.url' font='' send='true' show_faces='false' width='450'/>

```
3 ) Where to put the button code.

Warning : Before you start applying any changes to your blogger template code, We encourage you to Backup it, by clicking on Download Full Template link.

After you decide which code you’ll use, it’s the time to choose where you’ll put it on your blog.
Actually there are two options for you to put your button at, Below the post title, Or After the post body.
Now go to your blogger account, Navigate to, Dashboard >> Design >> Edit Html .
Click on expand template widgets
And now follow the next step.
To place the code below your post title, at the top of your post,
Please find the next code in your template,
```
<div class='post-header-line-1'>
```
Or
```
<div class='post-header-line-1'/>
```
And paste the code after it,

Now if you want to put your button below or after your post body, Please find the following code,
```
<div class='post-footer'>
```
Or
```
<data:post.body/>
```
And paste the code After it.

Now click Save Template
And you are done, now go to your blog to preview your new button,
Or if you want to customize your button, or see some advanced features, please continue reading this detailed blogger tutorial.

4 ) Customize it’s style ( dark or light ).

Now if your blog template, don’t look good with the light button, Just change this code in the above codes,
```
colorscheme='light'
```
to the following code
```
colorscheme='dark'  
```
5 ) Advanced customizations.

Now What it you want to make the button only appear inside your posts and not on your blog pages / archives / labels pages,
put the following codes above and after the button codes.
```
<b:if cond='data:blog.pageType == &quot;item&quot;'>
The_Button_Code_Here
</b:if>
```
The following customizations for (Send + like) code. so if you piked the send only button skip this part.

How to change (like) to (recommend).
Find the following part in the button code.
```
action='like'
```
To the following
```
action='recommend'
```
hide Who liked the post and show only the number of likes.
Just find the following part at the button code.
```
layout='standard'
```
And change it to
```
layout='button_count'
```
And that’s it,
I wish i covered most of this new button customizations, and for sure if there any updates, i’ll post it here.

Blogger Follow Us J-Query Widget ( Social Icons )

This image has no alt text

After getting a lot of questions about our social icons on our sidebar, and how to add it for blogger, i decided that blogger users deserves whats better, So today we will learn how to add a beautiful and clean Follow Us J-query blogger widget. Please see the demo , then read the steps to learn how to add it in very easy steps.

Widget Features.

Auto resizing that fits any blogger template.
4 social icons including ( facebook, twitter, mail letter, and rss feeds).
J-Query hover effect ( tooltip ).
Clean and unique design.

Warning : Before you start applying any changes to your blogger template code, We encourage you to Backup it, by clicking on Download Full Template link.

Step 1, Adding the css code

Please go to your blogger account, And navigate to ( Dashbaord >> Design >> Edit Html )
And At this page, Please find the next code,

]]></b:skin>

And exactly before it, Please add the following code,


  #social {
  width: 98%;
  height: 45px;
  margin: 0;
  padding: 10px 5px 5px 30px;
  list-style: none;
  border-right:solid 1px #853529;
  position: relative;
  background: url(http://2.bp.blogspot.com/-Nf6QgqI-jkc/Tas56HEUrwI/AAAAAAAAAxQ/hw_KYA9pPZA/follow-bg-abt.png) no-repeat left top;
  }

#social p{
  font-size:1.5em;
  color:#FFFB98;
  font-weight:bold;
  float:left;
  margin: 10px 10px 0 0;
  text-shadow: 1px 1px 0px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=1); 
  }

.abt{
  font-size:0.8em;
  color:#787878;
  float:right;
  margin: 0 -30px 0 0;
  text-shadow: 1px 1px 0px #ffffff;
  filter: dropshadow(color=#ffffff, offx=1, offy=1); 
  }

#social li {
  width: 32px;
  height: 32px;
  float: left;
  margin-right: 3px;
  }

#social li a {
  float: left;
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -1000em;
  background-repeat: no-repeat;
  text-decoration: none;
  }

#social #rss {
  background-image: url(http://2.bp.blogspot.com/-27yL99iDt70/Tas569zVJWI/AAAAAAAAAxo/NIEumM2DKRo/s400/allblogtools_rss.png);
  }

#social #facebook {
  background-image: url(http://4.bp.blogspot.com/-lfZmi7_j72c/Tas56hfwNxI/AAAAAAAAAxg/D_xE4bPyo60/s400/allblogtools_facebook.png);
  }
  #social #twitter {
  background-image: url(http://2.bp.blogspot.com/-BHCqkqm4Dnw/Tas57UCTyAI/AAAAAAAAAxw/fCj4yjzJE0g/s400/allblogtools_twitter.png);
  }
  #social #mail {
  background-image: url(http://1.bp.blogspot.com/--tzwYodHzk8/Tas56U26pSI/AAAAAAAAAxY/Xqxm-jfCPkA/s400/allblogtools_email.png);
  }

span.tooltip {
  background: #575757;
  padding: 3px;
  display: block;
  width: 140px;
  border: 1px solid #000000;
  position: absolute;
  margin-top:-40px;
  color: #F0F0F0;
  font-size:10px;
  text-indent: 0;
  font: Arial, sans-serif;
  text-align: center;
  -webkit-box-shadow: inset 2px 2px 2px #616161;
  -moz-box-shadow: inset 2px 2px 2px #616161;
  box-shadow: inset 2px 2px 2px #616161; 
  -moz-border-radius: 5px;
  border-radius: 5px; 
  }

And now go the the next step.

Step 2, Adding the J-query codes

At the same page in step 1, find the following code,

</body>

And before it, and the next code,


<script type='text/javascript'>
  window.setTimeout(function() {
  document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
  }, 10);
  </script>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[
  $(document).ready(function() {

 $('#social li').each(function() {

  var $li = $(this);
  var title = $li.find('a').attr('title');

  $li.find('a').removeAttr('title');

  $('<span class="tooltip"/>').text(title).appendTo($li.find('a')).hide();


  $li.find('a').mouseover(function() {


  var top = $(this).position().top;
  var left = $(this).position().left;

  $(this).find('span').fadeIn()({
  top: top,
  left: left
  }, 'slow'); 

  });

  $li.find('a').mouseout(function() {


  $(this).find('span').fadeOut('slow');


  });

  });


});

//]]>
  </script>

Now please click Save Template And go ahead to step 3.

Step 3, Adding the widget code to your sidebar.

Now go to ( Dashbaord >> Design ) , You are now at page elements page,
At your sidebar, click Add A Gadget, And from the list, choose Html / JavaScript
Now paste the following code,


<ul id="social">
  <p>Follow Us </p>
  <li><a href="http://BLOG-NAME.blogspot.com/feeds/posts/default?alt=rss" id="rss" title="Follow Our Feeds">Rss</a></li>

<li><a href="MailLink#" id="mail" title="Subscribe To Our News Letter">Mail</a></li>

<li><a href="FaceBookLink#" id="facebook" title="Be Our FaceBook Fan">Facebook</a></li>

<li><a href="TwitterLink#" id="twitter" title="Follow Us On Twitter">Twitter</a></li>
  </ul>

<b class="abt"><a href="http://www.allblogtools.com/#">Get This Widget</a> | By <a href="http://www.allblogtools.com">AllBlogTools.com</a></b>

All you have to do is to change the green words to your social account urls.
And click Save
That’s it, I wish you like it and in case you wanted to download the widget images, you’ll find it here Note: There is a file embedded within this post, please visit this post to download the file..
Feel free to leave your comments and feedback.

8

Blogger’s YouTube channel Comes Back To Live

After a long time of being idol, Blogger team now presenting new thirteen videos that covers a lot of tips, features, As well some funny videos.
That’s not all, but blogger team promise to presents more videos in the future, You can view or subscribe blogger channel here.
Blogger also wants to hear from users feedback about the channel and suggestions for the next videos uploads, so you can share your ideas about it using this form.

22

Blogger Font Size Control ( Changing ) J-Query Widget
As a blogger, I know that various readers with a different screen sizes and habits are reading my site, So the font size should suitable every single reader, no matter his screen size, or his favorite size,
Today I’m presenting one of the most widgets I’ve ever customized for blogger.
I enjoyed making it, and i think you’ll enjoy using it, This widget will allows your readers to change the font size of your blogger posts as they want, bigger or smaller, in an easy, simple and fast way without refreshing the page or any thing using the j-query. So let’s see how to Add it.

Warning : Before you start applying any changes to your blogger template code, We encourage you to Backup it, by clicking on Download Full Template link.

1. Adding The CSS And Java.

After Being logged in to your blogger account, Please go to ( Dashboard >> Design >> Edit Html )
and find the following code,
```
</head>
```
Exactly before it, Add the following code,
```
<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/mootools.js' type='text/javascript'/>
  <script type='text/javascript'>
  window.addEvent(&#39;domready&#39;, function(){

var el = $(&#39;myElement&#39;),
  font = $(&#39;fontSize&#39;);

new Slider(el, el.getElement(&#39;.knob&#39;), {
  steps: 35, // Tamaño máximo de la letra
  range: [8], // El 8 es el tamaño mínimo
  onChange: function(value){
  font.setStyle(&#39;font-size&#39;, value);
  }
  }).set(font.getStyle(&#39;font-size&#39;).toInt());

});
  </script>

<style type='text/css'>
  div.slider {
  width: 97%; 
  height: 26px;  
  background: url(http://4.bp.blogspot.com/-r0WKMic2VOs/TaJQD3MI26I/AAAAAAAAAxE/od7dEWVqFPw/slider-bg.gif) no-repeat right top;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border:1px solid #708B95;
  margin-top:40px;
  }
  div.slider div.knob {
  background: url(http://4.bp.blogspot.com/-0iBbRw58HkM/TaDqwZuIN5I/AAAAAAAAAw8/g9445jD5q5w/s400/allblogtools-pin.png) no-repeat;
  width: 32px;
  height: 47px;
  margin:-35px 0 0 0;
  cursor: move;
  }
  div#fontSize {
  height: 40px;
  }
  </style>
```
And move to the next step.

2. Add the Widget Code To The Posts Area.

At the same page in step 1, Try to find the following code or a similar one to it,
```
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
```
And you’ll have to add simple code before and after it, So it will be like the following,
```
<span id='fontSize'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</span>
```
So All you have to do in this step is to add only the blue lines before and after the code.
Now click Save Template and go to step 3.

3. Adding The Widget For Your Template.

The great thing about this widget is that it fits any blogger template, and you can put it any where on your blog,
All you have to do is to go to, ( Dashboard >> Design )
And any where, click Add A Gadget button, and choose ( Javascript / Html )
and in the content area, paste the next code,
```
<div id="myElement" class="slider"><div class="knob">/div></div><p style="font-size:10px; float:right; margin:3px;">Widget By <a href="http://www.allblogtools.com/" title="Blogger Templates" target="_blank">AllBlogTools.com</a> | 
<a href="http://www.allblogtools.com/tricks-and-hacks/blogger-font-size-control-changing-j-query-widget/" title="Blogger Font Control Widget." target="_blank">Get Yours ?</a></p>
```
And Click Save
Now your widget is ready on your blog and you can test it.

Demo, Files And Credits.
- To see this widget in a live demo, Click here
- This widget contains 2 images and 1 jave file, in case you needed this files to host it on your own server, you can download it from here. Note: There is a file embedded within this post, please visit this post to download the file.
- This Script originally made by CiudadBlogger.com

117

Add Beautiful Drop-Down Menu For Blogger

Recently a lot of my loyal visitors asked me about the ability to add an easy and beautiful drop-down menu for blogger,
So today we will learn how to add a drop down menu for blogger and a very easy way,
This menu is compatible with most of modern and classic browsers, and can be added for any template in only 3 steps,
but please remember,

Don’t forget to backup your current blogger template, ( by downloading it )

1. Add The Menu CSS

Go to your blogger account,
Navigate to Dashboard >> Design >> Edit Html >
And find the following code,

]]></b:skin>

And before it, add the following css code,

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}

#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}

#jsddm li a:hover {
background: #C8C8C8;
}

#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}

#jsddm li ul li {
float: none;
display: inline;
}

#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}

#jsddm li ul li a:hover {
background: #A3CEE5;
}

2. Adding the Java codes

At the same page, find the next code,

</head>

Then add this code exactly before it,


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[

var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;

function jsddm_open()
  {  jsddm_canceltimer();
  jsddm_close();
  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
  {  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
  {  if(closetimer)
  {  window.clearTimeout(closetimer);
  closetimer = null;}}

$(document).ready(function()
  {  $('#jsddm > li').bind('mouseover', jsddm_open)
  $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;
  //]]>
  </script>

Now Click Save Template

3. Adding The Menu To Your Blog

Now Go to your Dashboard >> Design >>
And on your page elements page, click on Add A Gadget any where on the screen,
And choose ” HTML / JavaScript ” , Leave the title empty, ant at the content area, paste the following code,


<ul id="jsddm">
  <li><a href="#">Home</a>
  <li><a href="#">Menu 1</a>
  <ul>
  <li><a href="#">Drop 1-1</a></li>
  <li><a href="#">Drop 1-2</a></li>
  <li><a href="#">Drop 1-3</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 2</a>
  <ul>
  <li><a href="#">Drop 2-1</a></li>
  <li><a href="#">Drop 2-2</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 3</a>
  <ul>
  <li><a href="#">Drop 3-1</a></li>
  <li><a href="#">Drop 3-2</a></li>
  <li><a href="#">Drop 3-3</a></li>
  <li><a href="#">Drop 3-4</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="#">AllBlogTools</a></li>
  </li></ul>

And click Save
Now, it’s important to move the new gadget from the current place to the top of your page, if it was on the sidebar, or footer, just drag it to your page header or above your posts area, and click And click Save again,
Now go to view your blog and enjoy your new blogger drop-down menu.
Note : In step 3, you must change the menu titles and replace all # letters by the right menu url.

Demo

To view a live demo for this menu, please click here,
All you comments are welcome.

8

Finding New Blogging Inspiration

By now, we are all well aware of the benefits blogging can bring to a business. We’ve seen blogs with proven and demonstrated results of higher traffic and higher conversion rates for their sites, which makes maintaining a good blog crucial and worth a consolidated, consistent effort. However, to meet the recommended blogging quota of 2 to 3 times per week and maintain good content, excellent keyword density ratio and a style and voice that’s exciting and keeps readers interested, is no small feat. So, what do you do when you have simply run out of blogging inspiration but you have an audience craving it on a weekly, sometimes even daily basis? If you’re in that spot or nearing it, try some of these tips.

1. Take Advantage of “Trending”

Thanks to sites like Twitter and Google’s instant results, we live in an era where seeing what’s currently trending is super quick and easy. People want to know what you think about what’s happening today. Search for your area of content, whether it’s selling computer chips or chocolate chip cookies, and see what’s going on in that world. Maybe there’s a recall, maybe you can talk about a product that’s potentially coming out in the future, etc. If you can give viewers new, not yet seen information, you’ll gain new readers quickly and keep current readers coming back.

2. Interview Key People

When your inspiration has run dry, interview others in your field. Not only will their take on a subject be new to your readers, it will most likely give you some inspiration as well. For starters, you’ll either agree or disagree with what they had to say, which just might be inspiration for your next blog.

3. Go to the Niche Level

We typically get caught up in covering the broad spectrum of our field. This is certainly good in some aspects and can indeed reach a broader, larger audience, but at times, you can bore both yourself and your readers, as well as lose your believability. It’s generally easy for just about anyone to give surface level information, and readers are not blind to this. You establish credibility when you take things to a niche level. Take some opportunities to delve deep into certain facets that you really know about. You’ll regain your own excitement when you can really talk about what you know intimately, and your readers will appreciate seeing just how far your knowledge level does extend.

4. Ask your Readers

You are writing for their benefit, after all. Post a blog asking what your readers are interested in knowing. What questions do they have? How can you benefit them? Never look at this as a sign of weakness that you just don’t have anything to say (even if you honestly don’t have anything to say). Responding to your readers’ questions is crucial. However, you’re going to have to be willing to possibly do some extra additional work on your part. You may or may not know the answers to the questions you’ll get, so you’re going to have to do your own research. The upside is that writing good, high quality responses will gain you extensive readership loyalty.
Remember: to inspire, you must be inspired. If nothing else, go get actively involved in the field. Go where the workers are, where the activity is happening, and see if you can regain your inspiration.

15

5 New Amazing Official Blogger Templates ( Images & Video )
In earlier time today blogger announced launching 5 new amazing blogger templates built with the latest technologies,
the new templates build with the HTML5, CSS, And Ajax,
The new templates are now public for all blogs and you can view it on your own blog, blogger team now previewing and testing this templates so the new templates will be available for all bloggers to apply and customize it on any blog,
for now you can only view it on your blog.

The new templates features.
- Infinite scrolling: read more posts without having to reload or click to a second page
- New layouts: different views suited to different types of blogs
- Speed: download images as you view them, not all at once in advance
- Interactivity: there are now more ways to experience and engage with blog content
How is this templates look.
```
Mosaic View
```
```
Snapshot View
```
```
Flipcard View
```
New Templates In A Video.

Demo And Additional Info.
- To try this new templates, you can try this demos, Flipcard, Mosaic, Sidebar, Snapshot and Timeslide.
  Or you can view it on your own blog, by adding this word to the end of your blog url.
```
/view
```
  Here is an example,
```
yourblog.blogspot.com/view
```
- To know how to disable it on your blog, please visit this article.
- And while blogger team bring this to your blog as a customize able template, you can leave your feedback here.
I wish you all like this and we will keep an eye on all new updates and will post it here once we get it.

15

Blogger Released “Follow by Email” New Gadget
Today in early time, blogger released an important gadget, “Follow by Email”, this gadget allow your readers to subscribe to your blogs updates by e-mail and get the latest updates and posts delivered to their Inbox.
What is this gadget features

The New Gadget Features.
- Simple to add and use with only few clicks.
- Delivering your blog’s posts and updated to your readers mail inbox.
- Detailed stats about your number of subscribers and daily views.
How To Add It.

Just log into your blogger dashboard >> design >> and in page elements click Add A Gadget, and you will find the new “Follow by Email” gadget listed at the top of the gadgets page.

when you click on “Follow by Email” link, you’ll see a new window like the above image,
Give it your prefered title, and leave the Feedburner as it is. then click Save,
and you can enjoy your new gadget,

Demo And More.

To view a demo for this gadget, please click here, If you want to view your blog subscribers stats, so please login to Feedburner.com with your blogger account.
That’s not all, soon I will post a tutorial about how to customize this new gadget.

20

Incredible Blogger New Features To Come In 2011 ( Images And Video )
Google announce some great news at Blogger SXSW 2011, more than 10 years of presenting the most reliable blogging platform, blogger team decided to bring to us the next generation of blogger,

blogger in past and in 2010.

Blogger did a great job for all of us, and only at 2010, Blogger introduced template designer, real-time stats, comment spam filtering, mobile templates, web fonts and more. And blogger was the most reliable blogging service.
But blogger promise us all that blogger will bring more and more to us at 2011.

What Did Google Announced At SXSW 2011 About Blogger.

Next-generation user interface was the magic word that we all liked, there are many new features, but google announced only 4 new features.
- New Generation Interface.
- New User Dashboard.
- New Posts Editor.
- New Content Discovery Feature.
This is great news and the new blogger generation looks awesome and presenting the latest technology on the web, it’s fast, easy, and simple. are you ready to see it.

The New Features In Images.
```
The New Blogger Interface
```
```
The New Blogger Dashboard
```
```
The New Blogger Posts Editor
```
```
The New Content Discovery Feature
```
Google Video About New Features.

Looks great, right? This is only what google allowed to talk about, there are more new features to come.
I wish we will see this new features soon.

20

Latest Most Important 5 Blogger Updates
I’m so exciting to write this post because we missed some important updates that blogger team made to blogger platform, and i can’t just keep posting tutorials without posting some thing about this amazing blogger updates and news, are exciting too, so let’s see what is the most important blogger updates through the last few weeks.

1. Blog’s Stats Gadgets.

This new stats gadgets allows you to show of your blog page views with out using any external scripts, just go to your dashboard >> design >> page elements, and click add new gadget, then choose the Blog’s Stats gadget,
this gadget have some great features, you can choose the page views to be displayed as a numbers, or in a bars, and you can choose the both. you can change it’s color, to suit your dark or light colors blogger template.

2. Blog Feeds Control.

As a professional or beginner blogger, you must know that your blog feeds are important to your blog readers, and in the past, you didn’t have the full control on your blog feeds, so blogger now added a nice feature allows you to take some control over your blog feeds.
By going to your blogger dashboard, navigate to your settings page, and click on Site Feed tab, Now you will see a drop down menu, this drop down have 3 options,
- Short : Will show only the first 400 characters of your posts in your feeds, and will ignore the html, and all images on your post
- Full : Will forward all your post to your feeds and will show all element including html, and all images
- Until Jump Break : This will allow your feeds to take only the part that is before the jump break only, and by this way, you can control every single post with it’s own rule.
3. Web Fonts To Templates Designer.

After google released web fonts free service and millions around the world loved it and used it,
google made a great step by launching web fonts to all blogger users.
You can try it your self by going to the blogger template designers through your account, and then choose the text that you want to change ( post title, blog title, …. ) and click on your favorite font to see it’s preview, if you liked it, then click apply to blog.

4. Official Blogger Android App.

Android OS used now by millions, if you are a blogger user and have a gadget that running on Android OS, so you should get this amazing app,
it’s the official Blogger Android App. lets see what is this app can do for you,
- Multiple accounts and blogs : You can easily switch through your blogs and account.
- Write and save/publish : From your gadget, you can write a post, and add some labels, you may save, or publish it.
- Photos from camera and gallery : You can add photos directly using your gadget camera, or from your gallery.
- Sharing to Blogger from gallery or browser.
- Share location : You can share your location by activating the location bar
- And some extra amazing features…
5. More Supported Languages.

Blogger added new 9 languages to a collection now totaling 40 languages, the new languages are ” Amharic, Arabic, Bengali, Greek, Persian, Gujarati, Kannada, Hindi, Malayalam, Marathi, Nepali, Punjabi, Russian, Sanskrit, Serbian, Tamil, Telugu, Tigrinya, and Urdu “
You can enable your preferred language by going to Settings >> Basics tab, and select Enable, then choose your language.
Please note that : The new language options are only available on the new post editor
Dear readers, this was the most important recent blogger updates, i wish you will benefit from it all.

73

Adding QueryLoader (‘LazyLoad’) Script For Blogger And Customize It.
Hi all hear visitors, It’s been a long time since i wrote my latest tutorial here, and sure this is because working on our new version, which released last week, i wish you liked it all,
Today we are going to learn a new tutorial about how to apply the QueryLoader (LazyLoad) script for your blogspot blog.

What is the QueryLoader (LazyLoad).

QueryLoader is a blank black ( can be changed ) screen that covers your blog till all content loaded, which means that your visitors won’t see the actual loading of your blog, instead of that, they will see a loading page with a bar and percentage of the overall blog loading, it’s build using j-query and css. easy to apply to your blogger blog, and customize able.

Step 1, adding the jave files.

In this step we will add a scripts files to your blogger template.
Please navigate to your dashboard >> Design >> edit html , and please find the following code,
```
</head>
```
And exactly before it add the following code
```
<script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'/>
<script src='http://blogger-loader.googlecode.com/files/queryLoaderpre.js' type='text/javascript'/> 
```
Step 2, adding the jave Codes.

And on the same page, please find the following code,
```
</body>
```
And before it add the next code,
```
<script>
	QueryLoader.selectorPreload = &quot;body&quot;;
	QueryLoader.init();
</script>
```
Step 3, adding the Css Codes.

now on the same page too, find this code,
```
]]></b:skin>
```
And before it , add this code,
```
.QOverlay {
	background-color: #000000;
	z-index: 9999;
}

.QLoader {
	background-color: #CCCCCC;
	height: 1px;
}

.QAmt {
	color:#FF530D;
	font-size:50px;
	font-weight:bold;
	line-height:50px;
	height:50px;
	width:100px;
	margin:-60px 0 0 -50px;
}
```
now Click Save Template
And your blog now have the script installed and ready, click preview or view your blog to see the script in action.

Additional Step, Customize the colors.

Now this is an extra step and you can do it or not, as you like,

If you want to change the colors, you have to change values in the css code, “step 3″
Please look at the following image to know what what you should change to get your own style.

If you wondering about how to get your own color codes, i think you should have a look at our amazing color codes tool here.

Demo, Credits, And files.

This script originally coded by gayadesign.com and customized for blogger by me , For a demo for this script please click here,
In case you wanted to host the file in step 2 on your own server or any where else, you can download it here, Note: There is a file embedded within this post, please visit this post to download the file.

10

Google Needs Your Help To Improve Blogger, You Can Get 75$ Gift.
“We’re working hard to make Blogger better and need your help” that’s what blogger says on blogger official blog.
Blogger asking you to sign up for a usability study.
you’ll give blogger your feedback about some new ideas currently in development.
Google says that you can get $75 in American Express gift checks after you actually attend a study session with Google.

To participate you will need to:
- -Be at least 18 years old
- -Accept the terms of our Usability Non-Disclosure Agreement
- -Allow us to video or audio record the session
- -Have a PC computer running Windows 7/Vista/XP/2000
- -Have a broadband Internet connection (DSL, Cable, T1 all fine).
- -Have a phone you can use comfortably while working on your computer for the duration of the study session. A speaker phone or hands-free headset is recommended.
this study will help Google to better understand your needs and test them before launching them in the future.

34

How To Use Google Custom Fonts For Blogger.
For years, Bloggers and web-designers were using those simple web fonts to style their blogs and templates. They didn’t had an option to change those fonts as there were only some fonts accepted world-wide as web fonts. It was impossible to use another fonts on web pages as they would appear in ten monitors in ten different styles ! Their appearance may change in respect of the change in the OS, softwares … etc of that computers. So web-designers were trapped under those countable fonts…

But now Google has launched their new service Google web fonts with the slogan – ‘Making the Web Beautiful!’. This service will allow you to use custom fonts on google font directory on our blog/ websites without any sign-up or anything else. As it’s from ‘Google’, It doesn’t have any complications and it’s also completely free for commercial and private use.,No restrictions held or no harsh laws. This could make your blog look more stylish and is applicable for blogger blogs too. Don’t get amazed, It’s True ! I’ll show you how to do it with blogger.

Step 1 : Back-up Your blogger template

It’s always the first step for any blogger tutorial. I’ll be using this step as the first step for all my tutorials on allblogtools. You should always take a back-up of your blogger template before testing any hacks on blogger.

For this, go to Design or layout -> Edit HTML -> Download full template

Step 2 : Select your Font

For this, Go to Google Font directory and select any one of those stylish font, which you want to use on your blog.

Step 3 : Get the Code for your Font

In this tutorial I’ll be using the Tangerine font, Which I liked the Most. For this just click on the name Tangerine and a new windows will open. Select The tab named ‘Get the code‘.

Step 4 : Add the Code to your Blogger template

Now you have to copy the Code they provide and you have to add the code to your blogger template, just after
```
<head>
```
tag of your blogger template.

The code may look something like;-
```
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
```
Important : ?Please add a Forward slash (“/“) before the the end of the tag (“>”) of this code. i.e, The above code should look like ;-
```
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'/>
```
This is because blogger use XML for coding which won’t allow unclosed tags like this. So you have to close this tag by adding the forward slash.

Now Copy the code and paste it just after
```
<head>
```
. It should be the first code after the
```
<head>
```
section. Otherwise it could cause problems while displaying the text in IE and may be in Firefox.
Please remember to add the forward slash before the end tag. and now please click Save Template

now the code required for Google web font has been added to your blog. Now you have to can use google fonts in your blog by applying it on any widget tags.

Step 5 : Add the CSS code for Font to your Blog.

Now the last and final step. In this step, you have to specify where you want to add the font and have to add the css code for it.

If you want to make the font appear for a specific sentence only in your blog post, then use the HTML code ;-
```
<div style="font-family: 'FontName', serif;">Your text</div>
```
in the above code change

FontName : to the font name that you chosen it from google.

Your text : to any text you want.

If you want the font to appear for your
- Blog titile
- Post title
- post body
- sidebar fonts
you have to add the CSS code for it. Don’t worry, It’s very very easy.

Here I’ll tell you How you can change your post title. For this you have to search for the title css code
```
.post h3
```
or
```
.post-title h3
```
This is the common css code for post title in blogger. now we have to add the css code for the new fonts for this code,. For this, add/modify these lines below the above codes.
```
font-family: 'Your Font Name';
```
The code should look something like ;-
```
.post h3 {
font-family: 'Your Font Name';
}
```
Here I had added the css code for Tangerine. You should post the css code between the “{” and “}” tags of .post h3. Like wise you can add the css code for other position too by modifying the css code.

Here i’ll mention the main positions and the common css code for each position. Please note that it may change if you are using any custom template.
- Title : h1
- Post title : .post h3 or .post-title
- Post font : .post-body
- Sidebar : .sidebar h2
the above tags helps you to change the font for any position of the above 4 tags.
for example, if you want to change the post font,
in the above table, you can see that the tag to edit for the post font, is .post-body
so you have to search for .post-body in your template, and below it, add the following line.
```
font-family: 'google Font Name';
```
the final code should looks like

The code should look something like ;-
```
.post-body {
font-family: 'Your Font Name';
}
```
These above values may change in some custom themes. But these are the common seen tags. If you didn’t find the tags with this, try searching similar tags.

Demo

If you want a demo for this, try viewing the demo page of my new theme, I had changed it’s header into ‘Lobster’ and navabar and post body too to google fonts. have a look at it. click here to see a demo

I hopes that this tutorial was helpful for all of you. If you have any question regarding this, please feel free to ask them here, the comments page are open for it, isn’t it ?

42

Better Commenting System And Form For Blogger, IntenseDebate.
The most common question i hear from blogger users is ( can i have a better comments form ? )
alot of blogger users just want that simple form for the comments area that looks elegant and have a name ,e-mail and website boxs only,
Today we’ll learn how to convert our blogger regular comments form to another professional widget, this widget is presented by intensedebate.com

Widget Features.
- Ease of use:, your visitors just have to type, name and mail only.
- Threading: Reply directly to a specific comment with nested replies.
- Email Notifications: Receive alerts for replies and new comments.
- Reply-By-Email: Respond to and moderate comments via email.
- Comment Voting: Multiple Admins illustration Bring the best comments to the front.
- Moderation: Auto-filter comments by keyword, email and IP addresses.
- Spam Filters: Akismet keeps the spam at bay.
- And really more great features…
How To Add It To Your Blog.

we’ll look through the steps in simple points then we’ll read full instructions on how to add it for blogger.
here is the steps in a simple points.

sign up an account in IntenseDebate.com, and confirm your email.

go to your blogger account and download your current blogger template.

go back to IntenseDebate.com and login, then type your blog url there.

upload your blogger template in your IntenseDebate.com account,

IntenseDebate.com will automatically modify your blogger template and give it ready for use to you.

you’ll go to your blogger account and replace your current template with the one that you just got it from IntenseDebate.com

and you are done.

now lets read how to do it in a detailed instructions.

Step 1.

go to IntenseDebate.com and click sign up, fill the form with a true mail, username, and password, then click signup.

you’ll need to verify your e-mail, so please go to the email account that you used to register, you’ll find a message from IntenseDebate.com, please check it, you’ll find an activation link, click on it, and you are done.

Step 2.

now go to your blogger account, and navigate to >> layout >> edit html >> and click Download Full Template, and save your template in a convenient place on your hard drive.

Step 3.

now go back to IntenseDebate.com and on the top right area click login, and log on to your account, after you are loged in your account, on the right side bar
you’ll see this title, Manage blogs/sitesbelow it please click Install IntenseDebate.
then you’ll be taken for a page asking you to type your blog url,
enter your blog url and click next step.

Step 4.

After clicking next step. in step 3, you’ll go to page separated for 2 parts. on the left hand, there is a sidebar contain 2 questions,
- - How would you like to install IntenseDebate?
  - Widget
  - Template
  please choose Template, ( check the box next to it )
- - Which blog posts should have IntenseDebate comments enabled?
  - Only on new posts
  - On all blog posts
  please choose On all blog posts ( check the box next to it )
and then scroll down till you see a button titled ” Browse ” click on it, and choose your blogger template that you downloaded in step 2, then click Upload file.

Step 5.

IntenseDebate.com will modify and generate your new template automatically , and on the next page, you’ll see your new template code, please see the next image.

as you see in the above image, please click on the box, then copy the new generated template code.
then go to your blogger account and once more again, navigate to >> layout >> edit html >>
but this time select all the current template code ( ctrl + A ), delete it, then paste ( replace ) your new template code, and click, Save Template now go to check any of your blog posts.

demo and final words.

please visit this blog to see this widget and try it.
please note that some custom blogger templates won’t be compatible with this widget.

12

13 Brilliant Blogger Templates For Showcase, Gallery And Photography.
Once you think about finding a blogger template that fits your blog, i think it’s easy because of the huge number of blogs that provide you with alot of free blogger templates,
but what if you have a photography blog, show case blog, or a gallery blog and you want to find the best blogger template for it,
I think it’ll be harder for you to search and find it.
So i thought about making this showcase post to list 13 of the best showcase and gallery blogger templates.
Now lets take a look at 13 Birillant showcase, gallery, photography blogger templates.

1. Simplex Portfolio

simple and clear template. 1 column with top navigation page, searchbox. jquery slider and 4 column footer, once you hover your mouse on any picture you can see it’s title, date, and comments number.
- Download Simplex Portfolio blogger template.
2. 6 Gallery Blogger Templates Collection By AllBlogTools.com

this blogger templates collection created by me, ( max from allblogtools.com ),
it’s great collection that fits all bloggers coz it comes with 6 diffirent headers and yu must find yours in this collection.
it’s 2 column templates, with top navigation menu, and searchbox. 3 column at footer.
green and blue background with vector header.
- Download 6 Gallery Blogger Templates Collection By AllBlogTools.com.
3. Gallery

2 column blogger template, dark background, top menubar. clear and simple layout.
- Download Gallery blogger template.
4. Mosaicus Ultimate

clear and very simple gallery blogger template, light colors and background, 2 columns, right sidebar, top navbar.
- Download Mosaicus Ultimate blogger template.
5. AllBlogTools.com Gallery

dark background, red color touchs, nice top menu navbar, well designed search box, showcase blogger template, 2 column, right sidebar. 3 footer column, one of the most viewd and popular blogger templates.
- Download AllBlogTools.com Gallery blogger template.
6. Tequilas Flamejantes Light

simple yellow gallery template, 2 column, right sidebar, 4 column on footer, top navmenu.
- Download Tequilas Flamejantes Light blogger template.
7. Tequilas Flamejantes dark

simple dark gallery template, 2 column, right sidebar, 4 column on footer, top navmenu.
- Download Tequilas Flamejantes dark blogger template.
8. sGallery

amazing wooden background, really nice background, brown and orange colors.
2 column, right sidebar.
- Download sGallery blogger template.
9. Hybrid Gallery

this is one of the most beutiful photography and gallery blogger templates ever. personally i love this template, gray background, profesionall top nav menu and search box, left sidebar, 2 column. + 3 footer column.
- Download Hybrid Gallery blogger template.
10. Simple X Photogallery

nicly coded blogger template that uses jquery for displaying your images, 1 column, horisontal images browesing bar, top nav bar, searchbox.
- Download Simple X Photogallery blogger template.
11. Showcase Light

bright colors template, gallery layout, top navbar, white and blue colors, 2 column, right sidebar.
- Download Showcase Light blogger template.
12. Photoplus

another amazing jquery template, 1 column, top navbar, great lightbox like image viewer, footer 3 column, dark colors.
- Download Photoplus blogger template.
13. Photoplus light

another amazing jquery template, 1 column, top navbar, great lightbox like image viewer, footer 3 column, dark colors.
- Download Photoplus light blogger template.
i wish you all will like this list and don’t hesitate to leave your comments if you have any questions or feedback.

OS X Styled Sharing Dock Widget, New sharing Widget For Blogger.

Alot of people keep asking me about a new social bookmarking and sharing widgets,
Since I love jQuery, i thought about try to customize a new sharing widget specially for blogger that using the new jQuery features, and If you like the OS X dock, you’ll love this widget.
this new widget in originally released by AddThis.com , and i customized it to be able easily used with blogger.

Widget Features.

easy to install, only 1 step.
Support all social services around the world, more that 300 social bookmarking site.
Amazing new style with dock menu look.

How To Add It To Your Blogger Blog.

Please go to your blogger account, and navigate to, dashboard >> layout >> , and on the elements pages, please click Add a gadget
then choose HTML/JavaScript,a new window will be opened. leave the title empty. and paste the following code in the content area.


<style type="text/css">
  #sharedock { position: fixed; bottom: 0; left: 0; width: 100%; height: 90px; z-index: 999; }
  #dock { position: relative; bottom: 0; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; }
  .dock-container { position: relative; background:url(http://2.bp.blogspot.com/_JwD5r652h00/S9t-pmEipgI/AAAAAAAAAVs/iDkLHdkeSNk/widget-bg-allblogtools-com.gif) no-repeat bottom center; height: 50px; padding: 20px 0 20px 0; }
  .dock-container .custom_images a { display: block;  position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; cursor: pointer; }
  .dock-container .custom_images span { background: rgba(0,0,0,.75); display: none; padding: 2px 8px; margin-left: 17px; font-size: 11px; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
  .dock-container .custom_images img { border: 0; margin: 5px 0px 10px 0px; width: 100%; }
  </style>

<div id="sharedock">
  <div id="dock">
  <div class="dock-container">

<div class="addthis_toolbox"> 

 <div class="custom_images">

 <a class="addthis_button_facebook"><span>Facebook</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_facebook.png" alt="Share to Facebook" /></a>
  <a class="addthis_button_twitter"><span>Twitter</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_twitter.png" alt="Share to Twitter" /></a>
<a class="addthis_button_myspace"><span>MySpace</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_myspace.png" alt="Share to MySpace" /></a>
<a class="addthis_button_stumbleupon"><span>Stumble</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_stumbleupon.png" alt="Stumble It" /></a>
<a class="addthis_button_reddit"><span>Reddit</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_reddit.png" alt="Share to Reddit" /></a>
<a class="addthis_button_delicious"><span>Delicious</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_delicious.png" alt="Share to Delicious" /></a>
  <a class="addthis_button_more"><span>More...</span><img src="http://addthis.com/cms-content/images/gallery/addthis_64.png" alt="More..." /></a>
  </div>
  </div> 
  </div>
  </div>
  </div>

  <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://addthis.com//cms-content/images/gallery/fisheye-iutil.min.js"></script>
  <script type="text/javascript">
  $(function () { 
  // Dock initialize
  $('#dock').Fisheye(
  {
  maxWidth: 30,
  items: 'a',
  itemsText: 'span',
  container: '.dock-container',
  itemWidth: 50,
  proximity: 60,
  alignment : 'left',
  valign: 'bottom',
  halign : 'center'
  }
  );
  });
  </script>

And now click Save then check you blog,

Instruction, Demo And Credits.

Please make sure to copy all the code with out missing 1 letter to see the widget working correctly in your blog.
sorry because the code is very long but in this way, it’s a one step process instead of three steps.
To see a demo for this widget please click here.
Credits: zurb.com | tutsplus.com | AddThis.com

16

Add Apture ToolBar For Your Blogger blog, With Some Great Features.
Today no one can deny that the social bookmarking and sharing is one of the most important factors for making your blog more popular and more visible for all your targeted visitors.
And i’m sure that you want to make it easier for your visitors to share your posts on their favorite social networking sites.
today we’ll talk about the new Apture ToolBar and it’s features and how to add it to your blogger ( blogspot ) blog.

About Apture ToolBar and it’s features.

The Apture Site Bar is a new way to give readers more information without leaving the page. this is what Apture authors says about the toolbar, but i’ll try to describe what is this toolbar can do for you,
once your visitor scroll down on your blog, this bar will appear loaded with some great features.
- Share on facebook button with a counter.
- Tweet this for twitter button with a counter.
- Share on email
- Search box with jquery, and this mean that your visitor don’t have to leave the page when he search for another content.
- When your visitor can select any part of your posts text small button will appear that says Search
- You can customize it with your own logo.
How To Add It To Your Blog.

You can add it in a very easy way, please visit www.apture.com,
and click Design a bar now
and on the next page, please fill the following info.
- Your website address:
- Your email:
- Upload a Logo or Set Title
- Pick your bar color
and now click Get my bar. please wait till the site finish loading and i’ll give you a code titled, Apture Magic Javascript
Copy the code and now go to your blogger account,
navigate to Layout >> Edit html and now find the following code.
```
</body>
```
and paste your toolbar code before it.
Now Click Save Template
That’s it, and you are now done and your blog ready to show the bar to see a demo for the toolbar please click here.

Page 1 of 5
1
2
3
4
5
Next >

AllBlogTools.com | Blogger Templates, Tutorials, Tools.

Browse All Blogger Templates >>

By Topic

By Layout

By Featurs

By Color

Try Advanced Blogger Templates Search >>

Browse All Blogger Tutorials >>

Premium blogger Templates

Blogger Tutorials, Tricks and Hacks

How To Change Blogger Mouse Cursors In Easy Way ( + 1000 Free Cursors )

Upgrade The Old facebook Comments Box For The New One in Blogger.

Surprise, New Facebook Comments Box For Blogger In Very Easy And Simple Steps – Fixed ( Full Guide ).

Add FaceBook Send Button To Blogger ( BlogSpot ) And Customize It.

Blogger Follow Us J-Query Widget ( Social Icons )

Blogger’s YouTube channel Comes Back To Live

Blogger Font Size Control ( Changing ) J-Query Widget

Add Beautiful Drop-Down Menu For Blogger

Finding New Blogging Inspiration

5 New Amazing Official Blogger Templates ( Images & Video )

Blogger Released “Follow by Email” New Gadget

Incredible Blogger New Features To Come In 2011 ( Images And Video )

Latest Most Important 5 Blogger Updates

Adding QueryLoader (‘LazyLoad’) Script For Blogger And Customize It.

Google Needs Your Help To Improve Blogger, You Can Get 75$ Gift.

How To Use Google Custom Fonts For Blogger.

Important : ?Please add a Forward slash (“/“) before the the end of the tag (“>”) of this code. i.e, The above code should look like ;-

Better Commenting System And Form For Blogger, IntenseDebate.

13 Brilliant Blogger Templates For Showcase, Gallery And Photography.

OS X Styled Sharing Dock Widget, New sharing Widget For Blogger.

Add Apture ToolBar For Your Blogger blog, With Some Great Features.