cara membuat navigasi menu menggunakan font awesome di blogger

Hallo sehabat Blogger heee, bagai mana kabarnya sehat???????????????????, Alhamdullilah syukur dech
kali ini saya akan coba share artikel cara membuat navigasi menu menggunakan font awesome di blogger sebenarnya artikel ini masih sangat rahasia namun,, di sini semua akan terbongkar,!!!! di sini bukan tempat rahasia lagi wkwkwkwkw,, Menu ini sangat banyak di cari oleh para blogging karena tampilannya, enak di lihat dan responsive untuk template versi blogger, pastikan sebelum anda memasang semua code scripts di bawah, pastikan bahwa di template anda sudah memiliki atau terpasang code Font awesome, jika belom maaf maka hasilnya tidak akan seperti yang anda inginkan!!!!


Intip Juga
Cara membuat menu fixed melayang keren di blogger
==>Untuk anda yang tidak sabar dengan hasilnya pada blog anda langsung saja kita menuju ke TKP

cara membuat navigasi menu menggunakan font awesome di blogger

<style>

#catmenucontainer {height:29px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2hyphenhyphenFNoCuK5EbsC6aSwsggx1ZiVj6FVXC9V_ZFvHBh5N_hiriAAxpg7WFm-jtiOnjq3xbb9r-Uai_kjwaB_fiqjIqHRmK5MSipULhVUd2KYdFXPlKQcwxdHAvWsE3d9-qYluuSRd1ng1CP/s1600/catmenu.jpg) repeat-x;display:block;padding:0px 0 0px 0px;font: 13px "Century gothic",verdana, Arial, sans-serif;font-weight:normal;border-top:1px solid #686D6F;}
#catmenu ,#catmenu ul {margin: 0px 5px;padding: 0px;list-style: none;height:29px;}
#catmenu  a {color: #999;display: block;font-weight: normal;padding: 4px 10px 6px 10px;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}
#catmenu  a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1zjeiqU41LsrSOM-WradyAghXwgYplgy8UnFBOkSDhxjrWTgZwFDQrfJFAFl1GGGkHXyOlmBWukc83-s2-otqvOQvIS_XMmh4Mu5EFyZ_gbUYGJICdq5FKElIppvVeF8AacqZHriGTzrH/s1600/catmenuhov.jpg) repeat-x;color: #fff;display: block;text-decoration: none;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}
#catmenu  li {float: left;margin: 0px;padding: 0px;}
#catmenu  li li {float: left;margin: 0px 0px 0px 0px;padding: 0px;width: 130px;}
#catmenu  li li a, #catmenu  li li a:link, #catmenu  li li a:visited {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2hyphenhyphenFNoCuK5EbsC6aSwsggx1ZiVj6FVXC9V_ZFvHBh5N_hiriAAxpg7WFm-jtiOnjq3xbb9r-Uai_kjwaB_fiqjIqHRmK5MSipULhVUd2KYdFXPlKQcwxdHAvWsE3d9-qYluuSRd1ng1CP/s1600/catmenu.jpg) repeat-x;width: 150px;float: none;margin: 0px;padding: 4px 10px 5px 10px;color:#E8EBEE;border-bottom:1px solid #2C3133;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}
#catmenu  li li a:hover, #catmenu  li li a:active {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1zjeiqU41LsrSOM-WradyAghXwgYplgy8UnFBOkSDhxjrWTgZwFDQrfJFAFl1GGGkHXyOlmBWukc83-s2-otqvOQvIS_XMmh4Mu5EFyZ_gbUYGJICdq5FKElIppvVeF8AacqZHriGTzrH/s1600/catmenuhov.jpg) repeat-x;width: 150px;float: none;margin: 0px;padding: 4px 10px 5px 10px;color:#fff;border-bottom:1px solid #2C3133;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}
#catmenu  li ul {position: absolute;width: 10em;left: -999em;z-index: 1;}
#catmenu  li:hover ul {left: auto;display: block;}
#catmenu  li:hover ul, #catmenu li.sfhover ul {left: auto;}
#currenta a {color:#FF6600}

jika sudah anda Copas code di atas ini selanjutnya anda cari code ini <div id="header-wrapper, jika tidak ketemu coba code lain seperti  header-wrapper, hal ini bisa di sebabkan oleh struktur HTML pada template blogger itu berbeda-beda, jika sudah ketemu Copas code berikut di bawahnya:

<div id='header-inner'>
 <div id="catmenucontainer">
<div id="catmenu">
<ul><li id="currenta"><a href="http://buka-rahasia.blogspot.com/"><i class="fa fa-home"></i> Buka Rahasia</a></li>
<li><a href="http://buka-rahasia.blogspot.com/p/about-me.html" rel="author"><i class="fa fa-bookmark"></i> About</a>
<ul class="children">
<li><a href="http://buka-rahasia.blogspot.com/p/testimony-untuk-buka-rahasiablogspotcom.html">Testimoni</a></li><li><a href="http://dodi-nurdjaja.blogspot.com/2013/01/google-tanya-jawab-dengan-ahmad-khoirul.html" rel="external nofollow" target="_blank">Interview 1</a></li><li><a href="http://www.edynlaskar.com/2013/02/perbedaan-pagerank-homepage-dan-postingan.html" rel="external nofollow" target="_blank">Interview 2</a></li><li><a href="http://ahmadkhoirulazmi.my.id" rel="me nofollow" target="_blank">More...</a></li></ul></li>
<li><a href="http://buka-rahasia.blogspot.com/2011/07/kumpulan-posting-tips-nge-blog-ala.html" rel="toc"><i class="fa fa-comments-o"></i> Blog Tips</a>
<ul class="children">
<li><a href="http://buka-rahasia.blogspot.com/p/kumpulan-tips-menulis-artikel-blog-buka_27.html" rel="bookmark"><i class="fa fa-pencil-square-o"></i> Tips Menulis Artikel</a></li>
</ul>
</li>
<li><a href="http://buka-rahasia.blogspot.com/2011/10/blog-design-kumpulan-tips-trik-desain.html" rel="toc"><i class="fa fa-code"></i> Blog Design</a>
</li>
<li><a href="http://buka-rahasia.blogspot.com/2011/10/widgets-kumpulan-widget-buka.html" rel="toc"><i class="fa fa-plug"></i> Widgets</a></li>
<li><a href="http://buka-rahasia.blogspot.com/2011/10/blog-tools-peralatan-bermanfaat-blog.html" rel="bookmark"><i class="fa fa-cogs"></i> Blog Tools</a>
<ul class="children">
<li><a href="http://buka-rahasia.blogspot.com/p/blogger-adsense-parser-html-encoder.html" rel="bookmark">HTML Parser</a></li>
<li><a href="http://buka-rahasia.blogspot.com/p/hex-color-chart-generator-compose-your.html" rel="bookmark">Hex Color Generator</a></li>
<li><a href="http://buka-rahasia.blogspot.com/p/free-websiteblog-speed-test-tools.html" rel="bookmark">Blog Speed Test</a></li>
<li><a href="http://buka-rahasia.blogspot.com/2011/03/percepat-loading-blog-dengan.html" rel="bookmark">CSS Compression</a></li>
<li><a href="http://buka-rahasia.blogspot.com/2011/02/pnggauntlet-kompres-gambar-png-untuk.html" rel="bookmark">Image Compression</a></li>
<li><a href="http://buka-rahasia.blogspot.com/2011/03/add-on-post-editor-untuk-membuat.html" rel="bookmark">Quick Post Editor</a></li>
<li><a href="http://buka-rahasia.blogspot.com/2011/03/cara-pendekkan-sembunyikan-url.html" rel="bookmark">URL Shortener</a></li>
</ul>
</li>
<li><a href="http://buka-rahasia.blogspot.com/2011/10/seo-tips-kumpulan-tips-seo-buka.html" rel="toc"><i class="fa fa-search-plus"></i> SEO Tips</a>
<ul class="children">
<li><a href="http://buka-rahasia.blogspot.com/2011/04/cara-meningkatkan-seo-blogspot.html" rel="bookmark">Blog SEO</a></li>
<li><a href="http://buka-rahasia.blogspot.com/search/label/Dofollow" rel="tag">Dofollow List</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-angle-double-up"></i> SEO Tools</a>
<ul class="children">
<li><a href="http://buka-rahasia.blogspot.com/p/free-backlink-builder-get-quality.html" rel="bookmark">Backlink Builder</a></li>
<li><a href="http://buka-rahasia.blogspot.com/2011/01/free-website-submission-tool-get-your.html" rel="bookmark">Blog/Web Submission</a></li>
<li><a href="http://buka-rahasia.blogspot.com/2010/12/free-sitemap-submitter-seo-tools.html" rel="bookmark">Sitemap Submitter</a></li>
<li><a href="http://buka-rahasia.blogspot.com/2013/03/seo-tool-pagerank-status-ekstensi-chrome.html" rel="bookmark">Pagerank Status</a></li>
</ul></li>
<li><a href="http://buka-rahasia.blogspot.com/p/advertise-pasang-iklan-super-murah.html" target="_blank" rel="bookmark"><i class="fa fa-bullhorn"></i> Advertise</a></li>
<li><a href="http://buka-rahasia.blogspot.com/p/post-request-sarankan-artikeltutorial.html" title="Request posting, tips, artikel, tutorial" target="blank"><i class="fa fa-question"></i> Request</a></li>
</ul></div></div>
</div>

<div class='clear'/>

Note

Text yang sudah saya tandai merah ganti dengan URL kamu/Domain kamu 
Ubah text "#" dengan URL yang akan di tuju
Terakhir kelik Save dan lihat hasilnya


==> Oky sehabat Blogging semua sampai di sini dulu yaaa, Hufff tangan saya udah pegel semua nh,, sampe ketemu lg di Moment share/berbagi BulshitMan