CSS : Add Border to Sidebar

Template maupun layout bawaan Blogger memang banyak yang menawarkan tampilan polos. Hanya kekayaan pilihan warna, sajian gambar di header yang berbeda, maupun latar (background) yang bergambar.

Beberapa pengguna blogger yang pada awalnya “terpaksa” untuk menggunakan pilihan yang ada, pada akhirnya banyak mencari cara untuk mengkustom tampilan agar bisa tampil beda.

Misalnya memberikan sentuhan border atau garis pemisah, agar tampilan blog yang polos bisa memiliki batas yang tegas antara bagian postingan dan sidebar.

Nah kali ini kita akan menggunakan metode CSS untuk mewujudkan keinginan ini. Setelah itu kita akan menentukan dibagian mana kode CSS tersebut hendak dipasang. Biasanya, untuk memudahkan pemberian batas ini, kita akan mencari nama class atau div sidebar. Dengan alasan hampir semua template atau layout bawaan blogger menyertakannya.

Pertama adalah mencari bagian yang menyebut Sidebar pada bagian CSS. Misalnya bagian ini dideklarasikan dengan nama #sidebar.

Di bagian ini kita terbiasa menemui bagian seperti width (untuk menyebut lebar kolom samping atau sidebar), float (untuk menyebut arah kolom sidebar pada keseluruhan tampilan), atau juga padding (baik right atau left untuk menyebut spasi pembatas).

Nah untuk menambahkan border dibagian sidebar, kita akan membutuhkan kode berikut untuk ditambahkan :

border-left-width: 1px;
border-left-style: solid;
border-left-color: #B5CF53;

Keterangan :
- border-left-width: 1px; (untuk menyebut lebar pembatas dalam satuan pixel)
- border-left-style: solid; (solid adalah contoh tampilan pembatas, dalam hal ini solid disamakan dengan bentuk lurus tanpa potongan)
- border-left-color: #B5CF53; (kode hexa #B5CF53 untuk menyebut warna tertentu)

Jadi secara keseluruhan, bila kita memiliki kode kode CSS berikut di template/layout :

padding-left: 5px;
padding-right: 5px;
font-size: 13px;
width:150px;
float:right;

maka untuk memberi border, kita akan menuntaskannya menjadi :

padding-left: 5px;
padding-right: 5px;
font-size: 13px;
width:150px;
float:right;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #B5CF53;

Tak lupa, kode tersebut bisa kita temukan pada bagian Edit HTML. Tuju bagian CSS untuk mencari nama Sidebar ya….

Oh ya, untuk style, selain solid kita juga bisa menggunakan nilai lain seperti : dotted (berbentuk bintik-bintik berupa kotak kecil), dashed (hampir sama dengan dotted hanya saja lebih renggang dan besar ukuran dotted-nya), double (berupa dua garus solid berjajar) dan lain-lain.




Kabarkan ke teman blog ini

Free Tell-a-Friend by Bravenet.com

CSS : Change Your LI Type with Background Image

Di kesempatan sebelumnya, edittag pernah menulis mengenai type UL di dalam file xml Blogger. Disitu juga tersebut adanya pembatasan tipe untuk menampilkan tampilan daftar item (list item).

Lalu bagaimana agar kita punya tampilan yang berbeda, tak mau hanya terima dengan apa yang ditawarkan pihak Blogger? Untuk urusan UL dan LI sebenarnya kita bisa melakukan perombakan tampilanya melalui CSS.

Yakni dengan penambahan background pada atribut LI. Namun penggunaan cara ini memang masih menyisakan masalah klasik bagi sebagian perambah (browser). Bukan berarti tak semuanya tak mampu mendukung CSS ul dan li, karena bila kita sempat melongok beberapa layout atau template bawaan blogger, beberapa diantaranya menyertakan CSS background untuk LI.

Biasanya di layout baku (bawaan blogger) kita seringkali melihatnya di bagian CSS yang disebut sebagai Typography : Main entry. Coba lihatlah bagian CSS berlabel komentar seperti diatas. Masuk ke dasboard, lalu klik Layout, dan tuju Edit HTML. Lalu coba turun kebawah hingga menemukan kode seperti ini :

.post li {
line-height:1.5em;
list-style:none;
background:url(“http://www.blogblog.com/scribe/list_icon.gif”) no-repeat 0px

Hasilnya tentu sama-sama bisa dilihat. Bila dalam suatu postingan terselipkan kode UL dan LI maka akan ada tampilan gambar bulatan (list_icon.gif) didepannya. Tentu ini berlaku bila kita tak menambahkan type dibelakang LI. Atau dalam hal ini diwakili oleh kode CSS diatas, yakni : list-style:none;.

Bila kita memiliki gambar lain sebagai pengganti ikon LI ini (lebih bagus bila ukuranya 10*10 pixel), kita bisa menunggahnya terlebih dahulu. Bisa kita mengunggahnya dengan metode seperti di profile atau di googlepages. Lalu salin alamat URL file gambar tersebut. Dan gantikan pada bagian background:url.

Hingga misalnya akan menjadi :

.post li {
line-height:1.5em;
list-style:none;
background:url(“http://eninesia.googlepages.com/bullet_e.gif”) no-repeat 0px

Tak lupa untuk menyimpan layoutnya bila sudah diedit.
Untuk menyimak hasilnya, bisa dilihat contoh berikut :

•   Pertama
•   Kedua

Kabarkan ke teman blog ini

Free Tell-a-Friend by Bravenet.com

CSS : Bottom Navbar

Bagaimana memasang navbar di bagian paling bawah blog, sekaligus memunculkanya selalu mesti halaman tergulung ke atas/bawah (<i>scroll up/down</i>)?

Navbar…tedengar akrab di telinga kan? Kita sering mendefinisikan navbar sebagai sebuah lajur horisontal setinggi 30 pixel yang terletak tepat di <i>ubun-ubun</i> blog yang beralamat di blogspot. Tentu paham kan? edittag juga sempat membahas gosip berkenaan dengan keberadaannya.

Nah bila kini muncul istilah navbar bawah, maka jangan terlanjur curiga dengan mencari-cari di bagian bawah blog, karena memang tak akan menemuinya di blog standar. Istilah ini lahir untuk memudahkan penyebutan terhadap baris yang sama seperti tampilan navbar, namun penampakanya sesuai dengan namanya, berada di bagian bawah blog.

Sangat tepat untuk memasang label karya cipta (copyright) atau sekedar penyampain kredit terima kasih untuk pendukung layanan tertentu.

Ada beberapa penyesuain kode CSS untuk menambahkan navbar ini. Kita bisa memasangnya menjadi satu di bagian #footer, atau juga menciptakan sebuah id baru untuk menyebut navbar ini. Ini juga punya kelebihan agar tak bertubrukan dengan kode CSS lainya bila misalnya kita menggabungkan dengan bagian #footer.

Salin kode CSS berikut di bagian CSS blog kita. Bisa ditempatkan di bagian mana saja selama diatas </head>. Tentu setelah kita mengklik tautan Edit HTML di blog yang akan kita tambahkan.

/* Navbar-bawah
———————————————– */
#bottom-navbar p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:150px;
line-height: 1.2;
vertical-align: bottom;
}

#bottom-navbar p.desc {
float: right;
padding-right:150px;
line-height: 1.5;
height: 100%;
vertical-align: bottom;
}
#bottom-navbar {
align: center;
position: fixed;
border-top: 1px solid #ccc;
border-bottom: 5px solid #ccc;
background-color: #fff;
width: 100%;
left: 2px;
text-align: center;
color: #000;
font-family: verdana;
font-size: 12px;
opacity: 0.9;
filter: alpha(opacity: 90);
z-index:10000;
bottom:0;
}

Setelah itu kita langsung menuju ke bagian paling bawah di Edit HTML, cari bagian paling bawah sebelum </body> Disinilah kita akan menampilan tulisan sebagai konten yang akan termuat di bagian navbar-bawah.

<div id=’bottom-navbar’>
<p>
copyright : <a href=’http://alamatblogku.blogspot.com’><b>Blogku</b></a></p> |
<p class=’desc’>Powered by <a href=’http://www.blogger.com’>Blogger</a>
<br/>
</p>
</div>

Setelah itu kita bisa mencoba mengintip hasilnya dengan menekan tombol <b>[Pratinjau]</b>. Bila puas akan hasilnya bisa langsung tekan tombol <b>[Simpan Template]</b>.

Bagi yang masih ingin mengutak atik bagian ini, kita juga bisa menambahkan gambar misalnya. Tinggal kita sesuaikan dengan penambahan CSS penyertanya.

Kabarkan ke teman blog ini

Free Tell-a-Friend by Bravenet.com

CSS : Picture Blocking by Background

Pernahkah merasa meletakkan gambar di posisi yang tepat namun gambar tak kunjung muncul? Tak perlu merasa frustasi dengan keadaan seperti ini. Ada baiknya melakukan pengecekan akan sintak HTML maupun CSS yang ada di template kita.

Salah satu atribut dalam CSS yang jamak digunakan oleh pencipta template blog adalah menyertakan nilai top ke dalam background image. Dengan tambahan nilai ini maka mau tak mau gambar yang akan dijadikan sebagai bacground akan muncul di posisi paling atas hingga mudah untuk melakukan pemasangan gambar. Namun ini bisa jadi membawa petaka bagi kita yang suka mengedit tampilan blog.

Berikut adalah salah satu tampilan blog yang menggunakan atribut top dan hasilnya bila memasang efek javascript “rain drop” yang pernah dibahas edittag.

Disini terlihat gambar logo edittag tak mampu menembus gambar yang dijadikan background. Gambar logo akan jatuh dalam posisi dibelakang background. Cukup bisa menipu mata. Padahal gambar meluncur jatuh di posisi yang sama dimana gambar background juga bercokol. Untuk “memaksa” agar gambar logo tersebut muncul di atas/depan gambar background ada baiknya edit bagian CSS yang menyebut posisi image background tersebut berada.

Berikut kode CSS-nya :

background:url(gambarbackground.gif) top left repeat-x #d43402;

Hilangkan tulisan merah agar posisi gambar background tak lagi menutupi materi gambar di posisi yang sama. Hingga akan muncul seperti berikut :

CSS : CSS Tag on New Blogger Navbar

Ada 2 hal yang menjadikan posting kali ini canggung untuk disampaikan.

Pertama, mengenai kemampuan CSS untuk menghilangkan navbar di blogger baru.

Dan yang kedua (sayangnya, ini pula yang kontradiksinya), adalah cara untuk menghilangkan navbar.

Bila ditanya dari segi teknis, kode CSS untuk menghilangkan navbar di blogger baru (meski kita gunakan mode template klasik) adalah hal yang sangat memungkinkan. Hal yang menjadi kabur adalah digunakannya sintak dengan penamaan yang berbeda oleh Google dibanding di blogger lama. Jadi kedigdayaannya untuk menghilangkan navbar juga setangguh untuk melenyapkannya di versi sebelumnya. Sekaligus ini menjawab pertanyaan rekan yang menemukan kembali navbarnya begitu migrasi ke versi baru (mestikah kita bangga atau sedih karenanya?).

Namun sebelum melangkah lebih jauh, ada baiknya juga untuk mengingat posting sebelumnya untuk menghargai pengalokasian tempat yang berada di bagian paling atas di blog kita untuk diserahkan ke pihak pemiliknya. Dengan demikian edittag tak mau ditunjuk sebagai salah satu penyebar cara untuk menghilangkannya, namun sebatas memberitahukan perbedaan sintak ini. Setuju?

Baiklah kita lanjutkan.

Bila kita gunakan kode CSS untuk menghilangkan bagian navbar, di versi sebelumnya kita temukan sintak #b-navbar, maka di versi barunya hanya diubah menjadi #navbar-iframe.

Jadi perhatikan perbedaan keduanya, dan coba untuk menyesuaikan dengan versi barunya.

Sekali lagi, jangan anggap ini untuk mengajarkan hal yang tak perlu dilakukan ya..karena ini bukan memberitahu bagaimana menghilangkannya, namun mengabarkan penggantian nama sintak CSS saja….:D

CSS : HighLight Important Text on The Box

Terinspirasi tampilan di blognya Wicky dalam salah satu postingnya yang menampilkan teks penting yang terbungkus di dalam kotak laiknya tampilan di surat kabar, kali ini edittag coba membidiknya dari sisi CSS.

Kode berikut akan memasung tek yang kita anggap penting dimunculkan dalam sebuah kotak dengan harapan teks tersebuat akan mewakili isi postingan kita dengan penataan disebalah kanan posting.

Kode berikut akan memasung tek yang kita anggap penting dimunculkan dalam sebuah kotak dengan harapan teks tersebuat akan mewakili isi postingan kita dengan penataan disebalah kanan posting.

Berikut kodenya :

<div style=”background-color:#00A2C6;color:#fff; width:200px;float: right;border-top: 2px solid #000; border-bottom: 2px solid #000; padding: 5px;margin-left:15px;”>Isi teks yang kita anggap penting.</div>

Contoh dari penggunaan kode ini seperti terpampang di bagian atas posting ini.Dengan demikian isi dari posting kita akan lebih mudah dikenali oleh pengunjung.Tak sekedar judul posting yang bisa mewakili isi dari posting yang kita tulis, namun dengan cara ini kita bisa menyuguhkan pesan utama atau pesan yang ingin kita garis bawahi.

Catatan :
background-color akan mewakili warna bacground dalam kotak,
color mewakili warna teks dalam kotak,
width mewakili luas dari lebar kotak,
float mewakili letak penampilan (apakah di kanan atau kiri),

Sila dicoba.

CSS : UL and LI for Previous Post

Blogspot mencantumkan konten Profile, Previous Post, Archives dan Links di bagian Sidebar, atau bagian sisi kanan / kiri dalam sebuah blog.Khusus untuk bagian Previous Post, Archives dan Links yang mengurut daftar isinya menjadi beberapa tautan yang aktif, maka kita bisa melihat daftar tersebut ditampilkan menjadi barisan yang disusun ke bawah.Hal ini berkat penggunaan kode HTML <ul> dan <li>.

UL merupakan singkatan dari Unordered List, sedangkan LI adalah List Item.Jadi keduanya akan dimunculkan dalam satu daftar rincian item yang sekategori.

Secara default maka bila kita menggunakan UL dan LI kita akan melihat daftar item dibawah nama kategori akan dimunculkan menjorok ke dalam.Pada beberapa pemilik blogspot, penampilan ini sering diakali untuk diurut secara lebih rapi.Yakni nama kategori dan list dibawahnya berada dalam kolom yang sejajar.Untuk itu, bila kita ingin merapikan bagian item ke dalam satu baris yang sama dengan nama kategorinya kita membutuhkan bantuan CSS.

Berikut ini gambar untuk memudahkan pemahaman di atas.

keterangan : previous post adalah nama kategori, sedangkan etika (akhlak)pemimpin dan list dibawahnya termasuk golongan list item

Gambar sebelah kiri ini dimaksud dengan tampilan list dengan format default.Sedangkan gambar pada sisi kanan adalah tampilan setelah menggunakan bantuan tag CSS.Untuk itu kita bisa menambahkan atribut margin di dalam kode CSS template.

#sidebar ul {
background:url(“http://photos1.blogger.com/blogger/4452/1518/320/divider.gif”) no-repeat center bottom;
margin:0 0 15px; /* ini berarti margin atas 0 kanan dan kiri 0 bawah 15px */
}

Dengan tag CSS diatas maka tampilan list item dibawah nama kategori dalam sidebar akan diberi rapat kanan dan kiri 0px, yang berarti akan ditampilkan sejajar dengan nama kategori.

Pengaruh penggunaan atribut CSS dalam UL dan LI ini akan semakin terlihat rapi terutama pada beberapa blog yang memiliki list yang mengandung teks/huruf yang panjang, seperti pada Previous Post dan Links.Dengan begitu pemenggalan tautan akan menjadi semakin kentara.

CSS : Resize Main Section on Blogger

Ada kalanya tampilan gambar menjadi komponen yang penting dalam sebuah blog.Bahkan konsentrasinya mampu mengalahkan bagian lain dalam sebuah blog.Tak salah bila gambar dipercaya bisa berkata “lebih” dari sekedar kata-kata.

Ini pula yang menjangkiti pikiran pemilik blog yang catatannya kaya akan tampilan gambar.Sebut saja juru kamera, ibu-ibu yang ingin menampilkan poto anak dan keluarganya, atau juga penggila desain grafis atau grafiti yang kini kian marak di dunia blog.

Dan pertanyaannya sekarang manjadi “bagaimana melebarkan bagian konten, bagian template mana yang perlu diedit?”…untuk itu akan segera kita bahas.Namun ini lebih banyak ke kasuistik, tergantung penyedia template dan jenis kode yang digunakan.Untuk lebih mudahnya saya mengambil salah satu template yang sudah digunakan oleh tanty dengan nama template Minima.

Berikut yang perlu kita perhatikan.

1. Content
Biasanya ini ditandai dengan deskripsi /* Content pada bagian CSS.Untuk kasus Minima, content menggunakan lebar 660 px.Biaanya ditandai dengan #Content.Bagian ini meliputi keseluruhan lebar tampilan blog, baik di main maupun sidebar.Bila bagian gambar yang berada di postingan kita ingin memiliki space lebih luas, maka bagian ini perlu kita tambahkan lebarnya.Dalam kasus ini kita akan ganti menjadi 890px.(sekedar catatan, dengan resolusi komputer 1024 * 768 yang banyak digunakan sekarang, angka 890 masih menyisakan ruang yang cukup di bagian kanan dan kiri.

2. Main
Bagian main adalah bagian yang meliputi bagian judul postingan, isi postingan, komentar ,dan penunjuk waktu.Biasanya ditandai dengan #Main.Nah disinilah yang mesti kita berikan space lebih untuk gambar.Bila gambar digeneralisasikan punya lebar seukuran VGA (640*480) maka kita bisa memberi angka 640px dibagian ini.

3. Sidebar
Bagian ini meliputi profile, recent post, links dan tool tambahan seperti shout.Berada di bagian samping kanan (untuk kasus minima).Bagian ini bisa kita biarkan ke nilai 220px.

4. Header
Bagian ini diedit untuk menggenapkan dan merapihkan agar sesuai dengan lebar Content.Biasanya ditandai dengan /* Header.Isikan nila lebar header sesuai dengan lebar Content.Bila kita ganti content ke 890, maka bagian ini juga menggunakan nilai 890.

Setelah itu save template kita dan periksa hasilnya.Hanya saja perlu kita perhatikan bila kita total memiliki lebar 890, sedang posisi main dan sidebar total membutuhkan lebar 860, maka kita memiliki ruang selebar 30 px sebagai pembatas antara bagian Main dan Sidebar agar tidak saling menempel satu sama lainnya.

Berikut tampilan hasil pada saat belum diedit lebarnya (660px):

dan berikut hasil setelah diedit (860 px)

CSS : Re-call navbar on Blogger

Sepertinya semenjak postingan mengenai navbar ditulis disini ada beberapa pengguna blogger yang peduli untuk memasangnya kembali.Bahkan beberapa dari mereka tak menduga bila blognya selama ini minus navbar.Bisa dimengerti bila mereka mendapatkan templatenya dari weblog yang memberikan template tak berbayar.Jadi dari pihak inilah banyak yang menanyakan cara memanggil kembali navbar yang menhilang.

Dari beberapa template yang sempat diamati berikut beberapa kode yang menutup dan kode revisi untuk membuka kembali navbar.

kode asal :

#b-navbar {height:0px;visibility:hidden;display:none}

kode revisi :

#b-navbar {height:0px;visibility:visible;display:none}

kode asal :

#b-navbar{ margin-top: -500px;}

kode revisi :

#b-navbar{ margin-top: 0px;}

Dan akan terus diupdate bila menemukan template minus navbar lainnya.
Silahkan kirim alamat blog bila mendapati navbar yang hilang (untuk pengguna blogger tak berbayar tentunya.)

CSS : Footer should be on Foot

Makanya aneh bila menemukan footer yang bukan pada tempatnya.Kenapa dinamakan bagian footer karena memang dia akan menjadi catatan kaki, bukan catatan samping kan?.Jadi posisinya wajib berada di bagian bawah.Beda template sekalipun pasti menempatkan bagian header dan footer di tempat yang serupa.Berada diatas dan dibawah.

Untuk itu bila menemukan bagian footer yang nempel dibagian sidebar mesti cepat-cepat dilihat bagian CSSnya.Lalu cek silang dengan menggunakan browser yang berbeda.Bisa jadi hasilnya pun berbeda.Bila ini terjadi dipastikan bagian CSSnya perlu dilakukan pembenahan, karena browser memiliki kemampuan yang berbeda dalam memberlakukan CSS yang dibacanya.

Berikut contoh tampilan footer yang nempel pada bagian Sidebar (milik Bebex) bila diakses menggunakan Mozilla Firefox :

CSS :

#footer {
margin: 0 auto;
padding: 0;
width: 780px;
text-align: center;
background: transparent;
font-size: 11px;
color: #FFFFFF;
}

Sedang berikut tampilan normal yang ada di IE :

CSS :

#footer {
clear:both;
margin: 0 auto;
padding:15px 30px 0 50px;
width: 780px;
text-align: center;
background: transparent;
font-size: 11px;
color: #FFFFFF;
}

artinya perlu penambahan tag CSS clear:both; agar turun kebawah dan memberikan space yang lebih lapang untuk bagian footernya.Dengan cara ini, baik di IE maupun Mozilla tampilan footer akan berada pada tempat yang semestinya.Sedangkan perubahan nilai pada padding hanya untuk memberikan sedikit ruang pada footer agar tidak menempel dengan bagian postingan.