Kustomisasi Style Blockquote Postingan Blog Pakai Background Gambar

Blockquote adalah sebuah tampilan yang berisi kutipan singkat yang membedakannya dari tulisan utama dalam 1 (satu) halaman posting. Fungsi Blockquote ini sering digunakan untuk membungkus kutipan singkat, pepatah, atau pesan penting lainnya di postingan. Hal ini dapat membuat pengunjung memahami apa yang kita ingatkan dan membuat postingan terlihat good looking. Jika postingan blog di Blockquote dengan menarik pastinya tulisannya jadi nyaman untuk dibaca dan ini dapat memberi efek beda pada halaman blog kita jadi lebih keren.

Semua template blogspot terdapat kode dasar atau kode bawaan template untuk Blockquote ini, dan kita dapat mengkustomisasi Blockquote ini sesuai kebutuhan kita dan tampilan blog. Bahkan kita dapat menambahkan background gambar untuk menjadikan Blockquote terlihat unit bahkan berbeda dari blog lainnya.

Sebelum kita lanjut ke utak-atik kode scriptnya, kita praktekkan dulu cara mencari kode Blockquote di template blog.

Silakan login ke akun Blogger anda. Pilih Template, lali klik Edit HTML. Kemudian Cari kode dibawah ini dengan menekan CTRL + F

.post-body blockquote {.........}

atau

.post blockquote {.........}

Jika sudah ketemu, langkah selanjutnya kode yang berwarna merah dan style-nya yang aku tandai dengan titik-titik diganti dengan style kode yang sudah dikustomisasi dengan style yang ada backgroundnya. Sekali lagi, hanya kode yang bertanda waran merah yang diganti, biarkan kode awal jangan dirubah atau dihilangkan.

Berikut source kode Blockquote yang telah dikustomisasi dan ditambahkan dengan efek gambar (terdapat link gambar) yang dapat Anda sesuaikan juga dengan template blog.

---

1. Blockquote #Style1

---

Kode CSS

blockquote {
overflow:auto;
width:220px;
height:280px;
font-family: “Consolas”, “Courier New”, Courier, mono, serif;
color:#ffffff;
padding : 25px 8px 30px 175px;
clear : both;
list-style-type : none;
word-wrap:
break-word;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjMLWSyCnX7cF93IHRf_aOmDm8Gq_DG2fplOsg9ad-0jaWYnpgp7lsttmBzbW_p3WRoIlAmFTssNXbYuDiUY8R6bIi9mFPeQVt8uJTR1hbMcB6QwjtPzZladhnawiKQbN1rBxdi7VES8RxRHYZyt1Abif_R9oOFwpCf33IMhlERRJO5iUCTBY4e0pj1_Q/s1600/teacher.png);
  background-repeat: no-repeat;
  -webkit-transition:all .3s ease-in-out;
  -moz-transition:all .3s ease-in-out;
  -o-transition-duration:all .3s ease-in-out;
  transition:all .3s ease-in-out;}

---

2. Blockquote #Style2

---

Kode CSS

blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmH061JAGURzRyssV_LQ0ZWArZKzl8btlHVkbwsuWwmNhWyku1TqBFsjjquQVtdyyX4jRNVilgraTerTB4u1tT_7OvB89M2fVqNhdc0h3IN_JTsCNG3RBIS7TRIFFqUVSlj0PbdZxy9aI/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; }

---

3. Blockquote #Style3

---

Kode CSS

blockquote { margin : 0 20px; padding: 70px 20px 30px 20px; background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJaNqZqfACcUew2-lxSjhUE0dkLFDV0xRz9seNR0StRHen-SbxORUs_r3qtGN1ylcIFWDN2crL-4OSQ17mKZniVwIIFm10_Qu6ZyCvxM0UHw17AnzYEGu_VVmliieFYt8if3QrxFP_awqNLDy8nD3nMhTzE3hcTuXh1IveGA-5Nxi8Q4WPtuHO-eIPMWI/s1600/catatan.gif) no-repeat top; font: bold .9em Helvetica, "comic sans ms",Courier,"Times New Roman", Times, serif; color : #343434; border-left : 7px solid #FF7802; border-right : 7px solid #FF7802; border-bottom : 7px solid #FF7802; }

blockquote p { margin: 0; padding-top:10px; }

---

4. Blockquote #Style4

---

Kode CSS

blockquote{ margin : 0 35px; padding: 80px 0px 0px 0px; background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjozWn1oJt1gc3gg1ZtI2KRBrcxptKoZWXTI2dKvgzMp3Osu07czeJ5uLBIjZ5E74KmhjtpO_V1mn8kK-0S1KRfBZ52YTWG4WJwc8A8UBrqX4Q2IYn0Rd2iv8hoaGPcy9tsZyLVWIbCDqs/s400/head2.gif) no-repeat top; font: normal 1em "comic sans ms", Helvetica, verdana; color : #666; } blockquote div{ background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPNklxVvixOtHGDNP2EPlapTFOQ9HCsHNYsrQFFxK9-IZmMKLG5yAe_HjaHa1yguIyrxHcJ3NejZamEhx53YZVKK2smVUamWaiR8wgwcvTfMvTwipGes71sXtImWfeqKbjTkV3hOMU84g/s400/head-bottom3.gif) no-repeat bottom; padding-bottom: 50px; } blockquote p { margin: 0; padding: 20px; }

---

5. Blockquote #Style5

---

Kode CSS

blockquote { margin : 0 20px; padding: 70px 20px 20px 20px; background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYuOV63fFWRSQbsnE9Qp9kASceQ-oDeyQ1uyzmcloT7k9899o7b6SogNoTNSTxT_O-eLeBGvfJzSWaGEMbZ5rGuP5jkhCAKZRjYNSOldwcfDw7clg1XZgcTadt854VaLLrtNCtEaL_poY1ZcikN47PYVDVQxRoLfu52s2NahQGJJZmaIhft4mvIkTDeXY/s1600/notes.gif) no-repeat top; font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif; color : #000000; border-bottom : 7px solid #FF0000; } .post blockquote p { margin: 0; padding-top:10px; }

---

6. Blockquote #Style6

---

Kode CSS

blockquote { font:bold italic .9em "comic sans ms", Tahoma, sans-serif; padding-top: 25px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR_yhI5gWTs8GCliyubv0Zj8THOos6gjLSmakXXO0Nq3EHUTSVSkeTHFEYHxSJRc74cKZpkKLAUeUDDPJJCHB5ZxJLiL8nLHvycuoIojoHrkG4Hu7wEPqjbEw-_aIxIId19gMDGWR4JrM/s400/left.gif) no-repeat top left; text-indent: 65px; color:#6299E4; }
blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0YyAwZdH-feWTJuooCVeJxWvEbP5vT3q1c59hdRMDUzRoKNOz68uxf1ZyKCOrAbPx1bWV_e6VGMyU-7fNlv9c9SVIm6oxGzQVl_0_0N7M1oqrdkm7-SSDtqAXK54rTN5ow3afP5a7YTc/s400/right.gif) no-repeat bottom right; padding-bottom:30px; } .post blockquote p { margin: 0; padding-top:10px; }

---

7. Blockquote #Style7

---

Kode CSS

blockquote{ margin : 0 20px; padding: 50px 30px 50px 30px; background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgr5ySQGyZewZTQSyn4nK88ZnkayGn2B_Fg9gutBGvXcUX-f6zPhX7bTfXXuLPJMrne0JYhBGavoS3CuPWj6AmtIPxZ6_rbdX7Wql68aI4HnAo80asFk2nG_wGQBisarEui0QNhN9qnxs/s1600/BLOCK1-TOP.gif) no-repeat top; font: bold italic 1em Helvetica, verdana; color : #000; } 

blockquote div{ background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1fXIyeb2GKuUfKJNZT8ElhjL4z8YEzPxlmN5LyK_6SccMYJFRFJVVDPayd5el6mbHHhrndrjqiPlXCwMTf_uB137Kn_DRTK-fuT9BH2LGjQooyFQ4LQCw6pJlSRbJ3Z88SMRC91DTbgY/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding-top:10px; }

---

8. Blockquote #Style8

---

Kode CSS

blockquote { margin : 0 20px; padding: 20px 60px 80px 20px; background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ285NOMf67Y1Cj8tckNSgEAMJW8-Utc49tyq3vWyt7scIKryUzX-lI6Fr19V1ksO_BSYkGO9eVXELvepTathsHe9zB7H2aP5D7TDH8xSf6iKqViML86QgPBkO-qIcl6gPvxHc1WXz9XeOb-X9qlesn3T2LeOYmiivOquzpkKJ0PpbjpzeYTI5zK8PVY0/s1600/kutipan.gif) no-repeat bottom right; font: bold italic 1em Georgia, verdana, Helvetica, "Times New Roman", Times, serif; color : #000; border: 1px solid #DDD; } .post blockquote p { margin: 0; padding-top:10px; }

---

9. Blockquote #Style9

---

Kode CSS

blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQTXg3eyGU230_QJlnHut_sjwLvD4bdj40rQJrseD6cHZVaoLq-Wvi4W4rSAffbdEhfDZDHioonRB3ELm-OyqxeXdUKzGVjSS4ePRe0yhZ7PKsDe_BZ4aWN2aDraRYP1sEPDRPQfwztcuNH1F3TviHydBX_OvK5S4uREClkseNnpCO7BGs7lQPIDrvHtk/s1600/source-kode.gif) no-repeat right bottom; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 5px dashed #fff; } .post blockquote p { margin: 0; padding-top:10px; }

---

10. Blockquote #Style10

---

Kode CSS

blockquote { margin : 0 20px; padding: 70px 20px 20px 40px; background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxtaOxIguU7qbBX7hQC-l5bPViFetR5ocj-qm4akC4lyB4DHZG2apo6mxVLwezxHWbqrRa387NC_wWUkC7wxzeCBW7Y7iTCgT76leeFXGe8Piqyvj8hF9QILMINsEOkqClY_tOrP8jdkA/s400/angular-purple.gif) no-repeat top left; font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif; color : #000; border-bottom : 5px solid #435388; }
blockquote p { margin: 0; padding-top:10px; }

---

11. Blockquote #Style11

---

Kode CSS

blockquote { background-position:-10px -7px; border: 1px dashed #FFC600; margin: 20px 10; padding: 10px 20px 10px 50px; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW__Lom5OpQ1ZuysISdF5hsl3fzoWTDQYY-ZDdIqzvXOUZRB3rDCqXTJrOPzO7nPpOKidq8R-47MRrEFwyHktb9rCVubUYiaj2qKT6APOfTtd7-fQsIJq8M0cRSf8QNAdECZB1AS9JMBkU/s1600/quote.png") 5% no-repeat #FFF8DD; }

---

12. Blockquote #Style12

---

Kode CSS

blockquote { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRIow0tzAGw42TqU8R1z069Uzbz-t1sKq2VAXW3ztw6OC1GMvyhTy-xHK8UgHf3tyLI0DVgFsrX1gbFNUH9BdguiqzJP77XnTOOQtBWktGrhPYbbeb9ToIlCU0EtOd7rcZqt7bvI0Q1rc/s1600/green-black-side.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; color:#C7CACF; font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman"; } .post blockquote p { margin: 0; padding-top: 10px; }

Silakan Anda modifikasi lagi 12 style Blockquote ini, sesuaikan dengan kebutuhan dan tampilan blog Anda. Semoga bermanfaat.