Cara Memasang Navigation Tab Sky Blue Keren + Social Icons

Pada postingan ini, saya akan membahas tentang cara memasang Tab Navigasi yang keren di blogmu. Tab Navigasi sangat penting karena itu adalah salah satu part body pada sebuah website. Jadi ketika salah satu visitor mengunjungi websitemu, mereka dengan mudah dapat mencari artikel yang relevan dengan isi blogmu. Seperti dilansir di bloggertrix.com, terdapat Tab Navigasi yang super keren. Didesain dengan menggunakan CSS menjadikan tab navigasi ini sangat atraktrif untuk blogmu.

• Demo

1. Login ke blogmu, kemudian cari "Template"

2. Backup terlebih dahulu templatemu untuk berjaga-jaga

3. Klik Edit HTML

4. Paste kode dibawah ini diatas kode ]]></b:skin>

#topMenu{border:1px solid #7DF; border-radius:6px; background:#00AAEB; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjVyOaS8f-6DBEubjuOxfymwInsb361q3EzapL9qGN4hK4CTMZTvy27eSJzv0j355pzyEugEJXGoEnhrdaMk25_uoP_TcRfBbsxQ0b62mk4Z0uyPfz9JcJaadsNORyO8QenzQ9X8vQemw/s1600/bk_topmenu.png) 100% 0 no-repeat,-moz-linear-gradient(top, #00c1fa 0%,#0094dd 100%); /* FF3.6+*/background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjVyOaS8f-6DBEubjuOxfymwInsb361q3EzapL9qGN4hK4CTMZTvy27eSJzv0j355pzyEugEJXGoEnhrdaMk25_uoP_TcRfBbsxQ0b62mk4Z0uyPfz9JcJaadsNORyO8QenzQ9X8vQemw/s1600/bk_topmenu.png) 100% 0 no-repeat,-webkit-gradient(linear,left top,left bottom,color-stop(0%,#00c1fa),color-stop(100%,#0094dd)); /* Chrome,Safari4+*/background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjVyOaS8f-6DBEubjuOxfymwInsb361q3EzapL9qGN4hK4CTMZTvy27eSJzv0j355pzyEugEJXGoEnhrdaMk25_uoP_TcRfBbsxQ0b62mk4Z0uyPfz9JcJaadsNORyO8QenzQ9X8vQemw/s1600/bk_topmenu.png) 100% 0 no-repeat,-webkit-linear-gradient(top, #00c1fa 0%,#0094dd 100%); /* Chrome10+,Safari5.1+*/background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjVyOaS8f-6DBEubjuOxfymwInsb361q3EzapL9qGN4hK4CTMZTvy27eSJzv0j355pzyEugEJXGoEnhrdaMk25_uoP_TcRfBbsxQ0b62mk4Z0uyPfz9JcJaadsNORyO8QenzQ9X8vQemw/s1600/bk_topmenu.png) 100% 0 no-repeat,-o-linear-gradient(top, #00c1fa 0%,#0094dd 100%); /* Opera 11.10+*/background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjVyOaS8f-6DBEubjuOxfymwInsb361q3EzapL9qGN4hK4CTMZTvy27eSJzv0j355pzyEugEJXGoEnhrdaMk25_uoP_TcRfBbsxQ0b62mk4Z0uyPfz9JcJaadsNORyO8QenzQ9X8vQemw/s1600/bk_topmenu.png) 100% 0 no-repeat,-ms-linear-gradient(top, #00c1fa 0%,#0094dd 100%); /* IE10+*/background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjVyOaS8f-6DBEubjuOxfymwInsb361q3EzapL9qGN4hK4CTMZTvy27eSJzv0j355pzyEugEJXGoEnhrdaMk25_uoP_TcRfBbsxQ0b62mk4Z0uyPfz9JcJaadsNORyO8QenzQ9X8vQemw/s1600/bk_topmenu.png) 100% 0 no-repeat,linear-gradient(to bottom, #00c1fa 0%,#0094dd 100%); /* W3C */background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjVyOaS8f-6DBEubjuOxfymwInsb361q3EzapL9qGN4hK4CTMZTvy27eSJzv0j355pzyEugEJXGoEnhrdaMk25_uoP_TcRfBbsxQ0b62mk4Z0uyPfz9JcJaadsNORyO8QenzQ9X8vQemw/s1600/bk_topmenu.png) 100% 0 no-repeat,filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c1fa',endColorstr='#0094dd',GradientType=0 ); /* IE6-9 */}
#topMenu ul.sf-menu li{border-right:1px solid #80CFFF}
#topMenu ul.sf-menu li a{color:#CBEBFE; text-shadow:#008FE8 1px 1px}
#topMenu ul.sf-menu li li a{color:#CBEBFE}
#topMenu ul.sf-menu li a:hover{color:#FFF}
#topMenu ul.sf-menu li li{}
#socialIcons li{border-left:1px solid #2BC9FD}
#topMenu{width:960px; height:46px; position:absolute; top:125px; left:0; -webkit-box-shadow:0 6px 6px -6px #999; -moz-box-shadow:0 6px 6px -6px #999; box-shadow:0 6px 6px -6px #999}
#topMenu ul.sf-menu li{float:left; padding:0 15px; font-size:12px;list-style: none;margin-left: -10px;}
#topMenu ul.sf-menu li a{text-decoration:none; text-transform:uppercase; font-weight:bold; padding:4px 0}
#topMenu ul.sf-menu li a:hover{text-shadow:none}
#topMenu ul.sf-menu li li{padding:0; border:none}
#topMenu ul.sf-menu li li a{font-weight:normal; padding:4px 12px}

#socialIcons{position:absolute; right:0;  margin:0 0}
#socialIcons li{float:left; padding:0 10px;list-style: none;}
#socialIcons li a{display:block; text-indent:-9999px; width:24px; height:19px}
#socialIcons li a:hover{background-position:0 -19px}
#socialIcons .twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxjnIcUmxCyXBMvTeBYDzfRg55ZfMVSc11mb18BXLYRoLCvlOIgrNiGX_QfY11PUNxquNdBmmzf9LUHgJ00eP6Qp-F094Dw76BtBva0jy3BYn-yHSSvqu88HDT9XYD4OSUouLKxEK4Oyg/s1600/ico_twitter.png) 0 0 no-repeat}
#socialIcons .facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-S4mgISS2P6RWLs4_tuqXPe_to0Kn6Fo8h0HA4ob_hiW17mN1CZl_yTJEmza-IdUdqdUCe_c5p7jonjsk5Er3YJ0-Pce5Mf4qqRBsUav9qVSVvxFN_n-4iYqM2GjVDPJg-fbIM2RhLO8/s1600/ico_facebook.png) 0 0 no-repeat}
#socialIcons .flickr{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAy1-ivm7YvOoGTF-BtXaloBO2RO8i582Bv0bt80Y7zRSsEykh7mIX9dSjPA8c2yowHktVHq0BpQpO-HQ3iEJBVALvGdVctq9yoYjWICxT_iPzgsrXWo2xEOlo1fb60jW3S13bbkmg7ss/s1600/ico_flickr.png) 0 0 no-repeat}
#socialIcons .linkedin{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Z9llgHNtWpPzk3-Spn6fr42RMvSFBhZa65Ka2J82KkT4z5Uc_9PI36XZQQLZSRH764TWikaGs32CubRfI9Q8F8Kf-MZvkcnva4XUX-63xNqU3i8isJbJlSP-GDivfctawz8pvVMS4ig/s1600/ico_linkedin.png) 0 0 no-repeat}
#socialIcons .vimeo{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy1ag9vcu2F-QsAOgAT2NzhUF27zwlsNm6NLmpE2kk7GNUI4FkMj43Bj3wYbl2tUJ36yUpTfe5WHUIwqcklJmd8LjIHI7XonpwwikMmTG6kDyyFufjozdUxoGIMj-yTHACSwHIpiDWoPI/s1600/ico_vimeo.png) 0 0 no-repeat}
#socialIcons .googleplus{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_cE5RSJmPJOKUKXj37QTPjN0Bv41H_9cXc2m2jg8uuCR2xgw46VufoK2II_KGLUmDMZZ53QOt19inesAL3A8UWnJBTOFpAiG026t2S3rFJM0BRk6qa4nGGlYK1ZxltoZ34rI8yUDzB_4/s1600/ico_google.png) 0 0 no-repeat}
#socialIcons .rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvFlBv3Q3_cfPuT14DPOTS7cTt2e89bRygFlfNZfagrYDbjnweOsPIO_ZPSKk1bubOwq9riwYsSLOkEPUYUL5iEiqMpI0ssZbHw-8iSbuXbcVyriWTPPGVkznFEg0T_id3lt-RPvQBQXQ/s1600/ico_rss.png) 0 0 no-repeat}

5. Jika sudah klik Simpan/Save. Kembali ke blogger lalu cari "Layout"
6. Klik "Add Gadget" dan pilih "HTML/Javascript"
7. Paste kode berikut ini

<div id="topMenu">
<ul class="sf-menu sf-js-enabled sf-shadow" id="menu-topmenu">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="http://www.gunkdephoenix.blogspot.com/">Contact Us</a></li>
</ul>

<ul id="socialIcons">
<li><a class="twitter tooltip" href="http://www.twitter.com/gunkde_hoppus"  target="_blank">Follow us on Twitter</a></li>
<li><a class="facebook tooltip" href="http://www.facebook.com/people/Aditya-Pratama/100000130062770" target="_blank">Join us on Facebook</a></li>
<li><a class="linkedin tooltip" href="http://www.linkedin.com/Username" target="_blank">Join us on LinkedIn</a></li>
<li><a class="googleplus tooltip" href="https://plus.google.com/116707876226686614661" target="_blank">Join us on Google+</a></li>
<li><a class="flickr tooltip" href="http://www.flickr.com/Username" target="_blank">Watch us on Flickr</a></li>
<li><a class="vimeo tooltip" href="https://vimeo.com/Username" target="_blank">Watch us on Vimeo</a></li>
<li><a class="rss tooltip" href="http://gunkdephoenix.blogspot.com/feeds/posts/default"  target="_blank">RSS Feeds</a></li>
</ul>
</div>

Nb : Ganti  # dengan link yang dituju, begitu juga link socialmu

8. Jika sudah Save 

Sekian dulu tutorial kali ini, jika mengalami kesulitan, silahkan isi kolom komentar yang ada dibawah ini

Selamat Mencoba ! 
(Sumber : http://www.bloggertrix.com/)

Tweet