Buat Menu dan Submenu

CARA MEMBUAT MENU DAN SUB MENU DI BLOGSPOT

Hallo sahabat pada kesempatan kali ini saya akan menjelaskan cara membuat menu dan sub menu di blogspot, menu dan sub menu sangat dibutuhkan agar tampilan menu terlihat lebih rapi dan menarik, baik langsung saja ikuti langkah langkah di bawah ini.

1. Pastikan sahabat sudah masuk kedalam blogspot sahabat.

2. Pilih menu tema kemudian klik "edit html".

3. Pada tampilan "html" sahabat cari script berikut <div class='main-outer'>, agar lebih mudah sahabat gunakan fitur pencarian dengan cara menekan "ctrl+f" di keyboard sahabat, kemudian enter.

4. Setelah scriptnya ketemu, pastekan script berikut tepat di atas script <div class='main-outer'>.

<style>

/* -- Menu Horizontal + Sub Menu-- */

#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}

#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}

#cat-nav a:hover { color:#fff; }

#cat-nav li:hover { background:#000; }

#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}

#cat-nav .nav-description { display:block; }

#cat-nav a:hover span { color:#fff; }

#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }

#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}

#secnav li { float:left; width: auto; height:35px;}

#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}

#secnav li ul li  { height:30px; border-top:1px solid #fff; }

#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }

#secnav li ul ul  { margin: -30px 0 0 180px; }

#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }

#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }

#secnav li:hover,#secnav li.hover  { position:static; }

#cat-nav #secnav {width:100%;margin:0 auto;}

</style>

<div id='cat-nav'>

<ul class='fl' id='secnav'>

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

<li><a href='#'>Menu 1</a></li>

<li><a href='#'>Menu 2</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu2 a</a></li>

<li><a href='#'>Sub Menu2 b</a></li>

</ul>

</li>

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

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu3a</a></li>

<li><a href='#'>Sub Menu3b </a></li>

</ul>

</li>

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

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu4a</a></li>

<li><a href='#'>Sub Menu4b </a></li>

</ul>

</li>

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

</ul>

</div>

PENJELASAN 

1. Cara memasukkan alamat URL:
Ganti tanda # (warna biru) dengan link/url yang anda inginkan. Bisa jadi link posting atau label (katagori) yang ada pada blog anda.
2. Cara menuliskan judul menu atau judul postingan: 

Ganti Tulisan warna biru dengan nama menu dan nama sub menu yang anda inginkan.

3. Cara merubah lebar menu: silakan  cari kode:

#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;} ---> baris ke-3. Kemudian tambahkan kode (width:900px) di antara { dan }, sehingga menjadi :

#cat-nav {background:#156994;width:900px;margin:015px;padding:0;height:35px;} 

Angka 900px hanya sebagai contoh saja, silakan rubah angka 900  dengan ukuran lebar yang kamu inginkan, bisa juga mengganti kode 900px dengan kode 100%.

4. Untuk mengatur tinggi menu silakan ganti angka 35 pada kode 35px di atas dengan tinggi yang kamu mau.

5. Untuk tambah atau kurangi jumlah menu, silakan copas atau hapus Skrip dengan blok warna hijau (1 porsi menu) , jumlah sub-menunya bisa ditambah sesuai selera, misalnya submenu ..c, d, e, f, dst.
6. Untuk mengganti warna, background dan huruf, perhatikan skript di bawah ini.
[1]. <style>   
[2]. /* -- Menu Horizontal + Sub Menu-- */
[3]. #cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}

[4]. #cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px ..........    

A. Mengganti warna background menu: Silakan ganti warna pada baris ketiga yang saya beri warna merah, dengan warna yang anda sukai, silakan klik daftar kode warna.

B. Mengganti warna tulisan/huruf, silakan ganti warina pada baris ke-4 yang saya beri warna hijau dengan warna yang anda sukai (ganti kodenya saja).
C. Mengganti model huruf (font), perhatikan skrip urutan ke-14; gantilah tulisan berwarna ungu dengan jenis font kesukaan anda,
[14]. #secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-

- Setelah itu klik Pratinjau dulu untuk memastikan scrift sudah benar . 

- Lalu simpanlah/save.

Sekian tutorial tentang cara membuat menu dan sub menu di blogspot. Semoga dapat membantu sahabat.

Cara Pasang foto Slide di blogger

Cara Memasang Slide Show di Blog dengan HTML

Burake Toraja

 Cara Memasang Slide Show di Blog Dengan HTML - Awalnya sih ingin membantu sosialisasi program / acara dengan memasang gambar di blog, tapi setelah terpasang koq jadinya monoton. Akhirnya terfikir untuk merubah gambar yang sudah terpasang tersebut dengan menggantinya dengan tampilan Slide Show (gambar yang berubah-rubah / berganti-ganti). Sebenarnya di blogspot sudah menyediakan widget yang bisa langsung dipakai untuk Slide Show ini, namun kelihatannya kok ya terbatas untuk sumber / gambar yang bisa kita tampilkan. Jadi gambar yang tampil kemungkinan tidak sesuai dengan keinginan kita, karena di widget tersebut hanya akan mengambil gambar dari "link feed url" yang kita pilih.

Salah satu cara yang mungkin bisa kita coba adalah dengan menggunakan script di bawah ini :

<script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script>
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
   position: relative;
   width: 350px;
   height: 250px;
   overflow: hidden;
   margin:0 auto;
}
#content-slider img {
   display: block;
   width: 350px;
   height: 250px;
}
</style>
<div id="content-slider">
<img src="URL Gambar 1" />
<img src="URL Gambar 2" />
<img src="URL Gambar 3" />
<img src="URL Gambar 4" />
</div>

 Langkah selengkapnya sebagai berikut :

1. Login ke Akun Blogspot Anda (sudah tahu kan),

2. Masuk ke Dashboard dan pilihlah Tata Letak, (1.tata letak, 2.pilih gadget, 3.pilih HTML / Java Script)

3. Pilih Gadget HTML / Javascript, setelah langkah ke-2 di atas dilanjutkan dengan mengcopy script di atas dan pastekan di Gadget HTML / Java Script yang sudah dipilih tadi (perlu diperhatikan letak gadged yang dipilih agar tidak membuat tampilan blog kita jadi malah berantakan / kurang sedap dipandang) selanjutnya apabila sudah silahkan pilih "simpan"

4. Untuk mengatur gambar yang ingin ditampilkan, silahkan ubah "URL Gambar 1","URL Gambar 2", "URL Gambar 3","URL Gambar 4" dengan url gambar yang sudah anda upload ataupun url yang sudah ada di hosting / internet (flickr, picasa, photobucket, dll).

5. Sedangkan untuk tampilan tinggi atau lebar anda bisa mengubah nilai dari width:350px; atau height: 250px; pada script di atas. Untuk width: 350px; bisa anda ganti menjadi width: 100%; apabila menginginkan tampilan slide yang rapi (tidak terpotong / tidak balance). Sedangkan untuk height: 250px; bisa anda sesuaikan dengan gambar yang tersedia / keinginan anda.

6. Mungkin setelah memasang script ini anda akan menjumpai tampilan blog anda jadi berantakan, hal ini bisa diatasi denga :

• menghapus script pertama (kalau diperhatikan script di atas memuat 2 script)

• sebelum memasang script ini bisa juga dengan mem"parse" kode script terlebih dahulu.

OK, semoga bermanfaat.

Harapan

Kita semua berharap, sampai kapan pun kita akan tetap damai, saling sayang menyayangi, saing Membantu, selalu Kompak dan selalu BAHAGIA Bersama, Amin

Karena Kita punya Misi dan harapan yang sama yaitu
kita adalah Satu "OneDream"

Aku sayang Kalian
                     dan Kalian Juga Sayang Sama Aku
                                                              Love More...........



dan Kita Juga Paham Kita semua akan Jadi Besar Jika Kita Selalu Bersama - Sama.



sekarang Kita Sudah Punya Arisan (One Dream)

dan

Besok Kita akan Punya Koperasi Namaya One Dreams

                                      karena Kita selalu Maju Bersama - Sama.

Tudang

Nama saya sebenarnya Selviana Randakila

Tudang itu nama dikampung dulu
kalo sekarang kan saya sudah di kota jadi namanya di update dikitlah biar gaul, hehehee

Ebong

Perkenalkan

Nama saya Elya Randakila
saya sekarang lagi cari pendamping hidup saya, heheeee

semoga ketemu yang pas dan baik hatinya.

Napa

Napa adalah nama saya,

saya sekarang sudah memiliki satu anak ganteng