News mean Nothing

Kamis, 05 Januari 2012

Membuat Sidebar dalam Kotak yang Terpisah-pisah

Kadang kita ingin memodifikasi template blog menjadi lebih trendy dan tidak ketinggalan zaman. Dengan catatan tanpa membebani loading blog tentunya. Banyak cara dan trik optimasi agar blog tampil lebih oke, salah satunya adalah membuat tampilan sidebar dalam kotak yang terpisah-pisah.

Rekomendasinya trik blogger ini lebih bagus jika diterapkan pada template yang memiliki 2 (dua) kolom, karena akan kelihatan lebih hidup tanpa harus memikirkan perataan terhadap kolom-kolom elemen halaman sidebar. Tapi tidak menutup kemungkinan pula, apabila template yang mempunyai lebih dari 2 (dua) kolom untuk ikut serta menerapkan trik blogger ini.

Adapun langkah-langkahnya adalah sebagai berikut :

Login ke account blogger kamu.

Pilih Tata Letak --> Edit HTML.

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

Cari kode CSS sidebar antara <head> ... </head>

    .sidebar .widget {
    border-bottom:1px dotted $bordercolor;
    margin:0 0 1.5em;
    padding:0 0 1.5em;
    }

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

Catatan :

Kode template tiap blog mungkin berbeda tapi cari yang memiliki kemiripan (.sidebar .widget). Atau jika belum ada maka tambahkan kode tersebut.

Modifikasi kode .sidebar .widget, seperti dibawah ini.

    .sidebar .widget {
    background:#fff;
    border:1px solid #6E6E6E;
    margin:0 0 1.5em;
    padding:0.5em;
    }

Artinya setiap widget yang kamu tambahkan dalam elemen sidebar akan dipisahkan (margin:0 0 1.5em;) sebesar 1,5em ke bawah. Kotak sidebar tersebut berlatar putih (#fff) dan memiliki garis tepi berwarna abu-abu (#6E6E6E), sedangkan jarak teks dengan tepi kotak (padding:0.5em;) sebesar 0.5em.

Kamu bisa membuat kotak sidebar versi kamu sendiri dengan merubah kode-kode yang berwarna merah di atas.

Jangan lupa di simpan

Mengembalikan Navbar Blog yang Hilang

Anda tentu tahu resiko menghilangkan navbar blogger, yaitu account kita bisa di banned oleh google. Karena menghilangkan navbar adalah melanggar TOS ( TOS adalah perjanjian antara blogger dengan kita yang harus kita setujui ketika akan membuat blog ) .

Disana saya berpikir mengapa navbar pada blog mereka tidak dihilangkan. Kemudian saya mencari informasi di tempatnya mbah google, ternyata ada beberapa blogger yang accountnya di banned karena melanggar TOS. Sayang sekali kan apabila blog yang telah kita pelihara selama berbulan - bulan, bertahun - tahun kena banned. Kadang kala kita memasang template baru untuk blog kita yang tidak ada navbarya ataupun kita terlanjur menghilangkannya, Saya akan menerangkan tahap - tahap cara pembalian navbar di bawah ini :

1. Login lah ke blogger

2. Masuklah ke halaman edit HTML dan agar aman, sebaiknya backup lah template anda terlebih dahulu.

3. Cari kode di bawah ini : ( gunakan Ctrl+F untuk mempermudah pencarian )

#navbar-iframe {
display: none !important;
}

apabila sudah ketemu, hapuslah kode tersebut.

4. Apabila anda tidak menemukan kode tersebut, berarti kode template anda berbeda. Silakan cari kode di bawah ini :

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

Apabila sudah ketemu, hapuslah kode tersebut.

5. Apabila anda masih belum menemukan kodenya, carilah kode yang hampir mirip. Lalu hapus kode tersebut.