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

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