Membuat Menu Mini Vertical tanpa Edit HTML

Menu Mini

Salam Blogger! Bagi pengunjung setia kali ini saya akan membagikan bagimana Cara Membuat Menu Mini Vertical tapa edit HTML seperti gambar, silahkan ikuti langkahnya di bawah ini :


1.Klik Tata Letak.
2.Klik  Elemen Halaman.
3.Klik Tambah Gadget.
4.Kemudian Pilih HTML/Javascript.
5. Copy paste kode dibawah ini

Semoga Bermanfaat 

<style>

#navigationMenu li{
    list-style:none;
    height:39px;
    padding:2px;
    width:40px;
}

#navigationMenu span{
    /* Container properties */
    width:0;
    left:38px;
    padding:0;
    position:absolute;
    overflow:hidden;

    /* Text properties */
    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
    letter-spacing:0.6px;
    white-space:nowrap;
    line-height:39px;
    
    /* CSS3 Transition: */
    -webkit-transition: 0.25s;
    /*-o-transition: 0.25s;*/
    
    /* Future proofing (these do not work yet): */
    -moz-transition: 0.25s;
    transition: 0.25s;
}

#navigationMenu a{
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhasRwUjd2q_mWsDDqSMnYlpMpbEa0r6Vv5rTaVjkIa4g09dTtZ_-ChqcZoY54DnIscHtStnAg8PBk4sL3j3XeuiS1kYrKuDKmTYe6YEY-FkAgUANRXi8UmTr8Iu8Kbaw7LrCJTVVeoFFZv/s1600/navigation.jpg') no-repeat;

    height:39px;
    width:38px;
    display:block;
    position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
    text-decoration:none;
    
    /* CSS outer glow with the box-shadow property */
    -moz-box-shadow:0 0 5px #9ddff5;
    -webkit-box-shadow:0 0 5px #9ddff5;
    box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home {    background-position:0 0;}
#navigationMenu .home:hover {    background-position:0 -39px;}
#navigationMenu .home span{
    background-color:#7da315;
    color:#3d4f0c;
    text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
    background-color:#1e8bb4;
    color:#223a44;
    text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
    background-color:#c86c1f;
    color:#5a3517;
    text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
    background-color:#d0a525;
    color:#604e18;
    text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
    background-color:#af1e83;
    color:#460f35;
    text-shadow:1px 1px 0 #d244a6;
}

</style>


<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="home" href="http://riefsaz.blogspot.com">
<span>Home</span>
</a>

</li>
<li>

<a class="about" href="http://riefsaz.blogspot.com">
<span>About Us</span>
</a>
</li>

<li>
<a class="services" href="http://riefsaz.blogspot.com">
<span>Categories</span>
</a>

</li>

<li>
<a class="portfolio" href="http://riefsaz.blogspot.com">
<span>Disclaimer</span>
</a>
</li>

<li>

<a class="contact" href="http://riefsaz.blogspot.com/p/contact-us_02.html">

<span>Contact</span>
</a>
</li>
</ul>
</div>

C O D E