How to Add Webkit- Box-Shadow To Menu Tabs And Side Bar Title

Two most professional blogs like Mybloggertricks and Bloggertrix have very beautiful navigation bars because they added shadows that tend to glow if you look at them in a closer mode. Take a view also in my menu tabs above and in my sidebar titles as an example. If you want to know how I have made it?Of course, I will share in this article the process in making a 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

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

#PopularPost1 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.

Take care and Enjoy!