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.

putting webkit box shadow to menu tabs


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


adding webkit box shadow to 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:
tilt  hover effect
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

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV

Related Posts Plugin for WordPress, Blogger...