BlogTariff


Spicing blog template with menu styles helps readers/visitors to browse category wise related articles easily. Webmasters needs simple and easy way to add “Horizontal Menu” then here BlogTariff presents “Horizon Menu Style” for blogger. This Menu widget is purely based on CSS3 code and it is origin of dynamicdrive. Easy customizable and well designed for blogger without interrupting in loading time. When ever readers mouse over on this Menu links it hovers in stylish colors with eye-catching look. In this widget menu no image is used and webmasters don’t need to work hard. This menu best suits for those blogs . Let’s begin the tutorials for adding menu style widget.


How to Add “Horizon Menu” for blogger?

Sign into your blogger account
Click on “Design (Layout in the new blogger interface) Page elements” link tab
Click on “Add a Gadget” link tab
Select “HTML/Javascript” widget
Copy the below code and paste in it
<style type="text/css">

/* CSS3 Horizontal Menu to add For Blogger By http://www.blogtariff.com/ */

div.topbar {
    height: 12px;
    background: #0080ff;
}

ul.claybricks {
    font-weight: bold;
    width: 100%;
    background: #e3e490;
    padding: 6px 0 6px 0;
    margin: 0;
    text-align: left;
        font-family: calibri;
}

ul.claybricks li {
    display: inline;
}

ul.claybricks li a {
    color: black;
    padding: 6px 8px 4px 8px;
    margin-right: 20px;
    text-decoration: none;
}

ul.claybricks li a:hover, ul.claybricks li a.selected {
    color: white;
    background: #5d4137;
    background: -moz-linear-gradient(top, #5d4137 0%, #41251b 12%, #2c0f05 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d4137), color-stop(12%,#41251b), color-stop(100%,#2c0f05));
    background: -webkit-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
    background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
    background: -ms-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
    background: linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4137', endColorstr='#2c0f05',GradientType=0 );
    -moz-box-shadow: 0 0 5px #595959;
    -webkit-box-shadow: 0 0 5px #595959;
    box-shadow: 0 0 5px #595959;
    padding-top: 17px;
    padding-bottom: 6px;
}

/* CSS3 Horizontal Menu add For Blogger By http://www.blogtariff.com/ */

</style>



<div class="topbar">
</div>
<ul class="claybricks">
    <li><a href="http://www.blogtariff.com/">Home</a></li>
    <li><a href="#">Blogging</a></li>
    <li><a href="#">Tutotials</a></li>
    <li><a href="#">Widgets</a></li>
</ul>
After successful Adding code “Save the widget”

Customization:-

Replace the “#’ with page links
Replace “Link names” with your link page names.

Post a Comment Gmail ID

Do not Try to Add Spam Comments

 
Top