Cara Modifikasi Tampilan Header Sidebar Blogger

Bro sist, Tips Trik Blogger kembali lagi nih dengan posting tentang CSS setelah sekian lama blog ini jarang di-update karena kesibukan mengurus beberapa toko online.

Mungkin sobat merasa kurang puas dengan tampilan judul header sidebar blog sobat. Kurang inilah, kurang itulah, terlalu gelaplah, atau warnanya kurang menarik. Atau, mungkin pula background pada title sidebar terlalu mengganggu dan ingin dihilangkan. Tips berikut mungkin bagi sobat yang sudah pernah mengutak-utik CSS (intermediate), namun tidak ada salahnya pula bagi sobat newbie blogger untuk mempelajari CSS dengan memulainya dari mengubah aturan CSS pada judul sidebar.

Di Blogger, seperti pada web pada umumnya, seluruh tampilan diatur dengan CSS. So, begitu pula dengan judul sidebar, tampilannya diatur dengan CSS melalui properti dan declarator tertentu. Sebelumnya kita ambil poin penting pada perintah CSS header. CSS header memiliki deklarator sama seperti kode HTML (<h1>judul</h1>), yaitu h. Karena merupakan header, judul sidebar pun mengandung deklarator h.

Judul header sidebar biasanya merupakan jenis header level 2 , yaitu <h2>judul</h2>. Maka, mula-mula pada edit HTML/template Blogger, carilah aturan CSS yang mengandung h2, yaitu bagian CSS yang mengatur seluruh header blog level 2. Aturan CSS berada di antara <b:skin><![CDATA[ dan ]]></b:skin>.
Contoh sederhananya:
h2 {
background: #000;
margin:4px;
padding: 5px;
color: #f0f0f0;
line spacing: 1px;
line-height: 13px;
border: 1px solid #fff;
}
Tentunya aturan tersebut berbeda-beda pada masing-masing template Blogger.

Sebelum berfokus pada pengubahan tampilan header sidebar, perlu diketahui bahwa h2 mengatur seluruh tampilan header blog pada level 2. Sedangkan bagian CSS yang mengatur sidebar secara keseluruhan biasanya dinamai sidebar-wrapper (atau sejenisnya, misal sidebarwrapper, dll, cari yang mirip), maka judul pada sidebar-wrapper biasanya pula ditandai dengan deklarator dengan id-nya, yaitu #sidebar-wrapper h2.
Contoh:
#sidebar-wrapper h2 {
background: #000;
margin:4px;
padding: 5px;
color: #f0f0f0;
line spacing: 1px;
line-height: 13px;
border: 1px solid #fff;
}
Pada template tertentu, misalnya minima template, aturan CSS ini tidak ada, maka sobat harus menambahkan sendiri. Nantinya, buat terlebih dahulu lalu letakkan h2 atau #sidebar-wrapper h2 di antara <b:skin><![CDATA[ dan ]]></b:skin>. Jika tidak ada #sidebar-wrapper (atau sejenisnya; yaitu elemen wrapper pada sidebar), maka gunakan saja h2.

Memodifikasi Elemen CSS Pada Sidebar Header (Judul Sidebar)

Untuk melakukan modifikasi, ada beberapa elemen/properti CSS yang perlu diketahui. Properti CSS yang mengatur posisi pada umumnya adalah: margin dan padding. Kemudian color adalah untuk mengatur warna font. Line height adalah untuk mengatur tinggi jarak antar baris, dan line spacing adalah jarak antar huruf. Background adalah untuk mengatur warna latar dari bagian header. Sobat bisa menambahkan elemen/properti lain untuk menambah tampilannya. Untuk melakukan uji coba dalam mengubah nilainya secara aman, backup template terlebih dahulu. Kemudian silahkan ubah nilai masing-masing properti. Jangan di save dulu. Lihat hasil tampilannya dengan meng-klik "Preview". Jika sudah beres, baru "Save". Untuk mengetahui seluruh elemen/property styling CSS, silahkan lihat di w3schools.com.

Menambahkan Icon/Gambar di Sebelah Judul/Title Header Sidebar

Melalui aturan CSS, sobat dapat mempercantik tampilan judul sidebar dengan gambar. Trik ini dilakukan dengan cara menambahkan elemen background gambar dan memposisikannya sedemikian rupa. Tambahkan url(alamatgambar.jpg) pada bagian background.
contoh:
h2 {background: url(http://www.alamaturlgambar/icon.jpg) #000:}
Agar gambar tidak berulang (memenuhi background):
h2 {background: url(http://www.alamaturlgambar/icon.jpg) no-repeat #000:}
Selanjutnya, jika ingin gambar berada di sebelah kiri tulisan judul sidebar:
h2 {background: url(http://www.alamaturlgambar/icon.jpg) no-repeat left center #000:}
Agar berada di sebelah kanan judul sidebar:
h2 {background: url(http://www.alamaturlgambar/icon.jpg) no-repeat right center #000:}
Kemudian, atur besar padding agar tulisan tidak bertabrakan dengan icon/gambar. Pada beberapa kasus, padding ditulis secara individual: padding-left, padding right, padding-top, dan padding-bottom. Ubah nilai pada padding left jika gambar di sebelah kiri. Jika gambar di sebelah kanan, ubah nilai padding-right. Nilai padding harus lebih besar dari lebar (width) gambar/icon yang digunakan.

Pada kasus lain, CSS padding ditulis dengan shorthand. Contoh:
h2 {padding: 3px 2px 4px 4px;}
Nilai right ada pada bagian kedua, sedangkan nilai left ada bagian ke empat. Ubah salah satu dari nilainya lebih besar dari lebar gambar/icon.

Ada pula shorthand seperti ini:
h2 {padding: 4px 6px;}
Nilai pertama adalah untuk padding atas dan bawah sedangkan nilai kedua adalah untuk padding kiri dan kanan. Mengubah nilai kedua akan membuat tulisan semakin memiliki ruang sempit. Ada baiknya sobat menghapusnya dan mengganti aturan padding secara independen (padding-right, padding-left, dan seterusnya) atau dengan shorthand yang terdiri dari 4 nilai berjajar seperti contoh shorthand di atas.

Contoh selengkapnya penggunaan aturan CSS untuk menambahkan icon gambar pada judul header sidebar:
#sidebar-wrapper h2 {
background: url (alamatgambar.jpg) no-repeat left center #000;
margin:4px;
padding: 5px 40px 5 40px;
color: #f0f0f0;
line spacing: 1px;
line-height: 13px;
border: 1px solid #fff; ...; ...; dst...
}
Ubah nilai pada masing-masing properti sesuai keinginan.
Setelah melakukan editing CSS, preview terlebih dahulu. Jika sudah beres dan sesuai keinginan, save template.

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Cara Modifikasi Tampilan Header Sidebar Blogger
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 45 Comment(s):

Daeng Nawa said...

pelajari kode kodenya ah.. btw follow balik gan.. followersku diganti ada di footer yah..

SB said...

nice info gan.....
maju terus blogger indonesia

Thego said...

Wah bagus ne gan.. oiya saya mw tanya ne gan, kenapa blog saya tiba2 semua content yg ada di sidebar jadi berada di bawah postingan (semua widget jdi kayak gu gan). saya sudah gonta ganti template tetap begitu semua. itu masalahnya ada dimana gan, sudah ampun ne gan ga bisa apa2. klo berkenan agan bza cek http://xfileguru.blogspot.com/ semoga bza membantu gan.. terima kasih salam sukses..

Ahmad Khoirul Azmee said...

halo.
Sebelumnya, saya mau tau sobat pake browser apa?
Klo pake Opera, bahkan sampe opera terbaru sekalipun, ada problem dalam menampilkan layout blog2 berplatform Blogger. Problem yang terjadi biasanya seperti yg anda sebutkan di atas, yaitu sidebar wrapper, yang seharusnya tampil disebelah main-wrapper, muncul dibawah main wrapper (posting). Biasanya terjadi ketika buka homepage. Silahkan dicek kembali dengan beberapa browser lain.

Ahmad Khoirul Azmee said...

Setelah saya cek, itu bukan masalah pada browser. Untuk checking lebih lanjut, saya perlu file xml template Blogger sobat.

Search Engine Marketing said...

Makasih mas bro.. apa ini bisa mempercepat loading blog juga?

Thego said...

iyah mas ne bukan karna browser, saya dah cek pake firefox dan IE tapi tetap sama sperti itu..
tadi saya coba ganti template bawaan blogger tpi tetap seperti itu...
ne mas file xml nya https://sites.google.com/site/thego270390/data/template-62360765154550574.xml
Terima kasih mas sudah berkenan cek blog saya..

faktabukanopini said...

tips yang sangat bagus n berguna ! thanks :)

http://faktabukanopini.blogspot.com/

biografiart.blogspot.com said...

keren..... sayang sekali saya bukan yang pertama coment...

blogging mania said...
This comment has been removed by a blog administrator.
Klik Menarik said...

Mantap Mas Admin...
Postingannya sangat Bermanfaat...
Mas saya Pesan Postingan.

"Cara Membuat Kotak sidebar Terpisah"
Saya cari di blog terkenal
gak ada yang pas Css nya.

Beda Semua...
Css di template saya Beda dengan yang direkomendasikan.

Saya mohon Bantuan kepada Mas Admin.
Jika Berkenan

biografiart. said...

keren nich perlu di coba....

Dhicomp said...

Harus banyak belajar nih.
makasih infonya Om.

oncomiaku said...

terimakasih infonya sangat bermanfaat, salam kenal.

trik blogger said...

mas kalau menurunkan atau meninggikan tinggi sidebar bagaimana, jadi posisi sidebar posisinya lebih kebawah dari judul posting ?

Ahmad Khoirul Azmee said...

ini pengatur kedua sidebarmu, cari:
sidebar kanan:
#sidebar-wrapper {
float: right;
margin-right: 0;
margin-top: 5px;
overflow: hidden;
width: 190px;
word-wrap: break-word;
}
sidebar kiri:
#sidebar-wrapper2 {
float: left;
margin-right: 0;
margin-top: 0;
overflow: hidden;
width: 190px;
word-wrap: break-word;
}

jika ingin merendahkan, tambahkan nilai px pada margin-top.

dheet-A said...

Maaas...ane pengen belajar bikin template blog sendiri nii...tapi binguung ada buku yg bisa di rekomendasiin ga mas??atao ada tutorialnya kah??

Rohis Facebook said...

izin coba pak.., :)

outboundJOGJA said...

Langsumg ke TKP...thx gan

trik blogger said...

Mas terima kasih triknya, ada lagi yang mau saya tanyakan, apakan ada pengaruh dari segi seo, bila posisi judul lebih tinggi dari sidebar blog, contohnya pada blog saya, karena saya pernah membaca bila memilih blog atau situs dengan model sidebar pada sisi kiri atau pun kedua-duanya, kalau bisa posisi sidebar letaknya lebih rendah dari posisi judul, karena robot membaca situs atau blog dari sebelah kiri terlebih dahulu, dan diharapkan bila posisi judul lebih tinggi, maka robot akan membaca judul terlebih dahulu, menurut mas bagaimana ?

Ahmad Khoirul Azmi said...

@Muhammad:
Sebenarnya bukan masalah tinggi rendahnya posisi, karena susunan HTML dari atas ke bawah.
Jadi struktur template sebenarnya tergantung mana yg mendahului, contoh:
header
post body
sidebar
pada contoh di atas, post body lebih dahulu daripada sidebar. itu yg bagus, karena setelah header di indeks langsung diikuti post body yg lebih penting dari pada sidebar. Pada struktur default, sidebar berada di sebelah kanan, meskipun dengan CSS float, kita bisa meletakkannya di sebelah kiri.
Sedangkan susunan lain, misalnya:
Header
Sidebar 1
Post Body
(mungkin ada lagi Sidebar 2)
Secara default sidebar berada di kiri kanan, dan sidebar 1 berada di kiri, yg berarti yg terindeks adalah sidebar 1 dahulu setelah itu baru post body. Ini kurang baik buat SEO karena yg terindeks konten sidebar dulu baru post body. Posisi apapun dengan CSS tidak berpengaruh karena indeks tidak mempertimbangkan dan membaca CSS. Cara mengetahui secara kasat mata waktu membuka template demikian adalah urutan loading, kalo sidebar di load terlebih dahulu, berarti urutannya lebih dahulu sidebar daripada post body.

Dita said...

haha...ni blog menarik ya...yang bikin menarik itu adlh sampe ada list blog yang copas tanpa ijin. boleh ditiru ni (mudah2n ga dianggap copas) hahaha....nice blog... :)

oy mu tanya donk kalo mu bikin dropdown page gimana caranya? maklum nubi. mohon bantuannya boss...

JrrMaster said...

sy cb dulu ya gan, thanks artikelnya.. ^^

An Nahal said...

terimakasih tutornya om
sangat bermanfaat

tpi jika saya diperbolehkan bertanya
bagaimana menambahkan icon jika warna background juga menggunakan url om..

klu tutor yang om jelaskan diatas kan warna backgraundnya hanya menggunakan kede warna aja..

mohon panduannya om
send :annahal_redbee@yahoo.com

Terimakasih sebelumnya om

Dollar Jss said...

Mas bro kalaw membuat background/border membulat di judul sidebar tanpa url seperti contoh di atas gmn caranya....

neni said...

keren mas blognya.. kebetulan nih mo bikin blog.. ada rekomendasi buku ga? tq

hadi aktual said...

saya silaturahmi sekaligus ilmu di atas akan saya terapkan...........salam blogger

sikumbang81 said...

Info yang bagus gan..ane mo coba ah..

Bima said...

kagak ngarti juga ane gan..... bisa diperjelas gan ....tks gan....singgah ya ke http://warung-bintaro.blogspot.com/

Eko Yulianto said...

tips yang bermanfaat

telaga ngebel said...

bagus-bagus content nya bos... mau tukeran link?

abde said...

infonya sangat bermanfaat makasih ...

OM Kris said...

Assalamualaikum mas khoirul, saya mau tanya. saya ingin berlatih seo kalau ada orang dekat yang tau mungkin saya tidak akan banyak tanya seperti ini. seperti yang katakan diatas, setelah saya perhatikan loading pada blog saya selalu diawali dari sidebar dulu baru kemudian posting, saya ingin merubahnya dari loading posting dulu baru kemudian sidebar,,,,bagaimana cara merubahnya? terimakasih sebelumnya.

Oka Rahaditya said...

thanks infonya,.
visit our web
www.baliola.com

nagapasha said...

susah juga yah...

Maskur Hidayat said...

Salam kenal Mas
Saya jualan lcd laptop online minta petunjuknya supaya cepet terkenal....
www.gantilcdlaptop.com

Cuke dela costa said...

bermanfaat ni bang ...

makasih bang ilmunya

Andes Junkies said...

mantap mas postingnya, tapi sayangnya saya belum bgitu paham tntang CSS jadi blm bisa modifikasi sndiri.
hehe . .
kalo mas posting tentang sidebar yg udah jadi dan udah di modifikasi end siap pakai pasti makin mantap tuw mas, apa lagi kalo d kirim k email saya pasti jadi mantap banget mas.

AFIQ HAFIZ said...

gang scrip sidebar-wrapper dan main-wrapper tidak ada gang..????
mohon solusinya gang...

pintujatikusen said...

sore mas khoirul,
oh ya, kalau mau geser deskripsinya pada header biar agak kebawah kodenya apa ya mas?
saya make nya blog awesome. inc
terimakasih atas infonya.

samsury-sites said...

Manteb mas...ok ntar saya pelajari dulu

Arjuna Line said...

mas Azmi Maksih banget ilmunya.... sungguh sangat bermanfaat..
Semoga sukses selalu mas....

cah pare said...

ada pengaruhnya gak mas kalo blog tanpa header

kang moelyadi said...

hmmm ... luar biasa postingnnaya,, saya lagi bikin blog ga jadi2 tuh,, puyeng,, pdahal pengen banget bisnis ke adsense, hmmm agan bisa bantu saya ga buat blog,, biayanya berapa ya? mohon konfirmasinya

Ahmad Khoirul Azmi said...

@kang moelyadi:
contact saya di sini bang: http://ahmadkhoirulazmi.com/contact/
dan silahkan didetailkan kebutuhannya sehingga bisa saya estimasikan biayanya.

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap