Adding Webkit- Box-Shadow to Menu Tabs and Side Bar Title

Most professional blogs like Mybloggertricks  and Bloggertrix have a very beautiful navigation bar because they added a shadow that tends to glow if you look at it in a  closer mode. Take a glance also in my menu tabs above and in my sidebar titles as an example. Want to know how I have made it? Of course, I will share here in this article the process in making that webkit- box- shadow.

Adding Webkit- Box-Shadow to Menu Tabs or Navigation Bar

Step 1. Open your Blogger account and go to Blogger Dashboard section
Step 2. Click Template button (have a back-up of your template before proceeding to step 3)
Step 3. Hit  Edit HTML
Step 4. Look (Control F) for the code #bbtnav {  (this is part or included of whole CSS that is responsible for navigation bar)

This may look like this:

#bbtnav {
Some codes here.............
}

Note: To  know your own unordered list (ul) ID, like for example (bbtnav) in my case, just go to your blogger lay-out page and find the set of code that is responsible of your menu tabs. Usually this ul ID is located at the first part of the whole code. Or can attach or send your blog url at my contact page to let me find your ul ID of your navigation bar.

In my case, this is the set of codes:

<ul id='bbtnav'>
        <li>
          <a href='http://bloggingtipsandtrix.blogspot.com/'>Home</a>
         </li>
        <li>
          <a href='http://bloggingtipsandtrix.blogspot.com/2012/12/about-me.html'>About</a>
       </li>
        <li>
          <a href='http://bloggingtipsandtrix.blogspot.com/2013/04/var-servicedomainwww.html'>Contact</a>
        </li>
 <li>
          <a href='http://bloggingtipsandtrix.blogspot.com/2013/01/sitemap-for-blogging-tips-and-trix.html'>Sitemap</a>
        </li>
 <ul>

Step 4. Add the additional CSS code below to have a webkit-box-shadow on your navigation bar

-webkit-box-shadow: 0 -2px 30px #1751ff;
box-shadow: 0 -1px 30px #1751ff;
border-top: 1px solid #1484fc;
border-bottom: 1px solid #1484fc;

Therefore, your final CSS code will be:

#your ul ID here {
width: 961px;
background: #000000;
margin: -32px 0 0 -1px;
padding: 0;
height:30px;
-webkit-box-shadow: 0 -2px 30px #1751ff;
box-shadow: 0 -1px 30px #1751ff;
border-top: 1px solid #1484fc;
border-bottom: 1px solid #1484fc;

Step 5. Save your template.

Adding Webkit-Box-Shadow to Your Sidebar Title

Note: Before proceeding to the steps below, be sure you have already put a background color or an image to your sidebar title to make this tweak more effective.

Step 1. In your Blogger Template Editor's page look for the code

#PopularPosts1 h2 {

• Popular Posts1 is the ID of your widget. To know how to get the particular ID of the widget you have inserted in your Lay-out page, click here. 

Step 2. Add the code below after the line   #Your widget Id here h2 {

-webkit-box-shadow: 0 -2px 20px #ffbf00;

• Do these on all your sidebar title widget to have a uniform effects.
• Change the hexadecimal color ffbf00 with your own. You can select it here.

Step 3. Save your template! And now visit your blog to see your new sidebar header title with  glowing effects.

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook