How To Add A Tabbed Navigation Widget to Blogger

 The tabviews are elements that allow us to group in a single container various gadgets and these can be selected via tabs.

Its main function is to save space on the blog to avoid scattered gadgets in the same category so you can group multiple gadgets into one. There are several methods for creating tabviews, some require jQuery, other MooTools, or any other script.

Read More

How To Remove Navbar From Blogger

 WHAT IS BLOGGER NAVBAR?

Blogger has got a Navigation Bar that appears by default at the top of every Blogger-powered blog. This navigation bar can be very useful when you are blogging, but sometimes, it can get in the way. The Blogger navbar is usually hidden in most of the third party templates.

The advantages of it are the following:

- when you click on the B icon, it will take you to blogger.com
- a quick link to your Dashboard and "Sign in /Sign out" dialog
- you can easily search for other blogs
- you can "Flag Blog" (if you consider content of a blog objectionable)
- NextBlog - takes you to a random, recently-updated Blogger blog

The only disadvantage is visual. If you have customized design, Navbar just doesn't fit in.
So how we get rid of it? It is very simple. Just follow the next steps...

Read More

How To Add Customize Scroll Bar in Your Blogger Blog (Blogspot widget)

Nowadays Blogger blog (or blogspot) is the most popular blog designing platform provided by Blogger. Most of the blogger begins with the blogger blog for sharing and for many purpose by posting into their blog.

And all of us blogger wants to decorate our blog very beautifully, so visitors and people can be attracted. Many bloggers have seen many customized scroll bar in popular blog and wants to customize their blog with beautiful scrollbar,but dont know how to do? 

So, Today i am here to share Customizable Scrollbar script for the blogger. Hope this tip or customizable scrollbar you will like, And it is very quick and easy to customize the colors, size (width and height). This can be done by adding script (Which is given at the middle of the post) into the CSS code. 

Lets customize the Scroll bar.

• First Go to Blogger Dashboard.
• Now click on template >> Edit HTML.
• Now search for this code ]]></b:skin> using ctrl+f button.
• Now Copy the Below code and just paste above ]]></b:skin> .

/* startingphaseofc.blogspot.com scrollbar effect */ ::-webkit-scrollbar { width:8px; height:6px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3); background:#eee; } ::-webkit-scrollbar-thumb { background: rgba(28,119,229,0.7); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(116,188,99,0.5);

• Now click on save template and its done.

OR you also can do this with following method.

• First go to Blogger dashboard.
• And click on Template >> Customize button.
• Now click on Advance >> Add CSS and you will see 'Add custom CSS' and box now just paste above code.
• Now click on Apply to Blog Button and its done.

NOTE:

You can change the color by changing #eee and width and height by changing width:8px; height:6px; with your desired size.

Read More

How To Get Rid Of The Top Navigation Bar

The navigation bar at the very top of your blog can be a worry if your blog is going to be viewed by young children as the NEXT BLOG option could lead them to random places that it is not good that they go.

This bar can be removed if you want by placing a little bit of code in the blog template. Tricky but cunning!

Below are instructions how to go about

1. Firstly- seeing you have got rid of the Navigation Bar you still want a link to the Blogger log in page.

Go to your Overview and go to LAYOUT.

Click on add a gadget.

Scroll down the list til you get to LOGO. Click on the PLUS sign to add it.

Chose one of the LOGO colours that you like and click SAVE.

Now all you need to do is click on the Blogger logo and it will take you to the Blogger log in page.

2. Now go to the OVERVIEW, then go to LAYOUT.

Look for NAVBAR and click on edit.

Look for where it says OFF in the pop up box. Click and save it and your work is done!.

3. This is another way to get rid of the Navigation Bar using html.

 Copy this bit of html code.


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


Then go to the OVERVIEW and go to the TEMPLATE.

Click on it. Then click on EDIT HTML.

You will get told to be careful but procede any way.

Usually you paste the code under the second dotty line. Each template can be slightly different.

Click PREVIEW to check of the navigation bar at the top has really gone.

If it has, click SAVE TEMPLATE- if it hasn't try the code somewhere else.

I would add once more that it is a good idea to preview the changes before you actually publish them in case you have put the code in the wrong place. If you muck it up just discard the changes and try again.

Read More