Membuat Menu Navigasi Dengan Tombol Sosial Media

A da banyak sekali model menu dropdown diatas header blog mulai dari yang simple , responsive , fast loading sampai disertai dengan tombol sosial media seperti facebook ,google plus , twitter dan youtue. Namun pada intinya memasang menu navigasi di blogspot tujuannya sama yaitu memberikan kemudahan kepada pengunjung untuk mencari artikel yang ada di blog kita , berdasarkan tags maupun kategori.

Kali ini saya akan berbagi tutorial membuat menu drop down yang disertai dengan tombol sosial media seperti template premium evomagz milik mas sugeng.

Tutorial Cara Membuat Menu diatas header Blog Dengan Sosial Media:

1. Seperti biasanya silahkan sobat login ke akun dasbor blog anda
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 di header
   

   <div id='nav-wrap'>
   <nav class='menu'>
   <!-- primary navigation menu start -->
   <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>
   <!-- primary navigation menu end -->
   <!-- social media button start -->
   <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>
   <!-- social media button end -->
   </nav>
   <div class='clear'/>
   </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"></link>

   
   Jika di template sobat sudah ada kode diatas maka lewati saja langkah ini.
7. Setelah langkah diatas sudah di kerjakan semua , kini kita tinggal klik save