Cara membuat menu dropdown vertikal di sidebar

Cara membuat menu dropdown vertikal di sidebar

بِسْــــــــــــــــمِ ﷲِ

Untuk mempercantik blog, dan merapikan tampilan blog agar tidak penuh dengan teks artikel yang menempel sehingga membuat blog terasa sumpek, biasanya di sederhanakan dengan tampilan menu dropdown horizontal bawah header atau dengan menu dropdown vertikal di sidebar. Adapun cara membuat menu dropdown vertikal di sidebar untuk mempercantik blog anda bisa di copy scriptnya di bawah ini. Berikut contoh gambar menu dropdown vertikal.

Untuk cara memasang scriptnya sebagai berikut :

1. Masuk blogger.
2. Edit html blog.
3. Cari kode dan letakkan kode di bawah ini di atas kode

 

4. Masuk ke tata letak, dan tambah gadget atau add gadget JAVA/HTML
5. Copy kode script di bawah ini kedalam gadget JAVA/SCRIPT

 

• Profil


• url artikel anda"

 >Admin

Download
   

   
• Ebook

   
• "

url artikel anda">SOfware
   

Game

   
   

Mata Pelajaran
   

   
• url artikel anda

">Agama
   

url artikel anda

">PKn
   

url artikel anda

">IPA
   

url artikel anda

">IPS
   

url artikel anda

">Matematika
   

url artikel anda

">TIK
   

url artikel anda

">Bahasa Indonesia
   

url artikel anda

">Bahasa Inggris
   

url artikel anda

">Seni Budaya
   

INFO
   

   
• url artikel anda

">Liburan
   

url artikel anda

">Tugas
   

url artikel anda

">Kegiatan
   

url artikel anda

">Nilai
   

Lap. Uang KAS
   

   
• url artikel anda

">KAS Masuk
   

url artikel anda

">KAS Keluar
   
   

Cerita
   

   
• url artikel anda

">Fiksi
   

url artikel anda

">Non Fiksi
   

url artikel anda

">Sejarah
   

url artikel anda

">Lucu
   



</

gaptect

6. Lalu di simpan

Semoga Bermanfaat

Share |

+/- Baca Selengkapnya

Tabel Kode Warna

Nama Warna	Kode Warna	Warna
Black	#000000
Navy	#000080
DarkBlue	#00008B
MediumBlue	#0000CD
Blue	#0000FF
DarkGreen	#006400
Green	#008000
Teal	#008080
DarkCyan	#008B8B
DeepSkyBlue	#00BFFF
DarkTurquoise	#00CED1
MediumSpringGreen	#00FA9A
Lime	#00FF00
SpringGreen	#00FF7F
Aqua	#00FFFF
Cyan	#00FFFF
MidnightBlue	#191970
DodgerBlue	#1E90FF
LightSeaGreen	#20B2AA
ForestGreen	#228B22
SeaGreen	#2E8B57
DarkSlateGray	#2F4F4F
DarkSlateGrey	#2F4F4F
LimeGreen	#32CD32
MediumSeaGreen	#3CB371
Turquoise	#40E0D0
RoyalBlue	#4169E1
SteelBlue	#4682B4
DarkSlateBlue	#483D8B
MediumTurquoise	#48D1CC
Indigo	#4B0082
DarkOliveGreen	#556B2F
CadetBlue	#5F9EA0
CornflowerBlue	#6495ED
MediumAquaMarine	#66CDAA
DimGray	#696969
DimGrey	#696969
SlateBlue	#6A5ACD
OliveDrab	#6B8E23
SlateGray	#708090
SlateGrey	#708090
LightSlateGray	#778899
LightSlateGrey	#778899
MediumSlateBlue	#7B68EE
LawnGreen	#7CFC00
Chartreuse	#7FFF00
Aquamarine	#7FFFD4
Maroon	#800000
Purple	#800080
Olive	#808000
Gray	#808080
Grey	#808080
SkyBlue	#87CEEB
LightSkyBlue	#87CEFA
BlueViolet	#8A2BE2
DarkRed	#8B0000
DarkMagenta	#8B008B
SaddleBrown	#8B4513
DarkSeaGreen	#8FBC8F
LightGreen	#90EE90
MediumPurple	#9370D8
DarkViolet	#9400D3
PaleGreen	#98FB98
DarkOrchid	#9932CC
YellowGreen	#9ACD32
Sienna	#A0522D
Brown	#A52A2A
DarkGray	#A9A9A9
DarkGrey	#A9A9A9
LightBlue	#ADD8E6
GreenYellow	#ADFF2F
PaleTurquoise	#AFEEEE
LightSteelBlue	#B0C4DE
PowderBlue	#B0E0E6
FireBrick	#B22222
DarkGoldenRod	#B8860B
MediumOrchid	#BA55D3
RosyBrown	#BC8F8F
DarkKhaki	#BDB76B
Silver	#C0C0C0
MediumVioletRed	#C71585
IndianRed	#CD5C5C
Peru	#CD853F
Chocolate	#D2691E
Tan	#D2B48C
LightGray	#D3D3D3
LightGrey	#D3D3D3
PaleVioletRed	#D87093
Thistle	#D8BFD8
Orchid	#DA70D6
GoldenRod	#DAA520
Crimson	#DC143C
Gainsboro	#DCDCDC
Plum	#DDA0DD
BurlyWood	#DEB887
LightCyan	#E0FFFF
Lavender	#E6E6FA
DarkSalmon	#E9967A
Violet	#EE82EE
PaleGoldenRod	#EEE8AA
LightCoral	#F08080
Khaki	#F0E68C
AliceBlue	#F0F8FF
HoneyDew	#F0FFF0
Azure	#F0FFFF
SandyBrown	#F4A460
Wheat	#F5DEB3
Beige	#F5F5DC
WhiteSmoke	#F5F5F5
MintCream	#F5FFFA
GhostWhite	#F8F8FF
Salmon	#FA8072
AntiqueWhite	#FAEBD7
Linen	#FAF0E6
LightGoldenRodYellow	#FAFAD2
OldLace	#FDF5E6
Red	#FF0000
Fuchsia	#FF00FF
Magenta	#FF00FF
DeepPink	#FF1493
OrangeRed	#FF4500
Tomato	#FF6347
HotPink	#FF69B4
Coral	#FF7F50
Darkorange	#FF8C00
LightSalmon	#FFA07A
Orange	#FFA500
LightPink	#FFB6C1
Pink	#FFC0CB
Gold	#FFD700
PeachPuff	#FFDAB9
NavajoWhite	#FFDEAD
Moccasin	#FFE4B5
Bisque	#FFE4C4
MistyRose	#FFE4E1
BlanchedAlmond	#FFEBCD
PapayaWhip	#FFEFD5
LavenderBlush	#FFF0F5
SeaShell	#FFF5EE
Cornsilk	#FFF8DC
LemonChiffon	#FFFACD
FloralWhite	#FFFAF0
Snow	#FFFAFA
Yellow	#FFFF00
LightYellow	#FFFFE0
Ivory	#FFFFF0
White	#FFFFFF

Sumber: W3Schools

Semoga Bermanfaat

Share |

+/- Baca Selengkapnya

Membuat Navigasi Halaman Pada Blogger

Navigasi halaman yaitu fitur yang berfungsi sebagai rel untuk menuju ke halaman selanjutnya maupun ke halaman sebelumnya. Mungkin sobat akan lebih jelas lagi kalau sobat langsung pergi ke halaman google.com sekarang juga dan coba perhatikan angka2 halaman yg berada pada bagian paling bawah halaman google search tersebut. Itulah contoh navigasi halaman. contohnya sbb :

+/- Baca Selengkapnya

Membuat Browser Anda Dual Screen

Membuat Browser Anda Dual Screen

javascript:finderonly=location.href;int3rnet=prompt('Masukkan%20URL%201',finderonly);brows3r=prompt('Masukkan%20URL%202',int3rnet);if(int3rnet&&brows3r){F1nd='\n';F1nd+='\n';F1nd+='';with(document){write(F1nd);void(close())}}else{void(null)}


aa

+/- Baca Selengkapnya

Cara Memberikan Read More Pada Setiap Postingan

Anda ingin menampilkan postingan anda hanya beberapa baris saja..? kemudian untuk membaca keseluruhan, anda tinggal menampilkan tulisa read more atau baca di sini.

Anda juga bisa mengganti dengan "selengkapnya di sini" atau apa saja yang menurut anda menarik untuk membuat pembaca penasaran untuk melanjutkan membaca postingan anda.

Jika anda tertarik, silahkan untuk mengikuti langkah-langkah berikut ini :

1. Login ke blog anda
2. Klik Tata Letak
3. Klik Edit HTML
4. Beri tanda centang pada kotak kecil Expand Widget Templates
5. Silahkan cari kode ]]> di dalam template anda
6. Persis setelah kode tersebut, copypastekan script di bawah ini

7. Berikutnya, cari kode

atau kode di dalam template anda
8. Persis setelah kode tersebut, copypastekan script di bawah ini

Selengkapnya..

9. Klik Simpan Template

Sekarang silahkan anda masuk ke postingan anda, dan pastikan anda berada dalam mode Edit HTML, jangan dalam mode Tulis/Compose.

Selanjutnya agar postingan anda terpotong, maka sisipkan kode ini di tempat anda ingin memotong tulisan anda. Dan di paling akhir tulisan anda tambahkan dengan kode .
Untuk itu silahkan ikuti langkah-langkah berikut ini :

1. Masuk ke Blog anda
2. Klik tab Pengaturan
3. Klik tab Format
4. Scroll ke halaman bawah dan temukan kolom Template Posting
5. Pastekan dua script berikut ini ke dalam kolom kosong tersebut

6. Klik Simpan Setelan
7. Selesai

Nah, sekarang setiap kali anda akan membuat sebuah postingan, dua buah script tersebut secara otomatis sudah lebih duluan nyampe di sana dari anda.

Selamat mencoba, semoga bermanfaat

+/- Baca Selengkapnya

Mengatur Huruf dan Warna

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.

+/- Baca Selengkapnya

Cara Mengganti Template

Bagi sobat yang sudah melakukan beberapa setting-an seperti posting terdahulu, langkah selanjutnya yang perlu sobat lakukan adalah memilih template. Sekilas tentang template Template adalah desain-desain halaman web ataupun blog beserta seluruh komponennya (misal : gambar, stylesheet, dsb) baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web. Seperti yang sobat lihat sekarang, seperti banner diatas, background warna putih, kolom-kolom di samping kanan, serta semua yang sobat lihat sekarang adalah salah satu bentuk dari desain template. Memilih template yang cantik sangatlah perlu, karena dengan tampilan template yang menarik untuk di lihat maka akan membuat para pengunjung dari blog kita menjadi betah untuk berlama-lama berada di blog kita selain tentunya isi dari blog kita juga sangat menunjang. Hmmm.. kayanya cukup deh pembahasan tentang apa itu template, keburu bosan kalau lama-lama….Sekarang langsung aja ke topik utama, yaitu langkah-langkah pemilihan template di blogger.com :

• Silahkan sobat login terlebih dahulu seperti biasa dengan memakai user name milik anda ( jangan milik saya….emang nya sampeyan mau jadi hacker ya

• Klik "Tata Letak" (bila sobat menggunakan blogger baru) atau klik "Template" (bila sobat menggunakan template classic).

• Klik "Pick New Template", silahkan sobat pilih template yang sobat suka. Sebelum memutuskan dalam memilih "template" ini, sebaiknya anda lihat terlebih dahulu satu persatu contoh layout yang di sediakan dengan cara meng klik tulisan "preview template". Jika di rasa sudah menemukan yang paling sobat sukai, silahkan klik tulisan "Save template" yang ada di sebelah kanan atas, selesai. :

Mungkin sobat pernah mengunjungi beberapa blog di internet yang menggunakan blogger.com (blogspot), akan tetapi template yang di gunakan tidak ada dalam pilihan ketika memilih template. Ini ada kemungkinan bahwa template yang di gunakan adalah template buatan bukan dari blogger sendiri. Di internet banyak sekali situs-situs yang memberikan template secara gratis untuk di pakai di Blogger (blogspot), Jika ingin melihat-lihat berbagai template buatan bukan dari blogger.com silahkan klik di sini. T

+/- Baca Selengkapnya

Cara Setting Blog

Bagi para sobat yang baru membuat blog, ada beberapa settingan / pengaturan yang harus di lakukan agar blog kita bisa di kenali mesin pencari semisal Google,yahoo, Msn serta teman-temannya yang lain. Bila belum tahu apa yang harus di setting, silahkan ikuti langkah-langkahnya :

1. Silahkan sobat Login ke blogger.com dengan user name dan password milik sobat
2. Klik judul blog yang mau di setting ( jika sobat sudah mempunyai beberapa blog)
3. Klik Pengaturan, trus klik Dasar. Beberapa form yang harus di isi pada menu Dasar :

• Judul ⇒ isi dengan judul blog sobat. Contoh : Blogspot Tutorial

• Uraian ⇒ isi dengan deskripsi blog sobat. Contoh : disini kita akan berbagi pengalaman dan pengetahuan seputar Blog

• Tambahkan blog Anda ke daftar kami? ⇒ pilih ya agar setiap posting kita selalu masuk di daftar Blogger.com.

• Biarkan mesin pencari menemukan blog Anda? ⇒ pilih ya

• Tampilkan Editing Cepat di Blog Anda? ⇒ pilih Ya

• Tampilkan Link Posting Email? ⇒ Sebaiknya pilih ya, tapi pilih tidak juga tidak apa-apa

• Konten Dewasa? ⇒ Pilih tidak. Kalau pilih ya berarti blog anda di anggap blog untuk dewasa (semacam blog porno)

• Tampilkan Mode Compose untuk semua blog Anda? ⇒ pilih Ya

• Aktifkan transliterasi? ⇒ pilih Tidak, jika anda ingin ada button untuk mengubah biasa ke hurup hindi (India), pilih ya jika sebaliknya)

• Klik tombol Simpan Pengaturan . Selesai

4. Klik Publikasi untuk mengatur menu Publikasi :

• Alamat Blog*Spot ⇒ isi dengan nama blog sobat. Contoh : kolom-tutorial. Biasanya alamat yang tercantum adalah langsung alamat blog anda, jadi jangan di ubah aja.

• Klik tombolSimpan pengaturan. Selesai

5. Klik Format untuk mengatur menu format :

• Tampilkan ⇒ pilih angka posting yang ingin anda tampilkan. Missal : Tampilkan : 6 posting, berarti posting yang akan tampil di halaman blog sobat adalah sebanyak enam posting. Pilih posting (jangan hari) pada menu pulldown.

• Format Header Tanggal ⇒ pilih model tanggal/bulan yang anda sukai, Format tanggal/bulan ini akan selalu muncul diatas postingan kita.

• Format tanggal Index Arsip ⇒ pilih model untuk peng-arsip-an yang anda sukai.

• Format Timestamp ⇒ Pilih bentuk waktu yang anda sukai.

• Zona Waktu ⇒ Pilih zona waktu yang sesuai. Contoh untuk WIB : [UTC-+7.00]Asia/Jakarta.

• Bahasa ⇒ Pilih bahasa yang di inginkan.

• Tampilkan Field judul ⇒ Pilih ya
atau tidakpun tidak apa-apa

• Tampilkan kolom link ⇒ pilih ya, tapi seandainya pilih tidak juga tidak apa-apa.

• Aktifkan perataan float ⇒ pilih ya, tapi seandainya mau pilih tidak juga tidak apa-apa

• Klik tombol Simpan Pengaturan. Selesai

6. Klik Komentar Untuk mengatur menu komentar :

• Komentar ⇒ pilih tampilkan, ini agar artikel anda dapat di komentari oleh pengunjung

• Siapa yang Bisa Berkomentar ? ⇒ Pilih Siapa pun - termasuk Pengguna Anonim. Ini di maksudkan agar setiap orang bisa berkomentar tidak terbatas kepada anggota blogspot saja.

• Default Komentar untuk Posting ⇒ pilih Posting baru memiliki komentar.

• Link balik ⇒ Pilih tampilkan. Ini dimaksudkan agar kita mengetahui apabila ada yang memasang link pada artikel kita.

• Default Link Balik untuk Posting ⇒ pilih Posting baru Memiliki Link Balik.

• Format Timestamp Komentar ⇒ pilih format jam yg singkat. Contoh: 8.00 PM.

• Tampilkan komentar dalam sebuah window popup? ⇒ pilih Ya. Supaya ketika di klik oleh pengunjung, halaman blog anda tidak menghilang/tertimpa halaman komntar.

• Aktifkan moderasi komentar? ⇒ pilih Tidak (sebaiknya).

• Tampilkan verifikasi kata untuk komentar? ⇒ pilih Ya. ini di maksudkan agar terhindar dari software robot dengan tujuan melakukan spam.

• Tampilkan gambar profil dalam komentar? ⇒ pilih ya. Supaya gambar komentator yg punya id blogger, dapat menampilkan fotonya.

• Email Pemberitahuan Komentar ⇒ isi dg alamat email anda, ini di maksudkan agar setiap ada yang berkomentar pada artikel anda, anda dapat kiriman email dari blogger.com sebagai pemberitahuan.

• Klik tombol Simpan Pengaturan. Selesai

7. Klik Arsipkan Untuk mengatur menu Arsipkan :

• Frekuensi Arsip ⇒ pilih Bulanan.

• Aktifkan Halaman Posting? ⇒ pilih ya.

• Klik tombol Simpan Pengaturan . Selesai.

8. Klik Fedd Situs untuk mengatur menu feed situs :

• Izinkan Feed Blog ⇒ pilih Penuh.

• Posting URL Pengubahan Arah Feed ⇒ di isi dengan alamat feed penggati semisal alamat feed dari feed burner, jika belum punya, di kosongkan saja.

• Footer Feed Posting ⇒ Silahkan di isi dengan kode iklan yang anda punya, misal kode iklan dari Google adsense dsb, namun jika tidak punya, silahkan kosongkan saja.

• Klik tombol Simpan Perubahan. Selesai.

+/- Baca Selengkapnya

Panduan Membuat Blog Di Blogspot

Selasa, April 17, 2007

Panduan membuat Blog di Blogspot

Mungkin ada diantara anda-anda yang belum tahu tentang blog dan bertanya-tanya tentang blog, maka saya akan mengulas sedikit tentang blog menurut versi saya sendiri.

1. Apa itu Blog ?

Blog ( singkatan dari Web log) adalah situs yang sifatnya lebih pribadi, yaitu lebih berat kepada penggambaran dari si pembuat blog itu sendiri.

Blog dibuat oleh para desainer penyedia blog agar bekerja secara otomatis dan mudah untuk dioperasikan , jadi bagi kita-kita yang masih bingung dengan bahasa pemrograman untuk membuat sebuah website tidak jadi persoalan. Apabila anda sudah bisa membuat sebuah account email di internet, maka dalam membuat blog pun saya yakin anda bisa.

2. Cara membuat blog

Seperti halnya e-mail, dalam membuat blog pun kita harus mempunyai sebuah account terlebih dahulu, oleh karena itu silahkan daftarkan diri anda terlebih dahulu di free blog provider (penyedia hosting/domain blog gratis). Free blog provider sangatlah banyak terdapat di internet dan beberapa yang populer saat ini adalah http://www.blogger.com, http://www.wordpress.com serta http://blogsome.com.


Dalam kesempatan kali ini saya akan mengulas tentang cara pembuatan blog di http://www.blogger.com, Silahkan anda klik gambar dibawah untuk mendaftar.

Setelah anda berada pada situs blogger.com, anda akan melihat gambar seperti gambar di atas. Silahkan lakukan langkah-langkah berikut ini :

1. Klik tanda anak panah yang bertuliskan " CIPTAKAN BLOG ANDA "



2. Isilah Alamat Email dengan alamat email anda (tentunya yang valid)



3. Isikan kembali alamat email anda tadi pada form Ketik ulang alamat email



4. Tuliskan password yang anda inginkan pada form Masukkan sebuah password



5. Isikan kembali password anda tadi pada form Keyik ulang sandi (password)



6. Isi Nama Tampilan dengan nama yang ingin anda tampilkan



7. Tulis tulisan yang tertera pada form Verifikasi Kata. Beri tanda tik/cek pada kotak di pinggir tulisan Saya menerima Persyaratan dan Layanan.



8. Klik gambar anak panah yang bertuliskan "LANJUTKAN"



9. Tuliskan judul blog yang anda inginkan (nanti bisa di rubah lagi) pada form Judul Blog



10. Tulis nama situs anda pada form Alamat Blog (URL)



11. Tulislah tulisan verifikasi yang ditampilkan pada form Verifikasi kata, jika sudah selesai klik gambar panah yang bertuliskan "LANJUTKAN".



12. Pilihlah gambar (template) yang anda inginkan (nanti bisa di rubah lagi), kemudian klik gambar anak panah yang bertuliskan "LANJUTKAN"



13. Setelah keluar tulisan "Blog Anda telah di iptakan". Klik gambar panah bertuliskan "MULAI POSTING". Silahkan anda tuliskan semau anda, jika sudah selesai klik tombol "MEMPUBLISKAN POSTING".

3. Isi ( Content ) blog :

Bagi para pemula, biasanya mereka bingung setelah daftar membuat blog apa yang harus di isi( diposting ) dalam sebuah blog. Isi ( content ) dari sebuah blog tentu saja terserah kepadasi pemilik blog itu sendiri, apakah mau di isi puisi, perjalan hidup, teknik, ataupun apa saja. Nah di sini saya menyarankan, isilah blog anda tersebut dengan minat ataupun hoby serta keahlian anda sendiri, karena tentu saja di luar sana banyak sekali orang yang tentunya sama minat dan hoby nya dengan anda, sehingga mereka akan tertarik untuk membaca tulisan-tulisan anda.

+/- Baca Selengkapnya