How To Add jQuery Popup Boxes To Blogger

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag.

jQuery Popup Boxes to Blogs/WebSites

Note:You can change width and height of popup box,colors,.... as your choice.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

Your-Popup-Button-Name" />




x

Enter-Popup-Title-Here




Enter-Your-Popup-Content-Here

Note:Replace Your-Popup-Button-Name,Enter-Popup-Title-Here,Enter-Your-Popup-Content-Here with your data.

You are done.

Demo

CSS Vertical Menus Tutorials-Menu 5

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag.

Note :Please Host menu5.gif yourself.


4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

menu5">


                      
Home

HTML

CSS

Java Script

Templates

About

Contact


      

You are done.

Demo

CSS Vertical Menus Tutorials-Menu 8

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag.

Note :Please Host menu8.gif yourself.


4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

menu8">


                  
Home

HTML

CSS

JavaScript

Templates

About

Contact


  

You are done.

Demo

How To Add Outer Borders to Images

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag.

Note:You can change border color,outline size,margin,... But both outline size and margin must have a same numerical value.

4.Now add your images as below.

outer-borders">
   

   

   
     
  

You are done.

Demo

Traffic Tracker and Statistics for Blogs

Traffic and statistics for blogs.
What are the best traffic checker for sites?
What blog statistics tracker suits blogs?

Here are some well-known traffic trackers that you can use for your blog, just to see how your blog's traffic is doing.

1) Google Analytics


"Google Analytics is the enterprise-class web analytics solution that gives you rich insights into your website traffic and marketing effectiveness. Powerful, flexible and easy-to-use features now let you see and analyze your traffic data in an entirely new way. With Google Analytics, you're more prepared to write better-targeted ads, strengthen your marketing initiatives and create higher converting websites."

Editor's note: This is a must for all blogs.


2) SiteMeter


"Site Meter's comprehensive real time website tracking and counter tools give you instant access to vital information and data about your sites audience. With our detailed reporting you'll have a clear picture of who is visiting your site, how they found you, where they came from, what interests them and much more."

Editor's note: This is my favourite among the other traffic trackers (excluding Google Analytics)


3) OneStat (free version)


"OneStat Free is the most reliable, fully password-protected tracker available today. We provide you the most detailed web analytics reports and the best of all: it is absolutely free!"


4) StatCounter


"A free yet reliable invisible web tracker, highly configurable hit counter and real-time detailed web stats. Insert a simple piece of our code on your web page or blog and you will be able to analyse and monitor all the visitors to your website in real-time!"

CSS Horizontal Navigation Menu For Bloggers/Websites

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag.

Note: Please host menu.jpg and menuhov.jpg images yourself.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

Home

About

WebDesign

HTML
CSS
JavaScript



Subscribe

Register

Contact



 

You are done.Look at the picture below.



Demo

Superb CSS Menu For Bloggers

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag.

Note:please host catmenu.jpg and catmenuhov.jpg images yourself.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

Home

Web Design

HTML
CSS
JavaScript



Templates

1 Column
2 Column
3 Column
4 Column



Subscribe

Email



News

Google

Yahoo
MSN



About

Contact

PrivacyPolicy



 

You are done.It will look like this:

Demo

How To Add jQuery Images Slider to Blogger

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag.

Note : You can change width value as your choice.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

Note: Host above 2 images yourself.

You are done.It will look like this:

Demo

Great MultiTab View Widget For Blogger

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see ]]> tag .

3.Copy below code and paste it just after the ]]> tag.

Note: Please host above images yourself.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

Recent


ENTER-TAB-1-CONTENT-HERE





Popular



ENTER-TAB-2-CONTENT-HERE




Comments


ENTER-TAB-3-CONTENT-HERE

Now you are done.Your final result will look like this:


Demo

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see ]]> tag .

3.Copy below code and paste it just after the ]]> tag .

4.Now again scroll down where you see below code:

5.Now copy below code and paste it just after

.

Video
Recent
Popular

Look at the picture below.

Add code as this picture

6.Now save your template.

7.Go to Layout-->Page Elements.You can see your tab widget as the picture below.


8.Now you can add contents to your tab widget.Your final result will look like this:


Demo

How To Add Mootools Recent Post Slider to blogger

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see ]]> tag .

3.Copy below code and paste it just after the ]]> tag .

4.Now again scroll down to where you see below code:

5.Copy below code and paste it just before

.

Replace "http://bloggertipandtrick.blogspot.com" with your blog address.
Replace images addresses with your images addresses.

Note: You can place above code as your choice.For explanation I place it just before

.

6.Now save your template and you are done.It will look like this:





Demo