Memasang Kode Hasil CSS Menu Generator

Pada postingan terdahulu kang Rohman sempat menginformasikan tentang free download tool yang bernama CSS Menu Generator, dengan tool CSS Menu Generator anda dapat dengan mudah membuat sebuah Horizontal Menu, Vertical Menu, Combo-box Menu, Full Down Menu atau Drop down Menu. Namun ternyata eh ternyata setelah di kasih enak malah jadi pada bingung tujuh keliling dan akhirnya  banyak yang bertanya ke Kang Rohman tentang cara memasang kode hasil dari CSS Menu Generator pada blog. Hihihi.. pada bingung yah, duuuh kacian…..

Bagi anda yang masih merasa kebingungan memasang kode hasil dari CSS Menu Generator, mungkin postingan ini bisa menjadi obat sakit kepala anda karena Kang Rohman akan mencoba membahas tentang bagaimana cara memasukan kode yang di hasilkan oleh CSS menu generator ke dalam blog. Namun sebelumnya, anda saya anggap sudah bisa mengoperasikan CSS Menu Generator.

Kode yang di hasilkan oleh CSS Menu Generator terdiri dari dua bagian yaitu bagian kode CSS dan yang satunya kode HTML. Perhatikan gambar berikut :

 

Contoh kode CSS ;

<style type="text/css" media="screen">
.pd_menu_01 {float:left; padding:0; margin:0;color: #FFFFFF;background: #0000A0;width:100%; border:solid 1px #004080;clear:both;} /*Color navigation bar normal mode*/
.pd_menu_01  a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFFFF;
background-color: #0000A0;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px #004080; }
.pd_menu_01 ul li a {color: #FFFFFF;background: #0000A0;float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #FFFFFF;background: #0000A0;}
.pd_menu_01 ul li:hover a {background-color:#008000; text-decoration:none; color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block;  position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF;  color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
.pd_menu_01 table {position:absolute; top:0; left:0; border-collapse:collapse;color: #FFFFFF;background: #0000A0;}
.pd_menu_01 ul li a:hover {background-color:#008000; text-decoration:none;color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF;  color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
</style>

 

Contoh kode HTML :

<div class="pd_menu_01 ">
<ul><li><a href="/">Home<!--[if IE 7]><!--></a><!--<![endif]--><!--[if IE]><table><tr><td><![endif]-->
<!--[if IE]></td></tr></table></a><![endif]--></li></ul>
<ul><li><a href="">Blog Tutorial<!--[if IE 7]><!--></a><!--<![endif]--><!--[if IE]><table><tr><td><![endif]-->
<ul>
<li><a href=""  >Cara Daftar</a></li>
<li><a href=""  >cara Setting</a></li>
<li><a href=""  class="lastone">Cara Posting</a></li>
</ul>
<!--[if IE]></td></tr></table></a><![endif]--></li></ul>
<ul><li><a href="">Wordpress tutorial<!--[if IE 7]><!--></a><!--<![endif]--><!--[if IE]><table><tr><td><![endif]-->
<!--[if IE]></td></tr></table></a><![endif]--></li></ul>
<ul><li><a href="">Hot News<!--[if IE 7]><!--></a><!--<![endif]--><!--[if IE]><table><tr><td><![endif]-->
<!--[if IE]></td></tr></table></a><![endif]--></li></ul>
</div>

 

Untuk menempatkan kode di atas pada blog anda tentu tidak ada ketentuan yang baku karena tergantung di manakah posisi tab menu mau di tempatkan, faktor yang lain adalah kode template antara yang satu dengan yang lain tentu saja berbeda. Namun sebagai gambaran, kang Rohman akan memberikan satu contoh, mungkin dengan ini akan ada sedikit titik terang.

Jika menurut kebiasaan, lazimnya suatu tab menu di simpan di atas Header atau di bawah header. Untuk itu anda di sarankan untuk membuat elemen di atas atau di bawah header, trik ini pernah kang rohman posting pada “ Menyimpan Widget Persis Dibawah Header “ atau pada posting “ Cara Membuat Elemen Persis Di Bawah “, Silahkan di baca dulu.

OK. sekarang saya anggap anda sudah membuat elemen persis di bawah header, dan sekarang kita mencoba untuk memasukkan kode hasil dari CSS Menu Generator. Namun sebelumnya perlu di ketahui bahwa pada kode CSS seperti contoh di atas ada sedikit kode yang perlu di hapus, yaitu pada contoh kode yang saya contohkan di atas saya cetak merah, tepatnya kode yang ini :

 

<style type="text/css" media="screen">

 

</style>

Sekali lagi, kode di atas di hapus saja.

 

Berikut adalah langkah-langkah untuk memasukkan kode dari CSS Menu Generator :

1. Silahkan login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4. Klik Tulisan Download Template Lengkap, silahkan di backup dulu (penting).
5. Copy kode CSS tab menu anda ( tentunya ada kode yang di hapus seperti keterangan di atas ) persis di atas kode  ]]></b:skin> . Contoh ;
   
   .pd_menu_01 {float:left; padding:0; margin:0;color: #FFFFFF;background: #0000A0;width:100%; border:solid 1px #004080;clear:both;} /*Color navigation bar normal mode*/
   .pd_menu_01  a, .pd_menu_01 a:visited {
   font-family:Arial, Helvetica, sans-serif;
   font-style:normal;
   font-weight:bold;
   font-size:12px;
   color: #FFFFFF;
   background-color: #0000A0;
   text-decoration: none;
   }
   .pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
   .pd_menu_01 ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px #004080; }
   .pd_menu_01 ul li a {color: #FFFFFF;background: #0000A0;float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
   .pd_menu_01 ul li ul {display:none; border:none;color: #FFFFFF;background: #0000A0;}
   .pd_menu_01 ul li:hover a {background-color:#008000; text-decoration:none; color:#FFFF00;} /*Color main cells hovering mode*/
   .pd_menu_01 ul li:hover ul {display:block;  position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
   .pd_menu_01 ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF;  color:#FFFFFF;} /*Color subcells normal mode*/
   .pd_menu_01 ul li:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
   .pd_menu_01 table {position:absolute; top:0; left:0; border-collapse:collapse;color: #FFFFFF;background: #0000A0;}
   .pd_menu_01 ul li a:hover {background-color:#008000; text-decoration:none;color:#FFFF00;} /*Color main cells hovering mode*/
   .pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
   .pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF;  color:#FFFFFF;} /*Color subcells normal mode*/
   .pd_menu_01 ul li a:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/

6. Klik tombol SIMPAN TEMPLATE

7. Tunggu beberapa saat sampai template anda tersimpan.

8. Klik tab Elemen Halaman.

9. Klik Tambah Gadget pada elemen yang di bawah header ( tentunya sudah di buat terlebih dahulu )

    

10. Klik tanda plus (+) untuk HTML/JavaScript.

    

11. Copy kode HTML dari CSS tab menu anda, lalu paste pada kolom yang muncul. Contoh ;

    <div class="pd_menu_01 ">
    <ul><li><a href="/">Home<!--[if IE 7]><!--></a><!--<![endif]--><!--[if IE]><table><tr><td><![endif]-->
    <!--[if IE]></td></tr></table></a><![endif]--></li></ul>
    <ul><li><a href="">Blog Tutorial<!--[if IE 7]><!--></a><!--<![endif]--><!--[if IE]><table><tr><td><![endif]-->
    <ul>
    <li><a href=""  >Cara Daftar</a></li>
    <li><a href=""  >cara Setting</a></li>
    <li><a href=""  class="lastone">Cara Posting</a></li>
    </ul>
    <!--[if IE]></td></tr></table></a><![endif]--></li></ul>
    <ul><li><a href="">Wordpress tutorial<!--[if IE 7]><!--></a><!--<![endif]--><!--[if IE]><table><tr><td><![endif]-->
    <!--[if IE]></td></tr></table></a><![endif]--></li></ul>
    <ul><li><a href="">Hot News<!--[if IE 7]><!--></a><!--<![endif]--><!--[if IE]><table><tr><td><![endif]-->
    <!--[if IE]></td></tr></table></a><![endif]--></li></ul>
    </div>

12. Klik tombol SIMPAN.

13. Selesai. Silahkan lihat hasilnya.

 

Mungkin langkah-langkah di atas bisa menjadi satu gambaran bagaimana cara memasukkan kode hasil dari CSS menu Generator.

 

Selamat mencoba!

Membuat Menu Slide Show Tab View

Apakah anda pernah mengunjungi situs http://kompas.com? salah satu situs surat kabar di indonesia yang cukup terkenal. Coba anda perhatikan ke seblah kiri atas situs tersebut, di sana terdapat menu tab yang biasa di sebut dengan “Tab View” karena jika tabnya di klik akan berpindah ke isi menu tersebut (coba buktikan, klik saja tab nya),  namun sedikit berbeda dari biasanya karena menu tersebut bisa menampilkan isi dari menu tersebut secara bergantian atau bahasa yang biasa di gunakan adalah “Slide Show”. Dapat di ambil kesimpulan bahwa menu tersebut mempunyai dua fungi yaitu sebagai “Tab View” serta “Slide Show”.

Sedikit tertarik terhadap menu tersebut agar bisa di implementasikan pada template blogger, dan akhirnya ternyata bisa juga. Untuk melihat contoh, silahkan anda kunjungi http://magazine-1.blogspot.com, silahkan perhatikan ke pojok kiri atas, di sana ada menu yang mirip dengan yang di situs kompas bukan (sengaja tidak di buat sama persis).

Bagi anda yang tertarik membuat Menu Slide Show Tab View, silahkan ikuti langkah-langkah berikut :

 

Langkah #1

1. Login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML.

4. Copy kode di bawah ini, lalu paste persis di atas kode ]]></b:skin>

   .indentmenu{
   font: bold 11px Arial;
   width: 100%; /*leave this value as is in most cases*/ 
   } 
   .indentmenu ul{
   margin: 2px;
   padding: 0;
   float: left;
   /* width: 80%; width of menu*/
   background: transparent;
   } 
   .indentmenu ul li{
   display: inline;
   } 
   .indentmenu ul li a{
   float: left;
   margin: 2px;
   color: #000; /*text color*/
   padding: 5px 11px;
   text-decoration: none;
   border: 1px solid #ccc; 
   } 
   .indentmenu ul li a:hover{
   background:#ddd;
   } 
   .indentmenu ul li a:visited{
   color: white;
   } 
   .indentmenu ul li a.selected{
   color: white !important;
   padding-top: 6px; /*shift text down 1px*/
   padding-bottom: 4px;
   border: 1px solid #000000;
   background:#000000;
   } 
   .tabcontentstyle{ /*style of tab content container*/
   border: 1px solid gray;
   width: 450px;
   margin-bottom: 1em;
   padding: 10px;
   } 
   .tabcontent{
   display:none;
   } 
   @media print {
   .tabcontent {
   display:block !important;
   }
   }

   
   
   
   
   



5. Download dulu script ini, copy lalu paste persis di atas kode </head>



6. Klik tombol SIMPAN TEMPLATE.



7. Langkah pertama selesai. Silahkan istirahat dulu, minum khe, minum teh khe atau apa gitu biar tenang dulu

 

Jika sudah santai, ayo kita lanjut ke langkah berikutnya.

Langkah #2

1. Klik tab Elemen Halaman.



2. Klik Tambah Gadget
   
   

   

   
   



3. 
   

   Klik tombol plus (+) Untuk HTML/JavaScript.

   
   
   

   

   
   



4. Copy lalu paste kode berikut pada kolom yang tersedia :
   

    
          
   <div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">
        
   <div id="pettabs" class="indentmenu">
         
   <ul>
       
   <li><a href="#" class="selected" rel="tab1">1</a></li>
        
   <li><a href="#" rel="tab2">2</a></li>
         
   <li><a href="#" rel="tab3">3</a></li>
          
   <li><a href="#" rel="tab4">4</a></li> 
       
   </ul>
           
   <br style="clear: left"/>
        
   </div> 
       
   <div style="width:240px;text-align:justify;padding: 5px; margin-bottom:1em"> 
       
   <div id="tab1" class="tabcontent">
           
   <a href="http://magazine-1.blogspot.com/2008/11/obama-will-change-bush-policy.html">
          
   <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="obamabush" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ2Nyj6d2nsEqw0Ql7eD43ciWpd1V1RANvVSBIIv4SLsPrjFRuW44XMIWKYv0DAYeclREGmip1FYC2wbTdibhyphenhyphenUbIZ_LutoN8gzjvQWkJRZpEXR7oS6K8A54qqRuSxJIJPpPdXq_km3FA/?imgmax=800" height="152" title="obamabush"/></a> 
       
   <p><h3><a href="http://magazine-1.blogspot.com/2008/11/obama-will-change-bush-policy.html">Obama Will Change Busf Policy</a></h3></p>
         
   U.S. President Barack Obama will change several numbers of controversial policies by President George W. Bush, including the restriction of the parent embryo cell research [...]
         
   </div> 
       
   <div id="tab2" class="tabcontent">
           
   <a href="http://magazine-1.blogspot.com/2008/11/beyonce-will-never-sell-her-wedding.html">
       
   <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="beyone" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJL6pRsVMljpr7QQjH61PX2BR5NN6nwuF-IVnNooQGNXqo3z1n5iSb05QeDfXetJ0C61O239DHnwhYVwxrIPFwV8OP9Frp-ADJA4dGl58FzYHoL-MVPxAyKtB7CIFqWyBO-Cqm4E5BQO0/?imgmax=800" height="152" title="beyone"/></a>
          
   <p><h3><a href="http://magazine-1.blogspot.com/2008/11/beyonce-will-never-sell-her-wedding.html">Beyone Will Never Sell Her Wedding Photo</a></h3></p> 
        
   Beyonce said, she will never consider to sells her wedding photo with Jay-Z to a celebrity magazine that offering a large amount of money as rewards, even she wonder with the amount of money that offered to her [...]
           
   </div> 
         
   <div id="tab3" class="tabcontent">
           
   <a href="http://magazine-1.blogspot.com/2008/11/guns-n-roses-will-back.html">
          
   <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Guns N 'Roses" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFGbNO4-PKPV_FchKkZElsO-IYOVjGpz8UImbSmx62oKL7aEkOJjlwRDnFMiSEoI8UlBJprmSpcEqPjrNaNQeC6Q8v4gknZH6WBlsQP2XjpxOumkO9xK51oCNO3euhVYzfl1biaVBMyYg/?imgmax=800" height="152" title="Guns N 'Roses"/></a> 
         
   <p><h3><a href="http://magazine-1.blogspot.com/2008/11/guns-n-roses-will-back.html">Guns N 'Roses Will Back</a></h3></p>      
   After 15 years not releasing album, the group rock Guns N ' Roses will launch a new album in the United States on 23 November. The band's latest album is "The Spaghetti Incident", released in 1993 [...]
           
   </div> 
       
   <div id="tab4" class="tabcontent">      
   <a href="http://magazine-1.blogspot.com/2008/11/i-pod-can-make-your-ear-buzz.html">
        
   <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="ipod" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj45Qnvxiq7sv29CtYcl4dClaKrrGGDtt4rnSWUdUjPSww3UFFghHJXSdiMilHgu8D1wGY72QwQEf1PNtphiDRRnEaIEXEvq_V4UsbjxBFlAdqh8ZEgEQ2S9msF8OZXcZOalJjIQ6vXWqU/?imgmax=800" height="152" title="ipod"/></a>
        
   <p><h3><a href="http://magazine-1.blogspot.com/2008/11/i-pod-can-make-your-ear-buzz.html">Ipod Can Make Your ear Buzz</a></h3></p> 
        
   Music is one way to wake the spirit, to create happy life, but what happens if the music makes the ears buzz? of course, not the music that makes the ear 'buzzy',[...]
           
   </div>
   </div> 
      
   <script type="text/javascript">      
   var mypets=new ddtabcontent("pettabs")       
   mypets.setpersist(true)       
   mypets.setselectedClassTarget("link")       
   mypets.init(2000)       
   </script>

   
   



5. Klik tombol SIMPAN TEMPLATE.



6. Selesai. Silahkan lihat hasilnya.

 

Kode-kode di atas tentunya tidak mutlak harus seperti yang Kang Rohman tulis, namun anda bisa memodifikasinya agar sesuai dengan keinginan atau[un sesuai dengan template yang anda pakai.

 

Sedikit keterangan agar lebih memudahkan anda dalam memodifikasi kode ini.

 

Pada langkah pertama, ada deretan kode CSS, kode tersebut bisa anda kreasikan sendiri agar menghasilkan bentuk deretan tab yang cantik.

Perhatikan kode berikut :

<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">

<div id="pettabs" class="indentmenu">

<ul>

<li><a href="#" class="selected" rel="tab1">1</a></li>


<li><a href="#" rel="tab2">2</a></li>


<li><a href="#" rel="tab3">3</a></li>


<li><a href="#" rel="tab4">4</a></li>

</ul>

<br style="clear: left"/>


</div>

Kode ini adalah deretan tab dengan urutan tab seperti ini : 1, 2, 3, 4. Ini bisa anda ubah dengan apa yang anda mau. Misal Recent Comments, Recen Post, Shoutbox, atau apa saja sesuai keinginan. Untuk mengatur tinggi dari widget tersebut, anda tinggal mengganti nilai height:350px; menjadi nilai yang lain. Misal : height:400px;

 

Perhatikan juga yang ini :

<div style="width:240px;text-align:justify;padding: 5px; margin-bottom:1em">

Kode tersebut adalah untuk mengatur isi dari menu tersebut, ini tentunya bisa anda ubah sesuai dengan keinginan anda, Misal :

width:240px : ini untuk mengatur lebar, ubah dengan nilai yang sesuai keinginan. Contoh : width:300px.

text-align:justify : ini untuk mengatur perataan tulisan, ganti dengan yang anda inginkan. Contoh : text-align:left, text-align:right.

 

Perhatikan kode berikut :

 

<script type="text/javascript">

    var mypets=new ddtabcontent("pettabs")

    mypets.setpersist(true)


    mypets.setselectedClassTarget("link")


    mypets.init(2000)

    </script>

 

Untuk mengatur lamanya waktu perpindahan dari satu tab ke tab yang lain, anda tinggal mengganti nilai 2000 menjadi nilai yang lain. Misal : 2100. Semakin besar nilainya maka semakin lama pindah.

Kode dalam “Slide Show Tab View” di atas memuat artikel milik kang Rohman, silahkan di ganti sesuai keinginan, itu hanya contoh untuk memberikan sugesti terhadap anda.

 

Selamat mencoba!

 

Original Script by : dynamic drive. Modified by : Blogspot tutorial

Tutorial navigasi : Dynamic-FX Slide-In Menu (v 6.5)

Beberapa hari yang lalu sahabat Wizurai meminta kang rohman untuk membuatkan tutorial cara membuat menu yang ada di blognya dengan alasan banyak sekali dari teman-temannya yang menanyakan cara membuat menu tersebut kepada beliau, dan..yepp.. kang rohman buatkan nih tutorialnya.

Menu yang ada di blog sobat Wizurai tersebut di namakan dengan Dynamic-FX Slide-In Menu (v 6.5), original source code serta contoh dari menu tersebut bisa anda lihat di dynamicdrive.com. Apa keunikan dari Dynamic-FX Slide-In Menu (v 6.5)? keunikanya yaitu menu atau navigasi tersembunyi di sebelah kiri layar monitor dan yang terlihat hanyalah bar menu nya saja, apabila menu tersebut di sorot oleh mouse komputer maka keluarlah menu-menu yang ada di dalamnya. Yang lebih menarik perhatian adalah menu tersebut selalu bergerak mengikuti gerakan scrolling sehingga akan selalu muncul di layar sebelah kiri layar monitor.

Tertarik membuat menu tersebut di blog anda, nih kang rohman tuliskan tutorial cara membuatnya :

Silahkan download dahulu source code yang nanti akan anda pakai. Klik pada gambar di bawah :





Setelah anda download file yang tadi, silah di ekstrak terlebih dahulu dengan software ekstraktor seperti winzip atau winrar.



Apabila file tersebut sudah diekstrak, maka akan menghasilkan dua buah file java seperti yang tampak pada ilustrasi gambar di atas. dua buah file java tersebut mempunyai nama ssm.js dan ssmItems.js, yang harus anda lakukan sebelum file tersebut di upload ke file server adalah melakukan editing untuk file ssmItems.js yaitu mengganti link-link yang ada dengan link yang anda inginkan untuk di simpan pada menu tersebut. Bagaimana cara mengedit file tersebut? agar tidak terlalu repot, maka saya akan menerangkan mengedit file tersebut dengan hanya menggunakan notepad, caranya adalah seperti ini :

1. Klik kanan pada file yang bernama ssmItems.js, kemudian pilih open with lalu pilih notepad karena yang akan di gunakan adalah software tersebut.



2. Setelah itu anda akan melihat file seperti ini :




<!--

/*
Configure menu styles below
NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors
*/
YOffset=150; // no quotes!!
XOffset=0;
staticYOffset=30; // no quotes!!
slideSpeed=20 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="black";
menuIsStatic="yes"; //this sets whether menu should stay static on the screen
menuWidth=150; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#170088";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#FFFF99";
linkTarget="_top";
linkAlign="Left";
barBGColor="#444444";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barVAlign="center";
barWidth=20; // no quotes!!
barText="SIDE MENU"; // <IMG> tag supported. Put exact html for an image to show.

///////////////////////////

// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
ssmItems[0]=["MENU"] //create header
ssmItems[1]=["Home", "http://www.blogspottutorial.com", ""]
ssmItems[2]=["Free Template", "http://www.blogspottutorial.com/search/label/free%20template",""]
ssmItems[3]=["Top Download", "http://www.blogspottutorial.com/2008/05/magazine-template-1.html", ""]
ssmItems[4]=["SEO Ebook", "http://www.blogspottutorial.com/2008/05/free-seo-ebook-search-engine.html", "_new"]
ssmItems[5]=["Submit Script", "http://www.dynamicdrive.com/submitscript.htm", ""]
ssmItems[6]=["Link to Us", "http://www.blogspottutorial.com", ""]

ssmItems[7]=["FAQ", "#nogo", "", 1, "no"] //create two column row
ssmItems[8]=["Email", "#nogo", "",1]


ssmItems[9]=["External Links", "", ""] //create header
ssmItems[10]=["Blog Kang Rohman", "http://kolom-tutorial.blogspot.com", ""]
ssmItems[11]=["Kang Rohman Dot Com", "http://kangrohman.com", ""]
ssmItems[12]=["Unique Template", "http://template-unik.blogspot.com", ""]


buildMenu();

//-->


Pada prinsip dasarnya, kode-kode di atas adalah untuk mengatur tampilan dari Dynamic-FX Slide-In Menu (v 6.5) semisal warna tulisan warna background, bentuk hurup, besarnya hurup dan lain-lain. Akan tetapi karena keterbatasan waktu (cape dhenk kalo di bahas atu-atu mah), maka kang rohman hanya akan menerangkan acara mengganti tulisan menu serta link yang ada dengan link yang anda inginkan untuk dipasang pada menu ini, untuk kreasi yang lainnya silahkan explor sendiri oleh anda. Untuk mempermudah pengeditan, pada kode di atas sengaja kang rohman bedakan, ada yang berwarna hijau, biru serta warna merah. Tulisan yang berwarna hijau dengan tulisan SIDE MENU adalah tulisan yang akan muncul pada bar menu tersebut, anda bisa mengubahnya sesuka hati anda, misal mengganti tulisan tersebut dengan MY MENU, MENU GUE, NAVIGASI atau apa sajalah terserah anda. Tulisan yang berwarna biru adalah tulisan link yang akan muncul pada menu tersebut, tulisan-tulisan ini tentu saja bebas untuk anda ubah sendiri sesuai dengan keinginan, misal tulisan Home anda ingin ubah menjadi Depan atau apa saja.

Tulisan yang biru ini akan berpasangan dengan tulisan yang berwarna merah yang ada di sampingnya. Tulisan yang berwarna merah adalah link target yang anda inginkan, misal : tulisan Home apabila di klik ingin menuju halaman yang beralamat http://www.blogspottutorial.com, nah alamat http://www.blogspottutorial.com harus di ubah dengan alamat yang anda inginkan. Mudah-mudah dapat di mengerti.

Apabila anda sudah mengedit kode-kode di atas tadi, maka langkah selanjutnya adalah menyimpan file tersebut, caranya adalah klik pada file yang ada di bar menu, kemudian klik Save.

Setelah anda melakukan semua hal-hal yang saya tulis di atas, langkah yang harus anda lakukan adalah mengupload kedua file java tersebut ke server, agar lebih mudah silahkan anda upload file tersebut ke google pages. Belum tahu cara upload file ke google pages? hihihi..... sok atuh baca dulu tulisan kang rohman yang ini!. Kalau sudah di upload, jangan lupa untuk meng copy alamat URL kedua file tersebut.

Sekarang kita waktunya untuk beraksi, silahkan ikuti langkah-langkah berikut ini :

1. Silahkan logi ke blogger dengan ID anda.



2. Klik Tata Letak.
3. 
   
   
4. Klik Edit HTML.



5. Copy paste kode berikut di atas kode </head>



<style type="text/css">
<!--
A.ssmItems:link {color:black;text-decoration:none;}
A.ssmItems:hover {color:black;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:black;text-decoration:none;}
//-->
</style>

<SCRIPT SRC="http://kangrohman.googlepages.com/ssm.js" language="JavaScript1.2">
//Dynamic-FX slide in menu v6.5 (By maXimus, http://maximus.ravecore.com/)
//Updated July 8th, 03' for doctype bug
//For full source, and 100's more DHTML scripts, visit http://www.dynamicdrive.com

</SCRIPT>
<SCRIPT SRC="http://kangrohman.googlepages.com/ssmItems.js" language="JavaScript1.2"></SCRIPT>



6. Gantilah kode yang berwarna merah dengan kode milik anda (file yang tadi di upload).



7. Klik tombol SIMPAMN TEMPLATE.



8. Selesai. Silahkan lihat hasilnya.

Selamat mencoba!

CSS menu : tabs6

Setelah melihat perkembangan penghasilan kang rohman dari iklan yang ada di blog ini,
akhirnya kang rohman berubah fikiran. Apanya yang berubah? begini ade-ade, teteh-teteh,
bapak-bapak, ibu-ibu, dan sebangsanya .
Dulu, untuk download template atau nerangin cara pasang menu navigasi, para pengunjung blog ini sengaja saya
lempar alihkan ke blog saya yang berbahasa inggris dengan maksud agar
blog tersebut mendapatkan traffic yang cukup lumayan dan alih-alih berharap semoga saja
ada yang berbaik hati mengklik iklannya. Namun sekarang semuanya mungkin tidak akan terjadi lagi,
sekarang kang rohman akan tulis semuanya di sini, download di sini dan silahkan baca sepuasnya

Sudah ah ko kayanya jadi sombong begitu..hihihi.



Untuk tulisan pertama mengenai menu navigasi, yang saya bahas adalah
menu navigasi yang di beri nama Tabs6. Ini bukan buatan
kang rohman, namun buatan orang lain yang sudah di modifikasi agar bisa
di pake di blogspot. Namun untuk menghargai desainer nya, tolong jangan
di hilangkan credit pada kode css nya ya. Untuk demo
menu navigasi ini silahkan klik tombol berikut :

 

 

 

Kalau anda berminat, silahkan baca tutorialnya sampai selesai.Namun kalau tidak
berminat,mending cari artikel lainnya yang lebih menarik .



Jika anda merasa tertarik dengan menu navigasi di atas, silahkan baca sampai
dengan selesai. Namun perlu saya tegaskan di sini bahwa mungkin hasil yang di
dapat bisa berbeda dengan contoh diatas karena faktor desain template yang
berbeda-beda, oleh kerena itu ada kemungkinan anda harus sedikit merubah kode
yang saya berikan agar cocok dengan template anda.



Berikut adalah langkahnya :



Klik kanan pada kedua gambar di bawah ini, lalu Save Picture As...
lalu save dulu di komputer anda.

tableft6.gif	tabright6.gif

Kemudian simpan pada image hosting yang biasa anda gunakan, misalkan
di photobucket
atau google pages dan lain-lain.
Lalu anda catat alamat dari kedua gambar tersebut. Contoh, saya mempunyai alamat gambar
untuk kedua gambar di atas sebagai berikut :





http://ahom24.googlepages.com/tableft6.gif


http://ahom24.googlepages.com/tabright6.gif




 

Sebenarnya anda boleh saja menggunakan kedua alamat tersebut,
namun saya khawatir jika terlalu banyak yang memakai alamat
tersebut bisa terjadi limited band with sehingga gambar tidak
dapat tampil dan menu anda jadi tidak bagus, jadi sebaiknya
pake alamat sendiri ya.



Berikut adalah salah satu cara menginstall menu tabs6 :



Langkah #1

1. Silahkan Sign in di blogger dengan ID anda.





2. Klik Layout.





3. Kemudian klik tab Edit HTML.





4. Klik tulisan Download Template Lengkap, silahkan di save dulu untuk backup (penting).





5. lihat ke bagian kode template anda, kemudian cari kode ]]></b:skin>





6. Copy kode yang ada di bawah ini, lalu paste di atas kode ]]></b:skin>











<br /><br />/*<br />==================================================<br /><br />Tabs6<br /><br />Author : Christopher Ware<br />URL : http://www.exploding-boy.com<br /><br />Tutorial oleh Rohman<br />URL : http://kolom-tutorial.blogspot.com<br /><br />kunjungi blog saya untuk tutorial menu lainnya<br /><br />==================================================<br />*/<br /><br />#tabs6 {<br />float:left;width:100%;<br />background:#efefef;<br />font-size:13px;<br />line-height:normal;<br />border-bottom:1px solid #666;<br />}<br /><br />#tabs6 ul {<br />margin:0;padding:10px 10px 0 5px;<br />list-style:none;<br />}<br /><br />#tabs6 li {<br />display:inline;<br />margin:0;<br />padding:0;<br />}<br /><br />#tabs6 a {<br />float:left;<br />background:url("http://ahom24.googlepages.com/tableft6.gif") no-repeat left top;<br />margin:0;padding:0 0 0 4px;text-decoration:none;<br />}<br /><br />#tabs6 a span {<br />float:left;display:block;background:url("http://ahom24.googlepages.com/tabright6.gif") no-repeat right top;<br />padding:5px 15px 4px 6px;<br />color:#fff;<br />font-weight:bold;<br />}<br /><br />/* Commented backslah Hack hides rule from IE5-Mac \*/<br /><br />#tabs6 a span {<br />float:none;<br />}<br />/* End IE5-Mac hack */<br /><br />#tabs6 a:hover span {<br />color:#C2FB77;<br />}<br /><br />#tabs6 a:hover {<br />background-position:0% -42px;<br />}<br /><br />#tabs6 a:hover span {<br />background-position:100% -42px;<br />}<br /><br />#tabs6 #current a {<br />background-position:0% -42px;<br />}<br /><br />#tabs6 #current a span {<br />background-position:100% -42px;<br />} <br />






7. Silahkan lihat ke bagian bawah, lalu cari kode yang seperti ini :








<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='your blog title (Header)' type='Header'/>

</b:section>








8. Ubahlah kode yang berwarna hijau, sehingga kodenya menjadi seperti ini :









<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

<b:widget id='Header1' locked='false' title='your blog title (Header)' type='Header'/>

</b:section>








9. Kemudian klik Simpan Template.Silahkan tunggu
   beberapa saat.

Langkah #2

1. Klik tab Elemen Halaman





2. Lalu klik Tambahkan sebuah Elemen Halaman yang ada di bagian header (elemen paling atas).





3. setelah munculwindow popup, klik TAMBAHKAN KE BLOG yang untuk HTML/JavaScript.





4. Copy lalu paste kod berikut pada kolom yang tesedia (jangan lupa untuk merubah alamat gambarnya) :







<br /> <br /> <br /> <div id='tabs6'> <br /> <ul><br /><br /><!-- Silahkan ganti tanda pagar (#) dengan link milik anda --><br /><br /><li id='current'><a href='#' title='your link title here'><span>Home</span></a></li><br /><li><a href='#' title='your link title here'><span>Products</span></a></li><br /><li><a href='#' title='your link title here'><span>Services</span></a></li><br /><li><a href='#' title='your link title here'><span>Support</span></a></li><br /><li><a href='#' title='your link title here'><span>Contuct Us</span></a></li><br /><li><a href='#' title='your link title here'><span>Obral Plus</span></a></li><br /><li><a href='http://kolom-tutorial.blogspot.com' title='tutorial lengkap membuat blog di blogspot'><span>Blogspot Tutorial</span></a></li><br /></ul><br /> </div><!-- #tabs6 end --><br />











5. Klik tombol Simpan Peribahan.





6. Selesai, silahkan lihat hasilnya.

 

 

Terkadang jika anda melakukan instalasi sesuai dengan langkah
diatas, untuk beberapa template hasilnya kurang bagus. Oleh karena
itu, saya akan mencoba menulis dengan cara lain. Namun cara ini
hanya untuk Template Minima (template asli dari blogger).



Langkahnya sebagai berikut :

1. Silahkan Sign in di blogger dengan ID anda.





2. Klik Layout.





3. Kemudian klik tab Edit HTML.





4. Klik tulisan Download Template Lengkap, silahkan di save dulu untuk backup (penting).





5. Beri tanda centang pada kotak di samping tulisan Expand Template Widget , lihat gambar di bawah :



 





 




6. Tunggu beberapa saat ketika proses sedang berlangsung





7. lihat ke bagian kode template anda, kemudian cari kode ]]></b:skin>





8. Copy kode yang ada di bawah ini, lalu paste di atas kode ]]></b:skin>











<br /><br />/*<br />==================================================<br /><br />Tabs6<br /><br />Author : Christopher Ware<br />URL : http://www.exploding-boy.com<br /><br />Tutorial oleh Rohman<br />URL : http://kolom-tutorial.blogspot.com<br /><br />kunjungi blog saya untuk tutorial menu lainnya<br /><br />==================================================<br />*/<br /><br />#tabs6 {<br />float:left;width:100%;<br />background:#efefef;<br />font-size:13px;<br />line-height:normal;<br />border-bottom:1px solid #666;<br />}<br /><br />#tabs6 ul {<br />margin:0;padding:10px 10px 0 5px;<br />list-style:none;<br />}<br /><br />#tabs6 li {<br />display:inline;<br />margin:0;<br />padding:0;<br />}<br /><br />#tabs6 a {<br />float:left;<br />background:url("http://ahom24.googlepages.com/tableft6.gif") no-repeat left top;<br />margin:0;padding:0 0 0 4px;text-decoration:none;<br />}<br /><br />#tabs6 a span {<br />float:left;display:block;background:url("http://ahom24.googlepages.com/tabright6.gif") no-repeat right top;<br />padding:5px 15px 4px 6px;<br />color:#fff;<br />font-weight:bold;<br />}<br /><br />/* Commented backslah Hack hides rule from IE5-Mac \*/<br /><br />#tabs6 a span {<br />float:none;<br />}<br />/* End IE5-Mac hack */<br /><br />#tabs6 a:hover span {<br />color:#C2FB77;<br />}<br /><br />#tabs6 a:hover {<br />background-position:0% -42px;<br />}<br /><br />#tabs6 a:hover span {<br />background-position:100% -42px;<br />}<br /><br />#tabs6 #current a {<br />background-position:0% -42px;<br />}<br /><br />#tabs6 #current a span {<br />background-position:100% -42px;<br />} <br />






9. Silahkan lihat ke bagian bawah, lalu cari kode yang seperti ini :








<div class='descriptionwrapper'>

<p class='description'><span><data:description/></span></p>

</div>

</b:if>

</b:includable>

</b:widget>

</b:section>










10. Hapus kode diatas, lalu ganti dengan kode berikut :










<br /> <br /><div class='descriptionwrapper'> <br /><p class='description'><span><data:description/></span></p><br /></div><br /></b:if><br /></b:includable><br /></b:widget><br /></b:section><br /><br /> <div id='tabs6'> <br /> <ul><br /><br /><!-- Silahkan ganti tanda pagar (#) dengan link milik anda --><br /><br /><li id='current'><a href='#' title='your link title here'><span>Home</span></a></li><br /><li><a href='#' title='your link title here'><span>Products</span></a></li><br /><li><a href='#' title='your link title here'><span>Services</span></a></li><br /><li><a href='#' title='your link title here'><span>Support</span></a></li><br /><li><a href='#' title='your link title here'><span>Contuct Us</span></a></li><br /><li><a href='#' title='your link title here'><span>Obral Plus</span></a></li><br /><li><a href='http://kolom-tutorial.blogspot.com' title='tutorial lengkap membuat blog di blogspot'><span>Blogspot Tutorial</span></a></li><br /></ul><br /> </div><!-- #tabs6 end --><br /><br />












11. Klik tombol Simpam Perubahan.





12. Selesai. silahkan lihat hasilnya.

Agar mendapat variasi yang berbeda, sedikit akan saya tambahkan.



jika anda melakukan langkah di atas, maka hasil yang di dapat adalah
tab-tab atau menu-menu akan mepet ke sebelah kiri, jika ingin sedikit
menjorok ketengah anda harus menambahkan sedikit kode. kodenya yang ini :


#tabs6 {

float:left;width:100%;

background:#efefef;

font-size:13px;

line-height:normal;

border-bottom:1px solid #666;

}



kode yang di tambahkan adalah seperti ini :


#tabs6 {

float:left;width:90%;

background:#efefef;

font-size:13px;

line-height:normal;

border-bottom:1px solid #666;

padding-left:10% ;

}



Angka 10% adalah besarnya nilai jarak sela dari sebelah kiri,
silahkan di ubah sesuai kebutuhan.



Untuk yang lainnya, silahkan anda otak-otik sendiri, keburu siang nih belum mandi




mandi dulu ahhhhh....

Horizontal tab menu 10

Pernah melihat menu navigasi yang seperti di bawah ini?

Tertarik untuk memasang menu ini di blognya?

Silahkan baca tutorial lengkapnya di :

http://css-lybrary.blogspot.com/2007/12/horizontal-tab-menu-10.html

Selamat bereksperimen ria!

Horizontal Double Line Menu

Jika pada menu navigasi yang saya sodorkan beberapa yang lalu yaitu
Blue menu Navigation dan juga Blue navigation 2, terlihat dari keduanya
mempunyai single lina menu. Pada menu navigasi yang saya sodorkan sekarang
sedikit berbeda yakni double line menu atau dengan kata lain mempunyai dua buah
style garis yang menopang menu navigasi, mau lihat seperti apa bentuk dari menu navigasinya?
silahkan klik pada tombol di bawah ini :

Bagaimana sobat, tertarik? silahkan ikuti langkah-langkah pemasangannya di sisni !

Horizontal Blue menu 2

Senada dengan menu navigasi kemarin, menu navigasi ini terlihat
mirip akan tetapi ada perbedaannya yaitu jika pada horizontal blue menu
menu navigasi terkesan menengadah ke atas, sedangkan pada Horizontal Blue menu 2
menu navigasi terkesan menggantung. Ingin melihat seperti apa bentuk navigasi dari
css ini, silahkan klik pada tombol di bawah ini :

Mau? begitu kata iklan salah satu operator ponsel   . Dan begitu pun dengan saya, ada yang mau?
silahkan ikuti tutorial nya di sini!



Selamat mencoba !

Horizontal Blue Menu Navigation

Ada suka memasang menu navigasi di header? yang satu ini boleh untuk
di jadikan pilihan.Blue menu navigatioan, biru is my color. Penasaran
ingin melihat seperti apa tampilan menu navigasi ini, silahkan klik
pada tombol di bawah ini :

Bagaimana menurut sobat akan tampilan menu navigasi ini? tertarik? silahkan
ikuti cara instalasinya di sini !



Selamat mencoba !