Cara Membuat Menu Primary Seperti Evo Magz

1. Seperti biasanya silahkan sobat login ke akun dasbhor blog sobat

2. Pergi ke editor template , caranya pilih menu template => Edit Html

3. Pada kolom editor template cari kode </style>

4. Salin dan tempelkan kode dibawah ini diatas kode </style>

}
/* NAVIGATION MENU */
.menu{font:normal normal 12px Arial,sans-serif;padding:0 0;background:#ffffff;margin:0 auto;height:38px;border:1px solid #f0f0f0;overflow:hidden}
.nav-menu{list-style-type:none;margin:0 0 0 0;padding:0 0 0 0}
.nav-menu li{display:block;float:left;line-height:38px;margin:0 0 0 0;padding:0 0 0 0;border-right:1px solid #f0f0f0}
.nav-menu li a{background:#ffffff;color:#666666;display:block;padding:0 8px}
.nav-menu li a:hover{background:#f5f5f5}
ul.nav-social{height:38px;margin:0 0 0 0;padding:0 0;float:right}
ul.nav-social li{display:inline-block;list-style-type:none;float:right;margin:0 0;padding:0 0;border-right:none;border-left:1px solid #f0f0f0}
ul.nav-social li a{display:inline-block;line-height:38px;height:38px;padding:0 8px;margin:0 0 0 0;color:#666666}
ul.nav-social li a i{line-height:38px}
ul.nav-social li a:hover{color:#fff}
ul.nav-social li a.fcb:hover{background:#3B5A9B}
ul.nav-social li a.gpl:hover{background:#DD4B39}
ul.nav-social li a.twt:hover{background:#1BB2E9}
ul.nav-social li a.ytb:hover{background:#ED3F41}

5. Copas kode berikut ini di atas kode <div class='header-wrapper'> atau <div id='header-wrapper'> atau <header id="header-wrapper"> Intinya kita cari elemen div headernya

<div id='nav-wrap'>
<nav class='menu'>

<ul class='nav-menu'>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='#'>Disclaimer</a></li>
</ul>


<ul class='nav-social'>
<li><a class='fcb' href='https://www.facebook.com/evotemplatesnet' rel='nofollow'><i class='fa fa-facebook-square fa-2x'></i></a>
</li>
<li><a class='gpl' href='https://plus.google.com/+SugengRiyadi' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'></i></a>
</li>
<li><a class='twt' href='https://twitter.com/blogmassugeng' rel='nofollow'><i class='fa fa-twitter-square fa-2x'></i></a>
</li>
<li><a class='ytb' href='https://www.youtube.com' rel='nofollow'><i class='fa fa-youtube fa-2x'></i></a>
</li>
</ul>

</nav>
<div class='clear'></div>
</div>

6. Karena tomol sosmed ini menggunakan font awesome maka supaya icon sosmednya muncul , kita perlu memasang maxcdn font awesomenya , caranya pasang kode dibawah ini diatas kode </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

7. Setelah langkah diatas sudah di kerjakan semua , kini kita tinggal klik save.

Sampai disini cara gampang membuat menu navigasi lengkap dengan tombol sosial media di blog sudah selesai , jika sobat ingin tampilanya lebih keren lagi , silahkan di modif sendiri cssnya maupun htmlnya. dan jika sobat mengalami kendala tentang tutorial memasang menu navigasi di blog silahan berkomentar diawah . Salam blogger dan selamat mencoba kawan.