Saturday, January 28, 2012

Cara pasang BLOCKQUOTE

Imam Ar Razy | 1:02 PM | ||| 2 Comments
Tutorial yang ke dua nih, kalo yang pertama itu ini, sekarang gue mau jelasin tentang cara memasang Blockquote apa itu blockquote? 
Ini nih yang namanya blockquote
Kenapa bisa gue bikin postingan ini? berawal dari pages yang gue buat, yaitu FAQ (Frequently Asked Questions)
Dan buat kalian yang mau tanya soal tutorial blog, bisa lewat pages itu, insallah gue jawab :)
Sebenernya blockquote nggak cuma satu 
"yang kaya gue pake"
 Ada beberapa, dan koleksi block quote gue nih:
1) Owl



[SCRIPT BLOCKQUOTE]
blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(http://3.bp.blogspot.com/_7wsQzULWIwo/SwhrZYtvrRI/AAAAAAAACRs/Q0k6eaIjnys/s400/owl.png) no-repeat 350px 5px; font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif; color : #000; border-left: 8px dotted #DAB547; } blockquote p { margin: 0; padding-top:10px; }
2) Terus yang kedua

[SCRIPT BLOCKQUOTE]
.post blockquote {
background: #F3F3F1 url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5Jv9YD4I/AAAAAAAACPc/BJ-zgoLMJXw/s1600/comma-side-orange1.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: italic 1.2em Georgia, "Times New Roman", Times, serif;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}
3) Terus yang ketiga

 

[SCRIPT BLOCKQUOTE]
.post blockquote{ margin : 0 35px; padding: 80px 0px 0px 0px; background : #E6F1FA url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb5J-uBKiI/AAAAAAAACPs/81Ja4qFVyGc/s400/head2.gif) no-repeat top; font: normal 1em "comic sans ms", Helvetica, verdana; color : #666; } .post blockquote div{ background : #E6F1FA url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb5j3ME4gI/AAAAAAAACP0/1sQjocgjdK0/s400/head-bottom3.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding: 20px; }
4) Terus yang agak mirip kaya punya gue
INI
[SCRIPT BLOCKQUOTE]
 blockquote { color: white; background: #0000ff; padding: 15px; letter-spacing: 0px; -webkit-border-top-left-radius: 30px; -webkit-border-bottom-right-radius: 30px; -moz-border-radius: 30px 0px 30px 0px;}
blockquote:hover { color: white; text-decoration: bold; background: #0000ff; letter-spacing: 1px; -webkit-border-top-right-radius: 30px; -webkit-border-bottom-left-radius: 30px; -webkit-border-top-left-radius: 0px; -webkit-border-bottom-right-radius: 0px;  -moz-border-radius: 0px 30px 0px 30px;}
Nah, kalo udah di pilih langsung deh kesini: 
[CARA PERTAMA]
  • Login Ke Blogger
  • Elemen Laman => Edit HTML
  • Download Template Lengkap (Untuk berjaga - jaga)
  • Centang Expand Widgets Template
  • Cari Kode . post blockquote hapus kode tersebut. 
  • Ganti dengan Script blockquote di atas
  • SELESAI 
[CARA KEDUA]

  • Cara kedua ini bisa digunakan jika di template kalian nggak ada script .post blockquote
  • Login Ke Blogger
  • Elemen Laman => Edit HTML
  • Download Template Lengkap (Untuk berjaga - jaga)
  • Centang Expand Widgets Template
  • Cari script
.post-body {
  font-size: 110%;
  line-height: 1.4;
  position: relative;
} 
 
  • Setelah itu letakan script blockquote dibawah CSS tersebut

  • SELESAI 
Udah nohhh, semoga bisa ya :) kalo ada yang bingung bisa di tanyain lagi di pages FAQ (Frequently Asked Questions)

GRAB IT! NOW!!


Postingan | Komentar