Blogger Tricks and Hacks

How To Use Google Custom Fonts For Blogger.

Blogger Tricks and Hacks 24 Comments

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.

How To Use Google Custom Fonts For Blogger.

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

.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 ?

Better Commenting System And Form For Blogger, IntenseDebate.

Blogger Tricks and Hacks 27 Comments

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.

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.

Better Commenting System And Form For Blogger

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.

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

Blogger Tricks and Hacks 81 Comments

Finally, this is the most waited feature for blogger users, and now it’s available for allblogtools.com visitors only, this is the first and the only tutorial around the web that tells you in really easy steps the integration of facebook comments box and blogger (blogspot) blogs.
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.

facebook comments box for blogger

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:.

facebook comments box for blogger

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 the following code.


<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>
<div><fb:comments width='450' expr:title='data:post.title' expr:url='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>

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.

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

Blogger Tricks and Hacks 26 Comments

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

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

Blogger Tricks and Hacks 15 Comments

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

you can upload your blog logo from your computer ( don’t forget to click upload ) , or just type your blog 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.

Add FaceBook Like Button For Blogger ( BlogSpot ) And Customize It.

Blogger Tricks and Hacks 118 Comments

few days ago, face book surprised us by launching a lot of social plugins, one of them, actually the most popular one yet is the famous like button,
In this tutorial you’ll learn how to add it to your blogger blog.
and you’ll learn how to customize

change the verb, like or recommend.
change it’s color.
change it’s font.

Step 1. adding it to your template.

The button code,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
</b:if>

where to add it ?

Log into your blogger account, then go to Layout >> Edit Html.
Before doing any thing you must check Expand Widget Templates box.
And find the next Code

<div class='post-header-line-1'/>

And after it, paste your button code

What, If you didn’t find the code above in your template, The try to find the following,

<data:post.body/>

And paste the button code Before it.

click Save Template and you are done.

Step 2. Customize your button & Demo.

in the above code you can customize 3 parts. and i’ve colored them to make it easy for you to recognize,

in the above code change the following parts,

like this part controls the verb that appear on your button, keep it as you see or change it to recommend if you want.
arial this part controls the font type, keep it or change it to one of the following,
lucida+grande
segoe+ui
tahoma
trebuchet+ms
verdana
light this part controls your button color theme, and you have three options, light, evil, or dark
Update, How to make it appear on your home page.

in the button code there are two parts you’ll need to remove to make this button appear on your home page, the first line and the last line, if you still don’t under stand, please see the following parts and delete it before pasting the code to your template,

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

</b:if>

I wish you all like it and please leave your comments if you need any help, to see demo for it please click here.

The Art Of Writing Best Content

Blogger Tricks and Hacks 16 Comments

Blogging, with no doubt, has revolutionized our lifestyle today and the possibilities and effects of blogs seems endless. Blogs have become our medium of expression and it looks as there is nothing we can’t do without blog. Blog have not left even minor aspects of our life to be changed and it’s effects are seen to be limitless. Most interesting, you do not even require any technical knowledge for getting and running up a blog in no no time and the best part of it, vitally anyone can do it at ease. With some basic blogging framework sketched on your mind and with original qualitative and unique information published in your blogs, you can even make some extra cash out of it with very less effort. But to make most out of it, it requires your true enthusiasm to blog and your ability to carve some engaging content out there. If it is a problem for you, that’s where I’m going to make a breakthrough today and teach you how to enhance your art of writing best content ever!

If you are already running a blog by now, you must have known that your content is the best traffic generator for your blog and traffic is the blood of your blog. It is the information people are looking for in your blog, and if you are able to provide them with it, you can have a successful blog running up out there. But writing a better content is not an easy job every time and you have to keep several things in mind while writing the article for your blog. I’m sure the following tips or hints will be a great help for you to increase your blogging quality. Make sure to check them out:

1.Research, Research and research

If you are not well known or not confident enough to carve your posts smartly, research a lot. In such cases, what I usually do is I find out several articles about my topic in internet and download and print them. I then sped my time reading all of them carefully and highlighting the important part of them. I sketch a rough article or draft. Then when I start my actual writing, I keep all those articles spread around me and I try to include the highlighted points. Try this trick. It is very easy, effective and not much time consuming. This is the best trick I use myself to write down the posts.

2. Personal, engaging and straight

While writing posts, consider making them more personal engaging and straight. While you write your posts, add your personal touch and tone. This encourages the reader to continue reading and it makes them feel that somebody personally is teaching themselves. Make your post engaging, by trying to involve interesting facts, examples and blueprints. But always remember to put your thoughts in a straight manner so the readers aren’t distracted. Writing in points and help you doing this. Try your best to make your posts reader friendly too!

3.The KISS technique

I did not invent this term but at least, this is my one of the favorite abbreviation in blogging. It is the short form of KEEP IT SHORT AND SIMPLE. Yes, always keep your post simple and short and meaningful. Long posts may get your readers bored so make your post compact while also interesting because people nowadays want a lot of things very fast. You blog will be appreciated if you keep your blog post short and simple.

4. The title of your post

As Daniel Socosso said, Until you carve out your title smartly it will be the first and last thing that your reader will read on your blog. Title summaries your post and encourages to read the rest of the article. A catchy and unique post title makes your half business done and it is equally important as your post’s body. No matter how nicely you write your post body, if your title is bulky and boring, nobody would want to read your post. So don’t ever hesitate to spend as much time you can with your headline and come up with the best matching title for your post. Take suggestion from family and friends, do some research and use suspicious and staggering words that can easily drive the attention of the reader of your blog and have the best title you can ever think of.

5.The more you edit the better the content gets.

If you try this one, I’m sure you’ll really have a nice article with you. What I do to all of my posts is when I prepare a finished copy of my post, I do not publish it straight away. I keep it for a while (about 2-3 days) and work on other posts. Meanwhile I often have look on that post, read it and edit my the post. I do it many times and more I edit my article, consequently the better it gets. It helps you to have better content than the time you wrote it.

6.Final Proofreading.

Grammatical, informational, spelling and other types of blunders in your post can hamper it’s quality a lot. It can also decrease the reputation of the blog and blogger himself. So don”t rush to hit that Publish button just yet. Try to check for every kinds of errors and if there are any, correct them immediately.

Remember that the popularity, reputation, traffic’s volume and your success as a blogger depends upon how you write and carve your content.These steps are really very very effective and they help you to come up always with better content. So be consistent towards your content of your blog and watch the success coming your way.

Page Views / Post Views Counter Widget For Blogger.

Blogger Tricks and Hacks 41 Comments

As a blogger for very long time, I’m sure that every blogger wants to know how many times his new post viewed.
A lot of visitors contacted me about this widget and asked me if it’s possible to do it in blogger.
So today i’ll show you how to do it in blogger,
It’s very easy to do and there are 2 styles for this widget.

Page Views / Post Views Counter Widget For Blogger.

How To Add this widget For blogger.

This is very easy to do it two steps, step 1, choose your widget style,
and step 2, pate it’s code in your blogger template code.

Step 1. Choose the style And get your code.

Style 1. ( With Icon ) code,

<b:if cond='data:blog.pageType == &quot;item&quot;'><div align='center' style='border:solid 2px #999999; padding:2px; margin:2px; width:100px; display:compact'><img height='16' src='http://forums.bit-tech.net/images-light/misc/stats.gif' width='16'/> <a href='http://www.allblogtools.com'><b><font size='2'><script src='http://nirav07.ulmb.com/counter.php' type='text/javascript'/> Views</font></b></a></div></b:if>

Style 2. ( No Icon ) code,

<b:if cond='data:blog.pageType == &quot;item&quot;'><div align='center' style='border:solid 2px #999999; padding:2px; margin:2px; width:100px; display:compact'><a href='http://www.allblogtools.com'><b><font size='2'><script src='http://nirav07.ulmb.com/counter.php' type='text/javascript'/> Views</font></b></a></div></b:if>

Please copy your widget code and follow instructions in step 2.

Step 2. Add the widget for your blogger blog.

Now go to your blogger account then navigate to, Layout >> Edit html, And before doing any thing you must check Expand Widget Templates box.
And find the next Code

<div class='post-header-line-1'/>

And after it, paste your widget code You can get the widget code from previous step

What, If you didn’t find the code above in your template, The try to find the following,

<data:post.body/>

And paste the widget code Before it.

, after doing this, please click Save Template and you are done.

See A Demo.

you can see a demo for this widget( click here ) , in this demo we use style 1 with the icon,
thanks very much for best blogger widgets

Add Google Buzz Button With A Counter For Blogger Blogs.

Blogger Tricks and Hacks 10 Comments

Few days ago i posted here a tutorial about how to add google buzz button for blogger.

And some visitors liked it for the first 3 or 4 days, then they asked me for another button with a counter,
there are many ways to add a Google buzz button for blogger with counter, but i tried it all, to tell all my lovely visitors about the best one yet,

Button Features.

this button is presented by Rebuzzthis.com and it comes with

14 Different styles for the Google buzz button
With live buzz counter.
very easy to add to your blog.

Google Buzz Button With A Counter styles

How To Add The Button To Your Blog.

First, you have to get your button code to add it to your blog, so we have to go to this page,
And in Step 1: Choose a button style choose your favorite button style and color.
In Step 2: Where do you want to put your button? Choose blogger. then click Get your code.

Second,

Go to your blogger account and navigate to, Layout >> Edit html, And before doing any thing you must check Expand Widget Templates box.
And find the next Code

<div class='post-header-line-1'/>

And after it, paste your button code You can get the button code in the next step

What, If you didn’t find the code above in your template, The try to find the following,

<data:post.body/>

And paste the button code Before it.

That’s it, and now your blog ready with your new button, i wish you all like it and please leave your comment for feedback.

Surprise, Blogger Launches The New Blogger Templates Designer. The Full Guide, And How To Use.

Blogger Tricks and Hacks 20 Comments

Today i surprised by seeing blogger announcing the new great and amazing feature. Blogger templates designer, This feature is a revolution in blogger platform history, This option will make it easier for blogger users to make custom blogger templates in a very easy way and will save you the time to download and upload your template for your blog. and will make you customize your template exactly as you want,

What is Blogger Templates Designer.

This tool allow you to use the new 15 blogger templates at your blog and customize it’s Colors, background, fonts, and use hundreds of images as patterns, Change layout, Adjust width, Customize Links, Footer And Taps.
With a live preview for your changes, once you are satisfied with your new style, you can use it in your blogger blog.
To know more about this new feature please watch this video and then continue reading

How can i use it.

The first thing you must have to know is that this feature is available only in draft.blogger.com
So you have to log in your account from this page draft.blogger.com .
Now navigate to Layout, And you’ll see a new tap appeared on the top menu, see the next image.

New Blogger Templates Designer.

Once you click Template Designer You’ll go to a page that separated to 2 parts,the customization area and the preview area, please look at the following image.

New Blogger Templates Designer.

The important part here is the customization frame,
From customization frame you can customize

Templates.
Background.
Layout.
Advanced Customization.

Customize Templates.

Blogger added new 15 blogger templates you can start Customizing from.
There are 4 main sections under each section you’ll find 3 or 4 templates, you can pick any on and start customize it.

New Blogger Templates Designer.

Customize Background.

Once you choose your template navigate to background section,
In background section you can choose your template main background and choose your template elements background colors,
blogger has added hundreds of backgrounds that suit all type of niches and users
the background images are well categorized in more than 20 categories. i’m sure you’ll find yours in this great collection,

New Blogger Templates Designer.

Customize Layout.

This is very important section, from here you can customize your template layout,

Body layout.

You can choose 1 column, 2 column, 3 column, or even 4 column, And you can choose the side bar location, Left Or Right.

Footer layout.

You can adjust your footer layout from here, 1 column, 2 column, or three columns,

Adjust Width.

You can adjust your footer layout from here, 1 column, 2 column, or three columns,

New Blogger Templates Designer.

Advanced Customization.

From here you can customize

Page text.
Background.
Links Blog Title.
Blog Title.
Tabs Text
Tabs Background.
Post
Gadgets.
Footer
Footer Links
Add Css

For every element in the above list you can change colors, font type, font size, And More.

New Blogger Templates Designer.

Now What.

After Making all changes to your template, if you are satisfied with the result Click APPLY TO BLOG
To see a demo template that made by this new tool by max, please click here.
Please keep up with our latest updates so you can know all news and updates about this tool.