Spacer

Blogger Tricks

Blogger Tricks
The biggest source for blogger templates, tools, tricks and hacks

Spacer
  • image
    87
     

    Adding favicon to blogspot

    This image has no alt text

    How To add fav icon to your blogger
    - Codes Fixed and 100% works
    - 18,000+ Animated Favicons Source Added
    favicon is very important now it’s a nice way to put your logo, or what ever you want. on the browser address bar.

    if you don’t know what is the favicon.ico just look at the address bar at your browser now.
    and you’ll see our logo added to it on the left. you can check the above image to know what are we talking about.

     

    to do this you need to follow the next simple 4 steps. it’s too easy. so lets go.

     


    		 - Before We Start:
    - You need to be careful while changing your template.
    - Before you make any changes, Back up your template and save it at safe place.

     

    step 1: creat of choose your own icon.
    step 2: Make your favicon.
    step 3: Upload it.
    step 4: Add a code to your blogger xml layout.
    step 5: Enjoy.

     

    Step 1: choose your own icon.

    first of all. you need to have an icon to display it as your blog favicon.
    if you already have a logo. you ‘ll use it.
    or you’ll need to find nice logo and suitable to your blog.
    it may be a letter. or simple expressive picture. you can browse deviantart.com icons category to get inspired.
    and here is sample icons may help you to Crate yours.

    Add favicon to blogger

    once you are done and picked you icon. you’ll need to move to the next step.

    • 18,000+ Animated Favicons Source Added

    That’s great and new source for free and animated icons, you won’t need to design your own icon and loos any time any more, thanks for iconj.com Go there and browse.

    Step 2: (OR ) Make your own favicon.

    now you have to make your icon 16×16 pixels. I usually use photoshop to do it and save it as any image format. like [ jpg, gif, png, .....].
    call it favicon.jpg , favicon.gif or favicon.png. just choose one format, not all of 3 types.
    and we’ll use program called “imagicon” you can search Google to download.its free and only 950 KB.
    setup the program and find the icon image that you made it and saved it by photoshop, favicon.xxx
    load the image and choose 16×16 win32 icon. save it as .ico.
    so it’ll be favicon.ico.
    Recommended : it’s recommended to name your icon file – favicon.ico -

    Step 3: Upload it.

    Use you favorite image upload or file service to upload you favicon.ico file.
    and keep the url at save place cause we going to use it in step 4.
    the url should be something like.

    http://www.fileiconhost.com/i3jh/youricon.ico

     

    Step 4: Add a code to your blogger xml layout.

    log in to your blogger account. Now find the blog you want to edit if you own more than one blog. And click “layout” table. then choose “Edit html”

     

    Add favicon to blogger

    Search for :

     

    

     
    

    and just after it. past the next code

     
    

    


    

     
    

    and instate of  ‘URL of your uploaded icon file’ add the url that you uploaded your ico file to.
    

    the code should be something like the next

     
    

    


    

    Click save template button. 
    

    

    Step 5: Enjoy
    

     Now go to check your new blogspot browser address bar.
    
if you can’t see it please wait for awhile. some times it takes 2 days to appear. but not always.
    
if you have any problems please leave acomment. 
    

    

    • 



    
	
  • 
image
    100 
    

     
    

    Disable right click on blogger blogspot
    

    
	This image has no alt text
	
    You’ll learn in new  blogger trick to disable
    
right click in your blog pages.
    
Blogger tricks and hacks
    

    Right click on any internet browser is very important element.
    
and we must use it when it comes to copy or editing texts and etc..
    
and it’s very important when it comes to webmasters too.
    

    but some people may use it in a bad way, and you may want to make click right disabled on your blog.
    
to protect you text, images links and etc….
    

    so all what you have to do is only simple step.
    
you’ll need to add new html/javascript element to your layout.
    
now go to your blogger account.
    
navigate to Layout >> Add a GadGet >> and select html/javascript
    

    then copy the next code and past in in html/javascript text box area
    

    <script language="JavaScript">
<!--

//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com

var message="Function Disabled!";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// -->
</script>

    

    then save the html/javascript. and view you blog.
    

    when you try to do right click.  a message will tell you that “Function disabled”
    

    and if you want to change this words” Function Disabled”
    

    find the next line in the code
    

    var message="Function Disabled!";
    

    and change Function Disabled! to what ever you want.
    
i hope it helps.
    

    

    • 



    
	
  • 
image
    35 
    

     
    

    Adding Static images to blogger (blogspot)
    

    
	This image has no alt text
	
    Adding static images to blogspot blogs
    
in only 3 steps.
    
today allblogtools.com continue adding new categories and content to keep up with our 2009 plans. 
    

    and now we are about to announce our latest Free service.
    
Blogger Static Image Generator
    

    In case you don’t know what is a static image, it is images can be added to your blogspot blog template and display on your blog corners even if you visitors scrolled down or top. it’ll still displayed on your corned,
    
you may not understand even after reading about it, so you must see Demo static images
    
Please Click here to 	see Demo
    
I Hope you like it, 
    

    You can add any static image to your blog by using our wizard in only 3 steps.
    


    
Click here to try our new static Image generator
    

    

    • 



    
	
  • 
image
    9 
    

     
    

    Full Guide to Using allblogtools.com Glitter / Animations in BlogSpot
    

    
	This image has no alt text
	
    Full guide to learn you how  to use images Glitter Or
    
Animated gif images
    
Ablog with out images like a sea with out fishes ,
    
every body in the world using images at his blog to… to what,to explain some thing for his visitors. to make his blog looks better, to have fun, to … Etc.
    
And there is alot of ways to use images in our blogs, we can add images to our posts
    
or use image as Signature, use it in our -About us- Page, use it as avatar.
    
or use it to displayed as static image at the corner of your Blog ( we’ll explain later what is the ” static image “.
    
Note : all ways to use images we mention here can be used with allblogtools.com images codes only.
    
now a days we updating allblogtools.com and adding new categories. we’ll add glitter images and animated images categories, and we’ll give you a code for each image we’ll add in this new categories, so when we tell you any thing about images code, you should understand that we mean allblogtools.com images codes
    

    now we’ll talk about Using Glitter Or Animated gif images in our blog post, or as Signature.
    

    1: Adding images to our blogspot posts.
    
After finding your favorite image from allblogtools.com images Categories. glitter images or animations. copy its code and go to you blogger account.
    
at Creating new post page write your post and then select “Edit html”
    

    Full Guide about Using allblogtools.com Glitter / Animated gif images in BlogSpot blogs
    

    Then past the glitter / animated gif image code where you want the image to be displayed
    
Then click “publish post”
    
click here to see Demo for using animated images and glitter images in blogspot posts.
    

    2: Using glitter / animated / non animated images as Signature in blogspot.
    
After copying your image code
    
go to your blogger account, go to settings. Select Formatting. at
    
the bottom of the formatting page you’ll find Post Template form. just copy and
    
past your image Signature Code
    
. and every time you are going to write new post, write it before the sign code. but don’t delete it.
    
To read more about adding Signature to blogger, please click here
    
Click here to see demo signature on blogger post
    

    3: Using glitter / animated / non animated images as static image at the corner of your Blog
    

    Click here to see demo static image on blogger blog. please in this blog scroll down to see how static images works.
    
This trick will be available soon  and we’ll add free static images generator.
    

    we hope you enjoyed our small tutorial and if you need any help. please contact us.
    

    

    • 



    
	
  • 
image
    31 
    

     
    

    Adding Scrolling Or marquee text box for blogger “blogspot” blogs.
    

    
	This image has no alt text
	
    Scrolling or marquee text is very attractive way
    
to tell and write your blog news. and adding it to your blog makes it more attractive because it’s amazing way to tell your blog visitors your blog latest news.
    
the nice thing here is that “Scrolling Or marquee text for blogger” can be re edited by you to suitable your blog needs and your needs,
    
and we’ll show you a lot of “Scrolling Or marquee text for blogger” kinds and after this, we’ll explain to you how to use it and how to add it to your blog in the way you like,
    

    
Scrolling Or marquee text for blogger Demo
    

    
Scrolling Or marquee text for blogger Demo
    

    Scrolling Or marquee text for blogger Demo
    

    
Scrolling Or marquee text for blogger Demo
    

    
Scrolling Or marquee text for blogger Demo
    

    Looks great, right? so lets learn step by step how to do it in the easiest way
    

    The Scrolling Or marquee text code contain 2 tags, opening tag, and closing tag,
    
and between the 2 tags , the is text goes there. and it looks like that:
    


    <opening tag> Your Scrolling text  </closing tag>
    

    

    and this is the most simple sample to learn you how does it work,
    
and the real code for Scrolling Or marquee text looks like the next.
    

    

    <marquee>Scrolling Or marquee text for blogger Demo</marquee>
    

    

    and if you added this for your blog,it’ll generate you a normal Scrolling Or marquee text box
    
with default text font and size and with White back ground,
    
But what we do if we need to change the direction, adding background color, change the text speed (  scrollamount ) or change it’s height and width.
    

    Oh, that is very easy but it need your complete attention.
    
we can control  direction, background color, scrollamount  Or any thing by adding values to the opening codes,
    
The we add the values like the next example.
    
the value to make the direction : Righ is
    


    direction="right"
    


    
so if we want our Scrolling Or marquee text moves to right, we’ll add the right moving value to the opening tag.
    
and here is how it going to be.
    
Before:
    


    <marquee>Scrolling Or marquee text for blogger Demo</marquee>
    

    

    After:
    


    <marquee direction="right">Scrolling Or marquee text for blogger Demo</marquee>
    

    

    As you see we add the value to the marquee text code Opening tag after the word 

    And we can simply add more than one value for our marquee text code "opening tag"
    

    Like the next sample
    

    

    <marquee bgcolor="#FF00FF"  direction="right">Scrolling Or marquee text for blogger Demo</marquee>
    

    Now i gonna write to you Big List will show you all values that you may need with a small description for every one.
    

    so lets go.
    

    

    
The Value
 

    

    
direction="left"
Makes the text moves to 	left

    

    
direction="right"
Makes the text moves to 	right

    

    
direction="up"
Makes the text moves to 	up

    

    
direction="down"
Makes the text moves to down

    

    
behavior="alternate"
Makes the text go to right and when it reach the end of your marquee box go back to the left

    

    
behavior="slide"
Makes the text Stop when
    
		it reach to the end of your marquee box    		

    

    
loop="4"
If you need to control
    
		the times that the text going to be displayed. add this value and change
    
		number 4 to the number of times that you need    		

    

    
scrollamount="2"
Set your text speed, 1 is slow 2 is fast 3 ,4 ,5 is faster , the more you increase this number, the
    
		faster the text’ll be goes.    		

    

    
width="400"
Control your text width

    

    
height="66"
Control your text Height

    

    
onmouseover="this.stop()" onmouseout="this.start()"
Makes the text stop when
    
		your is over the text:    		

    

    
bgcolor="#9999CC"
Changing background color., change 9999CC to the color you want.if you need to know more about colors numbers and values please see our surprise at the end of this Post

    

    
style="color: #FF0000"
Changing Text color.,
    
		change FF0000 to the color you want. if you need to know more about colors numbers and values please see our surprise at the end of this Post    		

    

    
style="font-size: 1em"
Changing Text Size.

    

    
style="font-family: Tahoma"
Changing Text Style.

    

    
style="font-size: 12pt; color:
    
		#800000; font-family: Tahoma"    		
to change the text color
    
		and size and style at the same time you may merge the values like this    		

    

    

    I hope this help you, final thing
    
if you need to add Links to your marquee box, you need to chage the text between the opening tag and closing tag, and instate of the text,
    
past the next code.
    

    

    <a href="Link URL">Link Title</a>
    

    

    Finally, here is demo Customized marquee text box, and it’s code to help you.
    

    The code.
    

    <marquee direction="Up" scrollamount="8" width="318" style="font-size: 12pt;
color: #800000; font-family: Tahoma" height="66" bgcolor="#FFCC99">Scrolling Or
marquee text for blogger Demo</marquee>
    

    And here is The Result: 
    

    
Scrolling Or marquee text for blogger Demo
    

    OH, before i go, a small instructions about adding this marquee box for your blog,
    
you can add it to your sidebar, to your header, to your posts,
    

    If you want to put this on your header,then login in to your blogger account Go to Layout>Edit html>click the add a page element> select html/javascript and paste the code in html/javascript and save the changes .
    

    Then move this html/javascript box where ever you want,
    

    And NOW Lets talk about our surprise About colors codes and numbers.
    
We made amazing box that gives you the colors codes and number once you click any color, no need now to try to get the colors codes you want in a hard way, now we made a very easy way for you,
    
please check it out.
    

    

    
Click Here to go to Color Codes Generator     ( New Window )
    

    Thanks for reading and i hope this be useful to you,
    
if you need any help please Leave comment,
    

    

    

    • 



    
	
  • 
image
    45 
    

     
    

    Editing blogger top menu Links
    

    
	This image has no alt text
	
     how to edit the top blooger  horizontal menu, menu bar
    
 or top navigation menu,Blogger Tricks
    

    

    

    
		    		
- Before We Start: 
    
		- You need to be careful while changing your template.
    
		- Before you make any changes, Back up your template and save it at safe
    
		place.    		

    

    

    alot of people download new and beautiful blogger templates with top menu added
    
bet they can't edit, modfy, or even remove it, and today we'll learn how to edit
    
any blogger template top horizontal menu, what ever the template, we'll seE how
    
to defined the top menu codes and edit it. editing the top menu links dependes on
    
finding the menu codes in our template so the first step is to find the menu codes,
    
actually finding the menu code is the hardest part. so log in to your blogger account,
    
then click LAYOUT > EDIT HTML . now you are at EDIT HTML page, and here you can
    
see all you template code. open your blog in a new window and read your top menu
    
links titles, and see the next picture, i'll use here nice template called : integral
    
made by blogandweb.com and you can seeit's demo here.
    

    Editing blogger top menu Links
    

    YOU MUST READ THE INSTRUCTIONS ON THE LAST IMAGE. at our tutorial we'll copy the link title "contact us" and now go yo your blogger account page " Edit html" then
    
if you use FireFox or Internet Explorer or any another Browser click "CTRL + F"
    
and past the link title that you copied it, and here it our example we'll past the
    
title " contact us " and click Enter or Clikc Find. the browser must find text match
    
the title in your template code. please Zoom the next image and read the instructions,
    

    Editing blogger top menu Links
    

    if you selected word like " home " to defined your menu code place in your template
    
code, let us tell you that it's bad choice because it's too popular word and you'll
    
find it more than 3 or 4 times in your code, and here we aim to find the menu titles
    
just to defined the menu code location in our template code, and here is some menu
    
codes will help you to know the menu code once you see it,
    

    

    


    <ul id='menu'>
    
		<li><a accesskey='1' href='#' title=''>Home</a></li>
    
		<li><a accesskey='2' href='#' title=''>Contact
    
		us    </a></li>
    
		<li><a accesskey='3' href='#' title=''>About Us</a></li>
    
		<li><a accesskey='5' href='#' title=''>Edit</a></li>
    
		<li><a accesskey='5' href='#' title=''>Edit</a></li>
    
		</ul>
    
    		

    

    

    OR
    

    

    


    <div id='menu'>
    
		<ul>
    
		<li><a href='#'>Home</a></li>
    
		<li><a href='#'>Blog</a></li>
    
		<li><a href='#'>Photos</a></li>
    
		<li><a href='#'>About</a></li>
    
		<li><a href='#'>Contact
    
		Us    </a></li>
    
		</ul>
    
		</div>
    
    		

    

    

    you must find the link title in a form like the last 2 tables, if you find it like
    
this, then you found your menu code and this is was the hardest part, now lets talk
    
about how to edit your top navigation menu, so please see the next tables to see
    
how to edit your top menu and follow the instructions,
    

    

    


    <ul id='menu'>
    
		<li><a accesskey='1' href='    Title 1 link URL'
    
		title=''>Tittle 1</a></li>
    
		<li><a accesskey='2' href='Title 2 link URL'
    
		title=''>Tittle 2</a></li>
    
		<li><a accesskey='3' href='Title 3 link URL'
    
		title=''>Tittle 3</a></li>
    
		<li><a accesskey='5' href='Title 4 link URL'
    
		title=''>Tittle 4</a></li>
    
		<li><a accesskey='5' href='Title 5 link URL'
    
		title=''>Tittle 5</a></li>
    
		</ul>
    
    		

    

    

    OR
    

    

    


    <div id='menu'>
    <ul>
    		<li><a href='Home page link URL'>    Home</a></li>
    	<li><a href='Blog page link URL'>Blog</a></li>
    	<li><a href='Photos page link URL'>Photos</a></li>
    		<li><a href='About page link URL'>About</a></li>
    <li><a href='Contact us page link URL'>Contact Us</a></li>
    	</ul>
    		</div>
    
    		

    

    

    and now i think every thing is clear for you to start editing your blogger top
    
horizontal navigation menu, and here is a trick you may need to make your contact
    
us page 
    

    

    
Add contact us form to blogger     witch going to help you creat contact us page
    
to your blogger blogspot blogs.
    

    

    • 



    
	
  • 
image
    39 
    

     
    

    Add contact us form to blogger
    

    
	This image has no alt text
	
    how to add contact us form or mailing page for blogger
    
blogspot blogs step by step Blogger tricks
    
you must add a contact us form on your blog, to let people connecting you, and to build nice and fine relationship between you and your blogger 
    

    blog visitors,
    
and you don’t want to right the next line in to your contact us page.
    
to contact us please send us a message on: mymail (at) gmail.com
    
you want to add a nice and professional form, witch looks like the next image.
    

    Add contact us form to blogger 
    

    and here is demo live form on one of our blogs.
    
this service is fully free and provided by www.emailmeform.com
    
this site allow you to have a form for every blog, or several forms for each blog.
    
i cant wait to tell you how to do it. so let’s do it,
    
go to www.emailmeform.com or click here (new window)
    

    

    Add contact us form to blogger 
    

    it’ll take you to the next page.
    
at this page you’ll find a small form, fill it all and click “sign up” button.
    

    Add contact us form to blogger 
    

    after clicking sign up button you’ll see the next message.
    

    Thank you for signing up!
    
To prevent automated registrations, we sent a message to the email address you provided. Please check your email and click on the Verification 
    

    Link inside, to activate your account.
    

    so please go to your email account that you typed it while you was filling the form. and find message with the next details.
    
title : EmailMeForm
    
subject : Your new account information
    

    at this message you’ll find a confirmation link. click it.
    

    Add contact us form to blogger 
    

    it’ll take you to the next page,
    

    Add contact us form to blogger 
    

    click the link titled “here” or look at the image up.
    
when you click the link titled “here” it’ll take you to your account control panel.
    

    at your control panel, click “Create new form” you can find it on your account sidebar.
    

    Add contact us form to blogger 
    

    you’ll go to :Web Form Creation Wizard – Step 1
    

    fil the form on step one. and click ” NEXT ”
    

    At the next step  :Web Form Creation Wizard – Step 2
    

    Add contact us form to blogger 
    

    you’ll enter the names of the fields.
    
Optionally you can select text effects, or if the field is mandatory to be filled by your users.
    

    for each filed the is 4 options
    
Field Name ,Text Effects  ,Field Type and Required option?
    

    and you don’t want me to tell you what these options do.
    

    after filling this step form, click next, to go to
    
Web Form Creation Wizard – Step 3
    

    Add contact us form to blogger 
    

    at this step you’ll enter the size of the fields, and options if you have Dropdown Menus, Radio Buttons or Check boxes.
    

    Fill this form then click “NEXT”
    

    you’ll be at :Web Form Creation Wizard – Step 4
    

    Add contact us form to blogger 
    

    and here optionaly you can customize the look and feel of your form, by selecting the Text color, Font and Size, the background color, etc. You 
    

    can leave all these options unchanged and click Next.
    
or if you have some experience with css or html you can customize your form.And you can customize Font, Color, Form Description, Header, , 
    

    footer, Style CSS, Send Button Name, Send Button alignment, Include a Clear button, Anti Spam, Image Verification And finally Display Mode
    

    than click next to go to :Web Form Creation Wizard – Step 5
    

    Add contact us form to blogger 
    

    and here there are more optional advanced settings. You can leave them unchanged and click Next.
    
Later you can easily reedit your form and change them if you need.
    

    Finally press next to go to Web Form Creation Wizard – Step 6
    

    Add contact us form to blogger 
    

    and at this page you’ll  preview the form and if satisfied press Finish or if you would like to change anything press Back.
    

    click finish and the site will tell you that Your form has been saved!
    
The web form is active, and ready for use by your visitors. Every submission will result in an email delivered to your email address with the content of submission!
    

    now you have 2 options to use the form.
    
1 : you may take a code that put a link at your blog and your visitors click it to go to your form page at www.emailmeform.com
    
and the link gonna be some thing like that : http://www.emailmeform.com/fid.php?formid=xxxxxxxx
    

    2 : Or you may take a code to past it on your blog pages to put the form directly on your blogspot pages.
    

    and we prefere option 2 so please click “Get the HTML Code” link
    

    Add contact us form to blogger 
    

    at the next page you’ll find a code to get your form inside your blog. Getting your form inside your wesite is easy and simple. Please select a form 
    

    from the Drop Down menu below,< IF you have created more that one form > and then copy and paste the Code inside your favorite blog 
    

    pages. Each time one of your visitors will submit it, our server will automatically process it and send you an email message.
    

    select all and copy the code.
    

    Add contact us form to blogger 
    

    then go to your blogger account, click edit posts posts, creat now post,
    
and choose “Edit Html”
    
Title: Contact us, or what ever you want.
    
and past the code at the post area.
    

    Important before publish your form
    

    and at you form code please find the next code 
    

    

    
<table

    

    

    and just before it past the next code.
    

    

    

    

    

    And at the bottom of your form code find the next code
    

    

    

    there is nore than one code called 
    

    

    
</table>

    

    

    find the lastest one at the buttom of your code,
    
and after it past the next code
    

    

    
</div>

    

    

    Find the next code and delete it 
    

    

    
<div
    
		style="position: absolute; left: 1800px; top: 20px;"><a
    
		href="http://www.emailmeform.com">web forms software</a></div>    		

    

    

    Attention. blow the post area click “Post Options”
    
and find Post date and time. and change the date to older date. you may make it 2007 or 2006 or older
    
the day and month doesn’t matter.
    
we change the date because we don’t wanna make the form appear at our normal blog pages and archives.
    

    And hit Publish post.
    

    go to DASHBOARD –> POSTING –> EDIT POSTS (find the form post, and click on “View”)
    
 From the browser’s address bar, copy the URL address of this Post –> we will use this address as a Link to Contact Form in our Blog
    
 You can place this Link wherever you want (in your sidebar, header….).
    

    Enjoy
    

    here is demo blog that you can test the mailing form.
    

    Click here to see demo blog and the contact us link on the top menu
    

    thanks for 
    

    pocket-templates.blogspot.com
     for providing us a code that solved alot of problems here
    
and 
    www.emailmeform.com
    

    

    • 



    
	
  • 
image
    16 
    

     
    

    adding Signature to blogger Posts.
    

    
	This image has no alt text
	
    today we are going to talk about new blogger trick.
    
adding Signature blogspot Posts. so lets go and be careful.
    
you’ll do it step by step, 2 steps only, the first step: is making your sign image
    
and the second step, is adding this sing image to your blogger posts
    
and the final result will look like this
    

    
Step 1
    

    we’ll use a free service provided by: AllBlogTools.com
    
Click here  Signature Generator .
    
Follow the steps there and get you code
    
Step 2 go to your blogger account, go to settings. Select Formatting. at
    
the bottom of the formatting page you’ll find Post Template form. just copy and
    
past your Signature Code

    . and every time you going to write new post, write it before the sign code. but don’t delete it.
    

    thanks for reading and here is demo sign
    

    

    

    • 



    
	
  • 
image
    7 
    

     
    

    Adding free stat counter for blogger
    

    
	This image has no alt text
	
    knowing your blog visitor stats is very important, today we’ll see how to add free visitor counter step by step.
    

    

    

    
    		

- Before We Start: 
    
- You need to be careful while changing your template.
    
- Before you make any changes, Back up your template and save it at safe place.    		

    

    we’ll use a stat counter that provided by statcounter.com that works perfectly with blogger blogspot blogs.
    
you will need to join a free acount from here
    
(it’ll open in a new window)
    
it won’t take more than 2 minutes,
    
after registering, and activating your account through your email. please login to your account.
    

    after logging in, click new project.
    
see image below:
    

    
Adding free stat counter for blogger
    

    then you’ll be taken to another page,
    
fill the form as the next.
    
website title :type here you blog title.
    
website URL :type here your blog url, it must be like ——.blogspot.com if you using blogger.
    

    and press NEXT.
    
see image below:
    

    
Adding free stat counter for blogger
    

    then click : Configure and install code >>
    
see image below:
    

    Adding free stat counter for blogger
    

    after clicking Configure and install code >> you will go to page ask you to choose the kind of stat counter,
    
there is more 1 kind,
    
1: visible counter.
    
2: invisible counter.
    
3: visible counter on home page only.
    
4: button only.
    
choose your favorite one and hit NEXT.
    
see image below:
    

    
Adding free stat counter for blogger
    

    at the next page you’ll be at stat counter code setup wizard.
    

    find : do you use a web page editor?
    
and choose yes, i use.
    
and then choose blogger.
    
see image below:
    

    
Adding free stat counter for blogger
    

    then click NEXT and you will generate your counter code.
    
Now go to blogger.com
    
log in to your blogger blogspot account, go to layout section.and click add new element at your template sidebar where you want to add the Stat counter. choose html / jave.
    
past the statcounter code. and click save.
    
and now you are done.
    

    this stat counter contain alot of great free features,
    
and here is some of them. you can find this features when you log in to your account at statcounter.com
    
   1. summary
    
   2. popular pages
    
   3. entry pages
    
   4. exit pages
    
   5. came from
    
   6. keyword analysis
    
   7. recent keyword activities
    
   8. recent came from
    
   9. search engine wars
    
  10. visitor paths
    
  11. visitor length
    
  12. returning visits
    
  13. recent pageload activities
    
  14. recent visitor activity
    
  15. recent visitor map
    
  16. country/state/city/ISP
    
  17. browser
    
  18. system statistics
    
  19. lookup IP address
    
  20. download logs
    

    Enjoy.
    
and don’t forget that i’m here to help.
    
if you need any help please leave comment here,
    

    max
    

    

    • 



    
	
  • 
image
    122 
    

     
    

    Embed Comment Box Below Posts
    

    
	This image has no alt text
	
    new blogger blogspot trick how to embed, move, add
    
or make the comment box below or under the post.
    

    

    

    
    		

- Before We Start: 
    
- You need to be careful while changing your template.
    
- Before you make any changes, Back up your template and save it at safe place.    		

    

    it’s very nice trick because alot of blogger users wants to lease a comment but they hate the comment pup up window.
    
so after applying this hack to your blog, you’ll make it easier for you and your listener.
    
you’ll read the new comments easily and blogspot visitors’ll add new comments easily too.
    

    now lets start step by step.
    
1 : go to http://blogger.com and log in to your account.
    
after logging in. you’ll be into your blogger account Dashboard page. click on Layout link. and then select Edit HTML .
    


    
Embed Comment Box Below Posts
    

    then check “Expand Widget Templates”
    


    
Embed Comment Box Below Posts
    

    

    and search for the next code.
    

    

    

<p class=’comment-footer’>
    
<a expr:
    
href    =’data:post.addCommentUrl’
    
expr:onclick=’data:post.addCommentOnclick’>
    
<data:postCommentMsg/></a>
    
</p>
    
</b:if>    		

    

    

    then remove it and replace the next code :
    

    

    

<p class=’comment-footer’>
    
<b:if cond=’data:post.embedCommentForm’>
    
<b:include data=’post’ name=’comment-form’/>
    
<b:else/> <b:if cond=’data:post.allowComments’>
    
<a expr:
    
href    =’data:post.addCommentUrl’
    
expr:onclick=’data:post.addCommentOnclick’>
    
<data:postCommentMsg/></a>
    
</b:if> </b:if> </p> </b:if>    		

    

    

    click save template 
    

    2 : now go to http://draft.blogger.com and be careful. it’s not blogger.com
    
it is go to draft.blogger.com
    

    once you loged in you’ll be at your dashboard again.
    
now select Settings > Comments
    
and find : Comment Form Placement
    
then check : Embedded below post
    

    
Embed Comment Box Below Posts
    

    at the end of the page click “Save Settings”
    
and engoy.
    

    here is demo blogger blogspot blog we applied the blogger trick on it. Click here (It will open in a new window )
    

    if you faced any problem. please leave your comment here.
    
Sorry, comments are closed for this tutorial, it’s a very old one and don’t work now a days.
    

    

    • 



    
	
  • 
image
    28 
    

     
    

    Increase alexa traffic rank for blogger
    

    
	This image has no alt text
	
    quick and easy steps to improve  you blogger blog traffic ranking, as we all know alexa.com is  a company on the internet
    
 that gives every single site on the internet it’s own rank.
    
there is web sites ranked 24.000.000 and another ranked under the 100.000
    
and the second is all what we need.
    
when i started publishing this site. my alexa rank was 6.300.000.
    
but now, thank god it is just 993.778, and it’s increasing day by day.
    
alexa updates the rankings every 4 or 5 days. and you can monitor the changes that happen to your traffic rank and try to improve it always.
    
and here i gonna tell you some easy, cheap, fast steps that will make your rank increase quickly. and it works for me.
    

    1.
    

     the first one here should be the most famous advice when it comes to alexa traffic rank increasing. installing alexa toolbar.and when you browse your blog every day. Ask your friends to do the same. Every time you browse your blog, Alexa Toolbar will communicate your visits to the Alexa Ranking Engine, which will update your ranking.
    
actually alexa depending on the toolbar to arrange the rankings.
    

    2.
    

     set you blog as the home page for your browser.
    
and try to do it with all your friends and every computer you can control.i mean if you work at big company and there is big number of computers there. if you can set all browsers home page to you blog url, that’s going to be great.
    

    3.
    

     try to add webmasters category to your blog, because all webmasters already installed alexa toolbar, and that’s must affect your rank when they visit your blog with alexa toolbar installed.
    

    4.
    

     Increase traffic to your blog. That is what alexa is all about. and when you visit any blog or forum with related content, leave your link there as comment or reply.
    

    5.
    

     Add alexa rank widget to your blog. alot of people did it and it works for them.
    

    6.
    

     Right article about alexa and encourage people to download the alexa toolbar. 
    

    i hope you all good luck and higher traffic rank.
    

    max.
    

    

    • 



    
	
  • 
image
    51 
    

     
    

    Adding chat box to blogger
    

    
	This image has no alt text
	
    today we’re going to talk about how to add nice  and cool chat box to blogger blogs. do you have a blog? 
    

    I’ll bet you do.
    
whatever your blog talking about.
    
you will need to add a chat box. to connect people. that’s why you build your blog. right?
    
the box that we going to use it here presented by cbox.ws.
    
I guess you saw the chat box before at many blogspot blogs.
    
and here is an image tells you how it looks.
    

    
chat box sample
    

    now lets start.
    
1 : go to cbox.ws or Click here (It will open in a new window )
    
click on “sign up” link.
    
then you’ll see a form.
    
fill it and choose the style you like. there is 12 different styles.
    
then check on “I have read and agree to the Cbox terms and conditions of service” box.
    
and click creat my box.
    

    if every thing is fine. you’ll see theis message.
    

    “Cbox Created!
    

    Your Cbox, adfasfsdf, was created successfully.
    
You can now log in to your Cbox control ……………”
    

    and you are now ready to take your chat box code and add it to your blog.
    

    1 : log in to your account at cbox.ws by the user name and password that you’ve just created.
    
once you loged in you’ll be at your Control Panel Home.
    
you’ll see top horizontal menu contains 5 links.
    

    Publish! : we’ll talk about it later.
    
Look & Feel:here you can manage your chat box style. like layout options, style gallery, edit style, or edit css.
    
Options:here you can adjust your posting options, date options, smiles and filtering options.
    
Users & Access: manage your users and access.
    
Messagesyou can check your messages here.
    

    first thing you’ll do is customizing your chat box look.by navigating throw

    Look & Feel
    

     links.
    

    and here is some styles for the box.
    

    
blogger chat box style
    

    after that. we’ll back to Publish! link.
    
Publish!: here you’ll find the code that you will need it at your blogger account.
    
find ” I’m installing on: ” and choose “blogger”. then follow the next steps.
    
Step 1: Get your code. select all and copy it.
    
Step 2: log in to your blogger account, go to layout section.and click add new element at your template sidebar where you want to add the box. choos html / jave.
    
Step 3: past the chatbox code. and click save.
    
and you are done.
    

    here is a demo blog,Click here (It will open in a new window ) show you the box live and running.
    

    if you faced any problem. please leave your comment here. 
    

    

    • 



    
	
  • 
image
    13 
    

     
    

    Adding social book marking button
    

    
	This image has no alt text
	
    all of us know that  the fastest way to increase your traffic and develop your blogger seo is adding social bookmarking button , now we’ll add new social bookmark button to your blogspot blog.
    
the bookmark button made by addthis.com. and it allow your visitors to book mark your blog in alot of social bookmarking sites like : 
    

     Ask, Google Bookmarks, Propeller (Netscape), Backflip, Kaboodle, Reddit, Blinklist, Link-a-Gogo, Segnalo, Blogmarks, LinkedIn, Simpy, Delicious, Live, Slashdot, Digg, Magnolia, Spurl, Diigo, Mister, Wong, StumbleUpon, Facebook, Mixx, Tailrank, Fark, Multiply, Technorati, Faves (Bluedot), myAOL, Twitter, Favorites, MySpace, Yahoo Bookmarks, FeedMeLinks,  Netvouz, Yahoo, MyWeb, Furl, Newsvine, Yardbarker
    
and more……
    

    just follow our instructions and Images.
    

    1: go to addthis.com Click here (It will open in a new window )
    

    2: you’ll see some options.
    

    please choose the following.
    

    - Which kind of button? sharing / bookmarking button.
    
- Which look? choose the best style for you.
    
- Where? Where do you want to put the button? on a blog.
    
- Blogging Platform: Blogger
    

    3:Then click ” get your free button >> ”
    

    please see the next image.
    

    
Adding social book marking button
    

    When you click ” get your free button >> ” it’ll take you to another page.
    

    you’ll see 2 more options.
    
1- Member Login.
    
2- Create a Free Account.
    

    if you don’t have an account. please register a new one.
    
it won’t take more than 30 seconds.
    

    see the next image.
    

    
Adding social book marking button
    

    4: click ” create account ” button.
    

    we are about to be done.
    

    you’ll go to the next page. and there is another 2 more options.
    

    add the regular button to my blog
    
OR
    
add the dropdown button to my blog
    

    click on your favorite choice.
    

    and it’ll redirect you automatically to your blogger account to add the widget to your blog.
    

    Congrats. now you are done.
    

    and here is a demo blog,Click here (It will open in a new window )
    

    if you faced any problem. please leave your comment here. 
    

    

    • 



    
	
  • 
image
    25 
    

     
    

    Add Star ratings for blogger blogs.
    

    
	This image has no alt text
	
    we all need to know what our visitors are thinking
    
 about our Blogspot posts?
    
ok. here is great easy and nice way
    

     to add rating stars to your blog posts and get visitors instant feedback.

    

    you’ll need to go to the link that we’ll provide you after reading this post.

    

    you’ll find that outbrain.com rating widget available in 5 popular blog systems. click on blogger icon.

    

    then you can see 2 steps.

    

    
      STEP 1: Register (optional)
    
      STEP 2: Install widget 
    

    as you see you are not forced to Register to be able to use this widget.

    

    after clicking on Get Widget Now! button. you’ll be redirected to blogger.com to login you blog and add this widget.

    
you can find this widget here.  Outbrain rating star widget
    

    Please visit this blog to see live demo rating widget. :
    
Demo
    

    or copy and past the next url into your web browsers address bar:
    

    http://www.outbrain.com/get/ratings
    

    
thanks for outbrain.com to offer such nice widget like this.
    

    

    • 



    
	
  • 
image
    79 
    

     
    

    Adding ” Read More ” to blogger Posts
    

    
	This image has no alt text
	
    do you wanna display only posts summary on your blog
    
index page. and add read more
    
or continue read link.
    
finally after about 4 hours of applying alot of ways. i found the best way to add “read more” link to your blogspot blog.
    
to display only the summary of your posts on your blog index page and archive pages.
    
We’ll make 2 main changes, first for the main template and the second for the post template.
    
don’t worry. it is easy, simple, and clear way.
    
before we start please read the next note carefully.
    

     
    

    

    

    
    		

- Before We Start: 
    
- You need to be careful while changing your template.
    
- Before you make any changes, Back up your template and save it at safe place.    		

    

     
    
ok . here we go.
    
log in to your blogger account.
    
Now find the blog you want to edit if you own more than one blog.
    
And click “layout” table. then choose “Edit html”
    


    

    


     
    
Step 1:
    
Make sure to check the “expand widget templates”
    


    

    

     
    

    Step 2:
    
Search for : 
    

     
    

    

    
<p><data:post.body/></p>

    

    Or 
    

    

    
<data:post.body/>

    

    

    and just before it insert the next code
    

    

    
<b:if cond='data:blog.pageType == "item"'>
    
<style>.fullpost{display:inline;}</style>
    
<p><data:post.body/></p>
    
<b:else/>
    
<style>.fullpost{display:none;}</style>    		

    

     
    

    Step 3: 
    

    Search for : 
    

    
 
    

    

    
<p><data:post.body/></p>

    

    Or
    

    

    
<data:post.body/>/font>

    

    aand just after it insert the next code
    

    

    
<b:if cond='data:blog.pageType != "item"'><br />
    
<a expr:href='data:post.url'>Read more...</a>
    
</b:if>
    
</b:if>    		

    

    The result should look like this:
    

    center>
    

    
 
    

    Step 4:
    
Now Click save template button.
    
we finished the template modifications.
    
we need now to add very simple code to our post template. and don’t worry. it’s too easy.
    

    
Step 5:
    
 Leave layout and go to settings.
    
Select Formatting.
    
at the bottom of the formatting page you’ll find Post Template form.
    
just copy and past the next code into it.
    

    

    

    
PPost Before “read more”
    
<span class="fullpost">
    
And here is the rest of it
    
</span>    		

    

    
Step 6:
    
go to posts and try to post new post and you’ll find the next code into post body:
    
Post Before “read more”
    
<span class="fullpost">
    
And here is the rest of it
    
</span>
    

    put the part of the post that you want it to appears at your blog index and archive pages instate of:
    
” Post Before “read more” ” 
    

    and put the rest of the post instate of:
    
“And here is the rest of it”
    

    click Publish Post and Enjoy..
    

    And here is demo blog
    
click here
    
that we applied this hack for it.
    

    
Additional info
    

    
If you wanna change the ‘read more’ text to be some thing like.
    
more details, continue reading, or read more….,
    
just change the word “Read more!” in step 3 to the word that you want.
    

    If you have any problems please leave comment here,
    
thanx
    

    

    • 



    
	
  • 
image
    31 
    

     
    

    How To remove or hide Blogger Navbar
    

    
	This image has no alt text
	
    all of blogger blogs have a horizontal navigation bar on the top part
    
 in all blog pages.a lot of people
    
 wanna know how to remove it.
    

    we’ll tell you the best way to remove or hide the navbar from your blog
    

    there is more than one way to remove it.
    

    - The best solution
    

    Copy the next code
    

     
    

    

    

    
    		

- Before We Start: 
    
- You need to be careful while changing your template.
    
- Before you make any changes, Back up your template and save it at safe place.    		

    

     
    

    


    


    #navbar-iframe {
height:0px;
visibility:hidden;
display:none   }
    
    		

    
    

    

    then log into your blogger account.
    
you are now at Dashboard page. click on Layout link. and select Edit HTML .
    

    search for
    

    

    

<b:skin><![CDATA


    

    

    in internet explorer of fire fox press [  Ctrl+F ] . copy and past the next code in the searching form :
    

    


    


    

    <b:skin><![CDATA
    

    
    		

    
    

    

    and hit enter or [ search ] when you fine it Past the above code just after it.
    

    for more explanation  See The Image Blew.
    

     
    

    If you facing any problems please leave a comment and we'll solve it for you.
    

    

    • 




Spacer

    

  • Spacer



    



    

    •