7 Cara Mempercantik Tampilan Blog

Transkripsi

1 7 Cara Mempercantik Tampilan Blog Primo Riveral 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 :

2 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( YFHSBnI/AAAAAAAAAG8/B3SuEzoeyww/s1600/noisy_grid.jpg) repeat scroll top left;

3 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. 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 <div class="gradient"><img src="url gambar" style="float:left"> anda bisa memasukkan teks atau bahkan kode html disini</div> 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

4 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 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

5 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

6 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

7 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. <span id="st_finder"></span><s

8 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. Cara Mempercantik Tampilan Blog dengan Widget Twitter Follow Tidak hanya mampu mempercantik blog, widget embedded twitter juga akan menambah follower Anda. cara untuk memasangnya juga terbilang cukup mudah, dimana tugas Anda hanya perlu meletakkan kode embed twitter dibawah ini pada bagian template yang Anda inginkan, misalnya bisa di sidebar atau footer. <a class="twitter-timeline" href=" data-widget-id="id- TWITTER">Tweets <script>window.twttr=(function(d,s,id){var js,fjs=d.getelementsbytagname(s)[0],t=window.twttr {;if(d.getelementbyid(id))retu rn;js=d.createelement(s);js.id=id;js.src=" entnode.insertbefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);;return t;(document,"script","twitter-wjs"));</script> Ubah terlebih dahulu "ID-TWITTER" dengan ID Twitter Anda. Jika sudah silahkan simpan dan jika hasilnya seperti gambar dibawah ini maka Anda berhasil meng-embed timeline twitter di dalam Blog.

9 Jika ukuran dari widget tersebut dirasa terlalu besar, maka Anda bisa meresizenya dengan cara menambahkan css widht dan heigt pada class "twitter-timeline". Cara Mempercantik Blog dengan Widget Facebook Page Like Box Satu lagi widget akan mempercantik blog Anda, widget yang saya maksud adalah Facebook Like Box. Untuk menambahkan widget ini ke dalam blog kita bisa menggunakan plugin yang disediakan secara resmi oleh pihak Facebook, jadi nanti kita tinggal masukkan kode ID Fanpage lalu klik Create, atau lebih jelasnya bisa Anda simak caranya dibawah ini. 1. Buat Fanpage Facebook

10 Sebelum menambahkan Facebook Like Box, tentu saja setidaknya Anda sudah harus memiliki minimal 1 Fanpage Facebook, jika belum silahkan buat fanpage baru terlebih dahulu. 2. Buka Selanjutnya, masukkan ID atau URL Fanpage ke dalam kolom Facebook Page URL, atur juga width atau panjang widget. 3. Klik 'Get Code'

11 Klik tombol 'get code' untuk mendapatkan kode widget Facebok Page Box, lalucopy kode tersebut dan masukkan ke dalam tata letak. Penutup Itulah ketujuh cara mempercantik blog yang akan membuat tampilan blog Anda semakin indah, perlu dicatat disini saya sama sekali tidak menganjurkan kepada Anda untuk menerapkan ketujuh cara diatas, karena jika semua widget dipasang, maka akan sangat berdampak pada situ blog yang akan menjadi lebih lemot, pastinya pengunjung bukannya senang malah jadi malas mengunjungi blog Anda, jadi pesan saya pikirkan dua kali sebelum menambahkan widget ke dalam Blog. Referensi 1. Christiantatelu.b;ogspot.co.id/2012/03/kimpulan-efek-efek-blog-lengkap-html 2. Sahabatblogger77.blogspot.co.id/2013/12/mempercantik-tampilan-blog-denganmembuat-teks-berjalan.html 3. Biografi Nama Primo riveral Lahir Palembang, 02 feb Saya seorang Mahasiswa di salah satu Perguruan Tinggi di Kota Tangerang Jurusan Teknik Informatika Senang untuk berbagi dengan kalian. Untuk sharing lebih lanjut tentang IT, yuk kontak saya di Instagram: primoriveral