Membuat Menu Navigasi Horizontal Dengan Sub Menu Navigasi Vertikal

Mumpung mood lagi bagus,mumpung doku lagi tebel dan mumpung blog lagi sepi,saya mencoba untuk memposting kembali kaitannya belajar menghias blog.  Beberapa minggu lalu saya sudah bagikan dari informasi yang saya dapat dari dunia maya,bagaimana membuat menu navigasi css di blogger. Bagi yang belom membaca,silakan langsung klik di sini. Nah,dari email sahabat yang saya terima,menanyakan bagaimana sih membuat menu navigasi horisontal / horizontal dengan submenu / sub menu navigasi vertikel seperti pada blog ini? Bukan suatu kesengajaan,menu navigasi dengan sub menu ini juga saya peroleh dari hasil surfing berbagai blog tutorial untuk blogspot. Bagi kamu yang penasaran bagaimana cara membuat menu navigasi dengan sub menu,bisa ikuti langkah berikut ini. Langkah dan Cara Membuat Menu Navigasi dengan Sub Menu Untuk Blogger Pertama,pergilah ke Dashboard (Gb.1) blog yang akan anda beri menu navigasi dengan sub menu ini. Gb.1 Selanjutnya pilih tab Edit Html (Gb.2). Gb.2 Setelah itu,contreng tulisan / checkbox 'Expand Widget Templates' (Gb.3). Gb.3 Setelah itu carilah kode seperti ini ]]></b:skin> (Gunakan Ctrl+F pada keyboard untuk mempermudah pencarian),setelah ketemu letakkan kode dibawah ini tepat diatas kode]]></b:skin> tersebut. #NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; 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 { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #ffffff; 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; } Setelah itu Simpan Templates. Sekarang giliran kita menentukan dimana tempat menu navigasi submenu ini akan kita letakkan. Pilih Tab Rancangan / Tata Letak pada Dashboard blog anda,seperti (Gb.1),selanjutnya klik tulisan 'Add New Widget / Tambah Gadget'(Gb.4),dan pilihlah Html / Javascript(Gb.5) Gb.4 Gb.5 Setelah itu letakkan kode berikut pada widget HTML / Javascript tersebut. <div class='menuhorisontal'> <ul id='nav'> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Utama Ganti Sesuai Keinginan</a> <ul> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'></ul> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Utama Ganti Sesuai Keinginan</a> <ul> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> </ul> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> </ul> </div> Lalu simpan,selesai dan lihat hasilnya

Read more

Membuat Menu Navigasi CSS Di Element Baru

Membuat menu navigasi,adalah pelajaran yang paling banyak di pertanyakan oleh blogger-blogger pemula,termasuk saya beberapa hari yang lalu. Disini kita akan membahas tentang bagaimana membuat menu makanan 4 sehat 5 sempurna, Hus !! bukan,maksudnya Menu Navigasi dengan CSS. Tapi tidak seperti kebanyakan,biasanya mereka meletakkan di bawah kode <body>,tapi di sini kita akan meletakkan kodenya di Element HTML/Javascript yang baru. Apa itu CSS? kita akan bahas beberapa hari lagi,berhubung yang kita bahas kali ini Menu Navigasinya. Seperti apa sich contoh Menu Navigasi? Navigasi pada web / blog,sesuai dengan namanya,yaitu untuk menuntun jalan,supaya web / blog lebih mudah di telusuri. Contoh bentuk fisiknya seperti di bawah ini : Edit Aku Edit Aku Edit Aku Edit Aku Untuk membuatnya kali ini,kita minta bantuan CSS,apa itu CSS,kita bahas naa..ant : (,tadi sudah di omongiiin!!!! #$%#! . Cara membuatnya sederhana sekali,berhubung kita dengan bantuan CSS,kita tak perlu membuat tabel untuk Menu Navigasi seperti di atas. Tapi,yang paling surprise buat gw waktu aku jalan-jalan ke Blok-M,tiba-tiba aku ngliat yang belum pernah...OOee!!Ngemeng aja!ntar aja ceritanya ngapa !! Ok! berhubung ntar malah tambah bikin rusuh suasana,kan dapet dosa tuh!,kalo dosa,kita masuuk Nera...@#$@#$@!!gUBRAK! gw bilang ntar ya ntar ceritanyaaa!! Ya..ya.ntar aja ceritanya ya..Ok langsung ke topik,kita hari ini. Langkah pertama,pergi ke Dashboard (untuk blogspot),lalu pilih Tata Letak,selanjutnya pilih tab Edit HTML. Lalu cari kode ]]></b:skin>,jika sudah ketemu,tepat diatasnya,letakkan kode di bawah ini : #NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; 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 { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #ffffff; 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; } Jika kode sudah anda letakkan,lalu Simpan Template. Selanjutnya pilih Tab Tata Letak,dan buat Element Baru / Add New Widget,pilih HTML / Javascript. Lalu letakkan kode di bawah ini pada halaman HTML / Javascript yang baru saja anda pilih. <ul id='nav'> <li><a href='http:///'>Menu 1</a></li> <li><a href='http:///'>Menu 2</a></li> <li><a href='http:///'>Menu 3</a></li> <li><a href='http:///'>Menu 4</a></li> </ul> Jika kode sudah anda letakkan,lalu pilih Simpan,dan anda bisa langsung lihat hasilnya. Untuk http:/// ,anda isi dengan alamat URL yang akan di tuju,sedagkan untuk Menu 1,2,3,4 ,Untuk tulisan yang akan tampil,sedangkan jika ingin menambahkan satu kolom lagi,anda tinggal menulis satu baris lagi,baris yang mana? Copy aja salah satu kode : <li><a href='http:///'>Menu 4</a></li>,dan paste persis di bawahnya.

Read more

Membuat Address Bar Berjalan

Banyak cara membuat tampilan blog terlihat berbeda dan  agar menarik perhatian pengunjung, diantara adalah membuat adress bar menjadi berjalan. Teks berjalan bisa berupa sapaan, pemberitahuan ataupun yang lain.

Caranya cukup mudah, berikut langkah-langkahnya :

1. Login ke blogger.
2. Klik menu design/rancangan.
3. Untuk lebih aman sebaiknya sobat backup template terlebih dahulu.
4. Klik edit HTML. (jangan lupa centang "Expand Template Widget")
5. Cari kode </head>  (tidak perlu scroll sampai kebawah, karena posisinya di bagian atas, atau untuk lebih mudah sobat bisa gunakan CTRL+F)
6. Setelah ketemu copy script di bawah ini tepat di bawahnya.

<script type='text/javascript'>

//<![CDATA[

msg = "...Selamat datang...";

msg = "...Selamat datang..." + msg;pos = 0;

function scrollMSG() {

document.title = msg.substring(pos,   msg.length)+msg.substring(0, pos); pos++;

if (pos > msg.length) pos = 0

window.setTimeout("scrollMSG()",100);

}

scrollMSG();

//]]>

</script>

        7.   Klik simpan, dan lihat hasilnya.

Catatan :

• Tulisan berwarna biru bisa sobat rubah sesuai keinginan.
• Angka 100 merupakan kecepatan   teks itu berjalan, semakin besar nilai angka maka semakin lambat kecepatannya.

Read more

Membuat Teks Kedip Atau Bergerak Ke Kiri Dan Kanan

Ketika kita membaca artikel pada suatu blog sering kita menjumpai teks terlihat berkedip-kedip (efek blink), bergerak dari kiri ke kanan, bergerak dari kiri ke kanan secara bolak-balik ataupun bergerak secara vertikal dari bawah.ke atas (efek marquee). Untuk membuat teks yang memiliki efek blink ataupun efek marquee sangatlah sederhana, kita hanya menambahkan beberapa kode yang disisipkan pada kata/kalimat target pada edit HTML. Bagi sobat yang belum tahu bagaimana caranya menerapkan efek ini pada postingan berikut caranya :

A.   Membuat teks berkedip.

Kodenya :  <blink>Masukan teks di sini</blink>

Maka hasilnya seperti ini :

Masukan teks di sini

B.   Membuat teks bergerak dari kiri ke kanan. 

Kodenya :  <marquee>Masukan teks di sini</marquee>

Maka hasilnya seperti ini :

Masukan teks di sini

C.   Membuat teks bergerak dari kiri ke kanan bolak-balik.

Kodenya :  <marquee behavior="alternate">Masukan teks di sini</marquee>

Maka hasilnya seperti ini :

Masukan teks di sini

D.  Membuat teks bergerak dari bawah ke atas.

Kodenya :  <marquee direction="up">Masukan teks di sini</marquee>

Maka hasilnya seperti ini :

                                                                 Masukan teks di sini

E.  Membuat teks bergerak dari bawah ke atas bolak-balik.

Kodenya :  <marquee direction="down" behavior="alternate">Masukan teks di sini</marquee>

Maka hasilnya seperti ini :

                                                                 Masukan teks di sini

Begitu mudah dan sederhana bukan...?

Read more

Cara Membuat Horizontal Acrobatic Menu

Beberapa hari ini saya memang jarang update blog ini dikarenakan saya lagi mendalami untuk belajar WP. Tapi sebisa mungkin saya akan update blog sederhana ini meskipun hanya tutorial sederhana. Pada kesempatan kali ini kita akan membahas Cara Membuat Horizontal Acrobatic Menu. Tutorial ini saya dapatkan beberapa hari lalu dari sahabat saya Azis Lamayuda. Langsung saja lihat demonya.

LIVE DEMO

Untuk cara membuatnya, ikuti langkah-langkah di bawah ini.

1. Pasang kode css berikut di atas ]]></b:skin>

ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 100%;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}
ul#topnav.v2 span{
background: url(http://lh5.ggpht.com/_7ZIYPUkIUEw/TL0HX2yw0sI/AAAAAAAAAB4/5tZqAjpcOnE/menu.png) repeat-x left top;
}
ul#topnav.v2 a{
color: #555;
background: url(http://lh5.ggpht.com/_7ZIYPUkIUEw/TL0HX2yw0sI/AAAAAAAAAB4/5tZqAjpcOnE/menu.png) repeat-x left bottom;
}

2. Pemasangan jquery di atas </head>

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


<script type='text/javascript'>




$(document).ready(function() {




$(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;); //Throws an empty span tag right before the a tag


$(&quot;#topnav li&quot;).each(function() { //For each list item...
var linkText = $(this).find(&quot;a&quot;).html(); //Find the text inside of the a tag
$(this).find(&quot;span&quot;).show().html(linkText); //Add the text in the span tag
});


$(&quot;#topnav li&quot;).hover(function() { //On hover...
$(this).find(&quot;span&quot;).stop().animate({
marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find(&quot;span&quot;).stop().animate({
marginTop: &quot;0&quot; //Move the span back to its original state (0px)
}, 250);
});




});
</script>

3. Selanjutnya cari kode berikut

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

4. Pasang kode HTML untuk menu berikut di bawah kode di atas

<ul class='v2' id='topnav'>


<li><a href='/' title='HOME'>HOME</a></li>


<li><a href='#' title='MENU 1'>MENU 1</a></li>


<li><a href='#' title='MENU 2'>MENU 2</a></li>


<li><a href='#' title='MENU 3'>MENU 3</a></li>


<li><a href='#' title='MENU 4'>MENU 4</a></li>


<li><a href='#' title='MENU 5'>MENU 5</a></li>


<li><a href='#' title='MENU 6'>MENU 6</a></li>
</ul>

5. Save template

Note: Untuk pemasangan menu, sobat tidak di haruskan meletakkan di bawah kode di atas tadi. Sobat bisa meletakkannya di add gadget, tinggal sesuaikan dengan template saja.

Semoga bermanfaat.
Alhamdulillah..

Read more