29 Des 2014

Cara membuat Quote pada Postingan Blogger - Dengan penjelasan

Tags

Anda blogger? Masih bingung dengan berbagai macam asesoris-asesoris pada Blogspot? Sama, saia juga. Tapi anda tidak usah khawatir, kita belajar bersama mengenai Blogspot. Kali ini kita akan belajar bagaimana menambahkan "Quote" pada postingan blog anda.


Banyak contoh-contoh membuat Quote di blog tetapi ini kita akan menggunakan Quote yang paling simpel dan enak di lihat. Sebenernya di Blogger pun telah menyediakan platform Quote otomatis di postingan blog tetapi saya tidak pernah menggunakannya karena malu menggunakan yang masih standar. Untuk merubah tampilah Quote, anda bisa menggunakan salah satu qoute keren yang saia pakai. Jika dirasa Quote yang saia pakai masih terlalu sederhana anda bisa mencari kode yang lain, atau mengedit sedikit kode yang saia pakai. Begitu banyak blogger di dunia maya yang menyediakan konten script untuk mempercantik blogspot.

Dan berikut cara simpel dalam membuat quote keren (custom) di postingan blog kalian - dengan sedikit penjelasan.

Masuk ke blog anda, klik menu "tamplate", "edit HTML". Cari kode ]]></bskin> , Gunakan tombol (CTRL+F ) untuk mempermudah pencarian, paste kan kode di bawah ini tepat di atas kode ]]></bskin> lalu simpan. Jangan lupa mencatat halaman tempat anda menaruh kode, sebab jika kode ternyata tidak berhasil anda tahu dimana kode tersebut dan bisa segera menghapusnya.
 
  blockquote {
    margin : 0 20px;
    padding: 50px 30px 40px 10px;
    background : #f08080 url(http://i1382.photobucket.com/albums/ah280/sasoriprastyo/tanggu_zps522a129c.png) no-repeat 325px 5px;
    font: bold .9em "Courier New";
    color : #f0e68c;
    border-left: 10px dotted #ffdab9;
    }
    blockquote p {
    margin: 0;
    padding-top:10px;
    }

Kode di atas bisa anda ganti-ganti sesuka hati, semisal di dalam url(http://i1382.photobucket.com/albums/ah280/sasoriprastyo/tanggu_zps522a129c.png) jika anda punya gambar sendiri bisa anda ganti dengan link anda sendiri.

padding: 50px 30px 40px 10px mempunyai arti:
top padding is 50px, right padding is 30px, bottom padding is 40px, left padding is 10px.

background : #f08080 angka itu adalah menunjukkan kode warna background quote anda, juga bisa anda ganti sesuai dengan keinginan anda. Begitu juga dengan komposisi kode serupa yang ada pada script di atas, itu adalah kode warna di tiap bagian pada quote. Jika anda ingin mengetahui kode semua warna yang ada, bisa anda buka pada corel atau potoshop jika anda memilih warna pasti terdapat kode tertentu.

font: bold .9em "Courier New" mempunyai arti, font yang anda pakai adalah tipe Courier New(bisa anda ganti dengan tipe tulisan yang lain misal "Times New Roman") dan dalam mode Bold(bisa d ganti dengan "normal" atau "italic")


Jika ingin menggunnakan quote nya cukup dengan blok semua yang akan anda quote lalu klik "Quote" atau tanda petik di atas.

Selesai.
Selamat anda sudah bisa sedikit meng-custom blog anda.


EmoticonEmoticon