Cara Membuat Menu di Blog

Cara Membuat Menu di Blog
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 &#9660;</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 &#9660;</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

Postingan terkait:

26 Tanggapan untuk "Cara Membuat Menu di Blog"

  1. dandy itu sidebar kok di bawah ._.

    ReplyDelete
  2. salam, siip bro scripnya CSS nya, kapan-kapan saya akan coba, terima kasih sudah berbagi.

    ReplyDelete
  3. oh ini script yg nte pake.. thx gan udh berbagi.. :D

    come back..

    http://zhalltrozans.blogspot.com

    ReplyDelete
  4. Oke deh. Kebetulan menu saya sudah lumayan bagus :D

    ReplyDelete
  5. kode body itu setelah tanda < apa nggak pakai tanda garis miring gan?

    ReplyDelete
    Replies
    1. kode < body > gan...
      kan ada bacaannya disitu :)

      Delete
  6. Bro kalau bikin demo pakek base64 ajah... :) Daripada kamu menggunakan jsfidle, karena menurut ane jika kita mengunjungi jsfidle pertama kali akan terasa berat. Ini contoh base64, coba kamu copas ke address bar browser kamu:

    data:text/html;charset=utf-8;base64,PHN0eWxlPiNEQU5EWW1udXtiYWNrZ3JvdW5kOiNlOWU5ZTk7Ym9yZGVyOjFweCBzb2xpZCAjREREO2hlaWdodDozNnB4O21hcmdpbjowIDAgNXB4IDB9I0RBTkRZbW51IHVsLCAjREFORFltbnUgbGksICNEQU5EWW1udSBhe21hcmdpbjowO3BhZGRpbmc6MDtwb3NpdGlvbjpyZWxhdGl2ZX0jREFORFltbnU6YWZ0ZXIsICNEQU5EWW1udSB1bDphZnRlcntjb250ZW50OicnO2Rpc3BsYXk6YmxvY2s7Y2xlYXI6Ym90aH0jREFORFltbnUgYXtiYWNrZ3JvdW5kOnRyYW5zcGFyZW50O2JvcmRlci1yaWdodDoxcHggc29saWQgI2RkZDtjb2xvcjojMzMzO2Rpc3BsYXk6aW5saW5lLWJsb2NrO2ZvbnQtZmFtaWx5OidVYnVudHUnLGFyaWFsLHNhbnMtc2VyaWY7Zm9udC1zaXplOjE0cHg7bGluZS1oZWlnaHQ6MzZweDtwYWRkaW5nOjAgMTVweDt0ZXh0LWRlY29yYXRpb246bm9uZX0jREFORFltbnUgdWx7bGlzdC1zdHlsZTpub25lfSNEQU5EWW1udT51bHtmbG9hdDpsZWZ0fSNEQU5EWW1udT51bD5saXtmbG9hdDpsZWZ0fSNEQU5EWW1udT51bD5saTpob3ZlcjphZnRlcntjb250ZW50OicnO2Rpc3BsYXk6YmxvY2s7d2lkdGg6MDtoZWlnaHQ6MDtwb3NpdGlvbjphYnNvbHV0ZTtsZWZ0OjUwJTtib3R0b206MDtib3JkZXItbGVmdDoxMHB4IHNvbGlkIHRyYW5zcGFyZW50O2JvcmRlci1yaWdodDoxMHB4IHNvbGlkIHRyYW5zcGFyZW50O2JvcmRlci1ib3R0b206MTBweCBzb2xpZCAjZGRkO21hcmdpbi1sZWZ0Oi0xMHB4fSNEQU5EWW1udT51bD5saTpmaXJzdC1jaGlsZD5he2JvcmRlci1yYWRpdXM6MDstbW96LWJvcmRlci1yYWRpdXM6MDstd2Via2l0LWJvcmRlci1yYWRpdXM6MH0jREFORFltbnU+dWw+bGk6bGFzdC1jaGlsZD5he2JvcmRlci1yYWRpdXM6MDstbW96LWJvcmRlci1yYWRpdXM6MDstd2Via2l0LWJvcmRlci1yYWRpdXM6MH0jREFORFltbnU+dWw+bGkuYWN0aXZlPmF7YmFja2dyb3VuZDojZWVlfSNEQU5EWW1udT51bD5saTpob3Zlcj5he2JhY2tncm91bmQ6I2VlZX0jREFORFltbnUgLmhhcy1zdWJ7ei1pbmRleDoxfSNEQU5EWW1udSAuaGFzLXN1Yjpob3Zlcj51bHtkaXNwbGF5OmJsb2NrfSNEQU5EWW1udSAuaGFzLXN1YiB1bHtkaXNwbGF5Om5vbmU7Ym9yZGVyOjFweCBzb2xpZCAjZGRkO2JvcmRlci1ib3R0b206MDtwb3NpdGlvbjphYnNvbHV0ZTt3aWR0aDoyMDBweDt0b3A6MTAwJTtsZWZ0OjB9I0RBTkRZbW51IC5oYXMtc3ViIHVsIGxpeyptYXJnaW4tYm90dG9tOi0xcHh9I0RBTkRZbW51IC5oYXMtc3ViIHVsIGxpIGF7YmFja2dyb3VuZDojZGRkO2JvcmRlcjowO2JvcmRlci1ib3R0b206MXB4IHNvbGlkICNkZGQ7ZmlsdGVyOm5vbmU7Zm9udC1zaXplOjE0cHg7ZGlzcGxheTpibG9jaztsaW5lLWhlaWdodDoxMjAlO3BhZGRpbmc6MTBweH0jREFORFltbnUgLmhhcy1zdWIgdWwgbGk6aG92ZXIgYXtiYWNrZ3JvdW5kOiNlZWV9I0RBTkRZbW51IC5oYXMtc3ViIC5oYXMtc3ViOmhvdmVyPnVse2Rpc3BsYXk6YmxvY2t9I0RBTkRZbW51IC5oYXMtc3ViIC5oYXMtc3ViIHVse2Rpc3BsYXk6bm9uZTtwb3NpdGlvbjphYnNvbHV0ZTtsZWZ0OjEwMCU7dG9wOjB9I0RBTkRZbW51IC5oYXMtc3ViIC5oYXMtc3ViIHVsIGxpIGF7YmFja2dyb3VuZDojZjAwO2JvcmRlci1ib3R0b206MXB4IHNvbGlkICM5N2IzNmJ9I0RBTkRZbW51IC5oYXMtc3ViIC5oYXMtc3ViIHVsIGxpIGE6aG92ZXJ7YmFja2dyb3VuZDojMzQ1MTA1O308L3N0eWxlPjxkaXYgaWQ9J0RBTkRZbW51Jz48dWw+PGxpIGNsYXNzPSdhY3RpdmUnPjxhIGNsYXNzPSd0b29sdGlwJyBleHByOmhyZWY9J2RhdGE6YmxvZy5ob21lcGFnZVVybCcgdGl0bGU9J0JlcmFuZGEnPkhvbWU8L2E+PC9saT48bGkgY2xhc3M9J2hhcy1zdWInPjxhIGhyZWY9JyMnPkRlbW8g4pa8PC9hPjx1bD48bGk+PGEgY2xhc3M9J3Rvb2x0aXAnIGhyZWY9JyMnPkRlbW88L2E+PC9saT48bGk+PGEgY2xhc3M9J3Rvb2x0aXAnIGhyZWY9JyMnPkRlbW88L2E+PC9saT48bGk+PGEgY2xhc3M9J3Rvb2x0aXAnIGhyZWY9JyMnPkRlbW88L2E+PC9saT48bGk+PGEgY2xhc3M9J3Rvb2x0aXAnIGhyZWY9JyMnPkRlbW88L2E+PC9saT48bGk+PGEgY2xhc3M9J3Rvb2x0aXAnIGhyZWY9JyMnPkRlbW88L2E+PC9saT48L3VsPjwvbGk+PGxpIGNsYXNzPSdoYXMtc3ViJz48YSBocmVmPScjJz5EZW1vIOKWvDwvYT48dWw+PGxpPjxhIGNsYXNzPSd0b29sdGlwJyBocmVmPScjJz5EZW1vPC9hPjwvbGk+PGxpPjxhIGNsYXNzPSd0b29sdGlwJyBocmVmPScjJz5EZW1vPC9hPjwvbGk+PGxpPjxhIGNsYXNzPSd0b29sdGlwJyBocmVmPScjJz5EZW1vPC9hPjwvbGk+PC91bD48L2xpPjxsaT48YSBjbGFzcz0ndG9vbHRpcCcgaHJlZj0nIyc+RGVtbzwvYT48L2xpPjxsaT48YSBjbGFzcz0ndG9vbHRpcCcgaHJlZj0nIyc+RGVtbzwvYT48L2xpPjxsaT48YSBjbGFzcz0ndG9vbHRpcCcgaHJlZj0nIyc+RGVtbzwvYT48L2xpPjwvdWw+PC9kaXY+

    ReplyDelete
    Replies
    1. Bro maaf jika komentar ane mengandung karakter yang panjang... :) Jika tidak ingin seperti itu tambahkan kode ini di css kamu:

      .comments .comments-content .comment-content{word-wrap:break-word;}

      Delete
    2. wih boleh juga tuh, caranya gimana ya ?
      :D

      Delete
    3. Caranya:

      1. Siapkan kode yang akan dirubah menjadi base64
      2. Compress kode menggunakan tool dari sini: http://www.willpeavy.com/minifier/
      3. Setelah tercompress, copy kodenya lalu pastekan di sini: base64encode.org
      4. Copy hasil base64 di notepad atau text editor lainnya. Setelah kamu copy, tambahkan kode ini tepat diawal base64nya:
      data:text/html;charset=utf-8;base64,DI SINI KODE BASE64

      Delete
    4. oh gitu caranya, terimakasih banyak gan, dah ngasih tau caranya ... :)

      Delete
  7. saya sudah paste-kan semua kodenya,kokngak bsa disimpan ya?gagal terus...

    ReplyDelete
  8. masbro gue masih belum ngerti maksud naruh kode CSS ( Taruh di Atas Kode ]]> ) : bisa lebih diperjelas lagi kasih ss nya biar posisinya bener bener jelas thanks soalnya gue baru pemula

    ReplyDelete
  9. makasih infonya gan, bermanfaat banget nih. kalo ada waktu main ke blog saya ya http://jordankurniawan.blogspot.com

    ReplyDelete
  10. mantap\


    WWW.BLOGMNC.BLOGSPOT.COM

    ReplyDelete
  11. http://blogmnc.blogspot.com/2013/07/cara-melihat-pengumuman-hasil-ujian.html

    ReplyDelete
  12. tanks gan... ane pemula mo ikut baca-baca....

    ReplyDelete
  13. BRO di copas nya dimananya nih ?

    ReplyDelete
    Replies
    1. dibaca semuanya dulu bro biar ngarti -_-
      jangan langsung maen copas codenya!!! :3

      Delete
  14. Kok kode ]]> kagak ade ye ???

    ReplyDelete

Catatan :
- Dilarang Menggunakan Link Aktif / Live Link
- Dilarang Promosi Iklan
- Dilarang Nyepam
- Untuk Menyisipkan Kode, Gunakan tag <i rel='code'> Taruh Kode Disini </i>
- Untuk Menyisipkan Kode Panjang, Gunakan tag <i rel='pre'> Taruh kode panjang disini </i>
- Untuk Menyisipkan Catatan, Gunakan <b rel='quote> Taruh Catatan disini </b>
- Untuk Menyisipkan Gambar, Gunakan <i rel="'image> URL Gambar </i>
- Untuk Menyisipkan Youtube, Gunakan <i rel='youtube'> URL Youtube </i>

Sebelum menyisipkan kode silahkan gunakan Tools Konversi Kode.
Caranya tinggal klik tombol "Konversi Kode" yang berada di Form Komentar.