Menu Flat Font Awesomwe Pada Sidebar Blog

Untuk itu Dalam Tutorial ini saya akan memberikan alternatif dalam membuat menu, kebnayak menu navigasi pada blog berada di header blog dan untuk itu saya mencoba memberikan hal berbeda dan muda untuk dipahami dan dipraktekan agan penampilan blog menjadi menarik walaupun tampilannya sederhana. ikuti langkah berikut

• Silahkan login  ke Blogger.com
• Tata Letak --Tambah Gadget Baru---HTML/Javasccript
• Copy Kode Berikut ini dan Pastekan ke dalam HTML/ JavaScript
• Simpan dan Lihat Hasilnya
• Selamat Mencoba Semoga Berhasil

<style>

 @import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

}

@import url(http://fonts.googleapis.com/css?family=Titillium+Web:300);

.fa-2x {

font-size: 2em;

}

.fa {

position: relative;

display: table-cell;

width: 60px;

height: 36px;

text-align: center;

vertical-align: middle;

font-size:20px;

}





.main-menu:hover,nav.main-menu.expanded {

width:250px;

overflow:visible;

}



.main-menu {

background:#1abc9c;

border-right:1px solid #e5e5e5;

position:absolute;

top:0;

bottom:0;

height:100%;

left:0;

width:60px;

overflow:hidden;

-webkit-transition:width .05s linear;

transition:width .05s linear;

-webkit-transform:translateZ(0) scale(1,1);

z-index:1000;

}



.main-menu>ul {

margin:7px 0;

}



.main-menu li {

position:relative;

display:block;

width:250px;

}



.main-menu li>a {

position:relative;

display:table;

border-collapse:collapse;

border-spacing:0;

color:#2c3e50;

 font-family: arial;

font-size: 14px;

text-decoration:none;

-webkit-transform:translateZ(0) scale(1,1);

-webkit-transition:all .1s linear;

transition:all .1s linear;

  

}



.main-menu .nav-icon {

position:relative;

display:table-cell;

width:60px;

height:36px;

text-align:center;

vertical-align:middle;

font-size:18px;

}



.main-menu .nav-text {

position:relative;

display:table-cell;

vertical-align:middle;

width:190px;

  font-family: 'Titillium Web', sans-serif;

}



.main-menu>ul.logout {

position:absolute;

left:0;

bottom:0;

}



.no-touch .scrollable.hover {

overflow-y:hidden;

}



.no-touch .scrollable.hover:hover {

overflow-y:auto;

overflow:visible;

}



a:hover,a:focus {

text-decoration:none;

}



nav {

-webkit-user-select:none;

-moz-user-select:none;

-ms-user-select:none;

-o-user-select:none;

user-select:none;

}



nav ul,nav li {

outline:0;

margin:0;

padding:0;

}

.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {

color:#fff;

background-color:#16a085;

}

.area {

float: left;

background: #e74c3c;

width: 100%;

height: 50%;

}

@font-face {

  font-family: 'Titillium Web';

  font-style: normal;

  font-weight: 300;

  src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');

}

</style>

<div class="area"></div><nav class="main-menu">

            <ul>

                <li>

                    <a href="#">

                        <i class="fa fa-home fa-2x"></i>

                        <span class="nav-text">

                            Dashboard

                        </span>

                    </a>

                  

                </li>

                <li class="has-subnav">

                    <a href="#">

                        <i class="fa fa-cogs fa-2x"></i>

                        <span class="nav-text">

                            Settings

                        </span>

                    </a>

                    

                </li>

                <li class="has-subnav">

                    <a href="#">

                       <i class="fa fa-list fa-2x"></i>

                        <span class="nav-text">

                            Forms

                        </span>

                    </a>

                    

                </li>

                <li class="has-subnav">

                    <a href="#">

                       <i class="fa fa-folder-open fa-2x"></i>

                        <span class="nav-text">

                            Pages

                        </span>

                    </a>

                   

                </li>

                <li>

                    <a href="#">

                        <i class="fa fa-bar-chart-o fa-2x"></i>

                        <span class="nav-text">

                            Graphs and Statistics

                        </span>

                    </a>

                </li>

                <li>

                    <a href="#">

                        <i class="fa fa-comment-o fa-2x"></i>

                        <span class="nav-text">

                            Comment

                        </span>

                    </a>

                </li>

                <li>

                   <a href="#">

                       <i class="fa fa-envelope-o fa-2x"></i>

                        <span class="nav-text">

                            Contact

                        </span>

                    </a>

                </li>

                <li>

                   <a href="#">

                        <i class="fa fa-map-marker fa-2x"></i>

                        <span class="nav-text">

                            Site Map

                        </span>

                    </a>

                </li>

                <li>

                    <a href="#">

                       <i class="fa fa-info fa-2x"></i>

                        <span class="nav-text">

                            Information

                        </span>

                    </a>

                </li>

            </ul>



            <ul class="logout">

                <li>

                   <a href="#">

                         <i class="fa fa-power-off fa-2x"></i>

                        <span class="nav-text">

                            Logout

                        </span>

                    </a>

                </li>  

            </ul>

</nav>

</div>

Demo Click here

Tweet

Ditulis Oleh: Fran Fallo at 3:50 PM