Cara Membuat Menu di Blog - sudah lama saya jarang Berbagi, selagi ada waktu libur luang-luangin in waktu untuk berbagi karena berbagi itu indah. eh iya, Senin besok tepatnya tanggal 10/6/2013 saya ada Ulangan Kenaikan Kelas, mohon Do'a nya, supaya saya bisa mengerjakan dengan baik dan Lulus Terimakasih. Ya, sekarang saya ingin berbagi Cara Membuat Menu di Blog ala XC-Blog.
Pertama" login ke www.blogger.com
kemudian pergi ke Template > Edit HTML
lalu pastekan kode" berikut :
CSS ( Taruh di Atas Kode ]]></b:skin> ) :
#DANDYmnu{background:#e9e9e9; border:1px solid #DDD; height:36px; margin:0 0 5px 0}
#DANDYmnu ul, #DANDYmnu li, #DANDYmnu a{margin:0; padding:0; position:relative}
#DANDYmnu:after, #DANDYmnu ul:after{content:''; display:block; clear:both}
#DANDYmnu a{background:transparent; border-right:1px solid #ddd; color:#333; display:inline-block; font-family:'Ubuntu',arial,sans-serif; font-size:14px; line-height:36px; padding:0 15px; text-decoration:none}
#DANDYmnu ul{list-style:none}
#DANDYmnu>ul{float:left}
#DANDYmnu>ul>li{float:left}
#DANDYmnu>ul>li:hover:after{content:''; display:block; width:0; height:0; position:absolute; left:50%; bottom:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid #ddd; margin-left:-10px}
#DANDYmnu>ul>li:first-child>a{border-radius:0; -moz-border-radius:0; -webkit-border-radius:0}
#DANDYmnu>ul>li:last-child>a{border-radius:0; -moz-border-radius:0; -webkit-border-radius:0}
#DANDYmnu>ul>li.active>a{background:#eee}
#DANDYmnu>ul>li:hover>a{background:#eee}
#DANDYmnu .has-sub{z-index:1}
#DANDYmnu .has-sub:hover>ul{display:block}
#DANDYmnu .has-sub ul{display:none; border:1px solid #ddd; border-bottom:0; position:absolute; width:200px; top:100%; left:0}
#DANDYmnu .has-sub ul li{*margin-bottom:-1px}
#DANDYmnu .has-sub ul li a{background:#ddd; border:0; border-bottom:1px solid #ddd; filter:none; font-size:14px; display:block; line-height:120%; padding:10px}
#DANDYmnu .has-sub ul li:hover a{background:#eee}
#DANDYmnu .has-sub .has-sub:hover>ul{display:block}
#DANDYmnu .has-sub .has-sub ul{display:none; position:absolute; left:100%; top:0}
#DANDYmnu .has-sub .has-sub ul li a{background:#f00; border-bottom:1px solid #97b36b}
#DANDYmnu .has-sub .has-sub ul li a:hover{background:#345105;}
HTML ( Selipkan di Bawah Kode <body> ) / Jika ingin menaruh kode dibawah Header-wrapper, selipkan di bawah kode header-wrapper, atau terserah anda :
<div id='DANDYmnu'>
<ul>
<li class='active'><a class='tooltip' expr:href='data:blog.homepageUrl' title='Beranda'>Home</a></li>
<li class='has-sub'><a href='#'>Top Categories ▼</a>
<ul>
<li><a class='tooltip' href='http://www.xpress-community.blogspot.com/search/label/Blog' title='Tutorial Blog'>Tutorial Blog</a></li>
<li><a class='tooltip' href='http://www.xpress-community.blogspot.com/search/label/Tips%20And%20Trick' title='Tips and Tricks'>Tips and Tricks</a></li>
<li><a class='tooltip' href='http://www.xpress-community.blogspot.com/search/label/Template' title='Template'>Template</a></li>
<li><a class='tooltip' href='http://www.xpress-community.blogspot.com/search/label/SEO' title='Belajar SEO'>SEO</a></li>
<li><a class='tooltip' href='http://www.xpress-community.blogspot.com/search/label/JKT48' title='JKT 48'>JKT 48</a></li>
</ul></li>
<li class='has-sub'><a href='#'>Tools and Etc ▼</a>
<ul>
<li><a class='tooltip' href='http://xpress-community.blogspot.com/p/code-warna-html.html' target='_blank' title='HTML Color Code'>HTML Color</a></li>
<li><a class='tooltip' href='http://xpress-community.blogspot.com/p/konversi-html.html' target='_blank' title='Konversi HTML'>Konversi HTML</a></li>
<li><a class='tooltip' href='http://xpress-community.blogspot.com/p/chat-box_3.html' target='_blank' title='Chat Disini'>Chat Box</a></li>
</ul></li>
<li><a class='tooltip' href='http://xpress-community.blogspot.com/2012/11/link-exchange.html' target='_blank' title='Tukar Link / Banner'>Link Exchange</a></li>
<li><a class='tooltip' href='http://xpress-community.blogspot.com/p/disclaimer.html' title='Disclaimer'>Disclaimer</a></li>
<li><a class='tooltip' href='http://xpress-community.blogspot.com/p/privacy-policy.html' title='Kebijakan dan Privasi'>Privacy Policy</a></li>
</ul>
</div>
Nah, bagaimana dengan Menunya? bagus atau tidak?
jika masih ada yang tidak mengerti, silahkan berkomentar insyaallah saya akan membalas komentar anda.
Terimakasih
Tidak ada komentar:
Posting Komentar