Wednesday, June 26, 2013

Tutorial : Cara Membuat Scroll Quote di Blog

Hai, ingatkah Anda dengan tool disamping? Kemarin kita membahasnya sedikit di dalam menu bar. Ya, itu namanya Quote. Biasanya digunakan untuk menuliskan kata-kata penting untuk diperhatikan. Quote di blog berfungsi untuk menempatkan teks/gambar yang ingin ditonjolkan selain itu juga bisa membuat blog jadi lebih indah dipandang. Tapi karena Quote/ tanda kutip yang disediakan blogger nampaknya kurang menarik, maka kali ini saya akan berbagi tentang cara membuat quote yang ada scrollnya. Simak caranya yuk:
  1. Masuk ke www.blogger.com
  2. Masukkan email dan kata sandi Anda → MASUK 
  3. Klik POS 
  4. Klik gambar pensil (BUAT ENTRI BARU) 
  5. Tulis Judul Pos dan Klik Edit HTML 
  6. Copy + Paste kode script berikut ini : tekan (Ctrl+C) → (Ctrl + V) :  <div style="border: 5px solid rgb(238, 238, 238); height: 150px; overflow: auto; padding: 10px; text-align: left; width: 500px;">
    <blockquote class="tr_bq">Taruh disini teks, gambar atau media lain yang akan diquote</div> 


  7. Ganti tulisan “Taruh disini teks, gambar atau media lain yang akan diquote”dengan text yang ingin Anda quote. DELETE → Ctrl+C→ Ctrl+V (misalnya  Yeremia 29:11 Sebab Aku ini mengetahui rancangan-rancangan apa yang ada pada-Ku mengenai kamu, demikianlah firman TUHAN, yaitu rancangan damai sejahtera dan bukan rancangan kecelakaan, untuk memberikan kepadamu hari depan yang penuh harapan)
  8. Klik COMPOSE → PERBARUI 
    Ketr: No.7 dan 8
  9. Atau cara kedua, pastenya setelah klik COMPOSE, ganti tulisan Taruh disini teks, gambar atau media lain yang akan diquote” 
  10. Lalu tekan Ctrl + V → SIMPAN → PRATINJAU → PUBLIKASIKAN 
  11. Ketik Judul → Share 
  12. Lihat Blog 
  13. Hasilnya seperti ini : 

    Dibawah ini juga contoh quote di blog saya : 
Keterangan : sumber http://remajasampit.blogspot.com
<div style="border: 5px solid rgb(238, 238, 238); tebal border height: 150px; tinggi scroll overflow: auto; padding: 10px; text-align: left; width: 500px;"> lebar scroll <blockquote class="tr_bq">Taruh disini teks, gambar atau media lain yang akan diquote</div> 

No comments:

Post a Comment