Cara membuat Tab Menu Horizontal CCS 3 (Kinclong)

بِسْــــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

 Assalamualaikum Wr.wb

Menu horizontal pilihan yang sangat terbaik Pentingnya Tab menu Horizontal yaitu mengurangi ruang yang ditempati oleh  bagian / label [simpel] . dan mendistorsi tampilan blog, mengkoordinasikan dan mempercantik gaya blog
widget ini dirancang oleh CSS,  Dan Anda dapat menambahkan gadget ini ke blog Anda dengan cara yang sangat mudah, pengen tau?? tapi bentar ya saya mau ngomong2 tentang tab menu ini, keuntungan membuat tab menu ini sih banyak banget so gak mngkinlah saya sebutkan satu per satu langsung aja dehh

Untuk DEMO-nya ada dibawah ini :

Demo

Langkah-langkahnya sebagai berikut :
1. Login ke akun Blogger sobat.
2. Pergi ke  Blogger Dashboard   →  Tata Letak  →  klik "Add a gadget" .
3. Pilih " Html/Javascript " dan tambahkan kode yang diberikan di bawah ini.

<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB0OyhQK832Js-fAdzNhZYwSEIf0Nbo8R51n_iAynkqWqh_QopAsVRaNFEYTAEkw9A9dLxycAe7XulTn2GWhsVNJCQh6tOWEEJODN0b_Fij2Mt4og8k2Q_CVEUB8E1oKupSA2RnjbPdEY/s1600/noop-menu-blogger.png") repeat scroll 0 0 transparent;border:1px solid #1357AF!important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style>
<a href="http://bbloggertutorials.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3KkxyihoCQxi3fCBNsS_v3rudbn4qFrJ5n6OzaWpPzcgKBA4wH0MevfRv03gz19aTrPrPDm92mpnikcZJNEhn5HR4n8ihGX2OvniQf0triHssraQ3Sk2fC3p47XLw8LVU3w7gFjoqbeI/s1600/1x1juice.png" /></a>
<div class="wg-shining-menu">
    <ul class="menu">
        <li><a href="http://kai5ar.blogspot.com/">Home</a></li>
        <li><a href="#">LINK</a></li>
        <li><a href="#">DAFTAR ISI</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div> 

4. Klik Simpan → Simpan setelan.
5. Selesai.

✍ Catatan :
URL dalam biru dengan Anda sendiri.
Nama tab dalam merah dengan Anda sendiri.

Last klik Save template. Sekarang Anda dapat melihat hasilnya :D gimano?? keren ora??
Wes yo semene wae tutoring sing tak share ng blog iki :D, sekian

Wassalamualaikum Wr.wb