Kumpulan Efek Hover 2D Keren Menggunakan CSS

Assalamualaikum wr wb

Kumpulan Efek Hover 2D Keren Menggunakan CSS

Pada postingan kali ini, saya akan membahas tentang berbagai macam efek hover menggunakan CSS. Efek ini bisa anda terapkan diberbagai macam objek seperti gambar, tombol, dan lainnya. Tidak perlu berlama-lama langsung contoh efek dibawah ini.

Arahkan atau dekatkan kursor ke kotak

2D Transitions || By : Moh. Syairi

GROW

SHRINK

Bounce In

Bounce Out

Rotate

Grow Rotate

Float

Sink

Lalu begaimana cara membuatnya.?? Kita langsung saja.

• Efek Grow (Membesar)

GROW

<style>
#grow{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;}
#grow:hover, .grow:focus, .grow:active {-webkit-transform: scale(1.1);transform: scale(1.1);background-color:#28CADA;}
</style>
<div id="grow" style="float:left">GROW</div>

• Efek Shrink (Mengecil)

SHRINK

<style>
#shrink{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;}
#shrink:hover, .shrink:focus, .shrink:active {-webkit-transform: scale(0.9);transform: scale(0.9);background-color:#28CADA;}
</style>
<div id="shrink" style="float:left">SHRINK</div>

• Efek Bounce In (Memantul Masuk)

BOUNCE IN

<style>
#Bounce_In{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.5s;}
#Bounce_In:hover, .Bounce_In:focus, .Bounce_In:active {-webkit-transform: scale(1.2);transform: scale(1.2);-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);background-color:#28CADA;}
</style>
<div id="Bounce_In" style="float:left">BOUNCE IN</div>

• Efek Bounce Out (Memantul keluar)

BOUNCE OUT

<style>
#Bounce_Out{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.5s;}
#Bounce_Out:hover, .Bounce_Out:focus, .Bounce_Out:active {  -webkit-transform: scale(0.8);transform: scale(0.8);-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);background-color:#28CADA;}
</style>
<div id="Bounce_Out" style="float:left">BOUNCE OUT</div>

• Efek Rotate (Memutar)

ROTATE

<style>
#Rotate{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;}
#Rotate:hover, .Rotate:focus, .Rotate:active {-webkit-transform: rotate(4deg);transform: rotate(4deg);background-color:#28CADA;}
</style>
<div id="Rotate" style="float:left">ROTATE</div>

• Efek Grow Rotate (Membesar Memutar)

GROW ROTATE

<style>
#GrowRotate{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;}
#GrowRotate:hover, .GrowRotate:focus, .GrowRotate:active {  -webkit-transform: scale(1.1) rotate(4deg);transform: scale(1.1) rotate(4deg);background-color:#28CADA;}
</style>
<div id="GrowRotate" style="float:left">GROW ROTATE</div>

• Efek Float (Keatas)

FLOAT

<style>
#float{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;}
#float:hover, .float:focus, .float:active {-webkit-transform: translateY(-8px);transform: translateY(-8px);background-color:#28CADA;}
</style>
<div id="float" style="float:left">FLOAT</div>

• Efek Sink (kebawah)

SINK

<style>
#sink{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;}
#sink:hover, .sink:focus, .sink:active {  -webkit-transform: translateY(8px);transform: translateY(8px);background-color:#28CADA;}
</style>
<div id="sink" style="float:left">SINK</div>

Sekian pembahasan mengenai efek hover 2D dan semoga bisa bermanfaat.

Cara Pasang Menubar Dropdown (Submenu) Elegant di Blogger

Fungsi menubar menurut pendapat saya :

1. Sebagai navigasi agar pengunjung tidak bingung mencari informasi berdasarkan menu-menu atau kategori
2. Agar blog atau website terlihat lebih simple, rapih, teratur dan sistematis
3. dll.

Berikut langkah-langkahnya :

• Masuk ke www.blogger.com
• Cari tag ]]> </ b: skin> dengan menggunakan Ctrl + F 
• Copy-paste source code CSS di bawah ini Sebelum tag ]]> </ b: skin>

#navigation {
background-color : #111;
width : 100%;
height : 39px;
margin:0 auto;
border-bottom : 3px solid #e80595;
border-radius:2px;}

#navigation ul {
padding:0;
margin:0;
list-style-type:none;}
 
#navigation ul li {
float:left;
position : relative;}
 
#navigation ul li a {
display:block;
padding:10px 20px;
color:#fff;
text-decoration:none;
font-family: calibri;}
 
#navigation ul li a:hover {
background-color:#e80595;}
 
/* Menu Dropdown */
#navigation ul li ul {
display: none;}
 
#navigation ul li:hover ul {
display:block;
position: absolute;}

#navigation ul li:hover ul li a {
display:block;
background-color : black;
color : #fff;
width : 150px;
border-bottom : 1px solid #ccc;}

#navigation ul li:hover ul li a:hover {
background-color : #e80595;}

#navigation ul li:hover > a {background: #e80595;}

• Cari script berikut atau tekan Ctrl + F

<div id='main-wrapper'> atau 

<div id='main'> atau

<div class='main-outer'> (Recomendasi dari saya, Blog saya cari code ini)

atau 

Terserah anda, dimana anda ingin meletakkan menubarnya

• Copy-paste source code dibawah ini di ATAS script code yang dicari tadi.

<div id="navigation">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Profil</a>
<ul>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Visi dan Misi</a></li>
</ul>
</li>
<li><a href="#">Service</a>
<ul>
<li><a href="#">Software Development</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Interior Design</a></li>
<li><a href="#">Multimedia Interactive</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Kontak Kami</a></li>
</ul>
</div>

Perhatian Petunjuk :
simbol # diganti dengan alamat blog yang dituju atau link

Selamat Mencoba

Cara Memasang Menubar Dropdown (Submenu) Keren Ringan di Blogger

Fungsi menubar menurut pendapat saya :

1. Sebagai navigasi agar pengunjung tidak bingung mencari informasi berdasarkan menu-menu atau kategori
2. Agar blog atau website terlihat lebih simple, rapih, teratur dan sistematis
3. dll.

Berikut langkah-langkahnya :

• Masuk ke www.blogger.com
• Cari tag ]]> </ b: skin> dengan menggunakan Ctrl + F 
• Copy-paste source code CSS di bawah ini Sebelum tag ]]> </ b: skin>

#SB_menu{border-bottom:3px solid #fe5400;width:100%;height:31px;background:#343434;margin:0px auto;margin-bottom:3px;}
#SB_menu ul{float:left;margin:0;padding:0;}
#SB_menu li{float:left;list-style:none;margin:0;padding:0;}
#SB_menu li a, #SB_menu li a:link{float:left;padding:8px 11px;color:#fff;text-decoration:none;font:bold 12px Arial;text-transform:capitalize;}
#SB_menu li a:hover, #SB_menu li a:active, #SB_menu .current_page_item a  {background: #343434;color: #fff;text-decoration:none;}
#SB_menu li li a, #SB_menu li li a:link, #SB_menu li li a:visited{font-size: 12px;background: #424242;color: #fff;text-decoration:none;width: 150px;padding: 0px 10px;line-height:30px;}
#SB_menu li li a:hover, #SB_menu li li a:active {background: #fe5400;color: #ffffff;}
#SB_menu li ul{z-index:9999;position:absolute;left:-999em;height:auto;width:170px;margin-top:31px;border:1px solid ##999;}
#SB_menu li:hover ul, #SB_menu li li:hover ul, #SB_menu li li li:hover ul, #SB_menu li.sfhover ul, #SB_menu li li.sfhover ul, #SB_menu li li li.sfhover ul{left:auto}
#SB_menu li:hover, #SB_menu li.sfhover{position:static}

• Cari script berikut atau tekan Ctrl + F

<div id='main-wrapper'> atau 

<div id='main'> atau

<div class='main-outer'> (Recomendasi dari saya, Blog saya cari code ini)

atau 

Terserah anda, dimana anda ingin meletakkan menubarnya

• Copy-paste source code dibawah ini di ATAS script code yang dicari tadi.

<div id='SB_menu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Daftar Isi</a></li>
<li><a class='prett' href='#'>Blogger</a>
<ul>
<li><a href='#'>SEO</a></li>
<li><a href='#'>Template</a></li>
<li><a href='#'>Widget</a></li>
</ul></li>
<li><a href='#'>About Me</a></li>
<li><a class='prett' href='#'>Contact Me</a>
<ul>
<li><a href='#'>Google +</a></li>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Twitter</a></li>
</ul></li>
</ul>
</div>

Perhatian Petunjuk :
simbol # diganti dengan alamat blog yang dituju atau link

Selamat Mencoba

Cara Memasang Menubar tanpa dropdown (submenu) di Blogger

Fungsi menubar menurut pendapat saya :

1. Sebagai navigasi agar pengunjung tidak bingung mencari informasi berdasarkan menu-menu atau kategori
2. Agar blog atau website terlihat lebih simple, rapih, teratur dan sistematis
3. dll.

Berikut langkah-langkahnya :

• Masuk ke www.blogger.com
• Cari tag ]]> </ b: skin> dengan menggunakan Ctrl + F 
• Copy-paste source code CSS di bawah ini Sebelum tag ]]> </ b: skin>

#menu{background:#343434;color:#eee;height:35px;border-bottom:4px solid #eeeded}
#menu ul,#menu li{margin:0 0;padding:0 0;list-style:none}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}
#menu li:first-child{border-left: none}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}
#menu li:hover > a,#menu li a:hover{background:#111}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:12px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{background:#333;}

• Cari script berikut atau tekan Ctrl + F

<div id='main-wrapper'> atau 

<div id='main'> atau

<div class='main-outer'> (Recomendasi dari saya, Blog saya cari code ini)

atau 

Terserah anda, dimana anda ingin meletakkan menubarnya

• Copy-paste source code dibawah ini di ATAS script code yang dicari tadi.

<nav id="menu">
<input type="checkbox">
<label>≡<span>Navigation</span></label>
<ul>
<li><a href="/">Home</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Tips Triks</a></li>
<li><a href="#">Blogger</a></li>
<li><a href="#">Template</a></li>
<li><a href="#">Berita</a></li>
<li><a href="#">Musik</a></li>
<li><a href="#">Penelitian</a></li>
<li><a href="#">Islami</a></li>
</ul>
</nav>

Perhatian Petunjuk :
simbol # diganti dengan alamat blog yang dituju atau link

Selamat Mencoba

Cara Memasang Menubar Berwarna-warni Cantik di Blogger

Fungsi menubar menurut pendapat saya :

1. Sebagai navigasi agar pengunjung tidak bingung mencari informasi berdasarkan menu-menu atau kategori
2. Agar blog atau website terlihat lebih simple, rapih, teratur dan sistematis
3. dll.

Berikut langkah-langkahnya :

• Masuk ke www.blogger.com
• Cari tag ]]> </ b: skin> dengan menggunakan Ctrl + F 
• Copy-paste kode CSS di bawah Sebelum tag ]]> </ b: skin> 

#syairiblog{background:#333;color:#eee;width:100%;height:35px;margin: 0 auto;border-bottom:3px solid #a6a6a6;}
#syairiblog ul,#syairiblog li{margin:0 0;padding:0 0;list-style:none}
#syairiblog ul{height:35px}
#syairiblog li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}
#syairiblog li:first-child{border-left: none}
#syairiblog a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}
#syairiblog li:hover > a,#syairiblog li a:hover{background:#111}
#syairiblog input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#syairiblog label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#syairiblog label span{font-size:12px;position:absolute;left:35px}
#syairiblog ul.syairiblogs{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;}
#syairiblog ul.syairiblogs li{display:block;width:100%;font:12px Arial;text-transform:none;}
#syairiblog li:hover ul.syairiblogs{display:block}
#syairiblog a.prett{padding:0 27px 0 14px}
#syairiblog a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#syairiblog ul.syairiblogs a:hover{background:#333;}
.wrn1{background-color:#fe5400 !important;} .wrn1:hover{background-color:#42fd01 !important;}
.wrn2{background-color:#db05e8 !important;} .wrn2:hover{background-color:#fff003 !important;}
.wrn3{background-color:#a0e805 !important;} .wrn3:hover{background-color:#ff0303 !important;}
.wrn4{background-color:#02baca !important;} .wrn4:hover{background-color:#D580FE !important;}
.wrn5{background-color:#f5068d !important;} .wrn5:hover{background-color:#80C8FE !important;}

• Cari script berikut atau tekan Ctrl + F

<div id='main-wrapper'> atau 

<div id='main'> atau

<div class='main-outer'> (Recomendasi dari saya, Blog saya cari code ini)

atau 

Terserah anda, dimana anda ingin meletakkan menubarnya

• Copy-paste source code dibawah ini di ATAS script code yang dicari tadi.

<nav id="syairiblog" style="position: relative; top: 0px; z-index: 9999;">
<input type="checkbox">
<label>≡<span>Navigation</span></label>
<ul>
<li><a class="wrn3" href="#">Home</a></li>
<li><a class="wrn4" href="#" title="Tentang Blog Ini">SBMenu 1</a></li>
<li><a class="wrn5" href="#" title="Daftar Isi Blog">SBMenu 2</a></li>
<li><a class="wrn2" href="#">SBMenu 3</a></li>
<li><a class="wrn1" href="#" title="Kontak Kami">SBMenu 4</a></li>
</ul>
</nav>

Perhatian Petunjuk :
simbol # diganti dengan alamat blog yang dituju atau link

Selamat Mencoba

Cara Memasang Menubar Dropdown (Submenu) Simple di Blogger

Fungsi menubar menurut pendapat saya :

1. Sebagai navigasi agar pengunjung tidak bingung mencari informasi berdasarkan menu-menu atau kategori
2. Agar blog atau website terlihat lebih simple, rapih, teratur dan sistematis
3. dll.

Berikut langkah-langkahnya :

• Masuk ke www.blogger.com
• Cari tag ]]> </ b: skin> dengan menggunakan Ctrl + F 
• Copy-paste source code CSS di bawah ini Sebelum tag ]]> </ b: skin> 

#SB_menu {
    background: #656870;
    width: 100%;
    margin: 0 auto;
    height: 40px;
    padding: 0px;
    font-size: 13px;
 border-radius:3px;
    font-family: 'Trebuchet MS', sans-serif;
    font-weight: normal;
    word-spacing: 2;
    -webkit-font-smoothing: antialiased;}
#SB_menu li.home a {
    padding: 0px 30px;}
#SB_menu li.home img {
    vertical-align: middle;}
#SB_menu ul {
    height: 40px;
    list-style: none;
    margin: 0;
    padding: 0px;}
#SB_menu li {
    float: left;
    padding: 0px;}
#SB_menu li a {
    background: #656870;
    color: #CCC;
    display: block;
    font-weight: bold;
    line-height: 40px;
 border-radius:3px;
    margin: 0px;
    padding: 0px 25px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);}
#SB_menu li a:hover, #SB_menu ul li:hover a {
    background: #46484E;
    color: #FFFFFF;
    text-decoration: none;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);}
#SB_menu li ul {
    background: #46484E;
    display: none;
    height: auto;
    padding: 0px;
    margin: 0px;
    border: 0px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    position: absolute;
    width: 225px;
    z-index: 200;
/*top:1em;
/*left:0;*/;}
#SB_menu li:hover ul {
    display: block;}
#SB_menu li li {
    display: block;
    float: none;
    margin: 0px;
    padding: 0px;
    width: 225px;}
#SB_menu li:hover li a {
    background: none;
    color: #979EAF;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;}
#SB_menu li ul a {
    display: block;
    height: 40px;
    font-size: 13px;
    font-style: normal;
    margin: 0px;
    padding: 0px 10px 0px 15px;
    text-align: left;}
#SB_menu> ul > li ul li a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    -webkit-transition: color ease 0.3s;
    -moz-transition: color ease 0.3s;
    -ms-transition: color ease 0.3s;
    -o-transition: color ease 0.3s;}
#SB_menu li ul a:hover, #SB_menu li ul li:hover a {
    background: #46484E;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #FFF;
    text-decoration: none;
    padding: 0px 10px 0px 15px;}

• Cari script berikut atau tekan Ctrl + F

<div id='main-wrapper'> atau 

<div id='main'> atau

<div class='main-outer'> (Recomendasi dari saya, Blog saya cari code ini)

atau 

Terserah anda, dimana anda ingin meletakkan menubarnya

• Copy-paste source code dibawah ini di ATAS script code yang dicari tadi.

<div id="SB_menu">
<ul><li class="home"><a href="http://nama blog anda/" title="Home Page">Home</a></li>
<li class="sub "><a href="#"><span>Blogger &#187</span></a><ul>
<li><a href="#"><span>SEO</span></a></li>
<li><a href="#"><span>Template</span></a></li>
<li><a href="#"><span>Widgets</span></a></li></ul></li>
<li><a href="#"><span>Software &#187</span></a>
<ul><li><a href="#"><span>Al-Qur'an</span></a></li>
<li><a href="#"><span>Antivirus</span></a></li>
<li><a href="#"><span>Utility</span></a></li></ul></li>
<li><a href="#"><span>Tools &#187</span></a>
<ul><li><a href="#"><span>Online HTML Editor</span></a></li>
<li><a href="#"><span>Color Code</span></a></li>
<li><a href="#"><span>Page Rank Checker</span></a></li></ul></li>
<li><a href="#"><span>Ebook</span></a></li>
<li><a href="#"><span>About Us</span></a></li>
<li><a href="#"><span>Contact Us</span></a></li></ul>
 </div>

Perhatian Petunjuk :
simbol # diganti dengan alamat blog yang dituju atau link

Selamat Mencoba

Memasang Sytax Higlighter Black Color (Tag Pre Menarik) Pada Blogger

Memasang Sytax Higlighter Black Color (Tag Pre Menarik) Pada Blogger

Fungsi Syntax Higlighter, Menurut Pendapat Saya :

• Membuat tampilan atau postingan blog menjadi lebih menarik
• Khususnya blog yang membahas pemrograman atau tidak jauh dari dunia pengkodingan (source code)
• Blog lebih rapih, simple dan sistematis.

Langkah-Langkahnya :

• Masuk Blogger.com >> Dashboard
• Masuk Template >> Edit HTML
• Pasang kode CSS berikut diatas ]]></b:skin> gunakan Ctrl + F untuk mencari ]]></b:skin>. Letakkan diatas ]]></b:skin>

pre {
background-color:#464545;
background-image:-webkit-linear-gradient(top, #464545 50%, #4d4d4d 50%);
background-image:-moz-linear-gradient(top, #464545 50%, #4d4d4d 50%);
background-image:-ms-linear-gradient(top, #464545 50%, #4d4d4d 50%);
background-image:-o-linear-gradient(top, #464545 50%, #4d4d4d 50%);
background-image:linear-gradient(top, #464545 50%, #4d4d4d 50%);
-webkit-background-size:30px 30px;
-moz-background-size:30px 30px;
-ms-background-size:30px 30px;
-o-background-size:30px 30px;
background-size:30px 30px;
background-repeat:repeat;
font:bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
color:#333;
border:2px solid #666;-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
position:relative;
padding:0 7px;
margin:10px 5px;
overflow:auto;
word-wrap:normal;
white-space:pre;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
box-shadow:0 1px 2px rgba(0,0,0,0.2);
position:relative;
 }
pre[warna] {
padding:29px 1em 7px 1em;
 }
pre[warna]:before {
content:attr(warna);
display:block;
position:absolute;
top:0;
right:0;
left:0;
background-color:#666;
padding:0 7px;
font:bold 11px/20px Arial,Sans-Serif;
color:white;
}
pre[warna]::after {
    content: 'Double click to selection';
    padding: 0px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 0px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}
pre[warna]:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}
pre[warna="1"] {border-color:#fe5400;color:#ffffff;}
pre[warna="1"]:before {background-color:#fe5400;}
pre[warna="2"] {border-color:#db05e8;color:#ffffff;}
pre[warna="2"]:before {background-color:#db05e8;}
pre[warna="3"] {border-color:#a0e805;color:#ffffff;}
pre[warna="3"]:before {background-color:#a0e805;}
pre[warna="4"] {border-color:#02baca;color:#ffffff;}
pre[warna="4"]:before {background-color:#02baca;}
pre[warna="5"] {border-color:#f5068d;color:#ffffff;}
pre[warna="5"]:before {background-color:#f5068d;}
pre[warna="6"] {border-color:#01edb3;color:#ffffff;}
pre[warna="6"]:before {background-color:#01edb3;}
  }

• Untuk menggunakannya di postingan, cukup memakai tag <pre> dan kode warna untuk memanggil
• Untuk memposting gunakan mode HTML bukan Compose
• Gunakan kode warna (1,2,3,4,5,6) kode tersebut menetukan warna, seperti dibawah ini  :

<pre warna="1"> Tulisan anda disini atau kode anda </pre>

<pre warna="2"> Tulisan anda disini atau kode anda </pre>

<pre warna="3"> Tulisan anda disini atau kode anda </pre>

<pre warna="4"> Tulisan anda disini atau kode anda </pre>

<pre warna="5"> Tulisan anda disini atau kode anda </pre>

<pre warna="6"> Tulisan anda disini atau kode anda </pre>

• Hasilnya akan seperti gambar diatas

Oke selamat mencoba pasti berhasil, sekian postingan bagaimana Memasang Sytax Higlighter Black Color (Tag Pre Menarik) Pada Blogger, semoga bermanfaat.

Cara Memasang Menubar dropdown CSS di Blog

Fungsi menubar menurut pendapat saya :

1. Sebagai navigasi agar pengunjung tidak bingung mencari informasi berdasarkan menu-menu atau kategori
2. Agar blog atau website terlihat lebih simple, rapih dan teratur
3. dll.

Berikut langkah-langkahnya :

• Masuk ke Blogger.com
• Dashboard
• Masuk ke Template
• Edit HTML
• Cari script berikut atau tekan Ctrl + F

<div class='main-outer'>  atau

<div id='main-wrapper'> atau 

<div id='main'> atau

<div class='main-outer'> (Recomendasi dari saya, Blog saya cari code ini)

• Setelah Ketemu, Copy-paste source code dibawah ini di ATAS script code yang dicari tadi. di ATAS !!!

Pilih salah satu satu script !!!

<style>
#SBMenu1{width: 100%;margin: 0;padding: 8px 0 0 0;list-style: none;background: #000000;background: -moz-linear-gradient(#444, #000000);background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-border-radius: 50px;border-radius: 50px;-moz-box-shadow: 0 2px 0px #9c9c9c;-webkit-box-shadow: 0 2px 0px #9c9c9c;}
#SBMenu1 li{float: left;padding: 0 0 8px 0;position: relative;line-height: 0;}
#SBMenu1 a{float: left;height: 25px;padding: 0 20px;color: #999;text-transform: uppercase;font: bold 12px/25px Arial, Helvetica;text-decoration: none;text-shadow: 0 1px 0 #000;}
#SBMenu1 li:hover > a{color: #ffffff;}
*html #SBMenu1 li a:hover /* IE6 */{color: #ffffff;}
#SBMenu1 li:hover > ul{display: block;}
/* Sub-SBMenu1 */
#SBMenu1 ul{list-style: none;margin: 0;padding: 0;display: none;position: absolute;top: 35px;left: 0;z-index: 99999;background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;border-radius: 2px;}
#SBMenu1 ul ul{top: 0;left: 150px;}
#SBMenu1 ul li{float: none;margin: 0;padding: 0;display: block;-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;}
#SBMenu1 ul li:last-child{-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
#SBMenu1 ul a{padding: 10px;height: 10px;width: 130px;height: auto;line-height: 1;display: block;white-space: nowrap;float: none;text-transform: none;}
*html #SBMenu1 ul a /* IE6 */{height: 10px;}
*:first-child+html #SBMenu1 ul a /* IE7 */{height: 10px;}
#SBMenu1 ul a:hover{background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);}
#SBMenu1 ul li:first-child > a{-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}
#SBMenu1 ul li:first-child > a:after{content: '';position: absolute;left: 30px;top: -8px;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 8px solid #444;}
#SBMenu1 ul ul li:first-child a:after{left: -8px;top: 12px;width: 0;height: 0;border-left: 0;border-bottom: 5px solid transparent;border-top: 5px solid transparent;border-right: 8px solid #444;}
#SBMenu1 ul li:first-child a:hover:after{border-bottom-color: #04acec;}
#SBMenu1 ul ul li:first-child a:hover:after{border-right-color: #04acec;border-bottom-color: transparent;}
#SBMenu1 ul li:last-child > a{-moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;}
/* Clear floated elements */
#SBMenu1:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
* html #SBMenu1 { zoom: 1; } /* IE6 */*:first-child+html #SBMenu1 { zoom: 1; } /* IE7 */
</style>
<ul id="SBMenu1">
<li><a href='/'>Home</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 1</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 3</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 5</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
</ul>

<style>
#SBMenu2{width: 100%;margin: 0;padding: 8px 0 0 0;list-style: none;background: #000000;background: -moz-linear-gradient(#444, #000000);background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#0B7E88, #0B7E88);-moz-border-radius: 50px;border-radius: 50px;-moz-box-shadow: 0 2px 0px #9c9c9c;-webkit-box-shadow: 0 2px 0px #9c9c9c;}
#SBMenu2 li{float: left;padding: 0 0 8px 0;position: relative;line-height: 0;}#SBMenu2 a{float: left;height: 25px;padding: 0 20px;color: #fff;text-transform: uppercase;font: bold 12px/25px Arial, Helvetica;text-decoration: none;text-shadow: 0 1px 0 #000;}#SBMenu2 li:hover > a{color: #ffffff;}*html #SBMenu2 li a:hover /* IE6 */{color: #ffffff;}#SBMenu2 li:hover > ul{display: block;}
/* Sub-SBMenu2 */
#SBMenu2 ul{list-style: none;margin: 0;padding: 0;display: none;position: absolute;top: 35px;left: 0;z-index: 99999;background: #444;background: -moz-linear-gradient(#444, #111);background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);box-shadow: 0 0 2px rgba(255,255,255,.5);-moz-border-radius: 5px;border-radius: 2px;}
#SBMenu2 ul ul{top: 0;left: 150px;}#SBMenu2 ul li{float: none;margin: 0;padding: 0;display: block;-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;}#SBMenu2 ul li:last-child{-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
#SBMenu2 ul a{padding: 10px;height: 10px;width: 130px;height: auto;line-height: 1;display: block;white-space: nowrap;float: none;text-transform: none;}*html #SBMenu2 ul a /* IE6 */{height: 10px;}*:first-child+html #SBMenu2 ul a /* IE7 */{height: 10px;}
#SBMenu2 ul a:hover{background: #0B7E88;background: -moz-linear-gradient(#0B7E88, #0B7E88);background: -webkit-gradient(linear, left top, left bottom, from(#0B7E88), to(#0B7E88));background: -webkit-linear-gradient(#0B7E88, #0B7E88);background: -o-linear-gradient(#0B7E88, #0B7E88);background: -ms-linear-gradient(#0B7E88, #0B7E88);background: linear-gradient(#0B7E88, #0B7E88);}
#SBMenu2 ul li:first-child > a{-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}#SBMenu2 ul li:first-child > a:after{content: '';position: absolute;left: 30px;top: -8px;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 8px solid #444;}
#SBMenu2 ul ul li:first-child a:after{left: -8px;top: 12px;width: 0;height: 0;border-left: 0;border-bottom: 5px solid transparent;border-top: 5px solid transparent;border-right: 8px solid #444;}
#SBMenu2 ul li:first-child a:hover:after{border-bottom-color: #0B7E88;}#SBMenu2 ul ul li:first-child a:hover:after{border-right-color: #0B7E88;border-bottom-color: transparent;}#SBMenu2 ul li:last-child > a{-moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;}
/* Clear floated elements */
#SBMenu2:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}* html #SBMenu2 { zoom: 1; } /* IE6 */*:first-child+html #SBMenu2 { zoom: 1; } /* IE7 */
</style>
<ul id="SBMenu2">
<li><a href='/'>Home</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 1</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 3</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 5</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
</ul>

<style>
#SBMenu3{width: 100%;margin: 0;padding: 8px 0 0 0;list-style: none;background: #000000;background: -moz-linear-gradient(#444, #000000);background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#0101f9, #0101f9);-moz-border-radius: 50px;border-radius: 50px;-moz-box-shadow: 0 2px 0px #9c9c9c;-webkit-box-shadow: 0 2px 0px #9c9c9c;}
#SBMenu3 li{float: left;padding: 0 0 8px 0;position: relative;line-height: 0;}#SBMenu3 a{float: left;height: 25px;padding: 0 20px;color: #fff;text-transform: uppercase;font: bold 12px/25px Arial, Helvetica;text-decoration: none;text-shadow: 0 1px 0 #000;}#SBMenu3 li:hover > a{color: #ffffff;}*html #SBMenu3 li a:hover /* IE6 */{color: #ffffff;}#SBMenu3 li:hover > ul{display: block;}
/* Sub-SBMenu3 */
#SBMenu3 ul{list-style: none;margin: 0;padding: 0;display: none;position: absolute;top: 35px;left: 0;z-index: 99999;background: #444;background: -moz-linear-gradient(#444, #111);background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);box-shadow: 0 0 2px rgba(255,255,255,.5);-moz-border-radius: 5px;border-radius: 2px;}
#SBMenu3 ul ul{top: 0;left: 150px;}#SBMenu3 ul li{float: none;margin: 0;padding: 0;display: block;-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;}#SBMenu3 ul li:last-child{-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
#SBMenu3 ul a{padding: 10px;height: 10px;width: 130px;height: auto;line-height: 1;display: block;white-space: nowrap;float: none;text-transform: none;}*html #SBMenu3 ul a /* IE6 */{height: 10px;}*:first-child+html #SBMenu3 ul a /* IE7 */{height: 10px;}
#SBMenu3 ul a:hover{background: #0101f9;background: -moz-linear-gradient(#0101f9, #0101f9);background: -webkit-gradient(linear, left top, left bottom, from(#0101f9), to(#0101f9));background: -webkit-linear-gradient(#0101f9, #0101f9);background: -o-linear-gradient(#0101f9, #0101f9);background: -ms-linear-gradient(#0101f9, #0101f9);background: linear-gradient(#0101f9, #0101f9);}
#SBMenu3 ul li:first-child > a{-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}#SBMenu3 ul li:first-child > a:after{content: '';position: absolute;left: 30px;top: -8px;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 8px solid #444;}
#SBMenu3 ul ul li:first-child a:after{left: -8px;top: 12px;width: 0;height: 0;border-left: 0;border-bottom: 5px solid transparent;border-top: 5px solid transparent;border-right: 8px solid #444;}
#SBMenu3 ul li:first-child a:hover:after{border-bottom-color: #0101f9;}#SBMenu3 ul ul li:first-child a:hover:after{border-right-color: #0101f9;border-bottom-color: transparent;}#SBMenu3 ul li:last-child > a{-moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;}
/* Clear floated elements */
#SBMenu3:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}* html #SBMenu3 { zoom: 1; } /* IE6 */*:first-child+html #SBMenu3 { zoom: 1; } /* IE7 */
</style>
<ul id="SBMenu3">
<li><a href='/'>Home</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 1</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 3</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 5</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
</ul>

<style>
#SBMenu4{width: 100%;margin: 0;padding: 8px 0 0 0;list-style: none;background: #000000;background: -moz-linear-gradient(#444, #000000);background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#7B990C, #7B990C);-moz-border-radius: 50px;border-radius: 50px;-moz-box-shadow: 0 2px 0px #9c9c9c;-webkit-box-shadow: 0 2px 0px #9c9c9c;}
#SBMenu4 li{float: left;padding: 0 0 8px 0;position: relative;line-height: 0;}#SBMenu4 a{float: left;height: 25px;padding: 0 20px;color: #fff;text-transform: uppercase;font: bold 12px/25px Arial, Helvetica;text-decoration: none;text-shadow: 0 1px 0 #000;}#SBMenu4 li:hover > a{color: #ffffff;}*html #SBMenu4 li a:hover /* IE6 */{color: #ffffff;}#SBMenu4 li:hover > ul{display: block;}
/* Sub-SBMenu4 */
#SBMenu4 ul{list-style: none;margin: 0;padding: 0;display: none;position: absolute;top: 35px;left: 0;z-index: 99999;background: #444;background: -moz-linear-gradient(#444, #111);background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);box-shadow: 0 0 2px rgba(255,255,255,.5);-moz-border-radius: 5px;border-radius: 2px;}
#SBMenu4 ul ul{top: 0;left: 150px;}#SBMenu4 ul li{float: none;margin: 0;padding: 0;display: block;-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;}#SBMenu4 ul li:last-child{-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
#SBMenu4 ul a{padding: 10px;height: 10px;width: 130px;height: auto;line-height: 1;display: block;white-space: nowrap;float: none;text-transform: none;}*html #SBMenu4 ul a /* IE6 */{height: 10px;}*:first-child+html #SBMenu4 ul a /* IE7 */{height: 10px;}
#SBMenu4 ul a:hover{background: #7B990C;background: -moz-linear-gradient(#7B990C, #7B990C);background: -webkit-gradient(linear, left top, left bottom, from(#7B990C), to(#7B990C));background: -webkit-linear-gradient(#7B990C, #7B990C);background: -o-linear-gradient(#7B990C, #7B990C);background: -ms-linear-gradient(#7B990C, #7B990C);background: linear-gradient(#7B990C, #7B990C);}
#SBMenu4 ul li:first-child > a{-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}#SBMenu4 ul li:first-child > a:after{content: '';position: absolute;left: 30px;top: -8px;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 8px solid #444;}
#SBMenu4 ul ul li:first-child a:after{left: -8px;top: 12px;width: 0;height: 0;border-left: 0;border-bottom: 5px solid transparent;border-top: 5px solid transparent;border-right: 8px solid #444;}
#SBMenu4 ul li:first-child a:hover:after{border-bottom-color: #7B990C;}#SBMenu4 ul ul li:first-child a:hover:after{border-right-color: #7B990C;border-bottom-color: transparent;}#SBMenu4 ul li:last-child > a{-moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;}
/* Clear floated elements */
#SBMenu4:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}* html #SBMenu4 { zoom: 1; } /* IE6 */*:first-child+html #SBMenu4 { zoom: 1; } /* IE7 */
</style>
<ul id="SBMenu4">
<li><a href='/'>Home</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 1</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 3</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 5</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
</ul>

<style>
#SBMenu5{width: 100%;margin: 0;padding: 8px 0 0 0;list-style: none;background: #000000;background: -moz-linear-gradient(#444, #000000);background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#395540, #395540);-moz-border-radius: 50px;border-radius: 50px;-moz-box-shadow: 0 2px 0px #9c9c9c;-webkit-box-shadow: 0 2px 0px #9c9c9c;}
#SBMenu5 li{float: left;padding: 0 0 8px 0;position: relative;line-height: 0;}#SBMenu5 a{float: left;height: 25px;padding: 0 20px;color: #fff;text-transform: uppercase;font: bold 12px/25px Arial, Helvetica;text-decoration: none;text-shadow: 0 1px 0 #000;}#SBMenu5 li:hover > a{color: #ffffff;}*html #SBMenu5 li a:hover /* IE6 */{color: #ffffff;}#SBMenu5 li:hover > ul{display: block;}
/* Sub-SBMenu5 */
#SBMenu5 ul{list-style: none;margin: 0;padding: 0;display: none;position: absolute;top: 35px;left: 0;z-index: 99999;background: #444;background: -moz-linear-gradient(#444, #111);background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);box-shadow: 0 0 2px rgba(255,255,255,.5);-moz-border-radius: 5px;border-radius: 2px;}
#SBMenu5 ul ul{top: 0;left: 150px;}#SBMenu5 ul li{float: none;margin: 0;padding: 0;display: block;-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;}#SBMenu5 ul li:last-child{-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
#SBMenu5 ul a{padding: 10px;height: 10px;width: 130px;height: auto;line-height: 1;display: block;white-space: nowrap;float: none;text-transform: none;}*html #SBMenu5 ul a /* IE6 */{height: 10px;}*:first-child+html #SBMenu5 ul a /* IE7 */{height: 10px;}
#SBMenu5 ul a:hover{background: #395540;background: -moz-linear-gradient(#395540, #395540);background: -webkit-gradient(linear, left top, left bottom, from(#395540), to(#395540));background: -webkit-linear-gradient(#395540, #395540);background: -o-linear-gradient(#395540, #395540);background: -ms-linear-gradient(#395540, #395540);background: linear-gradient(#395540, #395540);}
#SBMenu5 ul li:first-child > a{-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}#SBMenu5 ul li:first-child > a:after{content: '';position: absolute;left: 30px;top: -8px;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 8px solid #444;}
#SBMenu5 ul ul li:first-child a:after{left: -8px;top: 12px;width: 0;height: 0;border-left: 0;border-bottom: 5px solid transparent;border-top: 5px solid transparent;border-right: 8px solid #444;}
#SBMenu5 ul li:first-child a:hover:after{border-bottom-color: #395540;}#SBMenu5 ul ul li:first-child a:hover:after{border-right-color: #395540;border-bottom-color: transparent;}#SBMenu5 ul li:last-child > a{-moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;}
/* Clear floated elements */
#SBMenu5:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}* html #SBMenu5 { zoom: 1; } /* IE6 */*:first-child+html #SBMenu5 { zoom: 1; } /* IE7 */
</style>
<ul id="SBMenu5">
<li><a href='/'>Home</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 1</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 3</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 5</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
</ul>

<style>
#SBMenu6{width: 100%;margin: 0;padding: 8px 0 0 0;list-style: none;background: #000000;background: -moz-linear-gradient(#444, #000000);background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#FF0C39, #FF0C39);-moz-border-radius: 50px;border-radius: 50px;-moz-box-shadow: 0 2px 0px #9c9c9c;-webkit-box-shadow: 0 2px 0px #9c9c9c;}
#SBMenu6 li{float: left;padding: 0 0 8px 0;position: relative;line-height: 0;}#SBMenu6 a{float: left;height: 25px;padding: 0 20px;color: #fff;text-transform: uppercase;font: bold 12px/25px Arial, Helvetica;text-decoration: none;text-shadow: 0 1px 0 #000;}#SBMenu6 li:hover > a{color: #ffffff;}*html #SBMenu6 li a:hover /* IE6 */{color: #ffffff;}#SBMenu6 li:hover > ul{display: block;}
/* Sub-SBMenu6 */
#SBMenu6 ul{list-style: none;margin: 0;padding: 0;display: none;position: absolute;top: 35px;left: 0;z-index: 99999;background: #444;background: -moz-linear-gradient(#444, #111);background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);box-shadow: 0 0 2px rgba(255,255,255,.5);-moz-border-radius: 5px;border-radius: 2px;}
#SBMenu6 ul ul{top: 0;left: 150px;}#SBMenu6 ul li{float: none;margin: 0;padding: 0;display: block;-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;}#SBMenu6 ul li:last-child{-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
#SBMenu6 ul a{padding: 10px;height: 10px;width: 130px;height: auto;line-height: 1;display: block;white-space: nowrap;float: none;text-transform: none;}*html #SBMenu6 ul a /* IE6 */{height: 10px;}*:first-child+html #SBMenu6 ul a /* IE7 */{height: 10px;}
#SBMenu6 ul a:hover{background: #FF0C39;background: -moz-linear-gradient(#FF0C39, #FF0C39);background: -webkit-gradient(linear, left top, left bottom, from(#FF0C39), to(#FF0C39));background: -webkit-linear-gradient(#FF0C39, #FF0C39);background: -o-linear-gradient(#FF0C39, #FF0C39);background: -ms-linear-gradient(#FF0C39, #FF0C39);background: linear-gradient(#FF0C39, #FF0C39);}
#SBMenu6 ul li:first-child > a{-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}#SBMenu6 ul li:first-child > a:after{content: '';position: absolute;left: 30px;top: -8px;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 8px solid #444;}
#SBMenu6 ul ul li:first-child a:after{left: -8px;top: 12px;width: 0;height: 0;border-left: 0;border-bottom: 5px solid transparent;border-top: 5px solid transparent;border-right: 8px solid #444;}
#SBMenu6 ul li:first-child a:hover:after{border-bottom-color: #FF0C39;}#SBMenu6 ul ul li:first-child a:hover:after{border-right-color: #FF0C39;border-bottom-color: transparent;}#SBMenu6 ul li:last-child > a{-moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;}
/* Clear floated elements */
#SBMenu6:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}* html #SBMenu6 { zoom: 1; } /* IE6 */*:first-child+html #SBMenu6 { zoom: 1; } /* IE7 */
</style>
<ul id="SBMenu6">
<li><a href='/'>Home</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 1</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 3</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 5</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
</ul>

<style>
#SBMenu7{width: 100%;margin: 0;padding: 8px 0 0 0;list-style: none;background: #000000;background: -moz-linear-gradient(#444, #000000);background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#FF9900, #FF9900);-moz-border-radius: 50px;border-radius: 50px;-moz-box-shadow: 0 2px 0px #9c9c9c;-webkit-box-shadow: 0 2px 0px #9c9c9c;}
#SBMenu7 li{float: left;padding: 0 0 8px 0;position: relative;line-height: 0;}#SBMenu7 a{float: left;height: 25px;padding: 0 20px;color: #fff;text-transform: uppercase;font: bold 12px/25px Arial, Helvetica;text-decoration: none;text-shadow: 0 1px 0 #000;}#SBMenu7 li:hover > a{color: #ffffff;}*html #SBMenu7 li a:hover /* IE6 */{color: #ffffff;}#SBMenu7 li:hover > ul{display: block;}
/* Sub-SBMenu7 */
#SBMenu7 ul{list-style: none;margin: 0;padding: 0;display: none;position: absolute;top: 35px;left: 0;z-index: 99999;background: #444;background: -moz-linear-gradient(#444, #111);background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);box-shadow: 0 0 2px rgba(255,255,255,.5);-moz-border-radius: 5px;border-radius: 2px;}
#SBMenu7 ul ul{top: 0;left: 150px;}#SBMenu7 ul li{float: none;margin: 0;padding: 0;display: block;-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;}#SBMenu7 ul li:last-child{-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
#SBMenu7 ul a{padding: 10px;height: 10px;width: 130px;height: auto;line-height: 1;display: block;white-space: nowrap;float: none;text-transform: none;}*html #SBMenu7 ul a /* IE6 */{height: 10px;}*:first-child+html #SBMenu7 ul a /* IE7 */{height: 10px;}
#SBMenu7 ul a:hover{background: #FF9900;background: -moz-linear-gradient(#FF9900, #FF9900);background: -webkit-gradient(linear, left top, left bottom, from(#FF9900), to(#FF9900));background: -webkit-linear-gradient(#FF9900, #FF9900);background: -o-linear-gradient(#FF9900, #FF9900);background: -ms-linear-gradient(#FF9900, #FF9900);background: linear-gradient(#FF9900, #FF9900);}
#SBMenu7 ul li:first-child > a{-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}#SBMenu7 ul li:first-child > a:after{content: '';position: absolute;left: 30px;top: -8px;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 8px solid #444;}
#SBMenu7 ul ul li:first-child a:after{left: -8px;top: 12px;width: 0;height: 0;border-left: 0;border-bottom: 5px solid transparent;border-top: 5px solid transparent;border-right: 8px solid #444;}
#SBMenu7 ul li:first-child a:hover:after{border-bottom-color: #FF9900;}#SBMenu7 ul ul li:first-child a:hover:after{border-right-color: #FF9900;border-bottom-color: transparent;}#SBMenu7 ul li:last-child > a{-moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;}
/* Clear floated elements */
#SBMenu7:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}* html #SBMenu7 { zoom: 1; } /* IE6 */*:first-child+html #SBMenu7 { zoom: 1; } /* IE7 */
</style>
<ul id="SBMenu7">
<li><a href='/'>Home</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 1</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 3</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Menu 5</a><ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>SubMenu 4</a></li>
</ul></li>
</ul>

• Simpan Template

Selamat Mencoba :)