Cara Mudah Membuat Menu Navigasi / Tombol Sosial Media di blog

Cara Mudah Membuat Menu Navigasi / Tombol Sosial Media di blog - Kali ini tutorial membuat menu drop down di blog yang saya share adalah menu yang disertai dengan tombol sosmed ( sosial media ) karena dari kemaren banyak sekali request teman blogger yang ingin di buatkan tutorial kayak gini . Dengan demikian untuk menanggapi request tadi , menu top header with share button ini saya ambil dari menu topnya template evomagz buatan mas sugeng. karena menurut saya widget menunya tersebut sangat simple , keren dan responsive.

Seperti apakah demo dari menu laman navigasi diatas header lengkap dengan sosial media yang saya bagikan kali ini? untuk melihat demonya sobat bisa tengok ke template premium evomagz milik mas sugeng, atau untuk lebih jelasnya sobat bisa melihat demonya secara langsung dengan menonton gambar dibawah ini.

Cara Mudah Membuat Menu Navigasi / Tombol Sosial Media di blog

Tutorial Cara Membuat Menu diatas header Blog Dengan Sosial Media

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'>
<!-- 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>
</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'/>

Jika di template sobat sudah ada kode diatas maka lewati saja langkah ke 6 ( cukup 1 saja , jika lebih dari satu akan memperberat loading blog )
7. Setelah langkah diatas sudah di kerjakan semua , kini kita tinggal klik save.

Itulah tadi mengenai Cara Mudah Membuat Menu Navigasi / Tombol Sosial Media di blog, Lihat juga artikel sebelumnya mengenai Cara Membuat Recent Comment pada Blog Anda