Cara Membuat Menu Navigasi Di Atas Header Blog

Cara Membuat Menu Navigasi Di Atas Header Blog - Menu Navigasi merupakan sesuatu yang harus ada di blog karena tanpa menu navigasi blog kita terlihat tidak bagus atau tidak propesional , fungsi lain adalah untuk memudahkan robot dari google untuk menelusuri artikel blog kalo terlihat bagus artikel blog kita bisa di letakan di halaman pertama google.

Membuat Menu Navigasi Di Atas Header Blog

1. Seperti biasa kalian login ke blog > Pilih Template > Edit HTML > Letakan kode di bawah ini di atas kode <body>

<nav class='top-menunav'>
            <ul>
              <li><a title='Info'> Info <i class='fa fa-search'/></a></li>
              <li><a href='#' title='About Us'><i class='fa fa-book'/> About</a></li>
              <li><a href='#' title='Our Sitemap'><i class='fa fa-list'/> Sitemap</a></li>
              <li><a href='#' title='Contact us'><i class='fa fa-envelope'/> Contact</a></li>
              <li><a href='#' title='Disclaimer'><i class='fa fa-check-circle'/> Disclaimer</a></li>
              <li><a href='http://sistemrial.blogspot.co.id/p/privacy.html' title='Privacy'><i class='fa fa-user'/> Privacy</a></li>

<li class='sorting-01 pinterest'><a class='sistemrial-tooltip sistemrial-tooltip-left' data-sistemrial-tooltip='Follow us on Pinterest' href='#' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='inv'/></a></li>
<li class='sorting-02 googleplus'><a class='sistemrial-tooltip sistemrial-tooltip-left' data-sistemrial-tooltip='Follow us on Google+' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='inv'/></a></li>
<li class='sorting-03 facebook'><a class='sistemrial-tooltip sistemrial-tooltip-left' data-sistemrial-tooltip='Follow us on Facebook' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='inv'/></a></li>
<li class='sorting-04 instagram'><a class='sistemrial-tooltip sistemrial-tooltip-left' data-sistemrial-tooltip='Follow us on instagram' href='#' rel='nofollow' target='_blank'><i class='fa fa-instagram'/><span class='inv'/></a></li>
<li class='sorting-05 twitter'><a class='sistemrial-tooltip sistemrial-tooltip-left' data-sistemrial-tooltip='Follow us on Twitter' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='inv'/></a></li>
            </ul>
</nav>

2. Kemudian tambahkan kode CSS dibawah ini diatas kode ]]></b:skin>

/* CSS Top Navigation */
.top-menunav {display:block;margin:0 auto;float:left;padding:0;width:100%;background:transparent;border:none;}
.top-menunav ul {width:100%;padding:0;margin:0;text-align:left;}
.top-menunav li {list-style-type:none;float:left;padding:0;margin:0;border-right:1px solid #e6e6e6;}
.top-menunav li a {position:relative;font-family:'Open Sans';font-size:14px;font-weight:400;background-color:transparent;color:#444;display:block;margin:0;padding:12px 15px;line-height:100%;transition:color 0.3s;}
.top-menunav ul li a:active, .top-menunav ul li.highlight a {line-height:100%;text-decoration:none;}
.top-menunav ul li a:hover {color:#29abe2;text-decoration:none;}
.top-menunav a#pull {display:none;}
.top-menunav li.facebook,.top-menunav li.twitter,.top-menunav li.instagram,.top-menunav li.googleplus,.top-menunav li.pinterest{text-align:center;color:#444;float:right;transition:initial;}
.top-menunav li a.facebook:hover,.top-menunav li a.twitter:hover,.top-menunav li a.instagram:hover,.top-menunav li a.googleplus:hover,.top-menunav li a.pinterest:hover{color:#888;}
.top-menunav li.facebook .fa.fa-facebook,.top-menunav li.twitter .fa.fa-twitter,.top-menunav li.instagram .fa.fa-instagram,.top-menunav li.googleplus .fa.fa-google-plus,.top-menunav li.pinterest .fa.fa-pinterest{font-weight:normal;color:#444;transition:background-color 0.3s;}
.top-menunav ul li.facebook:hover .fa.fa-facebook,.top-menunav li.twitter:hover .fa.fa-twitter,.top-menunav li.instagram:hover .fa.fa-instagram,.top-menunav li.googleplus:hover .fa.fa-google-plus,.top-menunav li.pinterest:hover .fa.fa-pinterest{color:#888;}
.top-menunav li.twitter {border-left:1px solid #e6e6e6;}
.top-menunav li.pinterest {border-right:none;}

3. Simpan template

Demo Click Here

Demikin tutorial tentang Cara Membuat Menu Navigasi Di Atas Header Blog , Terima Kasih