Home » Teknologi » Cara Membuat Quote/Macam-Macam Quote pada Postingan Blog

Cara Membuat Quote/Macam-Macam Quote pada Postingan Blog

Posted by Ritzberbagiilmu Tuesday 23 July 2013 5 comments
Cara Membuat Quote/Macam-Macam Quote pada Postingan Blog - Kali ini saya akan mengshare sebuah artikel tentang bagaimana Cara Membuat Quote/Macam-Macam Quote pada Postingan Blog. Sebelumnya ada yang tau Apa itu Quote? Quote dalam bahasa Indonesia disebut tanda kutip, yang merupakan suatu kode yang di gunakan untuk menandai serangkaian kata penting dalam suatu posting, tidak hanya berupa kata tapi juga bisa berupa Script. Selain Fungsi  di atas, penggunaan Quote juga akan terlihat lebih menarik dan rapi jika dalam suatu posting tertentu anda menyisipkan kode HTML di dalamnya.


Contoh Quote yang akan Muncul

Langkah dalam membuat Quote pada Postingan Blog
  • Login ke Blogger anda
  • Buat Postingan baru
  • Sisipkan Code Script dibawah melalui HTML bukan Compose

Code Script "Quote":
<div style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; background: #eeeeee none repeat scroll 0% 0%; border: 1px solid #dddddd; overflow: auto;">
<blockquote>Letakan postingan anda disini</blockquote></div>
Keterangan
Biru: Untuk membuat lengkungan border.
Merah: Latar belakang Quote tersebut, anda bisa mengganti latar belakangnya dengan gambar, caranya ganti Code #eeeeee dengan Code URL (URL gambar anda)
Orange: border pada Quote tersebut, 1px adalah ukuran tebal border, #dddddd adalah warna border Quote.
Ungu: Tempat dimana anda meletakkan Kata/Gambar/Scrpit yang akan dimasukan pada Quote.

  • Jika sudah klik Pratinjau/Publikasikan untuk melihat hasil Quote
Selain Cara di atas anda juga bisa menggunakan cara di Bawah ini untuk mengganti template pada Quote anda


Langkah dalam mengganti Template Quote pada Postingan:
  • Login dulu di akun Blogger anda 
  • Pilih Template > Edit HTML
  • Setelah itu cari Kode "blockquote" supaya lebih cepat bisa menggunakan CTRL+F
  • Jika sudah ketemu, anda bisa ganti kode tersebut dengan kode dibawah ini.
asadasd
Contoh 1

Code Script 1:
.post blockquote {border-top: 1px solid #FF82AB;border-left: 1px solid #FF82AB;border-right: 2px solid #FF82AB;border-bottom: 2px solid #FF82AB;background: #ffffff;margin: 6px 20px 6px 20px;padding: 8px 8px 8px 8px;font-size: 1em;font-style:italic;line-height:1.4em;}

Contoh 2

Code Script 2:
.post blockquote {border:1px dashed #DC143C;background: #EEE0E5;margin: 6px 10px 6px 10px;padding: 8px 8px 8px 8px;font-size: 1em;font-style:italic;line-height:1.4em;}


Contoh 3

Code Script 3:
.post blockquote {color:#EE9A00;border:5px dotted #000000;background: #ffffff;margin: 6px 6px 6px 6px;padding: 8px 8px 8px 8px;font-size: 1em;line-height:1.4em;}

Contoh 4

Code Script 4:
.post blockquote {color:#00CED1;border-top: 2px solid #000000;border-left: 2px solid #000000;border-right: 1px solid #000000;border-bottom: 1px solid #000000;background: #ffffff;margin: 6px 0px 6px 0px;padding: 8px 8px 8px 8px;font-size: 1em;line-height:1.4em;}

Contoh 5

Code Script 5:
.post blockquote {color:#666666;background: #ffffff url(http://i39.tinypic.com/154iuq9.jpg);background-position:top left;background-repeat:no-repeat;margin: 6px 6px 6px 6px;padding: 8px 0px 8px 74px;font-size: 14px;font-style:italic;line-height:1.4em;}

Contoh 6

Code Script 6:
.post blockquote {border-top: 1px solid #FFF;border-left: 1px solid #FFF;border-right: 1px solid #666666;border-bottom: 1px solid #666666;background: #000000 url(http://i37.tinypic.com/23tgzfk.jpg);background-position:top left;background-repeat:repeat-y;margin: 0 20px;padding: 10px 20px 10px 45px;font-size: 0.9em;}

Contoh 7

Code Script 7:
.post blockquote {background: #ffffff url(http://i44.tinypic.com/slh4yu.jpg);background-repeat:no-repeat;background-position:top center;margin: 6px 6px 6px 6px;padding: 8px 36px 8px 40px;font-size: 14px;line-height:1.4em;}

Contoh 8

Code Script 8:
.post blockquote {color:#000000;background: #ffffff url(http://i41.tinypic.com/24fh84w.jpg);margin: 6px 6px 6px 6px;padding: 8px 6px 8px 6px;font-size: 14px;line-height:1.4em;}

  • Jika sudah selesai bisa klik Save, sekarang anda bisa melihat perubahannya

Sekian Artikel dari saya tentang Cara Membuat Quote/Macam-Macam Quote pada Postingan Blog semoga artikel ini bermanfaat bagi anda dan dapat menambah ilmu anda dalam memperindah postingan anda. Jika anda mengalami kesulitan bisa tinggalkan komentar anda dibawah ini Oke:) 

Sumber: blogbulk.com
Categories: icon
Pin It

Related Post:



5 komentar:

  1. Unknown25 August 2013 at 16:00

    Nice share awesome :D
    Kunjungi Http://Upi-jkt48.blogspot.com

    ReplyDelete
  2. Bang Sastro25 August 2014 at 07:28

    wah jadi pengen nyoba nih gan,,,
    selama ini quote ane pake di kaskus doang :D

    ReplyDelete
  3. Unknown3 November 2014 at 04:51

    Kalau untuk penutup/pembuka itu apa namanya mas? seperti di kaskus itu.
    kalau di postingan ini seperti membuat "Code Script 8: Open" tombol seperti itu apa namanya mas?

    Mampir ke gubuk ane mas : www.triatma.us

    ReplyDelete
  4. Aditya Manung5 February 2015 at 21:28

    keren sob ijin coba
    kunjungan balik ke http://simbalisme.blogspot.com

    ReplyDelete

Jika ada sebuah Link yang sudah tidak bisa di gunakan, silahkan tinggalkan komentar di bawah ini untuk di Update

Blog ini sudah menerapkan Dofollow :
1. Berkomentar dengan Baik dan Sopan.
2. Tidak komentar SPAM.
3. Tidak menempatkan Link Hidup saat berkomentar.

Copyright © 2012 RitzNews.com. All rights reserved.

Super SEO created by Blogger Tuts | Published by GalleryBloggerTemplates.com