Membuat Menu Dropdown

0 komentar
Dalam konsep blog, setiap posting kita akan terarsip otomatis secara rapi setiap bulan. Setiap memasuki bulan baru, seperti Januari, maka arsip bulan Desember akan tampil di sidebar. Masalahnya, kalau kita sudah ngeblog setahun, maka arsip dari Januari sampai Desember akan berjejer di sidebar kita. Bagaimana kalau dua dan tiga tahun lagi?

Langkah praktis mengatasi hal ini adalah dengan membuat pull-down menu seperti di bawah ini:










Jadi, berapa bulan/tahun kita blogging di blogger/blogspot, menu bulan-bulan tsb tidak akan memenuhi dan berjejer panjang di sidebar kita. Yg tampak hanya nama "Archives", baru setelah di klik, akan muncul nama bulan arsip-arsip kita.



Untuk membuat arsip pulldown ini ada dua yakni untuk blogger dengan template klasik, dan template baru. Untuk template klasik langkahnya yaitu :





  1. Login ke blogger.com dg id Anda
  2. Klik Template
  3. Di bagian sidebar blog Anda bagian archives, ada kode html sbb:
  4. &<BloggerArchives> 
    
    
    <a href="<$BlogArchiveURL$"$gt;'><$BlogArchiveName$></a>
    
    
    
    </BloggerArchives>
  5. Nah, ganti kode di atas dg kode html di bawah ini:
  6. <select name="archivemenu"
    onchange="document.location.href=this.options[this.selectedIndex].value;">
    
    
    
    <option selected>- Archives -</option>
    
    
    
    <BloggerArchives>
    
    <option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
    
    </BloggerArchives>
    
    
    
    </select>
  7. Apabila selesai, klik SAVE CHANGES. Bila sudah DONE, klik REPUBLISH.
  8. Selesai.

Untuk anda yang memakai template baru, langkahnya lebih mudah yaitu :



  1. login dulu, tentunya dengan id anda
  2. klik LAYOUT
  3. Klik PAGE ELEMENTS, 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 tik/cek
  6. Klik Save Changes
  7. Selesai

Nah keterangan di atas tadi merupakan langkah-langkah untuk membuat menu Dropdown untuk Arsip, Sekarang bagai mana caranya membuat menu dropdown yang di dalam nya ada linknya, saya ambil contoh untuk menu Dropdown milik saya pribadi yang berada di sebelah kanan atas yang berisi tulisan “ blog tutorial “. Untuk membuatnya silahkan anda copy kode HTML di bawah :




<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu><option value=0 selected>tulisan disini yang akan muncul duluan</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>- Blog Tutorial -</option>





<option value="http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html">Membuat Blog</option>



<option value="http://kolom-tutorial.blogspot.com/2007/04/cara-setting-blog.html">setting Blog</option>



<option value="http://kolom-tutorial.blogspot.com/2007/04/memilih-template.html">Memilih Template</option>



<option value="http://kolom-tutorial.blogspot.com/2007/04/mengatur-hurup-dan-warna.html">warna & hurup</option>



<option value="http://kolom-tutorial.blogspot.com/2007/04/cara-memposting-artikel.html">Posting Artikel</option>



<option value="http://kolom-tutorial.blogspot.com/2007/04/membuat-read-more-1.html">Read more (1)</option>



<option value="http://kolom-tutorial.blogspot.com/2007/04/membuat-text-area.html">Text area</option>



<option value="http://kolom-tutorial.blogspot.com/2007/04/blogger-emoticons.html">Blogger Emoticons</option>



<option value="http://kolom-tutorial.blogspot.com/2007/04/yahoo-messenger-emoticons.html">Yahoo!Emoticons</option>



<option value="http://kolom-tutorial.blogspot.com/2007/04/download-gratis.html">Download Gratis</option>



</select></form>


Hasilnya akan seperti ini :








Mudah bukan?   Selamat mencoba !




Ingin pintar dalam bahasa HTML silahkan download ebook nya di sini .

Ingin pintar membuat Website sendiri, klik di sini.
newer post

CARA MENGGANTI ICON ADRESS BLOG

0 komentar
Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar atau icon pada address bar (kotak untuk mengetikkan alamat web). Dan jika kita punya blog di Blogspot maka icon default yang akan tampil adalah gambar seperti ini :
Bagi kamu yang tidak puas dengan icon/gambar tersebut, kamu bisa menggantinya dengan gambar sesuai dengan keinginanmu. caranya sangat mudah, yaitu dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira2 24x42 pixel sampai 32x32 pixel (sebenarnya ukurannya bebas sih, tapi biar filenya kecil dan proses membukanya cepat). Setelah itu .....
masuk ke "Layout --> Edit HTML" trus tempatkan script berikut sebelum kode </head>

<link href='http://kendhin.890m.com/sonictrik.gif' rel='SHORTCUT ICON'/>

ganti huruf yang dicetak tebal dengan lokasi gambar dimana kamu menyimpannya. Kamu bisa menyimpan gambarmu di 000webhost atau bisa juga di photobucket dan juga di imageshack atau kalo kamu tidak mau pusing dibawah ini ada beberapa contoh icon/gambar beserta dengan linknya.

http://bzupages.com/attachments/1233d1219532514-j.gif
http://i434.photobucket.com/albums/qq69/adheround/Saringgan.gif
http://img98.imageshack.us/img98/9617/image3cr0.gif
http://img134.imageshack.us/img134/633/image4hx4.gif
http://www.ncplus.net/~eli/images/big-grin-smile.gif
http://img509.imageshack.us/img509/6449/image6fu0.gif
http://img527.imageshack.us/img527/6543/image7go9.gif
http://img507.imageshack.us/img507/5774/image8wn8.gif
http://img150.imageshack.us/img150/5784/image9qo1.gif
http://img404.imageshack.us/img404/1214/image10vr1.gif
http://img412.imageshack.us/img412/3808/image11pc0.gif
http://img100.imageshack.us/img100/4658/image12du2.gif
http://img132.imageshack.us/img132/4733/image13lj1.gif
http://img145.imageshack.us/img145/7793/image14zg9.gif
http://img412.imageshack.us/img412/4403/image15jc7.gif
http://img264.imageshack.us/img264/7575/image16kn8.gif
newer post

Mengatur Hurup dan Warna

0 komentar
Untuk para blogger baru, sobat akan menikmati fasilitas baru dari blogger.com, yaitu sobat bisa mengatur jenis font (hurup) serta warna font dengan sangat mudah. Di bawah adalah langkah untuk mengatur Fonts And Colors (khusus untuk blogger baru dengan template baru, sedangkan untuk blogger yang memakai template klasik, menu ini tidak disediakan). Klik menu "Fonts and Colors", maka akan muncul beberapa pengaturan : (ini khusus untuk template "minima")
  1. Page Background color --> pengaturan warna background blog. Silahkan klik warna yang ada di sebelah kanan yang di sukai
  2. Text Color --> pengaturan warna hurup dari posting-an
  3. Link Color --> pengaturan warna hurup yang di link
  4. Blog Title Color --> pengaturan warna hurup judul Blog
  5. Blog Description Color --> pengaturan warna hurup deskripsi blog
  6. Post Title Color --> pengaturan warna hurup judul posting-an
  7. Border Color --> pengaturan warna kotak yang mengelilingi judul blog, serta garis pemisah
  8. Sidebar Title Color --> pengaturan warna hurup judul yang anda di sidebar (kolom samping)
  9. Sidebar Title Color --> pengaturan warna hurup yang ada di sidebar(kolom samping)
  10. Visited link Color --> pengaturan warna hurup link ketika pengunjung mengarahkannya ke tulisan yang mengandung link
  11. Text Font --> pengaturan jenis hurup,berlaku untuk hurup hasil dari posting-an ataupun hurup yang ada di sidebar
  12. Sidebar Title Font --> pengaturan jenis hurup untuk judul yang ada di sidebar serta tanggal postingan
  13. Blog Title Font --> pengaturan jenis hurup Judul blog
  14. Blog Description Font --> Pengaturan jenis hurup dekripsi blog
  15. Post Footer Font --> pengaturan jenis hurup footer (contoh : posted by )
  16. Klik “ SAVE CHANGES” untuk mengakhiri pengaturan. Selesai
Untuk template-template selain template "minima", pada dasarnya sama aja, hanya saja ada sedikit perbedaan, tapi itu tidak sulit. Untuk mengetahui tulisan mana yang sedang di rubah oleh anda, anda cukup melihat mana yang berubah tulisannya pada preview yang terletak sebelah bawah.
newer post
newer post older post Home