Menu Navigasi Dengan Style Klik Untuk Blog
| Ghiyats Blogs - Hai, Pada artikel ini Akan saya bagikan sebuah Menu
Navigasi Stylish, Menu navigasi ini memiliki Warna di Pinggiran Menu ini
warna Hitam, dan Warna Sedikit abu abu di Menunya.
Menunya Memiliki Sub Menu ke bawah dan
untuk Melihatnya kita Harus Klik menu dan Seterusnya, Gimana, tertarik
dengan Menu ini Kalau Memang Sobat Tertarik Tutorial Menu ini seperti
ini :
Menu Navigasi Dengan Style Klik Untuk Blog
--------------------------------------------------------------------------------------
- Pertama, Kita harus Masuk Ke Blogger
- Setelah Berada di Blogger, Sekarang kita menuju menu ''Template''
- Klik ''Edit html''
- Masukan kode dibawah ini, dan Masukan kode dibawah ini, Diatas kode ]]></b:skin>
CARA SELANJUTNYA :/* The CSS Code#bt_tabmenu {font-family:arial;font-size:16px;line-height:1.8em;background:#333;display:table;padding:0;margin:1em auto;border-spacing:0;padding:0.5em;border-radius:0.5em;border:1px solid #777;box-shadow:0 0 3px #999;white-space:nowrap;}#bt_tabmenu li p {border-radius: 0.5em 0.5em 0 0 ; }#bt_tabmenu li ul li:last-child a {border-radius: 0 0 0.5em 0.5em ;}#bt_tabmenu ul {display:table;margin:0;padding:0;position:absolute;left:-9999px;z-index:1;top:1.6em;}#bt_tabmenu > li {display:inline-block;width:150px;vertical-align:top;position:relative;white-space:normal;}#bt_tabmenu ul li {float:right;list-style-type:none;clear:right;height:1.6em;}#bt_tabmenu li a , #bt_tabmenu p {border:solid 1px #333;background-color:gray;background-image:linear-gradient(90deg,#aaa,#eee);display:block;width:150px;text-indent:1em;margin:0;outline:0;text-decoration:none;color:#333;}#bt_tabmenu li a {box-shadow: 0px 3px 10px -5px black;float:right;}#bt_tabmenu p {position:relative;height:1.6em;}#bt_tabmenu p:after {content:'\25BC';position:absolute;right:5px;text-shadow:1px 1px 1px gray;}#bt_tabmenu p:focus:after {content:'';}#bt_tabmenu p a {display:inline;position:absolute;border:0;left:-9999px;background:transparent;color:#E68F28;text-shadow:0 0 1px black,0 0 2px white;text-decoration:none;text-align:right;width:auto;padding-right:5px;}#bt_tabmenu p:focus a {top:0;left:0;right:0;bottom:0;}#bt_tabmenu ul a:focus , #bt_tabmenu p:focus + ul li a {margin-left:9999px;}#bt_tabmenu a:focus:before {content:'\25BA';margin-left:-1em;color:#E9CF5F;}:focus {font-variant:small-caps;text-shadow:0 0 1px #333, 0 0 5px gray;}[tabindex] {cursor:pointer;}#bt_tabmenu ul ul{left:150px;position:relative;top:-1.95em;width:150px;display:table;margin:0 0 0 -9999px;z-index:1;}#bt_tabmenu ul ul a {margin-left:-9999px;}#bt_tabmenu ul ul li a:focus {margin-left:19998px;}#bt_tabmenu ul ul li:first-child a {border-radius:0 0.5em 0 0 ;}#bt_tabmenu ul li a:focus.fermoir + ul {margin-left:10001px;}#bt_tabmenu ul li .fermoir {position:absolute;z-index:1;right:1px;margin-top:1px;border:0;width:auto;background:none;box-shadow:none;padding: 0 5px 0 20px;text-indent:0;line-height:1.4em;}.fermoir:before {display:none;}#bt_tabmenu ul li .fermoir:focus , p#bt_tabmenu {color:white;}
- Pergi Ke menu ''Tata Letak''
- Klik ''Tambah Gadget''
- Pilih Gadget ''HTML/JavaScript''
- Setelah itu, Masukan kode dibawah ini, didalam Gadget Tersebut
<div id="bt_tabmenu">
<li><p tabindex="0" onclick="" > Menu List <a href="#" tabindex="-1" title=""# class="fermoir">▲</a></p>
<ul>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
</ul>
</li>
<li><p tabindex="0" onclick=""> Menu List <a href="#" tabindex="-1" title="" class="fermoir">▲</a></p>
<ul>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a><a class="fermoir" tabindex="-1" onclick="" href="#none">►</a>
<ul>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
</ul>
</li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
</ul>
</li>
<li><p tabindex="0" onclick="" > Menu List <a href="#" tabindex="-1" title="" class="fermoir">▲</a></p>
<ul>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
</ul>
</li>
<li><p tabindex="0" onclick=""> Menu List <a href="#" tabindex="-1" title="" class="fermoir">▲</a></p>
<ul>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a><a class="fermoir" tabindex="-1" onclick="" href="#none">►</a>
<ul>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
</ul>
</li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
</ul>
</li>
<li><p tabindex="0" onclick="" > Menu List <a href="#" tabindex="-1" title="" class="fermoir">▲</a></p>
<ul>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
</ul>
</li>
</div>
- Ganti # dengan Url yang Ingin Di Tuju
Demikianlah Artikel ini, maaf kalau artikel Ini kurang Lengkap dan
Detail, Dan silakan Kalu Sobat Ingin bertanya Tentang Artikel ini
Silakan berkomentar di kolom komentar dibawah ini, Semoga artikel ini
bermanfaat dan Mudah Untuk dipratekkan. Terima Kasih..
0 comments:
Post a Comment