Efek Animasi Untuk Percantik Blog

Banyak cara untuk mempercantik suatu blog, khususnya untuk para blogger pastinya ingin memiliki blog yang cantik, selain SEO blog juga perlu dipercantik agar reader blog betah di blog anda.

Selain konten yang berkualitas, juga SEO yang baik, pastinya kita harus mempercantik blog kita.

Banyak cara untuk mempercantik tampilan suatu blog, kita akan bahas tentang efek animasi untuk mempercantik suatu blog.

Secara garis besar ada 3 komponen dasar template yang perlu kita edit / tambahkan untuk mendapatkan desain blog yang cantik, menarik dan keren. Ketiga komponen template yang saya maksud tersebut adalah :

  • Background
  • Efek
  • Widget

Dari ketiga komponen tersebut masih dipecah lagi hingga menghasilkan sub-komponen sepert berikut ini :

Background :

  • Background Image
  • Background Color

Efek :

  • Hover
  • Animasi Bergerak

Widget :

  • Social Button
  • Widget Twitter Follower
  • Widget Facebook Fanpage Like

1. 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 menjadi berat / 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 pattern / pola garis seperti persegi / segitiga.

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;
}

Copy lalu paste kode tersebut, tepat diatas kode ]]></b:skin> (untuk blogger). Selanjutnya save dan lihat hasilnya, dijamin blog Anda akan tampil lebih cantik dengan background kotak-kota yang keren.

2. Mempercantik Blog dengan Background Color

Cara mempercantik blog yang kedua adalah 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. Dua warna yang akan saya gabungkan disini adalah warna cream dan cream putih.

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

<div class=”gradient”><img src=”url gambar” style=”float:left”> anda bisa memasukkan teks atau bahkan kode html disini</div>

Div diatas bisa Anda masukkan dibagian ‘tata letak’ atau bisa juga langsung menuju template editor Blogger.

3. Mempercantik Tampilan Blog dengan Social Share Button

Selain berfungsi untuk mempercantik tampilan blog, widget social button juga sangat bermanfaat untuk meningkatkan traffic dan juga SEO (sebagai social signal), jadi tidak alasan untuk tidak memasang widget social button pada blog Anda. Untuk cara pembuatannya sebenarnya cukup mudah, kita bisa membuatnya secara otomatis di situs ShareThis.

  • Kunjungi situs ShareThis disini www.sharethis.com/

Share This Post

2 Responses to "Efek Animasi Untuk Percantik Blog"

Post Comment