3 Exceptional Menu Bar Navigation Designs

Exceptional Menu Bar Navigation Designs

Responsive Flat Menu Bar

This menu bar is not only simple and functional, but also packs a responsive punch. Ready for any situation this menu will work on all devices from your desktop to your iPhone.

Responsive Textured Menu Bar

This menu bar uses a really cool textured pattern that give the design a little bit of depth. The menu is also fully responsive, which means it needs a little jQuery magic to work on all devices.

Indented Blue Menu Bar

This simple menu bar employs a linear gradient on the background to give the menu depth. Active items are highlighted by an inner box shadow that give the menu element and indented look.

CENTERING BLOGGER SIDEBAR WIDGETS

With Spring in the air it is only natural for us to feel the need to clean out house, get rid of the winter dust and get everything organized!

Have you ever thought about giving your blog a good spring cleaning? I highly recommend it!  Schedule a few minutes to take a good look at your blog.

Look over your sidebar and take down any extra or irrelevant widgets. Maybe even think about switching the order of your sidebar content. Keep things fresh and you will keep your readers!

Once you have gotten rid of any extra clutter you can use these  two easy tips to make sure all your sidebar content is nice and centered.

TIP #1. CENTER ALL THE BUTTONS/WIDGETS IN YOUR SIDEBAR

To do this open up each of your html widgets. Add <center> at the beginning of the code and </center> at the end of the code. Here is an example

Pretty simple right? And this works whether you have blogger or wordpress!

TIP #2 – MANUALLY ADJUST WIDGETS

 Sometimes even when you “center” a gadget [using the html above] it still isn’t exactly in the middle of your sidebar. Anyone have that problem before?

Look at the image below….See how the “welcome” note is not in the center of the sidebar. That is because of the “padding” that is built into the blog template.

Instead of changing the padding for the sidebar [that can be a little tricky] I think it is easier to move the individual widget. In this case I want my welcome note image to be moved to the left, in the center of my sidebar column. Here is how to fix that…

Go into the Design Tab > Template Designer > Add CSS.

Then you are going to paste this:

#HTML1 {margin-left: -17px;}

You will need to make a few changes to the code above for your specific widget….. First, you need to identify your widgets’ ID – go to Design > Page Elements, and mouse over the specific gadget’s Edit link. The widget Id can be read on the browser’s status bar. Example widgetId=HTML3 will be referred to #HTML3 in the CSS.

You can change the word left to top, bottom, or right, depending on which way you want to move the widget. And of course you can change the number to whatever number you need [positive or negative].

If you want to move you widget in two directions, say up and to the left, you would just add the second command. Like this….

#HTML1 {margin-left: -17px; margin-top: 10px;}

Ta-Da! All centered!

Hopefully these two tips will help keep your blog looking clean and organized! Have a Happy Tuesday!

Blogger How To: Center Your Header

Sometimes all you want is a quick fix. You’ve uploaded your Blogger header on the Layout page but it’s aligned to the left. You want it centered horizontally over the content section of your blog instead. Here is how to easily do that!

1. In Blogger, go to Template > Customize

2. Click on the Advanced tab then scroll to the bottom of the second menu and choose Add CSS.

3. Copy and paste this code into the text box (click then press CTRL + C to copy, then CTRL + V to paste):

#header-inner {text-align:center !important;} #header-inner img {margin: 0 auto !important;}

That’s it! Done like dinner.

How to Insert Custom CSS Codes into Blogger Blog Template

Know the different ways and means for adding CSS style to your Blog Template. Learn the tricks to link external CSS files into BlogSpot blogger blogs.

Cascading Style Sheets (CSS) are mainly used to styling your Web Pages or change the looks of your Blog. Everyone wants to make his/her blog different and unique from others either by changing layouts or adding some elements apart from your niche.

There are mainly five options for adding CSS codes into blogger blog and you have to choose one of them as the best option which you can easily apply to your blog. Generally, the choice for adding/changing CSS codes will depend on your needs like whether you want to add CSS for the entire blog or just want to style any particular element viz. Sidebar, footer, single post, specific Gadget etc.

1) Add CSS in the Blogger Template Designer

This is a simple and best option for those who are new to the world of blogging. In this method you need not worry about the error to be faced while adding CSS codes into blogger template.

This customized preference has been provided by the Blogger’s Template Designerand you can change any aspect of your blog by adding CSS codes into the Add CSSfield located under Advanced Tab.

The best part of this tool is that you can see the return instantly in a live preview beneath the editor.

Step-1:

Login to your blogger account at blogger.com/home and click on the particular blog.

Step-2:

From your blog Dashboard, go to the Template Tab of your blog and click on Customize button.

Step-3:

Under the Advanced Tab Menue on left pane, scroll down and Select Add CSS. However, if you are using a third party Blogger Template, there may be only Add CSS sub-menu on the right pane.

Step-4:

Now you can add CSS in the field located under Add Custom CSS to override existing styles of your blog.

2) Add CSS through Edit HTML of Blog Template

To use this method, you should have some basic knowledge about HTML Editor of blogger blog template. In other words, if you are familiar with HTML codes, you can add CSS codes more easily into your blog.

However, I strongly recommend you to please download a copy of your blog template before making any changes or editing the code.

For adding any CSS code into blogger template directly, go to the Template Tab of your blog and click on the Edit HTML button.

In the open HTML Editor of your blog, you will see a bunch of lines with various codes. Click or put your mouse pointer anywhere in the given codes and search for ]]></b:skin>

Now, before or above ]]></b:skin> add your CSS codes to change almost any aspect of your blog’s appearance. Note that each Cascading Style Sheets (CSS) starts with a tag name and CSS codes shall be inserted between the {Brackets} in the style sheet.

For Example:

1. /* Showeblogin CSS Codes sample for body tag */
2. body {
3. font-family:"Times New Roman",Serif;
4. color:#123456;
5. background:#654321;
6. border:solid 2px red;
7. }

After adding the codes click on Preview Template to see the effects and then only save template. You may also add your CSS between <style>CSS codes here</style> anywhere in the template but it should be better to insert it before closing the </head> tag.

3) Insert CSS codes through Gadgets

This method is also risk free and it can be useful for newcomer of blogging platform. Further, if you have bunch of Open Codes of CSS, this approach will be user friendly.

Just visit your blog Dashboard and go to the Layout tab and then click on any Add a Gadget link provided on the widget areas of your blog.

Now, scroll down and click on HTML/JavaScript and then add your CSS codes there between

1. <style type="text/css">
2. /* Place your CSS codes here. */
3. </style>

4) Link external CSS files into Blog

Beginner shall not use this method as because it takes lots of care and technical knowledge like adding CSS through Edit HTML of Blog Template.

But, we have a simple trick for that. So, if you have external CSS file and want to link the externally hosted CSS file to your blog template then you can do this as follow

1. <link type="text/css" rel="stylesheet" href="your-externally-hosted-style.css">

Go to your blog template Editor and search for <head> tag and then add the above HTML codes with the link of your externally hosted style.css file after/below the <head> or before/above the </head>.

However, the link tag must be placed within the <head> ... </head> element only. The rel attribute with the value “stylesheet” allow the browser to recognize that the href attribute gives the Web address (URL) for your style sheet.

5) Add CSS for Single Post of your Blog

This technique is to be used for inline style. In other words, you may apply this method for a specific blog post or webpage.

Accordingly, if you want to do one-time formatting for a particular piece of text in your blog post. Here is the format to style it:

1. <span style="CSS Codes here">Write your text here</span>

Suppose you want to style a particular text (Showeblogin) in a specific paragraph then you may do this with the help of this simple coding.

Go to the post editor (HTML) instead of compose mode of that particular blog post and add the following CSS codes:

1. <span style="color:red;font-weight:bold;background-color:#f3f3f3;">Showeblogin</span>

Enjoy!