Memiliki sebuah blog dengan tampilan keren agar terliha enak oleh visitor dan menjadi sebuah kembanggan tersendiri untuk sang pemilik Bloger atau Web. namun mempercantik tampilan ini saya akui bukan suatu pekerjaan yang mudah, khususnya untuk Blog dan web pemula yang notabenya masih awam dengan bahasa HTML dan CSS. Padahal kedua bahasa berbutlah yang menjadi dasar dalam mendesain sebuah web dan blog
Atas alasan itulah yang akan nanti kita bahas dengan detail, artikel ini kami bagikan cara mempercantik blog dan web khususnya buat para Developer Web dan Para Bloggeryang masih belum menguasai pemrograman web HTML CSS karena dengan widget dan source code yang sudah disiapkan, maka kalian akan yakin dengan mudah mempercantik web atau blog kalian, tinggal di copy pastekan saja.
Sebelumnya ingin menjelaskan terlebih dahulu tentang template yang merupakan dimana desain suatu blog yang disimpan atau ditulis secara garis besar ada 3 komponen dasar template yang perlu di edit / tambahkan untuk mendesain blog yang cantik dan menarik hingga keren ketiga komponen template yang saya maksud tersebut ialah :
- Backgroud
- Efek
- Widget
Dari ketiga komponen tersebut masih di pecah lagi hingga menghasilkan sub-komponent sperti berikut :
Background :
- Background Image
- Background Color
Effect :
- Hover
- Animasi Bergerak
Widget :
- Social Button
- Widget Twitter Follower
- Widget Facebook fanpage like
Cara Mempercantik Blog dengan Backgroud Image
Menambahkan background image pada <body> template blog sebenernya sangat tidak saya rekomendasikan karena berpotensi membuat load situs blog kita menjadi berat / lemot solusinya adalah dengan menggunkan background image repeat dengan sebuah kode CSS menduplicate gambar secara berulang
Menjadi background pada bagian template body silahkan untuk menggunakan kode CSS pada Script dibawah ini :
CSS
body {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2R_OPjH5SUoZi5OgSwNu8mg23O-q10cBq6-VIm909WnvE-VuBI74VuPJaLxbmaqz-8HAC0vApIPhIZ0LaXkTG7oAQ-Zkmqa6aznwyXNY3QWzuPxewPCp4Whr0zdZ5qVZ0HNW_ZpRjg1o/s1600/noisy_grid.jpg) repeat scroll top left;
}
Copykan Script lalu paste tepat pada diatas kode ]]></b:skin> untuk blogspot selanjutnya kalian save dan lihat hasilnya, dijamin pasti ada perubahan dan cantik dengan background kotak- 3d yang keren
Mempercnatik dengan background color sudah disiapkan Code Scriptnya
Cara mempercantik blog yang kedua adalah dengan cara mengganti warna bacground blog, yang saya yakin hampir seluruh warna template blog, disetiap "div" hanya menggunakan satu warna. disini saya akan mencontohkan bagaimana memperpadukan dua warna dalam 1 "div". dua warna yang akan digabungkan disini warna cream dan putih cream
CSS
.gradient {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, #f5f5f5));
}
Selanjutnya kalian masukan tesks atau gambar video widget ke dalam Div class gradient contohnya bisa 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 anda masukan dibagian "tata leat" bisa juga langsung ke template editor Blogger
Mempercantik Blog dengan Efek Animasi Bergerak
Efek animasi bergerka disini ada dua macam, ada yang harus disentuh (hover) baru efek animasinya berkerja dan ada juga yang otomatis langsung bergerak dan kedua efek tersebut akan saya jelaskan dega detail.
Efek Animasi yang bergerak Hover
Kita melanjutkan kode css menombel "tekan" diatas untuk membuatnya bergerak atau lebih tepatnya berputar saat kursor menyentuh tombol, maka diperlukan 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);
}
bisa kalian buktikan sendiri hasilnya
menerapkan efek css animasi rotate, bukan hanya lebih keren, tapi juga akan membuat blog anda lebih menarik dan atraktif dan ujungnya akan membuat pengunjung betah banget
inilah cara mempercantik blog yang membuat tampilan anda semakin indah perlu dicatat disini saya sama sekali tidak mengajurkan kepada anda menerapkan yang diatas, karena jika semua widget dipasang maka akan sangat berdampak pada load time situs blog yang akan menjadi lebih berat dan lemot ujung-ujungnya pengunjung bukannya senang malah jadi galau.
Oiya buat kamu yang mau Download Tempate lengkap dan Scource Code Web "Free Premium" secara instan kamu bisa langsung membuat Web atau Blog tanpa harus ribet ber Coding download disini :
0 Response to "Membuat Tempate blog dan Web dengan efek animasi 3d Mudah dan Simple"
Post a Comment