Primo Riveral 7 Cara Mempercantik Tampilan Blog
7 Cara Mempercantik Tampilan Blog
Primo Riveral
primo@raharja.info
Abstrak
Memiliki blog dengan tampilan keren dan enak dilihat tentu pasti menjadi kembanggaan
tersendiri untuk seorang yang menggemari atau memiliki blog. Namun, proses untuk
mempercantik tampilan blog saya akui bukan suatu pekerjaan yang mudah, khususnya
untuk blogger pemula yang notabenya masih awam dengan bahasa HTML dan CSS.
Padahal kedua bahasa tersebutlah yang menjadi dasar dalam mendesain tampilan blog.
Kata Kunci: blog, Desain, widget
Pendahuluan
Khusus buat temen - temen blogger yang masih belum menguasai bahasa pemrograman
web HTML dan CSS. Karena dengan widget dan source code yang sudah saya siapkan,
maka saya yakin siapapun bisa dengan mudah mempercantik blognya, karena tinggal
copy paste aja. Sebelumnya saya ingin menjelaskan terlebih dahulu tentang template
yang merupakan inti dimana desain suatu blog disimpan. Secara garis besar ada 3
komponen dasar template yang perlu kita tambahkan untuk mendapatkan desain blog
yang cantik, menarik dan keren.
Pembahasan
Di sini saya akan berbagi beberapa cara mempercantik blog dengan cara mudah
diantaranya :
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Mempercantik Blog dengan Background Image
Menambahkan background image pada body template blog sebenarnya sangat tidak
saya rekomendasikan karena berpotensi untuk membuat load situs blog kita bisa
menjadi lemot. Solusinya adalah dengan menggunakan background image repeat, yaitu
sebuah
kode
CSS
untuk
menduplicate
gambar
secara
berulang-ulang.
Jadi disini kita nantinya akan menggunakan gambar dengan ukuran yang sangat kecil
lalu menduplikat gambar tersebut hingga memenuhi 1 halaman. Perlu dicatat bahwa
cara ini sebenarnya hanya cocok untuk gambar berjenis pola garis seperti persegi. Untuk
menerapkannya dalam blog siapkan terlebih dahulu gambar yang akan kita jadikan
sebagai background, sebagai contoh saya akan menggunakan gambar dengan pola
kotak.
Dan untuk menerapkan gambar tersebut menjadi background pada bagian body
template, silahkan gunakan kode CSS dibawah ini :
CSS
Body{
background-image:
url(http://2.bp.blogspot.com/-QoJaSNlPzoc/VK0-
YFHSBnI/AAAAAAAAAG8/B3SuEzoeyww/s1600/noisy_grid.jpg) repeat scroll top
left;
}
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Copy lalu paste kode tersebut, tepat diatas kode ]]> (untuk blogger).
Selanjutnya save dan lihat hasilnya, dijamin blog Anda akan tampil lebih cantik dengan
background kotak-kota yang keren.
Mempercantik Blok dengan Background Color
Dengan cara mengganti warna background blog, yang saya yakin hampir seluruh warna
template blog, di setiap div-nya hanya menggunakan satu warna. Nah, disini saya akan
mencontohkan bagaimana membuat dua warna dalam 1 div.
CSS
.gradient{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa),
color-stop(1,
#f5f5f5));
}
Selanjutnya silahkan Anda masukkan teks / gambar / video / widget ke dalam div
dengan class gradient, contohnya bisa Anda lihat dibawah ini.
HTML
anda
bisa
memasukkan teks atau bahkan kode html disini
Cara Mempercantik Blog dengan Efek Hover
Hover adalah efek yang akan muncul saat kursor berada diatas selector. Untuk lebih
jelasnya Anda bisa lihat contoh hover yang saya terapkan pada tombol 'tekan' dibawah
ini.
“Tekan”
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Untuk membuat efek seperti itu, ada dua kode yang kita persiapkan, yang pertama
adalah kode HTML div, dan kode CSS selector hover.
CSS
.tombol {
text-align: center;
border: 1px solid gainsboro;
width: 100px;
margin: auto;
height: 25px;
line-height: 25px;
}
.tombol:hover {
background: rgb(153, 153, 240);
color: white;
}
HTML
Tekan
Simpan dan silahkan kamu lihat hasilnya. Selain menambahkan efek hover, kita juga
bisa membuat efek animasi tombol berputar, dengan efek animasi, silahkan baca
panduannya dibawah ini.
Cara Mempercantik Blog dengan Efek Animasi Bergerak
Efek animasi bergerak disini ada dua macam, ada yang harus disentuh dulu baru efek
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
animasinya bekerja dan ada juga yang otomatis langsung bergerak. Dan kedua efek
tersebut akan saya jelaskan secar detail. Kita akan melanjutkan kode css tombol 'tekan'
diatas, untuk membuatnya bergerak atau lebih tepatnya berputar saat kursor menyentuh
tombol, maka kita perlu menambahkan efek css rotate berikut ini.
CSS
.tombol {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow: hidden;
}
.tombol:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg); transform: rotate(360deg);
}
Dan hasilnya nanti akan seperti tombol dibawah ini.
“Tekan”
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Jadi dengan menerapkan efek css animasi rotate, bukan hanya lebih keren, tapi juga
akan membuat blog Anda lebih menarik. Agar setiap pengunjung di blog kita sangat
suka dengan tampilan background yang kita buat.
Cara Mempercantik Tampilan Blog dengan Social Share Button
Selain berfungsi untuk mempercantik tampilan blog, widget sosial button juga sangat
bermanfaat untuk meningkatkan traffic dan juga SEO, jadi tidak alasan untuk tidak
memasang widget social button pada blog Anda. Untuk cara pembuatannya sebenarnya
cukup mudah,
1. Kunjungi situs ShareThis
Jika halaman sharethis sudah terbuka, silahkan Anda lanjutkan dengan memilih
platform blog yang Anda gunakan, pada contoh ini saya menggunakan Blogger,
untuk penggunakan Wordpress silahkan pilih platform atau CMS Wordpress.
2. Pilih model Social Share Button
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Silahkan pilih model social button mana yang menurut Anda paling bagus untuk
mempercantik blog. Saya sendiri suka social button model 1 karena lebih
minimalis.
3. Klik 'Get The Code' untuk mendapatkan kode Widget
Sebelumnya Anda perlu mendaftar dan membuat akun di situs ShareThis untuk
mengambil kodenya. Jika tidak mau repot silahkan ambil kode saya berikut ini.
Primo Riveral
primo@raharja.info
Abstrak
Memiliki blog dengan tampilan keren dan enak dilihat tentu pasti menjadi kembanggaan
tersendiri untuk seorang yang menggemari atau memiliki blog. Namun, proses untuk
mempercantik tampilan blog saya akui bukan suatu pekerjaan yang mudah, khususnya
untuk blogger pemula yang notabenya masih awam dengan bahasa HTML dan CSS.
Padahal kedua bahasa tersebutlah yang menjadi dasar dalam mendesain tampilan blog.
Kata Kunci: blog, Desain, widget
Pendahuluan
Khusus buat temen - temen blogger yang masih belum menguasai bahasa pemrograman
web HTML dan CSS. Karena dengan widget dan source code yang sudah saya siapkan,
maka saya yakin siapapun bisa dengan mudah mempercantik blognya, karena tinggal
copy paste aja. Sebelumnya saya ingin menjelaskan terlebih dahulu tentang template
yang merupakan inti dimana desain suatu blog disimpan. Secara garis besar ada 3
komponen dasar template yang perlu kita tambahkan untuk mendapatkan desain blog
yang cantik, menarik dan keren.
Pembahasan
Di sini saya akan berbagi beberapa cara mempercantik blog dengan cara mudah
diantaranya :
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Mempercantik Blog dengan Background Image
Menambahkan background image pada body template blog sebenarnya sangat tidak
saya rekomendasikan karena berpotensi untuk membuat load situs blog kita bisa
menjadi lemot. Solusinya adalah dengan menggunakan background image repeat, yaitu
sebuah
kode
CSS
untuk
menduplicate
gambar
secara
berulang-ulang.
Jadi disini kita nantinya akan menggunakan gambar dengan ukuran yang sangat kecil
lalu menduplikat gambar tersebut hingga memenuhi 1 halaman. Perlu dicatat bahwa
cara ini sebenarnya hanya cocok untuk gambar berjenis pola garis seperti persegi. Untuk
menerapkannya dalam blog siapkan terlebih dahulu gambar yang akan kita jadikan
sebagai background, sebagai contoh saya akan menggunakan gambar dengan pola
kotak.
Dan untuk menerapkan gambar tersebut menjadi background pada bagian body
template, silahkan gunakan kode CSS dibawah ini :
CSS
Body{
background-image:
url(http://2.bp.blogspot.com/-QoJaSNlPzoc/VK0-
YFHSBnI/AAAAAAAAAG8/B3SuEzoeyww/s1600/noisy_grid.jpg) repeat scroll top
left;
}
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Copy lalu paste kode tersebut, tepat diatas kode ]]> (untuk blogger).
Selanjutnya save dan lihat hasilnya, dijamin blog Anda akan tampil lebih cantik dengan
background kotak-kota yang keren.
Mempercantik Blok dengan Background Color
Dengan cara mengganti warna background blog, yang saya yakin hampir seluruh warna
template blog, di setiap div-nya hanya menggunakan satu warna. Nah, disini saya akan
mencontohkan bagaimana membuat dua warna dalam 1 div.
CSS
.gradient{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa),
color-stop(1,
#f5f5f5));
}
Selanjutnya silahkan Anda masukkan teks / gambar / video / widget ke dalam div
dengan class gradient, contohnya bisa Anda lihat dibawah ini.
HTML
anda
bisa
memasukkan teks atau bahkan kode html disini
Cara Mempercantik Blog dengan Efek Hover
Hover adalah efek yang akan muncul saat kursor berada diatas selector. Untuk lebih
jelasnya Anda bisa lihat contoh hover yang saya terapkan pada tombol 'tekan' dibawah
ini.
“Tekan”
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Untuk membuat efek seperti itu, ada dua kode yang kita persiapkan, yang pertama
adalah kode HTML div, dan kode CSS selector hover.
CSS
.tombol {
text-align: center;
border: 1px solid gainsboro;
width: 100px;
margin: auto;
height: 25px;
line-height: 25px;
}
.tombol:hover {
background: rgb(153, 153, 240);
color: white;
}
HTML
Tekan
Simpan dan silahkan kamu lihat hasilnya. Selain menambahkan efek hover, kita juga
bisa membuat efek animasi tombol berputar, dengan efek animasi, silahkan baca
panduannya dibawah ini.
Cara Mempercantik Blog dengan Efek Animasi Bergerak
Efek animasi bergerak disini ada dua macam, ada yang harus disentuh dulu baru efek
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
animasinya bekerja dan ada juga yang otomatis langsung bergerak. Dan kedua efek
tersebut akan saya jelaskan secar detail. Kita akan melanjutkan kode css tombol 'tekan'
diatas, untuk membuatnya bergerak atau lebih tepatnya berputar saat kursor menyentuh
tombol, maka kita perlu menambahkan efek css rotate berikut ini.
CSS
.tombol {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow: hidden;
}
.tombol:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg); transform: rotate(360deg);
}
Dan hasilnya nanti akan seperti tombol dibawah ini.
“Tekan”
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Jadi dengan menerapkan efek css animasi rotate, bukan hanya lebih keren, tapi juga
akan membuat blog Anda lebih menarik. Agar setiap pengunjung di blog kita sangat
suka dengan tampilan background yang kita buat.
Cara Mempercantik Tampilan Blog dengan Social Share Button
Selain berfungsi untuk mempercantik tampilan blog, widget sosial button juga sangat
bermanfaat untuk meningkatkan traffic dan juga SEO, jadi tidak alasan untuk tidak
memasang widget social button pada blog Anda. Untuk cara pembuatannya sebenarnya
cukup mudah,
1. Kunjungi situs ShareThis
Jika halaman sharethis sudah terbuka, silahkan Anda lanjutkan dengan memilih
platform blog yang Anda gunakan, pada contoh ini saya menggunakan Blogger,
untuk penggunakan Wordpress silahkan pilih platform atau CMS Wordpress.
2. Pilih model Social Share Button
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Silahkan pilih model social button mana yang menurut Anda paling bagus untuk
mempercantik blog. Saya sendiri suka social button model 1 karena lebih
minimalis.
3. Klik 'Get The Code' untuk mendapatkan kode Widget
Sebelumnya Anda perlu mendaftar dan membuat akun di situs ShareThis untuk
mengambil kodenya. Jika tidak mau repot silahkan ambil kode saya berikut ini.