Cara Mempercantik Blog
Selamat pagi, apa kabar para pengunjung sekalian, semoga anda dalam keadaan yang senang dan gembira, Karena senang dalam melakukan segala hal akan memberikan dampak yang positif bagi kegiatan yang kita kerjakan..
Baiklah dalam kesempatan ini saya akan memberikan tips Cara Mempercantik Blog Anda akan saya jelaskan berikut ini. Sebelumnya 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
- Efect
- Widget
Dari ketiga komponen tersebut masih dipecah lagi hingga menghasilkan sub-komponen sepert berikut ini :
Background :
Efek :
Widget :
Background :
- Background Image
- Background Color
Efek :
- Hover
- Animasi Bergerak
Widget :
- Social Button
- Widget Twitter Follower
- Widget Facebook Fanpage Like
Jadi pada Kesempatan ini saya akan memberikan 7 Tips atau Cara Mempercantik Blog anda.
1. Cara Mempercantik Blog dengan Backgroud Image
Sebenarnya ketika kita mempercantik blog dengan background image yang saya takutkan maka blog kita akan menjadi berat atau yang biasa kita sebut akan menjadi lemot. Tapi anda tidak perlu khawatir kali ini saya akan memberikan tips dengan menggunakan Backgroud image Reapet yaitu dengan menggunakan kode CSS yang nantinya kita akan menduplikat gambar tersebut berulang-ulang sehingga blog kita tidak berat.
Baca juga :
jadi Gambarnya kecil yang kemudian kita duplikat, contoh gambarnya seperti di bawah ini.
Agar anda bisa menggunakan gambar tersebut menjadi Backgroud pada bagian <Body> Template, anda bisa menggunakan kode CSS di bawah ini:
body { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaKOqvhIhM2Db9UymY4CSigcNe0IxQwXhmuYJbQ_9cVuuKJQuZ87FkZFZ3vehPmNRteWy2rsb_9ccuhs09KisU_8EXgRrc6_qMRpzr6CXj1faA_rhSKpFONPX3HrEVAjq7HynG6V2IqV0/s1600/noisy_grid.jpg) repeat scroll top left; }
Silahkan anda Copy dan Paste kode tersebut tepat di atas ]]></b:skin> kemudian silahkan anda save dan anda bisa melihat hasilnya.
2. Cara Mempercantik Blog dengan backgroud Colour.
Cara mempercantik Blog kedua ini adalah dengan merubah warna dari background pada blog. Biasanya dalam satu blog terisi satu warna pada (div) templat blog, tapi pada kesempatan ini saya akan memberikan tips memberikan 2 warna pada (div)templat blog kita. Warna yang akan kita gunakan disini adalah Warna cream dan cream putih.
Baca juga : Cara Share Postingan Otomatis ke Sosial Media
CSS
.gradient {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, #f5f5f5));
}
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, #f5f5f5));
}
Silahkan anda masukkan Teks, Gambar maupun video widget ke dalam div dengan clas gradient, contohnya di bawah 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.
3. Cara Mempercantik Blog dengan Efek Hover
Efek Hover baru dengar ..? apa sih itu Efek Hover..?
Jadi Efek Hover adalah efek yang akan muncul saat kursor berada di atas selector. Untuk membuat efek seperti itu, kita akan menggunakan 2 kode yang akan kita persiapkan yaitu 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;
}
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>
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.
4. Cara Mempercantik Blog dengan Efek Animasi Bergerak
Efek animasi bergerak yang akan saya jelaskan 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.
Dan hasilnya nanti akan seperti tombol dibawah ini.
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 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);
}
-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.
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.
Baca juga:
Efek Animasi Bergerak dengan Marquee
Singkatnya untuk membuat efek marquee / efek berjalan, maka kita harus mengapitnya dengan kode html marquee seperti dibawah ini.
Kedua efek diatas sebenarnya bisa digabungkan yaitu dengan menambahkan property pada selector marquee, selanjutnya tinggal Anda tambahkan efek hover.
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 Blog dengan Tampilan 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.
-
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. - Pilih model Social Share Button
Silahkan pilih model social button mana yang menurut Anda paling bagus untuk mempercantik blog. Saya sendiri suka social button model 1 karena lebih minimalis. - 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.
Untuk menambahkan widget social button tersebut, Anda bisa memasangnya melalui menu 'tata letak' dengan cara pilih HTML / JavaScript lalu copy kode diatas dan paste kan pada kolom Konten.
Nah itulah cara dari saya Cara Mempercantik Blog. semoga bermanfaat ya.
No comments:
Post a Comment