Tutorial Blog
Link
Others
TOURING
- Semarang
  - 2a
    - 1
    - 2
  - 2b
    - 1
    - 2
- Kendal
  - 2a
    - 1
    - 2
  - 2b
    - 1
    - 2
- Grobogan
  - 2a
    - 1
    - 2
  - 2b
    - 1
    - 2
RSS

Sabtu, 19 Maret 2011

Menu Navigasi Dalam Navigasi Bar (Navbar) / Menu Navigation The Navigation Bar (Navbar)

Pernahkah anda mengalami kesulitan untuk membuat menu navigasi seperti 'Home', 'About','Daftar Isi',Links dll?
Disini,kita akan belajar membuat navigasi bar (navbar) blogger menu sederhana,seperti kasus diatas.

Jadi,bukan hanya membuat sebuah navbar,melainkan membuat 'menu navigasi' di dalam navbar itu sendiri.
Bingung?

Contoh hasil dari kreasi navbar ini,bisa anda lihat seperti gambar di bawah ini [klik gambar untuk hasil yang lebih besar]:

Sedangkan jika anda ingin memastikan seperti apa sih hasil sebenarnya,silakan kunjungi situsnya langsung di SINI.
Bagaimana? tertarik untuk membuatnya?

Langkah Membuat Navbar Blogger Sederhana

Sesederhana judul artikel ini,penempatan barisan kode css maupun kode untuk navbarnya,sangat sederhana sekali.
Sekali lagi,tutorial membuat navbar ini hanya untuk blogspot dari blogger saja ya :p

Pertama,Pergilah ke Dashboard blogger anda,lalu pilih Tata Letak,selanjutnya seperti biasa pilih tab Edit HTML.
Selanjutnya,contreng tulisan Expand Widget Templates.
Lalu cari kode berikut:

</head>
[untuk membantu,carilah menggunakan keyboard dengan menekan tombol alt+F]

Setelah ketemu,letakkan kode css berikut persis di atas kode </head> tersebut.

<style type="text/css">
#pelajaranblognav img {
margin: 0px 0px -8px 0px;
vertical-align: middle;
}
#pelajaranblognav {
background-color: #222222;
width: 100%;
left: 0px;
text-align: center;
font-family: Arial, Tahoma, Verdana;
font-size: 12px;
z-index:10000;
bottom:0;
}
#pelajaranblognav ul {
margin: 0px;
padding: 0px;
list-style: none;
color:white;
font-family:arial;
font-size:11px;
}
#pelajaranblognav a {
background: #222222;
color: #FFFFFF;
text-decoration:none;
font-weight: bold;
margin: 0px;
padding: 8px 12px 8px 12px;
border-left: 0px solid #444444;
border-top:0px solid #444444;
border-right: 0px solid #000000;
border-bottom: 0px solid white;
}
#pelajaranblognav a:visited {
background: #222222;
color: #FFFFFF;
text-decoration:none;
font-weight: bold;
margin: 0px;
padding: 8px 12px 8px 12px;
border-left: 0px solid #444444;
border-top:0px solid #444444;
border-right: 0px solid #000000;
border-bottom: 0px solid white;
}
#pelajaranblognav a:hover {
background: #222222;
color: green;
text-decoration:none;
font-weight: bold;
margin: 0px;
padding: 8px 12px 8px 12px;
border-left: 0px solid #444444;
border-top:0px solid #444444;
border-right: 0px solid #000000;
border-bottom: 0px solid white;
}
#pelajaranblognav li {
float: left;
margin: 0px;
padding: 0px;
}
#copyright a {
text-decoration: none;
font-family:arial;
font-size:11px;
}
#copyright {
color: black;
text-decoration: none;
float:right;
font-family:arial;
font-size:11px;
}
</style>

Jika sudah anda letakkan kodenya css-nya,sekarang cari lagi kode berikut:

<body>

Jika sudah ketemu,letakkan kode berikut persis di bawahnya.

<div id="pelajaranblognav">
<table border="0" bgcolor="#222222">
<tr>
<br/><ul><li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Daftar Isi</a></li>
<li><a href="http://pelajaran-blog.blogspot.com/">Belajar Blog</a></li>
<li><a href="http://cepat-terindex-google.blogspot.com/">Belajar Seo</a></li>
<li><a href="#">Links</a></li></ul>
<td>
<a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"><img border="0" src="http://www.awsurveys.com/Pictures/AWS2_ad3_600by100.jpg" width="500" height="80"/></a>
</td>
<td>

<center><a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro

"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/>
<center><a href="

http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro

"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/>


</td>

<td>
<center><a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro

"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/>
<center><a href="

http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro

"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/>

</td>

</tr>
</table>
</div>
<div id="copyright">
Langganan <a href="http://url_blog_anda.blogspot.com/feeds/posts/default" target="_self"><b>RSS Artikel</b></a>
| Langganan <a href="http://url_blog_anda.blogspot.com/feeds/comments/default" target="_self"><b>RSS Komentar</b></a>
|  Buat <a  href="http://pelajaran-blog.blogspot.com/2009/11/belajar-membuat-navigasi-bar-navbar.html"  target="blank"><b>Navbar</b></a> Ini Di Blog Kamu
</div>

Setelah itu Simpan Template,dan lihat hasilnya sekarang :D

Keterangan:

Untuk tanda #,gantilah dengan url alamat yang ingin anda tuju.
Untuk http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro,gantilah dengan alamat iklan banner anda.
Untuk http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg,gantilah dengan url gambar banner anda.
Untuk http://url_blog_anda.blogspot.com/,gantilah dengan url blog anda.

Semoga bermanfaat dan modifikasilah sesuai selera anda masing-masing.
Goosd Luck Ya!

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

Menu Navigation The Navigation Bar (Navbar)
Have you ever had difficulty to make a navigation menu like 'Home', 'About', 'Contents', Links, etc.?
Here, we will learn to create a navigation bar (navbar) bloggers a simple menu, like the case above.
So, not only create a navbar, but make 'navigation menu' in the navbar itself.
Confused?
Sample results from this navbar creations, like the picture you can see below [click image for greater results]:
Navigation Bar / Blogger Navbar
Meanwhile, if you want to make sure like what actual results, please visit the site directly HERE.
How? attracted to him?
Simple Steps to Make Blogger Navbar
Simple as the title of this article, the placement of rows of css code and the code for navbarnya, very simple.
Once again, the tutorial makes this navbar blogspot from bloggers just to be yes: p
First, Go to your Blogger Dashboard, select Layout, then as usual select Edit HTML tab.
Next, tick the writing Expand Widget Templates.
Then find the following code:
</ Head>
[For help, seek to use the keyboard by pressing alt + F]
After the meet, put the following css code right above the code </ head> it.
<style type="text/css"># Pelajaranblognav img {margin: 0px 0px 0px-8px;vertical-align: middle;}# Pelajaranblognav {background-color: # 222222;width: 100%;left: 0px;text-align: center;font-family: Arial, Tahoma, Verdana;font-size: 12px;z-index: 10000;bottom: 0;}# Pelajaranblognav ul {margin: 0px;padding: 0px;list-style: none;color: white;font-family: arial;font-size: 11px;}# Pelajaranblognav a {background: # 222222;color: # FFFFFF;text-decoration: none;font-weight: bold;margin: 0px;padding: 8px 12px 8px 12px;border-left: 0px solid # 444444;border-top: 0px solid # 444444;border-right: 0px solid # 000000;border-bottom: 0px solid white;}# Pelajaranblognav a: visited {background: # 222222;color: # FFFFFF;text-decoration: none;font-weight: bold;margin: 0px;padding: 8px 12px 8px 12px;border-left: 0px solid # 444444;border-top: 0px solid # 444444;border-right: 0px solid # 000000;border-bottom: 0px solid white;}# Pelajaranblognav a: hover {background: # 222222;color: green;text-decoration: none;font-weight: bold;margin: 0px;padding: 8px 12px 8px 12px;border-left: 0px solid # 444444;border-top: 0px solid # 444444;border-right: 0px solid # 000000;border-bottom: 0px solid white;}# Pelajaranblognav li {float: left;margin: 0px;padding: 0px;}# Copyright a {text-decoration: none;font-family: arial;font-size: 11px;}# Copyright {color: black;text-decoration: none;float: right;font-family: arial;font-size: 11px;}</ Style>
If you already put the css code, it is now looking again the following code:
<body>
If you've met, put the following code just below it.
<div id="pelajaranblognav"><table border="0" bgcolor="#222222"><tr><br/> <li> <a href="#"> Home </ a> </ li><li> <a href="#"> About </ a> </ li><li> <a href="#"> Table of Contents </ a> </ li><li> <a href="http://pelajaran-blog.blogspot.com/"> Learning Blog </ a> </ li><li> <a href="http://cepat-terindex-google.blogspot.com/"> Learning Seo </ a> </ li><li> <a href="#"> Links </ a> </ li> </ ul><td><a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"> <img border = "0" src = "http://www.awsurveys.com/Pictures/AWS2_ad3_600by100.jpg" width = "500" height = "80 "/></ a></ Td><td> <center> <a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"> <img border = "0" src = "http://www.awsurveys.com/ Pictures/AWS_ad3_150by150.jpg "width =" 80 "height =" 50 "/></ a> </ center> <br/><center> <a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"> <img border = "0" src = "http://www.awsurveys.com/Pictures/AWS_ad3_150by150 . jpg "width =" 80 "height =" 50 "/></ a> </ center> <br/></ Td> <td>
<center> <a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"> <img border = "0" src = "http://www.awsurveys.com/Pictures/AWS_ad3_150by150 . jpg "width =" 80 "height =" 50 "/></ a> </ center> <br/><center> <a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"> <img border = "0" src = "http://www.awsurveys.com/Pictures/AWS_ad3_150by150 . jpg "width =" 80 "height =" 50 "/></ a> </ center> <br/>
</ Td>
</ Tr></ Table></ Div><div id="copyright">Subscriptions <a href="http://url_blog_anda.blogspot.com/feeds/posts/default" target="_self"> <b> RSS Articles </ b> </ a>| Subscriptions <a href="http://url_blog_anda.blogspot.com/feeds/comments/default" target="_self"> <b> RSS Comments </ b> </ a>| Create <a href="http://pelajaran-blog.blogspot.com/2009/11/belajar-membuat-navigasi-bar-navbar.html" target="blank"> <b> Navbar </ b> < / a> This On You Blog</ Div>
After that, Save Template, and see the results now: D
Description:

        To sign #, replace with the url address you want to go.
        To http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro, change the address of your banner ads.
        To http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg, replace with your banner image url.
        To http://url_blog_anda.blogspot.com/, replace with url of your blog.
Hopefully useful and modify according to your taste each one.
Goosd Luck Yes!

Selasa, 15 Maret 2011

Cara Membuat Menu Blogger plus search

Bismillahirahmanirrahim. Pada tutorial kali ini kita akan membahas bagaimana caranya membuat menu bloggger. Menu blogger yang akan kita buat nantinya terdapat pula fasilutas kotak pencarian blogger (search blogger). Sebelum kita masuk ke langkah-langkah pembuatan menu blogger + kotak pencarian blogger sebaiknya kalian liat dulu tampilan menu bloggernya pada link demo di bawah ini.

Download Demo

Pertama kalian harus login dulu di blogger
Setelah login pilih Racangan --> Edit HTML dan beri cheklis pada Expand Template Widget
Copy paste kode di bawah ini sebelum kode ]]></b:skin>

#menusemua{height:120px;margin-top:12px;float:left;width:920px;} #menueko{height:34px;float:left;width:600px}
#menueko,#menueko ul{padding:0;margin:0;list-style:none;line-height:1} #menueko{margin-bottom:1px}
#menueko ul{float:left;list-style:none;margin:0 0 0 0;padding:0}
#menueko li{float:left;list-style:none;margin:0;padding:0 6px 0 0}
#menueko ul li{list-style:none;margin:0;padding:0}
#menueko li a,#menueko li a:link{color:#fff;display:block;border:1px solid #fff; margin:0;padding:8px 8px 8px 8px;text-decoration:none;text-transform:uppercase;font:bold 11px Arial,Helvetica,sans-serif;background:#0D606B;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#menueko li a:hover,#menueko li a:active{color:#AAEDF6;display:block;text-decoration:none;background:#003D45}
#menueko li.current_page_item a{color:#fff;}
#menueko li:hover,#menueko li.sfhover{position:static}

#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #EEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7no1vU2RjWqUdnAAXIFmfFrm7FNsetGAYKvjDRbs8CJ75rs5C7TPDIae20E8lQbTPLqVuTGPwoTqQCbJjg3vMhg85XINgZtVg1HyE88Z1c-Fvu2B2SosBwna4j_cKb1Hnnn2eoE9iTF8Y//) no-repeat left top;
width: 180px;
height: 16px;
color: #202020;
font-size: 12px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight: normal;
margin: 2px 0px 0px 15px;
padding: 4px 0px 3px 25px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
display: inline;

#searchbutton {
background: #1c426d; /* Warna background tombol pencari */
color: #FFF; /* Warna teks tombol pencari */
font-size: 11px;
font-family:Verdana,Arial,Helvetica,sans-serif;
margin: 0px;
padding: 3px 0px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}

Lalu Copy paste lagi kode di bawah ini di widget HTML

<li><a href='http://cktpanellistrik.blogspot.com/2010/04/panel-distribusi-lvmdplvsdp.html'>Panel listrik</a></li>
<li><a href='http://www.cantiknya-ilmu.co.cc/2010/07/tool-parse-html.html' title='posts rss'>Tools</a></li>
<li><a href='http://www.cantiknya-ilmu.co.cc/feeds/posts/default' title='comments rss'>Posts RSS</a></li>
<li><a href='http://www.cantiknya-ilmu.co.cc/feeds/comments/default' title='comments rss'>Comments RSS</a></li>
</ul>

Simpan template dan liat hasilnya

Mungkin sampai disini dulu tutorial kali ini. Kalian ada yang kurang paham bisa tanyakan pada kotak komentar dan kalau ada kekurangan mohon tulis juga saran dan kritiknya di kotak komentar. Terima kaish telah berkunjung dan tunggu posting-posting lainnya.

Jumat, 11 Maret 2011

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.

cara menyimpan file javascript ke google gratis

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

form yang harus diisi untuk mendaftar di hosting google codes gratis

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

langkah-langkah cara menggunakan hosting google codes

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.

menyimpan file javascripts ke dalam hostin google

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:

Silahkan login terlebih dahulu pada akun Blogspot pembaca
Klik link menu Tata Letak dan pilih sub menu Edit HTML dan beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
Jangan lupa untuk membackup terlebih dahulu template pembaca agar jika terjadi kesalahan bisa dikembalikan lagi pada kondisi semula. Klik link Download Template Lengkap
Copy paste kode berikut di atas tag </head>
<script type="text/javascript" src="http://nestoriko.googlepages.com/chrome.js"> </script>
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; }
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>
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>  <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>  <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>
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>  <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>  <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>  <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>
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.
"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.
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" />



<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>



<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

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

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²

Kamis, 10 Maret 2011

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:

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:
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:
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:
Kode di atas akan tampil dengan barisan urutan huruf seperti ini:

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

Untuk OL yang berbentuk angka Kodenya:
Nah kode OL yang ini akan tampil dengan urutan angka seperti ini:

Di sini isi text dan linknya
Di sini isi text dan linknya
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

Rabu, 09 Maret 2011

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:

#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:

<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

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.

Selasa, 08 Maret 2011

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:

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:

Login bloggger
Masuk ke rancangan lalu masuk ke menu edit html
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

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

Selamat Mencoba.....