Showing posts with label scroll. Show all posts
Showing posts with label scroll. Show all posts

March 4, 2011

Elegan Dengan Menu Dropdown

Sebenarnya blogger / blogspot ini, sudah mempunyai menu dropdown, tetapi hal itu berlaku otomatis untuk peng-arsipan, jadi kayak kantor gitu deh ada arsipnya, postingan lama tidak di tampilkan judulnya kecuali setelah di klik muncul dech… Nah tidak hanya blogger tetapi anda juga bisa, tentunya setelah mengikuti langkah langkah dibawah ini, terlebih lagi kalau menu tersebut ternyata kita inginkan untuk link ke konten atau blog kita yang lain. Sebenarnya agak mirip mirip tutorial menu scroll bar kegunaannya menurut salma blog tutorial sih

1. Login dengan akun blogger anda
2. Setelah pada jendela dashbor, klik Desain/Setting
3. Klik add gadget atau tambah gadget
4. Masukkan kode berikut:


Untuk anda yang memakai template baru, langkahnya lebih mudah yaitu :
1. login dulu, tentunya dengan id anda
2. Pilih layout/setting
3. Klik page element, cari element (kotak) yang bertuliskan Blog Archive
4. Klik Edit pada kotak Blog Archive tadi
5. Di samping tulisan Style ada beberapa radio button, pilih radio button yang bertuliskan Dropdown Menu dengan cara memberi tanda checklist
6. Klik Save Changes
7. Selesai
Kalau anda masih kurang puas dengan model yang di paket oleh blogger.com anda juga bisa dengan mengkombinasikan alamat link sebagai, dengan cara menambahkan kode-kode yang sudah ada di bawah nanti.

Langkah untuk memberikan link pada menu drop down adalah sebagai beriku:
1. Login dengan akun blogger anda
2. Setelah pada jendela dashbor, klik Desain/Setting
3. Klik add gadget atau tambah gadget
4. Masukkan kode berikut:

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu><option value=0 selected>tulis text-nya di sini</OPTION>

<option value="isi dengan addres yang ingin di tuju">tulisan di sini yang akan muncul</option> </select></form>

Sebagai contoh untuk menu Dropdown milik saya :

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option>-- salma tutorial --</option>

<option value=" http://tsalma-tutorialblog.blogspot.com/2011/02/tutorial-ganti-template-blog-orisinil.html">Ganti Template</option>

<option value="http://tsalma-tutorialblog.blogspot.com/2011/02/tutorial-memilih-setting-dan-comments.html">setting Blog</option>

<option value="http://tsalma-tutorialblog.blogspot.com/2011/03/tutorial-buat-recent-post-alternatif-di.html">Buat judul posting</option>

<option value="http://tsalma-tutorialblog.blogspot.com/2011/03/tutorial-kreatif-untuk-memilih-kode.html">Kode Warna</option>

<option value="http://tsalma-tutorialblog.blogspot.com/2011/03/tutorial-membuat-menu-scroll-di-sidebar.html">Menu scrol</option>

</select></form>

hasilnya adalah sebagai berikut:

kalau gak percaya ya coba aja

March 2, 2011

Tutorial Membuat Menu Scroll di Sidebar

Untuk mempercantik blog kita, maka ada banyak cara yang bisa dilakukan oleh blogger, karena dalam blogspot juga telah tersedian fitur pendukung untuk itu, tapi kurang nge-top kalau blogger hanya menggunakan fitur yang telah ada , karena bisa ditiru oleh blogger lainnya, kalau kemarin Tiara blog Tutorial memposting tentang tutorial buat recent post alternatif, maka sekarang saatnya anda kombinasikan dengan scroll.

Langkah-langkahnya adalah sebagai berikut :

1. Login dengan akun blogger anda
2. Pada dashbor klik setting
3. Kemudian tambah elemen
4. Pada tab elemen, klik tambah gadget (add gadget) dan pilih javasript
5. Copy kode dibawah ini dan letakkan pada tab yang tersedia

<select style size=5="font-weight: normal; font-size: 13px; width="135"; font-family: Verdana,Tahoma,Arial; background-color: rgb(229, 229, 229);" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1" name="menu">
<option style="font-weight: normal; font-size: 11px; color: rgb(204, 204, 204); font-family: Verdana,Tahoma,Arial;" value="" selected="selected"> Menunya Tiara </option>

<option> Siji </option>
<option> Loro </option>
<option> Telu </option>
<option> Papat </option>

</select>
</div>


kalau mau ganti ganti silahkan, bebas aja asal jangan merubah kode dasarnya, karena bisa jadi tidak akan muncul dalam postingan, oiya untuk postingnya pastingan pada tab Edit HTML (ada di atas sebelah kanan)
6. Selesai

contohnya adalah seperti di bawah ini
menu scroll dibawah ini




Menu ini bisa anda kombinasikan dengan gambar atau tulisan tulisan lainnya, Apalagi kalau anda faham denagan kode java script pasti bisa tok cer.