Cara Menciptakan Sajian Navigasi Dengan Tombol Sosial Media Di Blog

Cara menciptakan sajian dropdown diatas header blog memang ada berbagai modelnya mulai dari yang simple , responsive , fast loading hingga disertai dengan tombol sosmed ( facebook ,google plus , twitter dan youtue ). Namun pada pada dasarnya memasang sajian navigasi di blogspot tujuannya sama yaitu menunjukkan fasilitas kepada pengunjung untuk mencari artikel yang ada di blog kita , berdasarkan tags maupun kategori.

Kali ini tutorial menciptakan sajian drop down di blog yang saya share yaitu sajian yang disertai dengan tombol sosmed ( sosial media ) alasannya yaitu dari kemaren berbagai request sobat blogger yang ingin di buatkan tutorial kayak gini . Dengan demikian untuk menanggapi request tadi , sajian top header with share button ini saya ambil dari sajian topnya template evomagz buatan mas sugeng. alasannya yaitu berdasarkan saya widget menunya tersebut sangat simple , keren dan responsive.

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

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 sajian template => Edit Html
3. Pada kolom editor template cari isyarat </style>
4. Salin dan tempelkan isyarat dibawah ini diatas isyarat </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 isyarat berikut ini di atas isyarat <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 sajian 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 sajian 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 memakai font awesome maka biar icon sosmednya muncul , kita perlu memasang maxcdn font awesomenya , caranya pasang isyarat dibawah ini diatas isyarat </head>

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

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

Sampai disini cara simpel menciptakan sajian navigasi lengkap dengan tombol sosial media di blog sudah final , kalau sobat ingin tampilanya lebih keren lagi , silahkan di modif sendiri cssnya maupun htmlnya. dan kalau sobat mengalami hambatan ihwal tutorial memasang sajian navigasi di blog silahan berkomentar diawah . Salam blogger dan selamat mencoba kawan.

Bagikan Artikel ini