Cute Navigation Tab Menu "Hover Effect"

Cute Navigation Tab Menu "Hover Effect"
ikuti langkah berikut ini!

credit : Yulia


1. Sign in Blogger account.
2. Dashboard >> Layout >> Add a gadget >> HTML/Javascript
3. Copy Paste this code.

<style>
    .navv {-webkit-transition: 1.0s;
    -moz-transition: 1.0s;
    margin:1px;
    display:inline-block;
    text-align:center;
    background: #222;
    color:#fff;
    width:100px;
    overflow: hidden;}
    .navv:hover {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;-o-transition: all 1s ease;
    transition: all 1s ease-in-out;}
    #com {
    margin-top: 27px;
    width:100px;
    padding:1px;
    text-align:center;
    position: absolute;
    background:#FFf;
    color:#222;
    opacity: 0;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    transition: all 0.5s linear;z-index: 103;}
    .navv:hover #com {opacity: 1;overflow:hidden;}</style>
    <center><a href="link"><div class="navv"><div id="com">Tutorial</div>01</div></a>
    <a href="link"><div class="navv"><div id="com">Freebies</div>02</div></a>
    <a href="link"><div class="navv"><div id="com">Entries</div>03</div></a>
    <a href="link"><div class="navv"><div id="com">Affiliates</div>04</div></a>
    </center>

 4. SAVE