Menyimpan File Java Script di Hosting Google Codes

Banyak sekali pertanyaan yang masuk, baik melalui komentar ataupun melalui email. Setelah saya pilah-pilah ternyata ada pertanyaan saya dan lumayan banyak yang menanyakan tentang cara menyimpan file .js ke dalam hosting google codes.

Memang terkadang kita sebagai blogger kebingunan untuk menyimpan beberapa file javascript atau .js yang digunakan untuk mempercantik tampilan blog kita. Mau ditaruh di hosting pribadi takutnya sewaktu hosting kita bermasalah atau habis lebih-lebih kita gak kuat membayar hehehehe. Tapi rupanya google mengerti dengan kita selaku pengguna blogger, yang gak punya hosting pribadi untuk menyimpan file-file penting dan dengan google codes kita sudah disediakan oleh google tempat untuk menaruh file pribadi kita terutama file javascript .js Nah bagaimana caranya ?

Jika Anda pengguna Gmail, tentunya akan sangat mudah menggunakannya karena dengan gmail Anda sudah secara otomatis dapat menggunakan layanan hosting dari Google ini. Oke silahkan masuk ke http://code.google.com/hosting/ . Langkah selanjutnya klik new project seperti gambar di bawah ini.

Jika sudah masuk, Anda akan dihadapkan dengan form pengisian. Jangan kaget dan jangan bingung karena ini cukup mudah. Lihat gambar dibawah ini

Sudah terbuka ? oke langkah selanjutnya yang perlu Anda lakukan adalah mengisi  form tersebut dengan keterangan file project yang akan anda simpan,

• Project Name, isikan dengan nama halaman Anda
• Project Summary, isi dengan judul proyek Anda
• Project Description, berikan deskripsi/keterangan sesuka Anda
• Version Control System, pilih Mercurial
• Source Code Licenses, pilih GNU General Public License v3
• Centang Use a Separate Content License dan pilih salah satu, setelah itu, click: create project.

Sudah,mudah bukan ? kalau sudah lanjut ke langkah selanjutnya, yakni meng-upload file yang ingin Anda simpan, perhatikan gambar dibawah ini

Anda harus Click di tab : Download>New Download kemudian ;

• isi: summary, dengan nama file javascript anda ;
• browse file dari computer anda ;
• Submit file.

Kalau sudah di submit, berarti file Anda terlah tersimpan di hosting google codes. Dan daftar file yang telah Anda upload / simpan akan terlihat seperti gambar dibawah ini.

Lalau jika Anda ingin menggunakan dan memanggil file yang telah Anda simpan, caranya dengan meng Klik salah satu file yang telah Anda submit. Kalau sudah akan terlihat seperti gambar dibawah ini

Dan copy link file Anda yang ingin Anda gunakan dengan cara klik kanan pada nama file, lalu klik copy link location dan pastekan…

Oke mudah dan cepat bukan ? 

Cara Membuat Menu Drop Down Horizontal Dengan JavaScript

Pada postingan ini, saya akan memaparkan bagaimana membuat menu drop down horizontal pada blogspot. Menu drop down merupakan menu yang mempunyai sub-sub menu didalamnya. Prisipnya adalah ketika pointer menyorot sebuah main menu, maka akan muncul sub menu dari main menu tersebut. Kode-kode ini saya dapat dari www.dynamicdrive.com. Klik disini untuk melihat contohnya.

Bagaimana cara menambahkan menu drop down pada blog kita? Berikut langkah-langkahnya:

1. Silahkan login terlebih dahulu pada akun Blogspot pembaca
2. Klik link menu Tata Letak dan pilih sub menu Edit HTML dan beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
   
3. Jangan lupa untuk membackup terlebih dahulu template pembaca agar jika terjadi kesalahan bisa dikembalikan lagi pada kondisi semula. Klik link Download Template Lengkap
4. Copy paste kode berikut di atas tag </head>
   <script type="text/javascript"
src="http://nestoriko.googlepages.com/chrome.js">
</script>
   
5. Cari kode ]]></b:skin> kemudian tambahkan struktur CSS dibawah ini dengan mengcopy paste diatas kode ]]></b:skin>
   
.chromestyle{
width: 100%;
font-weight: bold;
}

.chromestyle:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(http://nestoriko.googlepages.com/chromebg2.gif) center center repeat-x;
padding: 4px 0;
margin: 0;
text-align: center;
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #B5E2FE;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background: url(http://nestoriko.googlepages.com/chromebg2-over.gif) center center repeat-x;
}

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #B5E2FE;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA
,direction=135,strength=4);
}

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #B5E2FE;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

.dropmenudiv a:hover{
background-color: #EBF7FF;
}
   
6. Cari struktur seperti dibawah ini pada template pembaca
   <b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
   
7. Jika sudah ketemu, copy paste struktur berikut ini tepat dibawah struktur yang Anda temukan pada langkah 6
   <div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://tutorial-website.blogspot.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Menu1</a></li>
<li><a href="#" rel="dropmenu2">Menu2</a></li>
</ul>
</div>

<!--menu drop down pertama -->
<div id="dropmenu1" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>


<!--menu drop down kedua -->
<div id="dropmenu2" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
8. Coba perhatikan tulisan yang berwarna merah struktur tersebut. Tulisan "dropmenu1" dan "dropmenu2" tersebut merupakan atribut rel dari parent menu drop down yang kita buat. Pada bagian tersebut terlihat bahwa terdapat 2 menu drop down, yaitu "Menu1" dan "Menu2" (warna biru). Jika pembaca ingin menambah menu drop down lagi misalnya "Menu3", maka buatlah juga atribut rel untuk "Menu3" tersebut misalnya "dropmenu3", setelah itu tambahkan struktur menu drop down untuk "Menu3" setelah menu drop down kedua". Sehingga strukturnya akan menjadi:
   <div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://tutorial-website.blogspot.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Menu1</a></li>
<li><a href="#" rel="dropmenu2">Menu2</a></li>
<li><a href="#" rel="dropmenu3">Menu3</a></li>
</ul>
</div>

<!--menu drop down pertama -->
<div id="dropmenu1" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>


<!--menu drop down kedua -->
<div id="dropmenu2" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>

<!--menu drop down ketiga-->
<div id="dropmenu3" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
9. Perhatikan bahwa nama atribut ID untuk menu drop down ketiga harus sama dengan nama atribut rel untuk "Menu3" yaitu "dropmenu3". Begitu pula jika pembaca ingin menambah menu drop down keempat, kelima, dan seterusnya.
10. "URL sub menu1" merupakan URL halaman yang akan dituju jika "Sub Menu1" diklik, dan seterusnya. Silahkan pembaca ganti nama menu, sub menu, dan juga URL dari menu drop down tersebut.
11. Bagi pembaca yang membuat web dengan menggunakan menggunakan software web design seperti dreamweaver, langkahnya hampir sama dengan yang diatas. Hanya saja struktur yang ada pada langkah 7 diletakkan pada bagian halaman web dimana pembaca ingin menambahkan menu drop down tersebut.
    

Selamat mencoba !!!

Membuat Multi Level Drop-Down Menu

Dengan di temaninya sebungkus rokok dan segelas kopy plus martabak akhirnya Alhamdulillah kang fatur bisa jalan jalan di dunia tidaknyata alias Internet. Dan Alhamdulillah saya mendapat oleh-oleh dari salah seorang hali bloger orang Arab Saudi untuk dibagikan kepada para sobat semua.

Oleh-oleh yang saya dapatkan dan yang saya akan bagikan pada malam ini yaitu tentang Membuat Multi Level Drop-Down Menu Dengan CSS dan JQuery. Mungkin para sobat juga sudah banyak mendengar tentang masalah ini, dan sudah banyak para ahli yang mempostingkannya, namun saya hanya sekedar ingin berbagi sama para sobat yang masih awam seperti saya dan mudah mudahan postingan kali ini dapat bermanfaat.

Baik, untuk para pemula semuanya kalau belum tahu apa itu Multi Level drops-Down Menu di bawah ini contoh gambarnya :




Gimana tertarik?? Nah berikut langkah-langkah membuat multi level drop-down menu dengan JQuery.


1. Seperti biasa Log In pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML


2. Tambahkan script JQuery berikut sebelum tag </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

catatan: bagi sobat yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah kedua abaikan saja


3. Tambahkan juga script berikut setelah script JQuery yang tadi

<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->


<script type="text/javascript" src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/Dropdownmenuwithjquery.js"></script>

4. Selanjutnya tambahkan kode CSS berikut diatas tag ]]></b:skin>:

/* jqueryslidemenu
----------------------------------------------- */

.jqueryslidemenu{
font: bold 12px Verdana;
background: #ffffff;
width: 100%;
height: 250px;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

5. Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://amatullah83.blogspot.com/">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://amatullah83.blogspot.com/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

6. Simpan template maka Hasilnya seperti pada gambar di bawah ini :



Untuk Sobat yang sudah hali dengan CSS silahkan edit sesuai selera sobat untuk kode warna silahkan klik disini.

Sekian dulu dari saya, insya Allah postingan selanjutnya menyusul, mau nerusin ngopy dulu takut keburu dingin.

Semoga bermanfaat! Thanks to Dinamic Drive

Jquery Multi Level Menu Horizontal

Masih membahas tentang cara membuat menu horizontal atau menu navigasi di blog kita, dan dulu sudah pernah saya memposting tentang cara membuat menu horizontal dan menu vertical di blog ini, namun kali ini saya akan menulis tutorial bagaimana membuat menu horizontal yang lebih canggih dibandingkan yang kemaren yaitu membuat multi level menu atau menu bertingkat.

Okkey langsung saja ke cara pembuatanya ya


langkah pertama yaitu masuk pada bagian Design lalu Edit HTML

Masukkan code dibawah ini dibawah code <head>

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/anasprod/jqueryslidemenu.js' type='text/javascript'/>

Lalu masukkan CSS dibawah ini diatas code ]]></b:skin>

.jqueryslidemenu{
font: bold 13px Verdana;
background: #800000;
width:100%;
float:left
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #800000; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background:#B30000; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
background:#B30000;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
position:relative;
}

Code diatas adalah style dari menu Anda, silahkan edit sesuai kebutuhan Anda.

Nah kalau sudah kita menuju kebawah untuk mencari code seperti dibawah ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
</b:section>
</div>

Perhatikan saja code yang berwarna merah karena code yang berwarna hitam diatas berbeda-beda setiap template

lalu taruh code dibawah ini dibawah code yang diatas tadi

<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>

Kalau sudah SAVE

Pekerjaan kita belum selesai, langkah selanjutnya yaitu menuju menu "Page Elements"



Terlihat pada "Page Elements" muncul tempat gadget baru, lalu klik aja "Add a gadget" dan pilih HTML/JavaScript dan masukkan code dibawah ini.

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://sangmerak.blogspot.com">SangMerak</a></li>
<li><a href="#">Kategori</a>
<ul>
<li><a href="#">Sub Kategori 1</a></li>
<li><a href="#">Sub Kategori 2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://tutorial-jitu.blogspot.com">Tutorial Blog</a></li>
</ul>
<br style="clear: left" />
</div>

Nah code diatas adalah code dari widgetnya silahkan di edit sesuai kebutuhan Anda.

Kalau sudah silahkan di SAVE deh.

Nah semoga tutorial ini bisa bermanfaat bagi Anda dan silahkan tanyakan pada saya lewat komentar jika ada pertanyaan. Miss u all. bye²

Menu 3 Level dengan CSS & JQuery

Tidak dapat disangkal lagi bahwa menu dengan sub submenu (3 level) merupakan komponen yang cukup sering dipakai dalam beberapa website, terutama jika website tersebut memiliki struktur navigasi halaman yang  ‘beranak bercucu’. Okay langsung saja, disini ada beberapa bumbu yang saya gunakan dalam pembuatan menu 3 level ini, yaitu:

• CSS 2.0
• JQuery
• XHTML

Dengan struktur file sebagai berikut:

• /menu.html
• /menu.css
• /script.js
• /jquery-1.4.2.min.js

Browser compatibility: IE 6 (masih perlu di-cross check lagi), IE 7, IE 8, Firefox 2+, Chrome 4+, Opera 9+, Safari 4+
Langkah 1: Buat struktur menu berikut pada file menu.html

<ul id="nav">
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a>
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a>
           <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Clients</a></li>
              <li><a href="#">Contact Us</a></li>
           </ul>
         </li>
         <li><a href="#">Clients</a></li>
         <li><a href="#">Contact Us</a></li>
      </ul>
   </li>
   <li><a href="#">Clients</a>
     <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Clients</a></li>
        <li><a href="#">Contact Us</a></li>
     </ul>
   </li>
   <li><a href="#">Contact Us</a></li>
</ul>

Langkah 2: Buat style untuk mengatur tampilan pada langkah 1 (menu.css)

body{
font-family: Helvetica, arial, sans-serif;
}

#nav{
background: #e5e5e5;
float:left;
margin: 0; padding: 0;
}

#nav li a, #nav li{
float: left
}

#nav li{
list-style: none;
position: relative
}

#nav li a{
padding: 0.5em 2em;
text-decoration: none;
background: #1764bf;
color: white;
border-right: 1px solid #114b8f;
border-left: 1px solid #1764bf;
border-bottom: 1px solid #4173af;
border-top: 1px solid #274f7f;
}

#nav li a:hover{
background: #4d88cf;
}

/*submenu*/
#nav li ul{
display: none;
position: absolute;
left: 0;
top:100%;
padding:0;margin:0;
}

#nav li:hover > ul{
display: block;/*memunculkan submenu ketika a pada menu level 1 di hovers*/
}

#nav li ul li, #nav li ul li a{
float: none;
}

#nav li ul li{
_display:inline;/* dukungan untuk ie6 */
}

#nav li ul li a{
width: 150px;
display: block;
}

/*sub submenu*/

#nav li ul li ul{
display: none;
}

#nav li ul li:hover ul{
left:100%;
top:0;
}

Untuk font, warna, dan ukuran dapat disesuaikan dengan selera Anda masing-masing.
Pada langkah 2 ini sebetulnya menu 3 level sudah bisa berjalan dengan baik, namun jika Anda ingin mempercantiknya dengan efek slidedown, silakan lanjutkan ke langkah berikutnya.
Langkah 3: Membuat efek slidedown dengan Javascript (script.js)

var subsubmenu = function (){
 this.navLi=$('#nav > li').children('ul').css('display', 'none').end();
 this.init();
};

subsubmenu.prototype={
 init : function(){
  this.setMenu();
 },

 //Memberikan efek slide

 setMenu: function(){

  this.navLi.hover(function(){
  //mouseover
   $(this).find('>ul').stop(true,true).slideDown(250);
  }, function(){
  //mouseout
   $(this).find('>ul').stop(true,true).fadeOut(200);
  });
 }

}

new subsubmenu();

Framework yang saya gunakan ialah JQuery versi 1.4.2, tidak menutup kemungkinan dapat berjalan dengan baik pula pada JQuery versi lebih lama. Karena perintah yang digunakan ialah perintah dasar.
Langkah 4: Nyalakan rokok, aduk kopi, dan download contohnya agar lebih jelas
Jika rekan-rekan sekalian menemukan bug/bugfix silakan tulis dalam komentar, bagaimana pun juga saya hanyalah seorang nubie yang tak luput dari bug (terutama Internet Explorer).



Untuk membuat menjadi vertikal caranya cukup sederhana dengan mengubah/menambah sedikit baris style pada selektor terkait dibawah ini#nav li ul li, #nav li ul li a{
float: none;
}
#nav li a{
display:block;
}
#nav li ul{
left:100%;
top:0;
}
hanya perlu dirapikan sedikit

MENGATUR DAFTAR ISI

Untuk mengatur daftar isi seperti text dan link supaya lebih rapih di lihatnya.
kita akan menggunakan kode OL(ordered list) UL(unordered list) dan LI(list item).
Contoh kita akan mengatur text atau linknya dengan menggunakan UL dan LI .
Contoh:<ul><li>Di sini isi text dan linknya</li><li>Di sini isi text dan linknya</li></ul>

Kode di atas akan menghasilkan daftar isi dengan bundaran seperti ini:

• Di sini isi text dan linknya
• Di sini isi text dan linknya

Nah keterangan di atas seperti ini: <ul> adalah bentuk type bundarannya, dan <li> adalah yang mengatur barisannya.. Nah untuk Bentuk <ul> itu bermacam macam jenisnya, ada SQUARE, CIRCLE dan DISC.. yang bundar, yang kotak dan yang kotak kosong.

Contoh untuk UL yang bentuk SQUARE.
Kodenya:<ul type="square"><li>Di sini isi text dan linknya</li><li>Di sini isi text dan linknya</li></ul>
Nah kode di atas akan tampil UL berbentuk kotak seperti ini:

• Di sini isi text dan linknya
• Di sini isi text dan linknya

Untuk UL yang bentuk CIRCLE.
Kodenya:<ul type="circle"><li>Di sini isi text dan linknya</li><li>Di sini isi text dan linknya</li></ul>
Nah kode ul yang ini akan menghasilkan kotak kosong seperti ini:

• Di sini isi text dan linknya
• Di sini isi text dan linknya

Dan untuk UL yang bentuk DISC itu sama dengan bentuk UL yang pertama di atas akan menghasilkan UL bundar.

---

Nah sekarang kita akan mengatur daftar isinya dengan menggunakan OL(ordered list) untuk pengganti UL(unordered list), UL itu bentuknya bundar, kotak dan kotak kosong. Tapi kalau OL itu bentuk huruf dan angka.
Contoh untuk menggunakan OL berbentuk huruf: <ol type="A"><li>Di sini isi text dan linknya</li><li>Di sini isi text dan linknya</li><li>Di sini isi text dan linknya</li></ol>
Kode di atas akan tampil dengan barisan urutan huruf seperti ini:

1. Di sini isi text dan linknya
2. Di sini isi text dan linknya
3. Di sini isi text dan linknya

Untuk OL yang berbentuk angka Kodenya: <ol type="1"><li>Di sini isi text dan linknya</li><li>Di sini isi text dan linknya</li><li>Di sini isi text dan linknya</li></ol>
Nah kode OL yang ini akan tampil dengan urutan angka seperti ini:

1. Di sini isi text dan linknya
2. Di sini isi text dan linknya
3. Di sini isi text dan linknya

Nah jadi fungsi OL itu untuk mempermudah kita menulis daftar urutan huruf dan angka. kita tidak harus susah susah menulis huruf A sampai Z dan menulis 1 sampai 100..
Dengan menggunakan kode OL kita cukup mengetikan huruf A dan nanti akan otomatis keluar huruf B,C,D dan seterusnya..
cara menulisnya dengan format seperti ini:
<ol type="A">
Dan untuk format angka tinggal di rubah hurufnya menjadi angka, contohnya seperti ini:
<ol type="1">
cukup mudahkan membuat daftar urutan angka dan huruf.?

Nah dan untuk mengisi text atau linknya kita harus menambahkan kode <li>
Contoh:
<ol type="1"><li>di sini untuk meletakan textnya</li> dan seterusnya, yang penting untuk mengisi textnya harus di awali kode <li> dan untuk penutupnya harus di ahiri kode </li> . Nah kalau sudah selesai menulis textnya nanti harus di akhiri dengan kode </ol>
selesai deh...

paham kan?.
ya sudah selamat berkreasi sendiri yah..

Membuat Membuka Link Di Tab Baru

   Pernah ga anda klik link dan munculnya di tab baru?  Mau membuatnya juga? ikuti langkah di bawah ini :

*Biasanya pada link kodenya akan seperti ini :

           <a href='http://bloganda.com'>Blog Anda</a>

*Untuk membuatnya terbuka di tab baru ganti dengan :

<a href="#" target="_blank" rel="dofollow" onclick="window.open('http://bloganda.com'); return false;">Blog Anda</a>

Cat : Ganti teks yang berwarna merah dengan Alamat Link yang  inginkan
        Ganti teks yang berwarna Biru dengan kata yang akan muncul mewakili Alamat Link

Selamat Mencoba :D

CSS Specificity

CSS Specificity menentukan seberapa spesifik kah sebuah aturan pada CSS. Jika ada 2 atau lebih aturan pada sebuah elemen yang sama, maka aturan paling spesifiklah yang akan dipakai oleh browser.

Nilai specificity pada CSS bisa dihitung sbb:

• Element Selector, yaitu selector yang berupa tag-tag html, contohnya div, ul, li, a
  nilai specificity = 1 (0,0,1)
• Class Selector, yaitu selector yang diawali dengan tanda titik, contohnya .menu untuk elemen dengan class="menu"
  nilai specificity = 10 (0,1,0)
• ID Selector, yaitu selector yang diawali dengan tanda #, contohnya #sidebar untuk elemen dengan id="sidebar"
  nilai specificity = 100 (1,0,0)

Contoh 1:

1 2	a { color: red; } a { color: green; }

Kedua selector tersebut memiliki specificity yang sama, karena itu aturan yang akan dipakai adalah yang terakhir (paling bawah), sehingga elemen <a> (link) akan berwarna hijau.
Contoh 2:

1 2 3 4 5

#sidebar ul.menu li a { color: red; } ul.menu li a { color: purple; } ul li a { color: green; } li a { color: yellow; } a { color: teal; }

Kode di atas adalah beberapa aturan css untuk sebuah elemen link (<a>). Kode htmlnya sbb:

1 2 3 4 5 6 7 8 9

<div id="sidebar"> <h2>Menu</h2> <ul class="menu"> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="guestbook.html" style="color:silver">Guestbook</a></li> </ul> </div>

Perhitungan specificity nya:

• #sidebar ul.menu li a
  memiliki specificity = 113
  (1 ID Selector + 1 Class Selector + 3 Element Selector)
• ul.menu li a
  memiliki specificity = 13
  (1 Class Selector + 3 Element Selector)
• ul li a
  memiliki specificity = 3
  (3 Element Selector)
• li a
  memiliki specificity = 2
  (2 Element Selector)
• a
  memiliki specificity = 1
  (1 Element Selector)

Dengan melihat perhitungan specificity di atas, maka kita bisa mengetahui bahwa paling spesifik adalah aturan yang pertama. Jadi link akan berwarna merah.
Selain menggunakan selector, untuk menerapkan css kita juga bisa mendefinisikan inline style, yaitu dituliskan langsung pada tag html menggunakan attribute style, contohnya <a style="color:blue">teks</a>.
Pengaturan menggunakan inline style akan mengalahkan ketiga jenis selector di atas. Jadi pada contoh tersebut, link guestbook akan berwarna silver.
Referensi:
CSS: Specificity Wars

Artikel tersebut akan memberikan pemahaman tentang CSS Specificity menggunakan analogi Star Wars.
Namun bagi yang tidak mengerti Star Wars, mungkin artikel tersebut bisa memudahkan untuk memahami Star Wars melalui CSS

Menambah Menu Horizontal Multy Drop Down

Tips Blog :

Sudah lama ngak bahas soal tips tips blog. kali ini mencoba membahas satu menu. lumayan suka juga aku sama menu yg satu ini. menu horizontal multy drop down, yach begitu lah blogger sering menyebutnya. sedikit share nih buat teman-teman pendatang baru yang pingin nyoba menu ini.

pertama sudah pasti pergilah ke blogger melalui account kamu, kalau sudah login klik layout/element halaman --->> EDIT HTML . lalu cari kode ini :

]]></b:skin>

dan tambahkan kode berikut diatasnya

#NavbarMenu {
background: #228B22 url(http://i28.tinypic.com/2lk5ukm.jpg) repeat-x top left ;
width: 100%;
height: 35px;
color: #FFF;
margin: 0;
padding: 0;
font: bold 12px Arial, Tahoma, Verdana;
}
#NavbarMenuleft {
width: 865px; /* lebar menu sebelah kiri */

float: left;
margin: 0;
padding: 0;
}
#NavbarMenuright {
width: 340px; /* lebar menu sebelah kanan */
font-size: 11px;
float: right;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
border-right: 1px solid #FFF;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF;
display: block;
text-transform: lowercase;
margin: 0;
padding: 9px 15px 8px;
font: normal 16px Georgia, Times New Roman;
}
#nav li a:hover, #nav li a:active {
background: #808000 ;
color: #FFF;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background:#9ACD32 url();
width: 150px;
color: #FFF;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
font: normal 14px Georgia, Times New Roman;
}
#nav li li a:hover, #nav li li a:active {
background: #008000;
color: #FFF;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}

catatan :

tulisan berwarna biru adalah penjelasan warna dari setiap menu , warna bisa kamu ganti biar sesuai dengan blog kamu, kode warna bisa dilihat di sini

kalau tulisan hitam adalah penjelasan dari lebar menu kanan dan kiri, lebar dari ke dua menu tidak boleh lebih dari lebar outter-wrapper. usahakan sama atau kurang dikit, kalau sudah save template dahulu.


diatas adalah kode CSSnya, sekarang peletakan kode htmlnya, carilah dahulu kode

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
</b:section>
</div>

kalau sudah ketemu letakan kode barikut diatasnya :

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='http://namablogmu.blogspot.com/'>Home</a></li>
<li><a href='#'>tambah menu</a>
<ul>
<li><a href='#'>tambah menu</a>
<ul>
<li><a href='#'>tambah menu</a></li>
</ul>
</li>
<li><a href='#'>tambah menu</a></li>
</ul>
</li>
<li><a href='#'>tambah menu</a></li>
<li><a href='#'>tambah menu</a></li>
<li><a href='#'>tambah menu</a></li>
<li><a href='#'>tambah menu</a></li>

<li><a href='#>tambah menu</a></li>
<li><a href='#'>tambah menu</a></li>
<li><a href='#'>tambah menu</a></li>
</ul>
</div>
</div>

catatan, untuk menambah drop baru lihat kode2 berwarna merah dan itu adalah panduannya, ikuti jika ingin menambah drop baru

tulisan # adalah lokasi link untuk menu baru.

menu ini juga bisa di letakan diatas kode :

<div id='header-wrapper'>

sama-sama baiknya.

catatan: jika template ngak bisa disave jangan sungkan bertanya, karna menu ini memang sedikit susah ditangani bila sudah pake bercabang-cabang. jadi mesti ada kesabaran mengolahnya.

Cara Membuat Menu Horizontal Bercabang Pada Blogger

Kali ini saya membahas tentang cara membuat menu horizontal pada blogger dan kalau rekan-rekan cari di google search mungkin sudah banyak artikel tentang menu horizontal ini.
Tapi saya membahas ini mungkin rekan-rekan ada yang belum tahu caranya membuat menu horizontal bercabang ini, mari kita ikuti cara membuatnya.

Berikut ini gambar contoh dari menu horizontal bercabang

Cara Membuat menu Horizontal Bercabang

1.     Login ke account blogger anda
Pilih Rancangan -> Tataletak -> Edit HTML

cari kode berikut:

]]></b:skin>


2.     Di bagian atas kode tersebut masukkan kode berikut

/* Navbar */#menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(http://i36.tinypic.com/28lgntl.jpg) repeat-x;opacity: 0.99; filter: alpha(opacity: 98);}#menu-cari{float:right; display:inline; padding:3px 5px 0 0;}#menu ul{padding:0; margin:0;}#menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}#menu ul li a{float:left; padding-left:15px; display:block; color:#ffffff; text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; background:url(http://i36.tinypic.com/28lgntl.jpg) 0px -30px no-repeat; line-height:30px; padding-right:15px;}#menu ul li a:hover{background-position:0px -60px; color:#ffffff;}#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#ffffff;}#menu ul li ul {display:none;}#menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}#menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}#menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:1px dotted #fff; background:black; width:175px;}#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#7C01A4;}.status-msg-wrap{display:none;}

4.     Klik tombol "Simpan Template"

5.     Buka halaman  "Elemen Halaman"

6.     Pada Elemen header , klik " Tambah Gadget"

7.     Pada kotak dialog html/javascrpit masukkan kode html berikut:

<div id='menu'><ul><li><a class='active' href='/'> Home</a></li><li><a href='#'>Menu 1</a></li><li><a href='#'>Menu 2</a><ul><li><a href='#'>Menu 2.1</a></li><li><a href='#'>Menu 2.2</a></li></ul></li><li><a href='#'>Menu 3</a><ul><li><a href='#'>Menu 3.1</a></li><li><a href='#'>Menu 3.2</a></li><li><a href='#'>Menu 3.3</a></li><li><a href='#'>Menu 3.4</a></li></ul></li><li><a href='#'>Menu 4</a></li><ul></ul></ul></div>

Lihat Demo

catatan:
Pada bagian : href="#" , tanda # anda ganti dengan url tujuan anda
misalnya:
http://trik-blogger-andreas.blogspot.com
atau
http://trik-blogger-andreas.blogspot.com/2010/07/cara-memasang-signature-pada-setiap.html
teks setelah tanda # seperti Home, Menu 1, dst bisa anda ganti dengan teks sesuai dengan keinginan anda.

9.     Simpan perubahan yang anda buat, jika tidak ada masalah maka akan tampil menu navigasinya

Selamat mencoba semoga berhasil.

Membuat Menu tombol menggunakan CSS3

Bagaimana cara membuat Menu tombol dengan CSS3 dengan efek berkilau..... untuk caranya yaitu sebagai berikut:
Hasil tampilannya seperti ini:

1. Login bloggger
2. Masuk ke rancangan lalu masuk ke menu edit html
3. Cari kode ]]></b:skin> (ctrl+F untuk mempermudah pencarian)dan taruh kode di bawah ini sebelum kode tersebut.

#bgmenu {
width:100%;
height:30px;
}
#menu a {
font:12px verdana;
font-weight:bold;
color:#000;
text-shadow:0px 2px 3px #fff;
text-decoration:none;
}
#menu a:hover {
color:#fff;
text-shadow:0px 2px 3px #000;
text-decoration:none;
}
#menu li {
margin-right:10px;
float: left;
list-style: none;
}
.abu{
text-align:center;
background:-moz-linear-gradient(top,  #999 , #666 );
width:80px;
padding:5px;
margin-bottom:10px;
-moz-border-radius:50px;
-moz-box-shadow:0px 5px 8px grey;
border:1px solid #0F0;
}
.kilau {
background:#fff ;
height:5px;
margin:-5px 0px 15px 0px;
padding:5px 5px 5px 5px;
color:000;
-moz-border-radius:20px;
-moz-box-shadow:0px 2px 6px #999;
opacity:0.6;
}
.text {
margin-top:-25px;
color:#000;
font:14px trebuchet ms;
font-weight:bold;
opacity:0.9;
}

.
Untuk selanjutnya Kemudian cari kode </head> , dan taruh kode di bawah ini setelah kode tersebut

<div id="bgmenu">
<ul id="menu">
<li><div class="abu"><div class="kilau"></div><div class="text">
<a href="#">Menu 1</a></div></div></li>
<li><div class="abu"><div class="kilau"></div><div class="text">
<a href="#">Menu 2</a></div></div></li>
<li><div class="abu"><div class="kilau"></div><div class="text">
<a href="#">Menu 3</a></div></div></li>
<li><div class="abu"><div class="kilau"></div><div class="text">
<a href="#">Menu 4</a></div></div></li>
<li><div class="abu"><div class="kilau"></div><div class="text">
<a href="#">Menu 5</a></div></div></li>
</ul></div>

yang berwarna biru (#, menu 1)silahkan kawa-kawan isi dengan alamat situs yang diinginkan dan juga Nama  menunya...........

Selamat Mencoba.....

Membuat navigasi menu pada blog dengan CSS Menu Generator

Mungkin banyak dari anda yang sudah tahu cara membuat menu navigasi pada Blog, maupun cara mengcustomisasinya. Namun pada postingan kali ini saya akan memberikan tips ringan yang tentunya dapat anda aplikasikan pada blog anda yaitu bagaimana cara membuat menu navigasi pada blog namun dengan bantuan aplikasi sederhana bernama CSS Menu Generator. Dari namanya kita tentu tahu bahwa nantinya kode yang dihasilkan berupa CSS Code. Langsung saja ke TKP :

* MEMBUAT MENU *

1. Download aplikasinya di http://www.wonderwebware.com/, install seperti biasa.

2. Jalankan Aplikasinya dan tampilan yang didapat adalah seperti ini :



Keterangan :
a. Kotak Merah adalah tombol untuk membuat menu baru (Menu Utama)
b. Kotak Biru adalah tempat untuk membuat Sub-Menu

3. Sekarang buatlah menu dengan menekan tombol New



4. Pada pilihan Item isi dengan nama menu, lalu isikan Link yang ingin dituju. Isikan hingga sesuai kebutuhan anda.



5. Setelah semua terisi, pilih tampilan menu yang diinginkan dengan memindahkan Tab kesamping menu.

a. Horizontal Menu : Menu dengan arah mendatar

Keterangan : Anda dapat melakukan perubahan pada Menu Settings (KOTAK MERAH) , banyak pilihan yang dapat anda Cuztomise mulai dari Perwarnaan, Jenis Font yang digunakan hingga ukuran font.

b. Vertical Menu : Menu dengan arah tegak



c. Combo –Box Menu : Menu Dropdown



d. Pull-Down Menu : Hampir sama dengan Horizontal menu tetapi mempunyai fungsi Dropdown menu



* MEMBUAT SUB – MENU *

Sama halnya jika kita ingin membuat Sub – Menu, yang harus kita dahulukan adalah penempatan menu akan ditaruh di Sub mana menu yang akan kita buat ??? Sebagai Contoh : Saya akan membuat Sub-Menu pada Menu SOFTWARE.

1. Klik pada menu Software lalu,Pilih tombol New Sub-Item

2. Isikan Nama Sub-Menu dan Link yang dituju



3. Buat lagi menu tersebut sesuai kebutuhan



4. Apabila sudah cukup arahkan tab anda pada Pull - Down menu. Tampilan yang didapat seperti gambar dibawah :



Catatan : ini hanya berlaku pada Pull – Down Menu saja

* MENERAPKAN PADA BLOG *

Setelah berhasil membuat menu saatnya untuk memasangnya pada Blog kita. Yang patut anda lakukan hanyalah copy paste kode CSS dari menu tersebut kedalam template blog kalian.

1. Buka tab HTML/CSS Code

2. Ada dua pilihan kode pada menu tersebut



Kotak Merah : adalah kode CSS menu yang ditempatkan diatas kode ]]></b:skin>
Kotak Biru : adalah kode HTML navigasi menu taruh diatas kode

<div id='NavbarMenu'>

atau

<div id="content-wrapper">

Tergantung template anda.Cukup mudah bukan anda dapat melakukan penyesuaian dengan template anda.

Kode HTML Untuk Membuat Kotak Dalam Posting

Kode ini aku dapatkan dari halaman FAQ situs FLAG counter ketika aku mengkopi paste contoh kodenya. Sepertinya kode ini bisa berguna banget untuk mempercantik penampilan posting ya. Misalkan dalam suatu posting ada suatu kalimat yang ingin ditaruh dalam kotak seperti dibawah ini:

Contoh tulisan yang diletakkan dalam kotak.

Maka cara membuatnya adalah sebagai berikut: pada mode Edit HTML, letakan tulisan yang ingin diberi kotak diantara baris kode yang berwarna biru seperti contoh dibawah ini :

<p style="border-right: #6c7a7d 1px inset; padding-right: 30px; border-top: #6c7a7d 1px inset; padding-left: 30px; margin-left: 20px; border-left: #6c7a7d 1px inset; margin-right: 70px; border-bottom: #6c7a7d 1px inset"><font color="#ff0000">Contoh tulisan yang diletakkan dalam kotak.</font></p>

*****
Catatan:

Pada waktu kode diletakan pada Edit HTML Posting blogspot, kode akan mengalami perubahan sedikit. Hal itu tidak jadi masalah, kodenya tetap sama hanya saja ditulis dalam bentuk yang sedikit berbeda.

border-right = garis pinggir kotak sebelah kanan
border-left = garis pinggir kotak sebelah kiri
border-top = garis pinggir kotak sebelah atas
border-bottom = garis pinggir kotak sebelah bawah
#6c7a7d; #ff0000 = kode warna, rubah sesuai keinginan
1px inset = ketebalan garis pinggir kotak, rubah sesuai keinginan
padding-right = jarak tulisan dengan garis pinggir kotak sebelah kanan
padding-left = jarak tulisan dengan garis pinggir kotak sebelah kiri
margin-right = jarak kotak dengan pinggir posting sebelah kanan
margin-left = jarak kotak dengan pinggir posting sebelah kiri
20px; 30px; 70px = satuan jarak, rubah sesuai keinginan
font color = warna teks, hapuskan kode ini jika ingin teksnya berwarna seperti warna teks pada posting

Selamat mencoba.

MEMBUAT SUB SUB MENU DI BLOGGER

Postingan kali ini bercerita tentang sub menu atau dropdown menu dengan menggunakan CSS3, dari beberapa rekan yang baru saat ini bisa saya jawab.
Sebelumnya saya mohon maaf, dikarenakan banyaknya email dan pertanyaan yang masuk, yang mengakibatkan ada beberapa pertanyaan yang belum terjawab, mohon maklum adanya.


Saya akan coba buat dari dasar HTML sampai Customize sub menu-nya.
1. Hal pertama yang harus dilakukan adalah membuat kode HTML seperti dibawah ini.

<ul id="menuq">
    <li><a href="http;//www.karsono.co.cc">Home</a></li>
    <li><a href="#">About Me &gt;</a>
        <ul>
            <li><a href="http://id-id.facebook.com/people/karsono-sajah/1366190217" target="_blank">Facebook</a></li>   
            <li><a href="#">Profile &gt;</a>
    <ul>
                    <li><a href="http://id.linkedin.com/in/karsono" target="_blank">Linkedin</a></li>
                    <li><a href="http://www.visualcv.com/p1rx4tg" target="_blank">VisualCV</a></li>
               </ul>
   </li>
            <li><a href="http://twitter.com/karsono" target="_blank">Twitter</a></li>
        </ul>
    </li>
    <li><a href="http://www.karsono.co.cc/2010/06/email-me.html" target="_blank">Email</a></li>
</ul>

dimana hasilnya akan terlihat seperti demo sub menu 1 disini.

2. Dalam demo tersebut kondisi dari menu masih berbentuk html standar, lalu saya akan coba tambahkan beberapa kode CSS yang akan menampilkan animasi dengan hover untuk menampilkan atau menyembunyikan list dari menu, kode CSS-nya:

#menuq { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#menuq li ul { display: none; }
#menuq li:hover ul{display: block; }
#menuq li:hover ul li ul{display: none; }
#menuq li ul li:hover ul { position:relative; top:-30px; left:8em; display: block; }
#menuq li ul li{ height: 30px; line-height: 30px; }

dimana hasilnya akan terbentuk seperti Demo sub menu 2 ini.

3. Dengan melihat hasil dari demo pada langkah kedua, berarti tinggal dibuat custom warna dari menu supaya menarik, caranya tinggal ditambahkan kode css menu dibawah

#menuq li { float: left; position: relative; padding: 0; line-height: 40px; background: #F6F5F1; }
#menuq li:hover { background-position: 0 -40px; }
#menuq li a { display: block; padding: 0 15px; color: #000; text-decoration: none; }
#menuq li a:hover { background:#CC716A; color: #fff; }
#menuq li ul { opacity: 0; position: absolute; left: 0; width: 8em; background:#CCD5E2; list-style-type: none; padding: 0; margin: 0; }
#menuq li:hover ul { opacity: 1; }
#menuq li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#menuq li:hover ul li { height: 30px; line-height: 30px; }
#menuq li ul li a { background: #F6F5F1; }
#menuq li ul li a:hover { background:#CC716A; }

sampai disini sub menu dengan css3 sudah berhasil dibuat, hasilnya bisa dilihat DEMO sub menu 3 disini.

4. Langkah keempat ini berbentuk pilihan, dimana kode CSS3 ini dibuat untuk menghasilkan animasi menu yang lebih menarik lagi, jadi gak dipake juga gak masalah, caranya tinggal ditambahkan saja kode seperti dibawah ini.

#menuq li { -webkit-transition: all 0.2s; }
#menuq li a { -webkit-transition: all 0.5s; }
#menuq li ul { -webkit-transition: all 1s; }
#menuq li ul li { -webkit-transition: height 0.5s; }

hasil dari sub menu ini, secara keseluruhan akan terlihat seperti DEMO sub menu disini.

sedangkan untuk kode-nya secara keseluruhan bisa langsung digunakan di blogger, pilih pada menu Design >> Page Elements >> Add a Gadget >> pilih HTML/Script dan pastekan kode dibawah ini tepat dibawah header.
Tentunya untuk penempatan harus disesuaikan dengan design dari template blog itu sendiri, jadi harus di custom lagi supaya letak dan posisinya pas dan sesuai dengan template blog yang ada.

<style type="text/css">
#menuq { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#menuq li ul { display: none; }
#menuq li:hover ul{display: block; }
#menuq li:hover ul li ul{display: none; }
#menuq li ul li:hover ul { position:relative; top:-30px; left:8em; display: block; }
#menuq li ul li{ height: 30px; line-height: 30px; }
#menuq li { float: left; position: relative; padding: 0; line-height: 40px; background: #F6F5F1; }
#menuq li:hover { background-position: 0 -40px; }
#menuq li a { display: block; padding: 0 15px; color: #000; text-decoration: none; }
#menuq li a:hover { background:#CC716A; color: #fff; }
#menuq li ul { opacity: 0; position: absolute; left: 0; width: 8em; background:#CCD5E2; list-style-type: none; padding: 0; margin: 0; }
#menuq li:hover ul { opacity: 1; }
#menuq li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#menuq li:hover ul li { height: 30px; line-height: 30px; }
#menuq li ul li a { background: #F6F5F1; }
#menuq li ul li a:hover { background:#CC716A; }
#menuq li { -webkit-transition: all 0.2s; }
#menuq li a { -webkit-transition: all 0.5s; }
#menuq li ul { -webkit-transition: all 1s; }
#menuq li ul li { -webkit-transition: height 0.5s; }
</style>

<ul id="menuq">
    <li><a href="http;//www.karsono.co.cc">Home</a></li>
    <li><a href="#">About Me &gt;</a>
        <ul>
            <li><a href="http://id-id.facebook.com/people/karsono-sajah/1366190217" target="_blank">Facebook</a></li>   
            <li><a href="#">Profile &gt;</a>
    <ul>
                    <li><a href="http://id.linkedin.com/in/karsono" target="_blank">Linkedin</a></li>
                    <li><a href="http://www.visualcv.com/p1rx4tg" target="_blank">VisualCV</a></li>
               </ul>
   </li>
            <li><a href="http://twitter.com/karsono" target="_blank">Twitter</a></li>
        </ul>
    </li>
    <li><a href="http://www.karsono.co.cc/2010/06/email-me.html" target="_blank">Email</a></li>
</ul>

Cara Membuat Halaman Menu Dropdown di Blog_02

Membuat Menu Drop down mungkin terdengar aneh di telinga kita, memang saya sendiri awalnya tidak tau harus membuat kata kunci apa yang umum di gunakan di Indonesia untuk mencari tutorial sejenis ini. awalnya mau cara pasang halaman li di blogspot, lalu coba cara buat navbar menu lebar ke bawah, dan akhirnya cara membuat halaman menu pada blogspot mudah-mudahan pada nyangkut ke sini hehe.

Seperti apa sih Menu Drop down itu langsung aja liat gambarnya biar saya ga sulit ngejelasinnya

LIVE DEMO

Nah dah ngerti belum? menu dropdown adalah seperti gambar di atas, saat kita arahin kursor mouse salah satu menu di navbar, tiba-tiba mucul panjang kebawah (menu tambahan ke bawah) itulah yang di maksud dengan Dropdown Menu

Bagaimana cara buatnya?

1. Login ke Blogger.
2. Pilih Edit Tamplate
3. pilih Edit HTML

4. cari kode ]]></b:skin>
5. Silakan anda copy kode di bawah ini :

/* ----- NAVBAR MENU ----- */
#NavbarMenu {

width: 780px;
height: 30px;
background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvznc2suMjBPH0hW2H3ofaDxdhOSlKYO-cQKJ_cQ11orlvS-B3DBMEoW_KxhxxxBuGxJX-4Uq-jwyMSwVETmEiq41dk8GQ-1wsEKncWPYV8qW579uomFw8yJEomK_DPPPvkdKpjh-mvOes/s800/navbar.gif) repeat-x top;
color: #3D81EE
margin: 0 auto 0;
padding: 0;
font: bold 11px Arial, Tahoma, Verdana;
border-top: 1px solid #AFAFAF;
border-bottom: 1px solid #FFFFFF;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #3D81EE;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 14px ARIAL;
}
#nav li a:hover, #nav li a:active {
background:#99C9FF;
color: #3D81EE;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #3D81EE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvznc2suMjBPH0hW2H3ofaDxdhOSlKYO-cQKJ_cQ11orlvS-B3DBMEoW_KxhxxxBuGxJX-4Uq-jwyMSwVETmEiq41dk8GQ-1wsEKncWPYV8qW579uomFw8yJEomK_DPPPvkdKpjh-mvOes/s800/navbar.gif) repeat-x top;
width: 150px;
color: #000;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #99C9FF;
border-left: 1px solid #99C9FF;
border-right: 1px solid #99C9FF;
font: normal 15px,;
}

#nav li li a:hover, #nav li li a:active {
background: #99C9FF;
color: #3D81EE;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav
li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav
li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

6. Simpan di atas kode ]]></b:skin>

catatan :

1. pada text yang berwarna hijau di atas sesuaikanlah dengan lebar tamplate yang anda gunakan
2. pada text yang berwarna orange di atas biarkan saja

 7. Setelah itu silakan copy kode berikut ini :

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='Link-Kamu'>Tentang Kami</a>
<ul>
<li><a href='Link-Kamu'>Sejarah Perusahaan</a></li>
<li><a href='Link-Kamu'>Profil Perusahaan</a></li>
<li><a href='Link-Kamu'>Struktur Organisasi</a></li>
<li><a href='Link-Kamu'>Hubungi Kami</a></li>
</ul>
</li>
<li><a href='Link-Kamu'>Komputer</a></li>
<li><a href='Link-Kamu'>Hardware</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Download%20Software'>Software</a>
<ul>
<li><a href='http://asksalman19.blogspot.com/search/label/Anti%20Virus'>Antivirus</a></li>
<li><a href='Link-Kamu'>Download MP3</a></li>
<li><a href='Link-Kamu'>Desktop Enhancements</a></li>
<li><a

href='http://asksalman19.blogspot.com/2010/01/pembuat-banner-animasi-webblog.html'>Software
Pembuat Banner</a></li>
<li><a href='#'>Internet</a>
<ul>
<li><a href='http://asksalman19.blogspot.com/search/label/Internet'>Dial-Up n Connectivity</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Utility%20Tool'>Security and Spyware</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Utility Tool'>Peralatan</a></li>
</ul>
</li>
<li><a href='Link-Kamu'>System Tools</a></li>
<li><a href='Link-Kamu'>Others</a></li>
</ul>
</li>
<li><a href='Link-Kamu'>Template</a>
<ul>
<li><a

href='http://hyperjadulz.blogspot.com/search/label/New%20Blogger%20Template'>New
Blogger Template</a></li>
<li><a href='Link-Kamu'>Classic Template</a></li>
</ul>
</li>
<li><a href='#'>Tutorial</a>
<ul>
<li><a href='http://asksalman19.blogspot.com'>Belajar Komputer</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Tips Blog'>Belajar Blogspot</a></li>
<li><a

href='http://asksalman19.blogspot.com/2009/09/tutorial-mudah-blog.html'>Tutorial
Mudah Blog</a></li>
</ul>
</li>
<li><a
href='/feeds/posts/default'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-2n7ObsARrESdnmExrCrpdmfVbiYRdWxjko7J71R18M5c_LdbE2vzE42od_R-4nNDYlGtCiepTG2HMeZx9crqDe8TP7jrEVoHu1lYHjD8GWF1j-qJ429-OJukD3P_Gk1rp-Z0QfBa-_A/s1600/rss.gif'
style='vertical-align:middle'/> RSS Feeds</a></li>
</ul>
</div>

</div> <!-- end navbar -->&gt;
</div>

8. Simpan di bawah <body> 


9. save. 




Sehingga hasilnya seperti ini :

]]></b:skin>
</head>

<body>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='BELAJAR KOMPUTER (Header)' type='Header'/>
</b:section>
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='Link-Kamu'>Tentang Kami</a>
<ul>
<li><a href='Link-Kamu'>Sejarah Perusahaan</a></li>
<li><a href='Link-Kamu'>Profil Perusahaan</a></li>
<li><a href='Link-Kamu'>Struktur Organisasi</a></li>
<li><a href='Link-Kamu'>Hubungi Kami</a></li>
</ul>
</li>
<li><a href='Link-Kamu'>Komputer</a></li>
<li><a href='Link-Kamu'>Hardware</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Download%20Software'>Software</a>
<ul>
<li><a href='http://asksalman19.blogspot.com/search/label/Anti%20Virus'>Antivirus</a></li>
<li><a href='Link-Kamu'>Download MP3</a></li>
<li><a href='Link-Kamu'>Desktop Enhancements</a></li>
<li><a
href='http://asksalman19.blogspot.com/2010/01/pembuat-banner-animasi-webblog.html'>Software
Pembuat Banner</a></li>
<li><a href='#'>Internet</a>
<ul>
<li><a href='http://asksalman19.blogspot.com/search/label/Internet'>Dial-Up n Connectivity</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Utility%20Tool'>Security and Spyware</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Utility Tool'>Peralatan</a></li>
</ul>
</li>
<li><a href='Link-Kamu'>System Tools</a></li>
<li><a href='Link-Kamu'>Others</a></li>
</ul>
</li>
<li><a href='Link-Kamu'>Template</a>
<ul>
<li><a
href='http://hyperjadulz.blogspot.com/search/label/New%20Blogger%20Template'>New
Blogger Template</a></li>
<li><a href='Link-Kamu'>Classic Template</a></li>
</ul>
</li>
<li><a href='#'>Tutorial</a>
<ul>
<li><a href='http://asksalman19.blogspot.com'>Belajar Komputer</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Tips Blog'>Belajar Blogspot</a></li>
<li><a href='http://asksalman19.blogspot.com/2009/09/tutorial-mudah-blog.html'>Tutorial Blog</a></li>
</ul>
</li>
<li><a
href='/feeds/posts/default'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-2n7ObsARrESdnmExrCrpdmfVbiYRdWxjko7J71R18M5c_LdbE2vzE42od_R-4nNDYlGtCiepTG2HMeZx9crqDe8TP7jrEVoHu1lYHjD8GWF1j-qJ429-OJukD3P_Gk1rp-Z0QfBa-_A/s1600/rss.gif'
style='vertical-align:middle'/> RSS Feeds</a></li>
</ul>
</div>

</div> <!-- end navbar -->&gt;
</div>

Kode
di atas adalah kode yang saya gunakan di salah satu blog saya. dan
mungkin akan sedikit berbeda posisinya dengan template anda. namun
standarnya seperti contoh di atas. lihat hasilnya disini


keterangan :
1. jika anda ingin menambah dropdown lagi tinggal tambahkan saja kode :

<li><a href='#'>Tutorial</a>

<ul>
<li><a href='http://asksalman19.blogspot.com'>Belajar Komputer</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Tips%20Blog'>Belajar Blogspot</a></li>
</ul>
</li>

Catatan :
Yang berwarna ungu di atas adalah "tutorial" adalah menu yang akan di buat dropdown ke bawaholeh kita. jadi bila nanti anda ingin membuat dropdown tambahan, tambahkan saja kode pada kumpulan kode menu pada no.7

2. Di atas, saya banyak menuliskan link ke arah blog ini, ganti dengan link yang ingin anda tuju, bisa ke arah blog anda atau orang lain.

Silakan lihat contoh yang sudah saya buat disini