Memasang Widget Kotak Pencarian Metro Style di Blog

Memasang Widget Kotak Pencarian Metro Style di Blog | Ghiyats Blogs - Salam Untuk Sobat Semua.. Widget Kotak Pencarian sangat di butuhkan dan sebuah blog, karena widget ini bisa membantu pengunjung yang ingin mencari sesuatu di blog kita dengan mudah.

Dengan itulah, Akan saya bagikan sebuah widget keren dan menarik Dengan style Metro, Widget pada kotak search nya berwarna biru, Begitu, Secara sikat tentang widget ini, Kalau sobat tertarik ingin menggunakannya, Tutorialnya seperti ini : 

• Pertama, Sobat harus login dulu Ke Blogger.com
• Setelah Berada, DI Blogger, Sekarang Menuju Ke ''TATA LETAK''
• Klik 'TAMBAH GADGET''
• Pilih Gadget ''HTML JAVA/SCRIPT''
• Copy kode dibawah ini, di dalam gadget tersebut

<style>

#abt-search-btn {

    background: none repeat scroll 0 0 #359BED;

    border: 0 none;

    border-radius: 0 0 0 0;

    color: #FFFFFF;

    font-weight: 700;

    padding: 10px 20px;

}

#abt-search-box {

    background: none repeat scroll 0 0 #EEEEEE;

    border: 0 none;

    padding: 10px;

    width: 160px;

}

</style>

<form id="searchthis" action="/search" style="display:inline;" method="get">

<input id="abt-search-box" name="q" size="40" type="text" placeholder="  Type! :D "/>

<input id="abt-search-btn" value="Search" type="submit"/>

</form>

• Ganti 160px  ukuran kotak pencarian terserah anda
• Ganti Type! :D Dengan tulisan yang ada di kotak pencarian
• Setelah semua, Di ganti silakan di Simpan Gadget

Demikian artikel ini semoga apa yang saya tulis ini bermanfaat dan mudah anda pratekkan, Silakan beri pendapat tentang artikel di kolom komentar dibawah ini...

Via : All Blogger Tricks

Menu Navigasi CSS Dengan Efek Icon Hover

Menu Navigasi CSS Dengan Efek Icon Hover | Ghiyats Blogs - Salam Untuk Sobat semua... Pada artikel yang akan Saya bagikan kali ini, Kita akan membahas tentang menu navigasi, Menu navigasi ini berbeda sama menu navigasi lainnya, karena menu ini memiiki gambar dengan efek hover

Menu ini dengan warna warni yang cerah, pada setiap nama nama menu, Langsung, saja tutorial tentang artikel ini, Seperti dibawah ini :

• Pertama, Login dulu ke Blogger.com
• Masuk ke menu, Template
• Klik Edit HTML
• Cari Kode ]]><b:skin dengan menggunakan (CTRL + F ) Setdlah ketemu masukan kode dibawah ini, diatas atau sebekum kode di atas

/* The CSS Code */ #btrix-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;} 

#btrix-nav li {float: left;} 

#btrix-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;} 

#btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);} 

#btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;} 

#btrix-nav li a:hover {cursor: pointer;} 

#btrix-nav li a:hover img {top: -85px;} 

#btrix-nav li a:hover .aname {top: 85px;} 

#btrix-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;} 

#btrix-nav li:nth-child(2) a {background: #9bc704;} 

#btrix-nav li:nth-child(3) a {background: #0dc3ff;} 

#btrix-nav li:nth-child(4) a {background: #51a2ec;} 

#btrix-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;} 

• Terus Klik SIMPAN 

CARA PEMASANGANNYA :

• ke menu Tata letak
• Klik Tambah Gadget
• Pilih gadget HTML/JavaScript
• Copy kode dibawah ini , di dalam gadget tersebut

div id="btrix-nav"> 

<li> <a href="#"><span class="aname">Homes</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1gLvGUFXVnVKgKwusxdJp3kCRL_e67K7xb5f7_ZEJI3exDIiTLH4uq5ea17aKlipOw7mo3CScmoLcJcyon4rxo38NnRZDFwbTp2emB7y6hSSpyys8us3wNDH0JfVDgT6DUGKXtWpitP0/s1600/btrix-home.png" /> </a> </li>

<li> <a href="#"> <span class="aname">Download</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKHvurDGnvxa9uwKRH9nLgRzhfJD5vaKq3SDmi5ssCZY_4a5RMlNNbG2jU12svCyDA3mW4m_Cp1npBw7La61O5_ai-hiNUh78Jj4vZJVh6xXVA1_3WRhRdnA8oUeeOehhivsr8kvwA-Uc/s1600/btrix-download.png" /> </a> </li>

<li> <a href="#"> <span class="aname"> MySql</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdPx5NqzcynNxp3SKcHijT15JoaqL2Uz7kf9B1f7H_tsTT9jkBledK0Yg_NY3DlAXY3qj6O7_7_nTI_rFJXr5pJFfdoGhbpPkXlxsLTF1waIWshrWm5IA_CfUdtoQqiALwQ4lUwVj7PDs/s1600/btrix-mysql.png" /> </a> </li>

<li> <a href="#"> <span class="aname"> Html</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_gyE4riXpOG_y4ekJwG_OpXx6ONXHPvU1RjYVyUGh4ij60l8dTCJiX6sAngffcsyQuKm3ojrfiNWkX7IKsZkHJo1XjgnoEvcn2p32-WaXaGNSfZecRydsVOJClL6awtDAack9lNIbUmo/s1600/Btrix-html.png" /> </a> </li>

<li> <a href="#"> <span class="aname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZcHU6P-Qu3IsNQ9GNNIItUAa1-OiuhtYoDogRypjxpUQm-lqBFG74U-zqT4smf602sV-6WTeO2h5xK6pxw05eFjWBlNGcAadYzizI-6P3QfNw4WHMLNzXBA0MVlZBv7PJA0Em58hVOsk/s1600/btrix-contact.png" /> </a> </li> </div>

• Ganti # dengan url yang anda tuju
•  Klik SIMPAN

Demikianlah artikel ini, semoga artikel yang baru saja saya bagikan bermanfaat dan mudah untuk dipratekkan, Silakan Komentarin artikel ini, di kolom komentar dibawah ini, Terima Kasih..

Via : Blogger Trix

Memasang Widget Social Hover Dengan Angka Penghitung

Memasang Widget Social Hover Dengan Angka Penghitung | Ghiyats Blogs - Hai, Pada artikel yang akan saya bagikan kali ini, Saya bagikan sebuah tutorial sosial media dengan efek angka penghitung, widget ini memiliki Efek hover pada setiap sosial medianya, dan dengan angka pada setiap sosial medianya tergantung pengikut di setiap sosial media.

Widget ini memiliki warna yang cerah dan sangat elegan, Kalau memang sobat ingin mempraktekkan widget ini tutorialnya seperti ini

Memasang Widget Social Hover Dengan Angka Penghitung

• Login ke blogger
• Pergi ke ''Tata letak''
• Klik ''Tambah Gadget''
• Pilih '''HTML/JavaScript''
• Masukan kode dibawah ini, didalam gadget tersebut

<!-- Social Widget -->

<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-sliding-social.css"/>

<div class="abt-social">

    <ul>

        <li><a class="abt-box facebook" href="#"><p>15K+</p>Facebook </a></li>

        <li><a class="abt-box twitter" href="#"><p>10K+</p>Twitter</a></li>

        <li><a class="abt-box gplus" href="#"><p>5K+&nbsp;</p>Google+</a></li>

        <li><a class="abt-box pinterest" href="#"><p>4K+&nbsp;</p>Pinterest</a></li>

        <li><a class="abt-box rss" href="#"><p>10K+</p>RSS</a></li>

    </ul>

</div>

<!-- Social Widget -->

• KETERANGAN :
• Ganti # dengan url sosial media anda, ganti juga nomor angka yang berwarna merah.

Demikianlah artikel ini semoga artikel ini bermanfaaat dan mudah untuk di terapkan sama sobat, Silakan kasih pendapat tentang artikel ini di kolom komentar di bawah ini, Terima Kasih...

Via : All Blogger Tricks

Widget Sosial Icons Metro Style Kotak Di Blog

Widget Sosial Icons Metro Style Kotak Di Blog | Hai, Pada artikel yang akan saya bagikan ini, Akan saya share sebuah Widget sosial icons, widget ini memiliki bentuk unik, Tidak seperti Sosial Media lainnya memeliki bentuk mendatar, widget ini memiliki bentuk Kotak.

Widget ini sangat cocok sama Template yang memiliki Warna cerah, dan warna yang Cerah sangat cocok, Widget ini sangat Elegan dan Mudah untuk dipratekkan, Kalau sobat tertarik dengan widget ini dan ingin mengunakannya Tutorilanya seperti ini :

Widget Sosial Icons Metro Style Kotak Di Blog

• Pertama, Sobat harus masuk ke Blogger
• Setelah Berada disana, Klik menu ''Tata Letak''
• Klik ''Tambah Gadget''
• Pilih Gadget ''HTML/JavaScript''
• Mauskan kode dibawah ini, didalamnya

<center>
<ul id="abt-social-icons">
<li class="rss-icon"><a href="http://feeds.feedburner.com/FEED ID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJZVDIPQ5BZovjPw_G_9RYReR1R7LSDZoOAJLT9AuPVdDywmwILwcc3rHWqR2X9Wntbu0dfBdmjNHOC6mlR0CqRoG2kmel_OWtga5SBzvlxctZr1OxBLGWS9Qs4sWcXc3SgAkeg7Nndl8/s1600/rss.png" width="147" /></a></li>
<li class="twitter-icon"><a href="http://www.twitter.com/TWITTER ID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkaKUjQ9m39ePK5lUA7IwyTwvptJCBKWD4AckHBpBtpL41c3RjGlGaq6NKl0vrGQPKc8CJPv2dlTrG-i4w7ogxPk2yubjFQ3I-afWAh6IK7HhvYXFSrXxc7fP0SAES_mZ_DGp-AohWnaY/s1600/twitter.png" width="147" /></a></li>
<li class="facebook-icon"><a href="http://www.facebook.com/PAGE ID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq009tDefYDH-gfpei5PAu3R_uyJ-egMP0UVJ6P2suuz3N_YPCDqGd2EKNIctXzDWiKaoWgC-PaKmEItuxQl-FCqi1piUfg0mXTNqUlE-0GjuVF5x30M0MZZizxZJwJnu3xZjPS0CdhL8/s1600/facebook.png" width="147" /></a></li>
<li class="google-icon"><a href="https://plus.google.com/YOUR ID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZeAMJKisVqQq14wI_NxBAutUCATaOM_inKrn9UNRYPxodfNiJoNeA09y9hUn1Kx7gicP96BKGI1Rc1C0jworyOcgfw1Z7YC3heTuKtid-07M5Cd-EBrwIEnYbtdiZ3pnOBkLGLW1Styo/s1600/google.png" width="147" /></a></li>
</ul>
</center>
<style>
#abt-social-icons li {
float: left;
width: 147px;
height: 147px;
margin: 0 6px 6px 0;
padding: 0 0 0 0;
border-bottom: none;
        list-style: none;
}
#abt-social-icons li a {
line-height: 1px;
display: block;
}

#abt-social-icons li a:hover img {
-webkit-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
}

#abt-social-icons li a span {
display: none !important;
}
</style>

• Ganti FEED ID Dengan url feedburner anda
• Ganti TWITTER ID Dengan url username twitter anda
• Ganti PAGE ID Dengan url username Facebook anda
• Ganti YOUR ID Dengan url profile google+ anda

Demikianalah artikel ini semoga artikel ini bermanfaat dan mudah dipratekkan sama sobat semua, silakan beri pendapat tentang artikel di kolom komentar dibawah ini, Terima Kasih...

Via : All Blogger Tricks

Menu Navigasi Dengan Style Klik Untuk Blog

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>

/* 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;}

CARA SELANJUTNYA :

• 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">&#9650;</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">&#9650;</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">&#9658;</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">&#9650;</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">&#9650;</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">&#9658;</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">&#9650;</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..

Via : Blogger Trix

Keep Blogging

Memasang Menu Dropdown Lavalamp With Css3

Memasang Menu Dropdown Lavalamp With Css3 | Ghiyats Blogs - Hai, Salam Untuk Sobat Semua... Pada artikel ini Saya akan bagikan sebuah Menu dropdown Lavalamp dengan Css3, menu ini dengan Berwarna latar Hitam, Menu ini Elegan dan Keren.

Menu ini Dengan Efek Kalau kursor menuju menunya akan Anda efek petunjuk seperti Gambar Di atas, Langsung saja, Kita akan belajar untuk Membuat dan Mencoba Menu ini Seperti Tutorial Dibawah ini.

Memasang Menu Dropdown Lavalamp With Css3

--------------------------------------------------------------------------------

• Pertama, login ke Blogger
• Terus, Pergi Ke Menu ''Template''
• Klik ''Edit HTML''
• Setelah Itu Cari Kode ]]></b:skin Setelkah Ketemu kodenya, Taruhlah kode dibawah ini diatas kode tadi

#abt-nav,#abt-nav ul {

    list-style: none outside none;

    margin: 0;

    padding: 0;

}

#abt-nav {

    background: url('http://www.script-tutorials.com/demos/249/css/menu_bg.png') no-repeat scroll 0 0 transparent;

    clear: both;

    font-size: 12px;

    height: 58px;

    padding: 0 0 0 9px;

    position: relative;

    width: 100%;

}

#abt-nav ul {

    background-color: #222;

    border:1px solid #222;

    border-radius: 0 5px 5px 5px;

    border-width: 0 1px 1px;

    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);

    left: -9999px;

    overflow: hidden;

    position: absolute;

    top: -9999px;

    z-index: 2;

    -moz-transform: scaleY(0);

    -ms-transform: scaleY(0);

    -o-transform: scaleY(0);

    -webkit-transform: scaleY(0);

    transform: scaleY(0);

    -moz-transform-origin: 0 0;

    -ms-transform-origin: 0 0;

    -o-transform-origin: 0 0;

    -webkit-transform-origin: 0 0;

    transform-origin: 0 0;

    -moz-transition: -moz-transform 0.1s linear;

    -ms-transition: -ms-transform 0.1s linear;

    -o-transition: -o-transform 0.1s linear;

    -webkit-transition: -webkit-transform 0.1s linear;

    transition: transform 0.1s linear;

}

#abt-nav li {

    background: url('http://www.script-tutorials.com/demos/249/css/menu_line.png') no-repeat scroll right 5px transparent;

    float: left;

    position: relative;

}

#abt-nav li a {

    color: #FFFFFF;

    display: block;

    float: left;

    font-weight: normal;

    height: 30px;

    padding: 23px 20px 0;

    position: relative;

    text-decoration: none;

    text-shadow: 1px 1px 1px #000000;

}

#abt-nav li:hover > a {

    color: #00B4FF;

}

#abt-nav li:hover, #abt-nav a:focus, #abt-nav a:hover, #abt-nav a:active {

    background: none repeat scroll 0 0 #121212;

    outline: 0 none;

}

#abt-nav li:hover ul.subs {

    left: 0;

    top: 53px;

    width: 180px;

    -moz-transform: scaleY(1);

    -ms-transform: scaleY(1);

    -o-transform: scaleY(1);

    -webkit-transform: scaleY(1);

    transform: scaleY(1);

}

#abt-nav ul li {

    background: none;

    width: 100%;

}

#abt-nav ul li a {

    float: none;

}

#abt-nav ul li:hover > a {

    background-color: #121212;

    color: #00B4FF;

}

#lavalamp {

    background: url('http://www.script-tutorials.com/demos/249/css/lavalamp.png') no-repeat scroll 0 0 transparent;

    height: 16px;

    left: 13px;

    position: absolute;

    top: 0px;

    width: 64px;

    -moz-transition: all 300ms ease;

    -ms-transition: all 300ms ease;

    -o-transition: all 300ms ease;

    -webkit-transition: all 300ms ease;

    transition: all 300ms ease;

}

#lavalamp:hover {

    -moz-transition-duration: 3000s;

    -ms-transition-duration: 3000s;

    -o-transition-duration: 3000s;

    -webkit-transition-duration: 3000s;

    transition-duration: 3000s;

}

#abt-nav li:nth-of-type(1):hover ~ #lavalamp {

    left: 13px;

}

#abt-nav li:nth-of-type(2):hover ~ #lavalamp {

    left: 90px;

}

#abt-nav li:nth-of-type(3):hover ~ #lavalamp {

    left: 170px;

}

#abt-nav li:nth-of-type(4):hover ~ #lavalamp {

    left: 250px;

}

#abt-nav li:nth-of-type(5):hover ~ #lavalamp {

    left: 330px;

}

#abt-nav li:nth-of-type(6):hover ~ #lavalamp {

    left: 410px;

}

#abt-nav li:nth-of-type(7):hover ~ #lavalamp {

    left: 490px;

}

#abt-nav li:nth-of-type(8):hover ~ #lavalamp {

    left: 565px;

}

• Setelah itu, Klik ''Simpan''

CARA PEMASANGGANNYA :

• Setelah Berada diblogger, Klik Menu ''Tata Letak''
• Klik ''Tambah Gadget''
• Pilih Gadget ''HTML/JavaScript'' Dan Masukan Kode dibawah, didalam Gadget Tadi

<ul id="abt-nav">

    <li><a href="http://gias-alauddin.blogspot.com/">Home</a></li>

    <li><a class="hsubs" href="#">Menu 1</a>

        <ul class="subs">

            <li><a href="#">Submenu 1</a></li>

            <li><a href="#">Submenu 2</a></li>

            <li><a href="#">Submenu 3</a></li>

            <li><a href="#">Submenu 4</a></li>

            <li><a href="#">Submenu 5</a></li>

        </ul>

    </li>

    <li><a class="hsubs" href="#">Menu 2</a>

        <ul class="subs">

            <li><a href="#">Submenu 2-1</a></li>

            <li><a href="#">Submenu 2-2</a></li>

            <li><a href="#">Submenu 2-3</a></li>

            <li><a href="#">Submenu 2-4</a></li>

            <li><a href="#">Submenu 2-5</a></li>

            <li><a href="#">Submenu 2-6</a></li>

            <li><a href="#">Submenu 2-7</a></li>

            <li><a href="#">Submenu 2-8</a></li>

        </ul>

    </li>

    <li><a class="hsubs" href="#">Menu 3</a>

        <ul class="subs">

            <li><a href="#">Submenu 3-1</a></li>

            <li><a href="#">Submenu 3-2</a></li>

            <li><a href="#">Submenu 3-3</a></li>

            <li><a href="#">Submenu 3-4</a></li>

            <li><a href="#">Submenu 3-5</a></li>

        </ul>

    </li>

    <li><a href="#">Menu 4</a></li>

    <li><a href="#">Menu 5</a></li>

    <li><a href="#">Menu 6</a></li>

    <li><a href="http://www.blogger.com/">Back</a></li>

    <div id="lavalamp"></div>

</ul>

• Ganti htp://gias-alauddin.blogspot.com/ Dengan Url Blog anda
• Ganti # Dengan Url yang ingin diTuju 
• Ganti juga Menu 1,2,3,dan Seterusnya, Seterah Sobat
• Setelah Semua diganti, Sekarang ''Klik Simpan''

Sampai Di Penutup, Gimana Mudah, Kan? Kalau Masih belum Mengerti silakan beri Pendapat sobat di Kolom komentar dibawah ini, Semoga artikel ini bermanfaat dan mudah untuk di pratekkan, Terima Kasih..

Via : All Blogger Tricks

Happy Blogging