Tabbed Content Navigation Widget For Blogger

Tabbed content navigation widget for blogger,everybody would have seen it in many of the bloggers using this tabbed navigtaion widget.There are many designs of tabbed navigation widgets used and designed by many bloggers.Today i will tell you how to install the tabbed navigation widget for the blogger.



Login To Blogger > Layout > Edit HTML > Press Ctrl + F > Search For </b:skin>

And add the below codes before it


/*--------Tabber ---------------------------------*/
#tabsidebar-wrapper{
width: 375px; /* Mesma largura da Sidebar */
float: right;
border: 1px none #CCC;
margin-bottom: 15px;
}
.tabberlive .tabbertabhide {display:none;}
.tabber {display:none;}
.tabberlive {margin-top:1em;}
.tabber h2 {
border-bottom:2px solid #5B0;
margin-bottom: .3em;
padding: 0;
line-height:1.2em;
}
.tabber .widget {margin-bottom: 1em;}
.tabber .widget-content {margin: 0 0px;}
ul.tabbernav{
margin:0;
padding: 8px 0;
border-bottom: 1px solid #ccc;
}
ul.tabbernav li{
list-style: none;
margin: 0;
display: inline;
}
ul.tabbernav li a{
padding: 8px 0.5em;
margin-right:2px;
border: 1px solid #CCC;
border-bottom: none;
background: #fff;
text-decoration: none;
}
ul.tabbernav li a:link { color:#369;}
ul.tabbernav li a:visited { color: #369;}
ul.tabbernav li a:hover{color:#369; background: #e6e6e6; border-color: #CCC;}
ul.tabbernav li.tabberactive a{
background-color: #e6e6e6;
color: #369;
border-bottom: 1px solid #e6e6e6;
}
ul.tabbernav li.tabberactive a:hover{
color: #369;
background: #e6e6e6;
border-bottom: 1px solid #e6e6e6;
}
.tabberlive .tabbertab {
background: #e6e6e6;
padding:5px;
border:1px solid #ccc;
border-top:0;
}

.tabberlive .tabbertab h2 {display:none;}
.tabberlive .tabbertab h3 {display:none;}


Just download this tabber js file from here and upload to your own server.

Now Search For </head>

And Place this script before it.


<script src='http://www.your-url.com/scripts/tabber.js' type='text/javascript'/>


Just replace the above red script link with yours to make it work..

Now search for Below codes without expanding the widgets-

<div id='sidebar-wrapper'>

And add the below codes before the above code

<div id='tabsidebar-wrapper'>
<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab1' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab2' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab3' maxwidgets='1' showaddelement='yes'/>
</div>
</div></div>


Now Preview Your Template > If no Error Save it.

I hope you will install it succesfully as it is very easy. This navigation widget is presently used in my blogger template you can check it.

If you find it difficult to implement or doesn't liked its design then check this tabbed navigation widget by Bloganol.

If you have any problems in istalling it leave your comments below.

Add Button 'Save Blogger Post As Pdf' Blogger

How to add 'save As Pdf Button' in each blogger post of your blogger so as the readers can save your post in pdf format which they like.This tool will really help your readers in saving your post they like.I am vey happy to post this button as i m sure my readers will like this for sure as is very useful.After this post i will post an trick 'how to save any blogger all posts as pdf too' i.e to download all bloggers posts of any blog in pdf format.

How to add 'save As Pdf Button' ?

Login to Blogger > Layout > Edit HTML > Expand Widgets > Press Ctrl+F > Search For Below Red Codes

<data:post.body/>

If you are using Read More Hack you will find above code twice so use second code.

Add the below codes after the above codes


<script type="text/javascript">
</script>
<script src="http://web2pdf.freepdfconvert.com/pdfbutton.js" type="text/javascript">
</script>


Preview it.If its work fine.Save your template.

Fr demo of the Button Go here and try this button.

Free Image Hosting With Unlimited Bandwidth

Every blogger needs good and free image hosting services with unlimited bandwidth to host there images and blogger who designs template and have pictures blog need it very badly because there bandwidth completes very fast.As using these services on slow internet connections is very difficult as it takes much time to load page and upload images and the images upload is also as not easy as this service which i am going to review.

As all have been using image hosting services like Photobucket , Imagehack , Picasaweb , Flickr and many more but all these services gives you an limited space and limited bandwidth that exceeds in mid of month and creates an problem for you as your readers can't see the images.

The new image hosting service i got is Pict.com.




As you can see clearly from picture just click upload box select image from hardisk or web and upload in single click it will upload in seconds faster than other services.You will like this service for sure.

It has an one great feature also which i loved to use is that you can capture any website image or visible part of website or any selected part you want and directly upload it to your images or will save to your hardidsk.Like you take webshots i.e you can take webshots of any thing on web if you are using mozilla firefox.

They have provided firefox addon for this just download it and install it if you want to take webshots and directly upload your images.

After installing just right click on any website of which you want to take webshot and select Save Page To Pic.com and capture any part you like of that page.

Some Great Features of Pict dot com:-
1.Easy to upload
2.Unlimited hosting space
3.Unlimited Bandwidth
4.Upload speed very fast
5.No need to sign up
6.Can take Webshots of any site
7.Simple To use

I hope you will like this image hosting service,even if you don't use it for all your images hosting,host some of them here too,to reduce your load on other hosting services by using this service. Best of luck with this new image hosting service.

Change Older Post And Newer Post Link With Images Blogger

Change Older Post And Newer Post Link With icons or images in Blogger is very nice trick to make your blog look very beautiful.As it make your blog look more beautiful than before if you are using good icons to be get replaced with older post or newer post or home link.Today i will tell you how easy it is to hide those links and place your any image you like.

These are the links below pointed by arrows to be get replaced in picture which i was talking about.


Now how to change these links with icons is very easy.

Got to LAYOUT > Edit HTML > Expand Widgets

Now follow these steps to replace codes :-


Find the code in red lines and replace them with lines in green following each red line-

1.<data:newerPageTitle/>
Replace with
<img src='http://bandofgirls.googlepages.com/Newer_post_icon.png'/>

2.<data:olderPageTitle/>
Replace with
<img src='http://bandofgirls.googlepages.com/older_post_icon.png'/>

3.<data:homeMsg/>
Replace with
<img src='http://bandofgirls.googlepages.com/home_icon.png'/>

Please Host these images to your hosting image service and change these urls with yours as they may exceed bandwidth.


Now preview it . If its Ok
You can save your template.

How the links will appear after changing these codes -




I hope you will like these trick and icons for sure and its an advice to please host these images to your server.

Make Mozilla Firefox Load Pages Faster

Tweak Network 1.3 is the mozilla addon which will speed up the loading of web pages and increase the maximum number of simultaneous downloads from a site. If you are using Firefox browser? There are many ways to make Firefox work faster; perhaps you have ever read many tips on the internet to make Firefox faster.Now i will share a tip to make your Firefox faster which is installing Tweak Network Add-on.


It is very easy to get Tweak Network Add-on; you just need to download it here

After going there click on Add To Firefox > Then it will Ask for Install > Click I
nstall Button > Then the Add On will get installed > It will Ask for restart of Firefox Restart it .

After you install Tweak Network Add-on, please follow the guides below.Please run your Firefox. Click Tools menu, when the options appear, click Tweak Network Settings.



Then an alert will appear Click OK. Now window will open.
Click Power button, then click Apply button ,Then Click OK Done



I hope this will speed up your mozilla if it works slow. Best of luck for this addon.Happy Browsing.

Simple Blog Writing Template

Hi Friends, today i designed an simple blogger template to start of design some good templates in future. As this was my second design as my first design was having some errors and it was only modified by me to give different looks.This new design template is very simple design just good for bloggers for simple blog entries.


Some Features Of the template:-
1.Social bookmarking widget installed
2.Embed comment form
3.Yahoo emotions In comment
4.Menu Links at the top and the footer.
5.Swap Title hack Installed




I hope you will like the my first design for sure.If you have any problem in using this template leave your comment here.