Cara Membuat menu Navigasi Blog

Cara Membuat navigasi Blog dan Sosial Media

1. silahkan sobat login ke akun dasbhor blog terlebih dahulu
2. pilih template , dan pilih => Edit Html
3. pada bagian editor template cari kode </style>
4. Kemudian Salin dan tempelkan kode dibawah ini tepat diatas kode </style>

/*MENU NAVIGASI*/
.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. Copy kode berikut ini dan paste tepat di atas kode <div class='header-wrapper'> atau <div id='header-wrapper'> atau <header id="header-wrapper"> Intinya kita mencari elemen div 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/fbkamu' rel='nofollow'><i class='fa fa-facebook-square fa-2x'></i></a>
</li>
<li><a class='gpl' href='https://plus.google.com/+googlekamu' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'></i></a>
</li>
<li><a class='twt' href='https://twitter.com/akunkamu' 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 end -->
</nav>
<div class='clear'></div>
</div>

6. Karena tombol bawaan sosmed ini menggunakan font awesome, Jadi supaya icon sosmed nya muncul , kita Harus memasang maxcdn font awesomenya , caranya, pasang kode berikut ini diatas kode </head>

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

Jika di template kita sudah ada kode diatas maka lewati saja langkah tersebut ( cukup 1 saja , karna jika lebih dari satu akan memperberat loading blog )

7. Setelah semua langkah diatas di kerjakan, jangan Lupa klik save sebelum melihat hasil nya.

Nah,,Sampai disini sudah cukup untuk membuat menu navigasi yang ada tombol medsos, Jika sobat jago Css atau Html,Sobat dapat memodifikasi lebih script diatas.

Selamat mencoba yah.
Happy Blogging.

Dadang Kurnia

Hanya seorang Nubie, Memulai blog Sebagai Hobby.

Share this post