Mempercantik BLOG

Setelah memiliki blog, tentunya kita tidak ingin tampilan blog kita biasa saja, biasanya pemula blogger ingin mempercantik blognya dengan engubah atau menambahkan background, template dan lainnya.
Untuk itu kami akan memberi satu artikel bagaimana mempercantik blog yang baru dibuat. Mungkin terkesan tidak mudah karna kita dihadapkan dengan kode HTML, CCS yang mungkin kita baru mengetahuinya.
Oke, langsung saja kita perhatikan tutorial cara mempercantik 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

Cara mengganti background color

 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.

silahkan gunakan kode CSS dibawah ini :

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 leat' atau bisa juga langsung menuju template editor Blogger.

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.

Cara Mempercantik Blog dengan Efek Hover

Apa itu efek Hover ? singkatnya, 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

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

<div class="tombol">Tekan</div&gt

>

Simpan dan silahkan Anda 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 (hover) dulu baru efek animasinya bekerja dan ada juga yang otomatis langsung bergerak. Dan kedua efek tersebut akan saya jelaskan secar detail.

Efek Animasi Bergerak dengan Hover

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

Jadi dengan menerapkan efek css animasi rotate, bukan hanya lebih keren, tapi juga akan membuat blog Anda lebih menarik dan atraktif, dan ujung-ujungnya akan membuat pengunjung betah.

Efek Animasi Bergerak dengan Marquee

Jika Anda ingin mempercantik blog dengan animasi bergerak namun tanpa perlu disentuh, maka kode css Marquee adalah jawabannya. Namun disini saya tidak akan menjelaskan lagi bagaimana cara menggunakan efek berjalan marquee, karena pada artikel sebelumnya sudah saya jelaskan secara detail beserta cara memodifikasi kode marquee.

Singkatnya untuk membuat efek marquee / efek berjalan, maka kita harus mengapitnya dengan kode html marquee seperti dibawah ini.

HTML

<marquee>letakkan teks / gambr / video disini</marquee>

Kedua efek diatas sebenarnya bisa digabungkan yaitu dengan menambahkan property pada selector marquee, selanjutnya tinggal Anda tambahkan efek hover.

5. Cara 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.

1. Kunjungi situs ShareThis disini www.sharethis.com/get-sharing
   
   
   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.