KOMPUTAKI Vol. 1 No. 1 Februari 2016
MODIFIKASI TAMPILAN HEADER SIDEBAR BLOGGER Suprapto Fakultas Ilmu Komputer, Universitas AKI Email:
[email protected]
Abstrak Modifikasi dari blogger penting dilakukan baik bagi para pelaku bisnis, ilmuwan maupun yang menjadikan blog-nya sebagai diary. Melalui modifikasi blog terutama dengan modifikasi tampilan header sidebar blog, maka blog akan terlihat lebih menarik dan dampaknya akan mendatangkan banyak pengunjung untuk blog tersebut yang disebut juga dengan meningkatkan traffic. Bagi para internet marketer, traffic merupakan sesuatu hal yang sangat dibutuhkan untuk kelancaran dalam memasarkan produk, tapi traffic yang tinggi tidak hanya dibutuhkan oleh internet marketer, blogger dan administrator web juga membutuhkan traffic yang tinggi agar website atau blog-nya menjadi populer dikunjungi orang. Tampilan standar suatu blog belum tentu sesuai keinginan, sehingga ada yang ingin dirubah. Kunci untuk mengubah tampilan blog tidak dari struktur template dan yang paling sering dirubah adalah ukuran bagian header, sidebar dan halaman posting. Kata kunci : Header Sidebar, Header Blogger, Sidebar Blogger, Header Sidebar Blogger 1.
disebut post dan disusun berdasarkan
Pendahuluan Pesatnya perkembangan teknologi
informasi semakin mempermudah banyak
urutan kronologis. 2.
Kajian Pustaka
orang untuk tidak hanya dapat mengakses
Awalnya blog muncul sebagai
website-website atau blog-blog favorit
diary
namun juga membuka peluang untuk
mencakup berbagai macam ceruk topik
menciptakan sendiri website dan atau blog
dan bersaing ketat dengan media massa
sendiri dengan tujuan yang berbeda. Sudah
kebanyakan. Blogger adalah seseorang
menjadi rahasia umum bahwa dewasa ini
yang
banyak orang merasakan mendapatkan
merupakan nama komersil platform dan
penghasilan tambahan dari website/blog.
hosting blog gratis milik Google (yang
Sebagian
lebih
bahkan
mendapatkan
online,
memiliki
dikenal
namun
blog.
dengan
saat
ini
Blogger
nama
blog
juga
ekstensi
penghasilan yang nilainya sangat fantastis.
Blogspot). Tentu akan menjadi hal yang
Blog adalah suatu jenis situs di mana
sangat menarik jika ternyata website atau
pemiliknya mempublikasikan pikiran, ide
blog benar-benar sangat diminati dan
atau pengetahuan mengenai topik tertentu.
dikunjungi oleh orang banyak setiap
Biasanya isinya berupa artikel, yang
harinya. Namun pertanyaan yang paling 91
Modifikasi Tampilan Header Sidebar Blogger (Suprapto)
sering muncul adalah bagaimana cara
untuk memudahkan dan mempercepat
membuatnya?
untuk membuat post baru, meng-edit
2.1 Blog – Sang pengganti website yang
elemen blog dan keluar dari blog. 2. Header
powerful Berbeda dengan sebuah website,
Merupakan bagian dari blog yang
blog jauh lebih mudah dibuat. Meskipun
terletak di bawah navbar. Bagian ini
blog belum mampu melakukan sesuatu
menampilkan judul dan deskripsi
yang bersifat dinamis dan membutuhkan
blog.
database serta pendaftaran untuk menjadi
mengubah warna dan jenis font serta
member, tetapi untuk pembuatan situs
background header saja namun dapat
pribadi
juga memasukkan gambar (image)
untuk
mempromosikan
berjualan suatu
produk,
maupun portal
berita dan lain-lain blog sudah lebih dari
Fungsinya
tidak
hanya
pada bagian tersebut. 3. Blog Post
cukup. Jadi tidak perlu khawatir jika
Sesuai dengan namanya. bagian ini
menggunakan blog, karena blog ini juga
menampilkan
mampu menjadi pengganti website yang
dipublikasikan
sangat powerful (Ariasari, 2006).
berupa artikel, gambar, maupun video.
post-post dalam
yang
blog
baik
Sebuah blog terdiri dari empat
Dibandingkan dengan bagian blog
bagian yaitu: Navbar, Header, Blog Post
lainnya area untuk bagian ini lebih
dan Sidebar. Bagian-bagian tersebut ada
luas karena blog post merupakan inti
dalam sebuah blogspot.com apapun jenis
dari blog.
template yang digunakan.
4. Sidebar
1. Navbar
Sidebar merupakan bagian dari blog
Bagian blog ini akan tampak apabila
yang ada bersebelahan dengan blog
menggunakan domain blogspot.com
post. Bagian ini terletak di sisi kanan
untuk
bukan
atau kiri blog post sesuai dengan
custom domain. Navbar merupakan
template yang dipilih. Secara default
bagian blog yang terletak pada posisi
elemen dari sidebar yang muncul
paling atas blog. Pada bagian ini dapat
adalah about me dan blog archive.
diemukan tiga menu, yakni: New Post,
Meskipun
Customize dan Sign Out. Keberadaan
ditambahkan elemen lain ke dalam
menu tersebut pada navbar berfungsi
bagian
menampilkan
blog,
ini,
demikian
misalnya:
dapat
kalender, 92
KOMPUTAKI Vol. 1 No. 1 Februari 2016
polling,
slideshow
sebagainya.
dan
Sidebar
lain
blog
adalah
bagian dari tata letak suatu blog.
tentang arsip artikel, artikel yang paling baru dan lain-lain. 3. Memberikan
Informasi
tentang
Sidebar merupakan kolom blog yang
pengguna blog
berada di sebelah kiri, atas, bawah dan
Kebanyakan blogger juga memberikan
kanan posting artikel. Sidebar sering
sekilas
kita lihat pada web dan blog dengan
melalui sidebar blog, biasanya pada
berbagai widget di sebelah kiri dan
kolom sidebar about me atau my profil.
kanan posting atau di atas dan bawah
4. Memberikan informasi tentang jumlah
posting artikel.
informasi
tentang
dirinya
pengunjung
2.2 Apa Manfaat Sidebar Blog?
Salah satu kegunaan sidebar adalah
Sidebar blog mempunyai banyak
menampilkan
jumlah
visitor.
manfaat bagi blog yang diantaranya:
Menampilkan banyaknya visitor ini
1. Mempercantik blog
akan membuat orang beranggapan
Sidebar juga dapat mempercantik dan
bahwa blog tersebut sangat ramai
memperindah tampilan halaman blog
pengunjung.
yang dapat dihiasi dengan berbagai
5. Tempat media sosial
widget. Blog yang hanya terdapat
Dapat menampilkan halaman facebook
posting artikel akan terlihat kurang
dalam
berkesan
informasi kepada pengunjung tentang
bahkan
buruk.
Namun
dengan adanya sidebar membuat blog
sidebar
dan
memberikan
anggota halaman facebook.
tersebut menjadi bervariasi dan terlihat
6. Tempat iklan
cantik, misalnya dengan menampilkan
Diantara
gambar slide show, gambar-gambar
menempatkan iklan pada sidebar blog.
lucu, video, dan lain sebagainya.
Ini dikarenakan sidebar
2. Memberikan informasi tentang blog Sidebar
juga
yang
blogger
merupakan
strategis
dalam
untuk
menampilkan iklan dan memperoleh
memberikan beberapa informasi yang
banyak klik iklan dari pengunjung
terkait
(Enterprise, 2008).
dengan
pengunjung,
digunakan
tempat
beberapa
blog
kepada
misalnya
para
informasi
sekilas tentang blog, informasi tentang artikel
paling
popular,
2.3 Apa yang Harus Ditampilkan pada Sidebar Blog ?
informasi 93
Modifikasi Tampilan Header Sidebar Blogger (Suprapto)
Desain sidebar blog bisa apa saja
gelap, pewarnaan yang kurang menarik
yang diinginkan, namun alangkah lebih
atau background pada title sidebar yang
baik jika menggunakan sidebar dengan
terlalu
sesuatu yang mampu memenuhi kebutuhan
dihilangkan (Purna, 2008).
para pengunjung, misalnya mengunakan
2.4 Hal-hal Penting pada Sidebar Blog
mengganggu
sehingga
layak
sidebar dengan memberikan informasi
Umumnya blogger mengisi sidebar
terkait blog seperti popular posts, archive
dengan hal-hal yang tidak berguna bagi
posts, latest posts dan lainnya yang
visitor, contohnya: award, alexa, link
berguna bagi pengunjung. Tetapi jika
exchange, affiliate, dan lain-lain. Jika
menggunakan sidebar dengan hal yang
semua itu ditempatkan pada posisi yang
kurang bermanfaat dan kurang memenuhi
tepat, visitor tidak akan kebingungan.
kebutuhan pengunjung seperti: banyak
Namun,
iklan, banyak hiasan, video dan foto
wilayah yang vital akan menjadi percuma
pribadi maka itu akan memberikan citra
jika hanya dipakai untuk menampilkan itu
buruk pada blog meskipun blog terlihat
semua. Gunakan sidebar untuk menaruh
indah dengan berbagai hiasan.
hal-hal yang memuat kemudahan bagi
masalahnya
sidebar
adalah
Untuk itu gunakan sidebar dengan
visitor. Dapat diartikan juga agar loading
hal yang dapat memenuhi keinginan para
blog tidak lama. Beberapa hal-hal yang
pengunjung.
lebih
seharusnya ada pada sidebar meliputi: (1)
mengedepankan kebutuhan pengunjung
Subscribe Tool, (2) Post List: Latest post,
daripada kebutuhan sendiri tentu akan
popular post dan (3) Search Widget.
membawa hal yang baik bagi peningkatan
Adapun hal-hal yang tidak perlu ada pada
blog. Semakin senang pengunjung dengan
sidebar meliputi: (1) Link exchange, (2)
isi blog, maka akan semakin banyak
Page Rank Widget dan (3) Award.
pengunjung
3.
Jika
yang
dapat
datang.
Jangan
Metode
dikecewakan dengan penawaran uang dari
Ada kalanya tampilan standar suatu
iklan atau hal yang kurang menarik pada
blog belum sesuai keinginan sehingga ada
sidebar. Pengunjung pada dasarnya datang
yang
dan membaca artikel untuk mendapatkan
mengubah
solusi atas suatu masalah.
struktur template dan yang paling sering
ingin
dirubah.
tampilan
Kunci
blog
tidak
untuk dari
Seringkali tampilan header sidebar
dirubah adalah ukuran bagian header,
blog yang dibuat kurang menarik, terlalu
sidebar dan halaman posting. Untuk 94
KOMPUTAKI Vol. 1 No. 1 Februari 2016
memudahkan perlu dipahami istilah-istilah pada blogspot sebagai berikut:
3. Kemudian carilah kode: #headerwrapper
• Header-wrapper (halaman title dan
4. Lebih mudahnya mencari tekan (Ctrl
deskripsi blog)
+ F) pada keyboard lalu tekan Enter.
• Outer-wrapper (halaman body secara keseluruhan)
Maka akan muncul
kotak
Find.
Ketiklah kode yang akan dicari pada
• Main-wrapper (halaman posting)
kotak tersebut lalu tekan Enter, maka
• Sidebar-wrapper (halaman tempat
secara otomatis akan muncul kode
widget)
yang dicari dalam keadaan terseleksi
• Footer-wrapper (halaman catatan kaki) Menggunakan
dengan warna hijau.
istilah-istilah
5. Perhatikanlah beberapa baris kode di
tersebut maka dapat mencari masing-
bawahnya. Contoh dan keterangan
masing bagian pada template blog serta
akan tampak seperti di bawah ini:
mengetahui dan dapat langsung merubah
#header-wrapper { (artinya halaman
ukurannya sesuai dengan keinginan. Cara
header)
mencarinya adalah dengan menambahkan
width:900px; (artinya lebarnya 900 pixels)
tanda # di depannya. Contoh jika ingin
height:120px; (artinya tingginya 120
mencari
pixels)
ukuran
pencariannya
header
maka
menggunakan
kode
#header-
Setelah mengetahui ukuran header,
wrapper. Untuk mencari bagian yang lain
yakni lebar 900px dan tingginya 120px.
cara yang digunakan sama seperti tersebut
Default ukuran yang ada pada header
di atas. (Pande, 2004).
biasanya hanya untuk lebar (width) saja.
4.
Untuk
Hasil dan Pembahasan
4.1 Modifikasi blog Berikut contoh cara mengetahui
tinggi
biasanya
ditambahkan
kemudian jika ingin memasang gambar pada header. Untuk merubah lebar dan
dan merubah ukuran header:
tingginya
1. Masuk ke halaman Dasbor blog anda
tersebut sesuai dengan keinginan. Langkah
dan klik pada Rancangan. 2. Klik pada Edit HTML.
cukup
menggantikan
angka
ini juga berlaku untuk mencari dan merubah bagian sidebar dan halaman posting.
95
Modifikasi Tampilan Header Sidebar Blogger (Suprapto)
Gambar 1. Contoh Format Tampilan Header Sidebar Blog Dalam blogger, seperti pada web
h2 {
umumnya, seluruh tampilan diatur dengan
background: #000;
Cascading Style Sheet (CSS). begitu pula
margin:4px;
dengan judul sidebar tampilannya diatur
padding: 5px;
dengan
color: #f0f0f0;
CSS
melalui
properti
dan
deklarator tertentu. Sebelumnya diambil
line spacing: 1px;
poin penting pada perintah CSS header.
line-height: 13px;
CSS header memiliki deklarator sama
border: 1px solid #fff;
seperti kode HTML (
judul
),
}
yaitu h. Sebagai header, judul sidebar pun
Tentunya aturan tersebut berbeda-
mengandung deklarator h. Judul header
beda
sidebar biasanya merupakan jenis header
Blogger.
level 2, yaitu
judul
. Maka
pengubahan tampilan header sidebar,
mula-mula
perlu
Blogger,
pada carilah
edit
HTML/template
aturan
CSS
yang
pada
masing-masing Sebelum
diketahui
template
berfokus
bahwa
h2
pada
mengatur
seluruh tampilan header blog pada level 2.
mengandung h2, yaitu bagian CSS yang
Adapun bagian CSS
mengatur seluruh header log level 2.
sidebar
Aturan
dinamai sidebar-wrapper atau sejenisnya,
CSS
berada
di
antara
secara
yang mengatur
keseluruhan
biasanya
.
misal sidebarwrapper, dan lain-lain (dicari
Contoh sederhananya:
yang memiliki kemiripan), maka judul pada
sidebar-wrapper
biasanya
pula 96
KOMPUTAKI Vol. 1 No. 1 Februari 2016
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; }
Gambar 2. Contoh Tampilan Template yang Belum Dimodifikasi pada Bagian Header Sidebar
Gambar 3. Contoh Tampilan Template yang Telah Dimodifikasi pada Bagian Header Sidebar 97
Modifikasi Tampilan Header Sidebar Blogger (Suprapto)
Pada template tertentu, misalnya
untuk mengatur tinggi jarak antar baris dan
minima template, aturan CSS ini tidak ada,
line spacing adalah jarak antar huruf.
maka harus ditambahkan sendiri. Nantinya
Background adalah untuk mengatur warna
dibuat terlebih dahulu lalu letakkan h2
latar dari bagian header. Selain itu bisa
atau
antara
menambahkan elemen/properti lain untuk
.
menambah tampilannya. Untuk melakukan
Jika tidak ada #sidebar-wrapper (atau
uji coba dalam mengubah nilainya secara
sejenisnya; yaitu elemen wrapper pada
aman, backup template terlebih dahulu.
sidebar), maka gunakan saja h2.
Kemudian
4.2 Memodifikasi Elemen CSS Pada
properti. Jangan di-save. Lihat hasil
Sidebar Header (Judul Sidebar)
tampilannya dengan meng-klik "Preview".
#sidebar-wrapper
h2
di
Untuk melakukan modifikasi ada
ubah
nilai
masing-masing
Jika sudah beres, baru "Save" untuk
beberapa elemen/properti CSS yang perlu
mengetahui
diketahui. Properti CSS yang mengatur
styling CSS.
seluruh
elemen/properti
posisi pada umumnya adalah: margin dan padding. Kemudian color adalah untuk mengatur warna font. Line height adalah
Gambar 4. Title Header Sidebar di
gambar dan memposisikannya sedemikian
Sebelah Judul/Title Header Sidebar
rupa. Tambahkan url (alamatgambar.jpg)
4.3 Menambahkan
Icon/Gambar
Melalui aturan CSS, kita dapat mempercantik
tampilan
judul
sidebar
pada bagian background. Contoh:
dengan gambar. Trik ini dilakukan dengan cara menambahkan elemen background 98
KOMPUTAKI Vol. 1 No. 1 Februari 2016
h2 {background:
h2 {padding: 3px 2px 4px 4px;}
url(http://www.alamaturlgambar/icon.jpg
Nilai right ada pada bagian kedua,
) #000:}
sedangkan nilai left ada bagian ke empat.
Agar gambar tidak berulang (memenuhi
Ubah salah satu dari nilainya lebih besar
background):
dari
h2 {background:
Ada pula shorthand seperti ini:
url(http://www.alamaturlgambar/icon.jpg
h2 {padding: 4px 6px;}
lebar
Nilai
) no-repeat #000:}
gambar/icon.
pertama
adalah
untuk
Selanjutnya, jika ingin gambar berada di
padding atas dan bawah sedangkan nilai
sebelah kiri tulisan judul sidebar:
kedua adalah untuk padding kiri dan
h2 {background:
kanan.
url(http://www.alamaturlgambar/icon.jpg
membuat tulisan semakin memiliki ruang
) no-repeat left center #000:}
sempit.
Agar berada di sebelah kanan judul
mengganti
sidebar:
independen (padding-right, padding-left
h2 {background:
dan seterusnya) atau dengan shorthand
url(http://www.alamaturlgambar/icon.jpg
yang terdiri dari 4 nilai berjajar seperti
) no-repeat right center #000:}
contoh shorthand di atas.
Kemudian atur besar padding agar tulisan
tidak
icon/gambar.
bertabrakan Pada
Ada
nilai
baiknya
aturan
4.4 Penggunaan
dengan
beberapa
Mengubah
kedua
dihapus
padding
CSS
akan
dan secara
untuk
menambahkan icon gambar pada
kasus,
judul header sidebar:
padding ditulis secara individual: padding-
#sidebar-wrapper h2 {
left,
background: url (alamatgambar.jpg) no-
padding-right,
padding-top,
dan
padding-bottom. Ubah nilai pada padding-
repeat left center #000;
left jika gambar di sebelah kiri. Jika
margin:4px;
gambar di sebelah kanan, ubah nilai
padding: 5px 40px 5 40px;
padding-right. Nilai padding harus lebih
color: #f0f0f0;
besar dari lebar (width) gambar/icon yang
line spacing: 1px;
digunakan.
line-height: 13px;
Pada kasus lain, CSS padding ditulis
border: 1px solid #fff; ...; ...; dst...
dengan shorthand.
}
Contoh: 99
Modifikasi Tampilan Header Sidebar Blogger (Suprapto)
Ubah nilai pada masing-masing properti
sesuai
keinginan.
Setelah
melakukan editing CSS, preview terlebih dahulu. Jika sudah beres dan sesuai keinginan, lakukan save template. 4.5 Cara Mengatasi Tampilan Sidebar Blog yang Kosong Sidebar blog yang letaknya di bawah atau di atas widget lainnya berupa kotak atau garis biasanya disebabkan oleh trik menampilkan widget hanya pada halaman
postpage
(widget
tidak
ditampilkan pada homepage) dan widget yang hanya ditampilkan pada homepage
1. Untuk widget yang hanya ditampilkan di postpage, tambahkan kode kode di bawah ini di bawah kode ]]>
<style type='text/css'> #PlusFollowers1, #Stats1 {visibility:hidden}
(widget tidak ditampilkan pada postpage). Jika widget tersebut hanya ditampilkan pada
postpage
saja,
maka
sidebar
kosongnya akan tampak pada homepage. Sebaliknya, widget
jika
hanya
hanya
pada
menampilkan
homepage
Perhatikan kode yang dicetak tebal di atas yang adalah ID widget yang hanya ditampilkan
pada
postpage.
Untuk
mengetahui ID widget, berikut beberapa contoh kode di bawah ini:
maka
sidebar kosongnya akan tampil pada
postpage. Hal ini dapat juga disebabkan
id='PlusFollowers1'
dari pemakaian widget statis seperti buku
locked='false'
tamu yang disimpan pada pinggir blog,
title='Google+ Followers'
atau widget sharing yang melayang dan
type='PlusFollowers'>
lain sebagainya. Biasanya hal ini terjadi jika background sidebar tidak sama
id='main'>
dengan background body.
Untuk mengatasi tampilan blog yang mengganggu atau terkesan kurang rapih, ada beberapa langkah pengkodean yang harus dilakukan:
cond='data:blog.pageType == "item"'>
100
KOMPUTAKI Vol. 1 No. 1 Februari 2016
3. Untuk sidebar yang disebabkan oleh
class='title'><
widget statis seperti buku tamu yang
/h2>
disimpan pada pinggir blog atau lainnya,
dianjurkan untuk menyimpan kode html
HTML/Javascript pada tata letak. Simpan
......
kode html widget statis pada edit HTML di
......
atas
......
menghasilkan sidebar yang kosong.
5.
Perhatikan kode yang dicetak tebal
kode
