Modifikasi lebar dropdownmenu arsip blogspot

Pujangga Blogs

25 February 2011

Modifikasi lebar dropdownmenu arsip blogspot

Kali ini saya akan mencoba berbagi tentang cara modifikasi lebar dropdown menu arsip blogspot. Bila dilihat dari konfigurasi arsip blog, Blogspot menyediakan 3 opsi tampilan arsip, yakni :

Hierarchy.jpg
Hierarchy.jpg

Flat-list.jpg
Flat-list.jpg

dropdown-menu.jpg
dropdown-menu.jpg

Bila anda memilih opsi Dropdown menu dan diterapkan pada sidebar yang lebarnya 200px atau mungkin lebih, akan terlihat ruang kosong yang kurang sedap untuk dilihat, apalagi bila anda seseorang yang perfeksionis dalam hal tampilan web, namun kurang paham kode XML pada blogspot. Pastinya akan membuat anda pusing dan akan bekerja keras untuk mencari solusinya agar tampilan dropdown menu sesuai dengan keinginan.

Mari kita mencoba dan memulainya dengan melihat source code halaman blog. Cukup dengan menekan Ctrl + U pada keyboard, dan kita akan melihat struktur rangkaian kode html blogspot.

Masih pada halaman Source code, tekan tombol Ctrl + F pada keyboard, isi kolom find dengan title arsip blogspot anda. Sebagai contoh, saya mengisikan dengan title ' archives ' pada blog saya.

Source-code.jpg
Source-code.jpg

Bila diperhatikan pada gambar diatas, selektor Archive dengan opsi tampilan dropdown menu dibentuk dengan penggunaan tag <option> , namun masih dalam ukuran value lebar standar ( default ). Berarti kita harus menambahkan secara manual lebar arsip tersebut dengan menambahkan kode CSS pada halaman HTML template blogspot.

Kode CSS
Silahkan anda login ke draft blogger » Design » Edit HTML.

draft-blogger.jpg

Carilah kode </b:skin> pada halaman template HTML anda. dan berikan sedikit ruang kosong diatas dari kode </b:skin>, karena kita akan menyisipkan kode CSS " OPTION " pada ruang kosong tersebut. Kode CSS yang akan kita gunakan adalah sebagai berikut :

<!-- Modifikasi lebar dropdownmenu arsip blogspot
option {width: 250px;}
-->

Keterangan : anda cukup mengganti value "250px" sesuai dengan lebar sidebar blogspot anda.


Contoh gambar :
template-html-blogspot.jpg

Lakukan pengecekan terlebih dahulu dengan menekan opsi "PRIVIEW" . Apabila sudah sesuai dengan keinginan, silahkan SAVE TEMPLATE anda.


Semoga bermanfaat.


0 comments:


Post a Comment

:11
smiley
:12
smiley
:13 smiley :14
smiley
:15
smiley
:16
smiley
:17
smiley
:18
smiley
:19
smiley
:20
smiley
:21
smiley
:22 smiley :23 smiley :24
smiley
:25
smiley
:26
smiley
:27
smiley
:28
smiley
:29
smiley
:30
smiley
:31
smiley
:32
smiley
:33 smiley :34
smiley
:35
smiley
:36
smiley
:34
smiley
:38
smiley
:39
smiley
:40
input code is in the right smile icon image

Silahkan tinggalkan komentar anda dan harap tidak melakukan Spam..!!

Pujangga Blogs

administratorSeandainya segala sesuatu yang telah saya berikan ini bermanfaat bagi rekan-rekan semua.Sungguh saya ucapkan banyak Doa dan terimakasih kepada Mu Allah.SWT yang telah memberikan nikmat Berbagi sesama manusia dengan niat kebaikan dan kemajuan Negeriku ini..

the existence of this blog aims to broaden the information about web design by studying the parts of the structure of the html code for the beginner. Here also you can get the latest info about the entertainment media, affiliate programs etc.

Recent post


Download Free Movie


Pujangga Blogs Head News

Mengubah ILM ads google Untuk mengganti tampilan adsense google yang menampilkan Iklan Layanan Masyarakat tersebut dengan adsense lokal. Anda harus mengupload script adsense lokal dengan extensi html kelayanan webhosting anda.
Recent comment dengan efek overlay menu Following cursorBagi anda yang mempunyai keterbatasan ruang untuk meletakan widget Recent Comments, Saya akan mencoba membantu anda untuk membuat "Widget Recent comments" dengan efek overlay.
Membuat Guestbook Overlay fading headerEfek yang akan saya bahas kali ini adalah membuat tampilan Guestbook dan status twitter melayang dan berada ditengah - tengah halaman blog. Kita akan menyediakan menu guestbook pada sisi kiri halaman.
Membuat Headline Post widget tooltipsHeadline akan menggulung ke atas dengan sentuhan fade out ,seakan konten tersebut hilang dengan perlahan dan konten yang berada di bawahnya akan naik ke atas mengganti konten sebelumnya.
Membuat Number Page Navigation jQueryUmumnya Navigasi halaman dengan angka ini sering kita jumpai pada blog berplatform Wordpress. Namun bagi anda yang menggunakan platform Blogspot tak perlu berkecil hati, karena blogspot pun bisa mengadopsi tampilan NEXT dan PREV dengan widget Page Navigation Number.
Kode adsense didalam post menu navigasiUntuk meletakan Adsense didalam postingan, anda harus meletakan kode Script ads tersebut langsung ke template HTML blogspot. Sebagai langkah awal, silahkan anda login ke blogger.com » Dasboard »Design » Edit HTML » Beri tanda ceklist pada kolom .
1 2 3 4 5 6

Enter your email address:




review www.pujangga-adhitya.blogspot.com on alexa.com

free counters
 

Followers

Live Blog Stats

Recent Comment