Membuat Blockquote Scroll & Berbagai Gaya Blockquote

Berbagai tampilan blockquote untuk tiap tiap website/blog rata-rata semuanya punya tampilan sendiri, karena bagi setiap pen-design blog ia ingin selalu menampilkan apa yang menjadi daya tarik untuk diri-nya sendiri maupun untuk para pengunjung, Tapi untuk penggunaan Blockquote sendiri sebenarnya sering digunakan untuk sebuah Note, Code, Script, Bahkan Untuk tampilan daftar posting terkait yang menyerupai isi dari artikel yang dibaca,

Saya sendiri merasa asing karena Background image yg saya pakai adalah bentuk batik.

kira-kira seperti ini :

biasa sih tapi, ga mungkin ada yang sama, begitu menurut tips dari blogger Pro.

Gaya dari Blockquote itu memang biasanya di Edit di bagian CSS

dan terletak di atas </head> .

Contoh untuk Blockquote My Blogger Trick, Seprti ini CSS-nya :

.post blockquote {
background: #F2F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyhwPbYWU4MXN0H7iIHNCgJx89V5_UhD5FWaYy_aoSw-FI28qhjjfwBoK_0Jo9rN0-tIhb9-UhepKcgSIs5uHIVvOW6BFB3s5A40QNgD3L5ZUlaL5sd19snDUZDLST-8Vrk09tfRuI3Urx/s1600/block-qoute1.png) no-repeat bottom center;
margin: 0 20px;
padding: 10px 20px 40px 20px;
border-top: 1px solid #DDD;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
border-bottom: 0px solid #ddd;
font-size: 0.9em;
word-wrap: break-word;
overflow: hidden;
}
.post blockquote p {
margin: 0;
padding: 0 0 15px;
}

 cara untuk mengetahui CSS blockquote dari tiap blog terkadang semuanya, kalau ingin mengetahuinya kita tinggal klik kanan pada blog tersebut dan pili View Page Source, terus tekan Ctrl+F dan cari .post blockqute .

Sekarang kita ke bagian Scroll Blockquote, caranya tambahkan code berikut didalam CSS blockquote:

overflow:auto; max-height:200px;

 maka Blockquote kita otomatis akan menampilkan maximal tinggi 200, tapi bila di blockquote sudah ada overflow: hidden , hapus saja, dan ini hanya untuk scroll, tapi bagaimana untuk Style atau gaya-nya, Ok berikut daftar tampilan blockquote yang menarik untuk di plototin.

• Blockquote With a Fancy Border and Owl Image

 Berikut Code-nya :

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

•  Blockquote With a Purple Corner Label and Border At Bottom

 Berikut Code-nya :

    .post blockquote {
    margin : 0 20px;
    padding: 70px 20px 20px 40px;
    background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC0KKD3C35FHqBhAIEQpfO6ytOXIL1FkfVfXt_ujsIBOD2AvxiMBnxobn4C5yC8-7_ewZYXMBAjHtguB-q-ZbbJnbCBno5I80BciLdVWmMbxFSXCP_DQFlzH-gK1yGYGoiFHagiNE3ov8/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;
    }

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

• Jigsaw Blockquote With An Image At Right Corner

  Berikut Code-nya :

    .post blockquote {
    margin : 0 20px;
    padding: 10px 20px 25px 20px;
    background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUF4_DPcshx1NTAROkMgVm-qyI_a296UTKyZQDkrGjRo8DxOyzgN8zwatsaNVn2Spx10O5BmhKcjKcw-4Jej4cltY8q0srV7fYxt6WL-XZBTQYe4STdt8DYDcl2NDn_A1m7OYLfPIeezw/s400/block22.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;
    }

•  The Monkey Man Blockquote!!!

   Berikut Code-nya :

   .post blockquote{
    margin : 0 35px;
    padding: 80px 0px 0px 0px;
    background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv01c-ub8TZ6cxo2iZFN9IcOkxVuQOyWmGe3VkB_QP6jSRH0_1ksAxuwjjvezuEQXAJetRvPPqQHaPuOEKaZgcic2r5WXX3pwpf-wT6KuVBW1Z6O8VS0vCz76_DFtpD5IVN3UTNVP07oQ/s400/head2.gif) no-repeat top;
    font: normal 1em "comic sans ms", Helvetica, verdana;
    color : #666;
    }

    .post blockquote div{
    background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinYhV-r3xssJDw8ziIDp1_6vEDSJypJ3b3bBscQ-D1UkLqwz2xqytJzQiwIytx0DHPC4p9kgPetX5igwIfbd4lRq1vW1wMHjAQX5WpZOHv2G31Z618baQXv9YmmcvdabvQtbfMV9661Hg/s400/head-bottom3.gif) no-repeat bottom;
    padding-bottom: 50px;
    }

    .post blockquote p {
    margin: 0;
    padding: 20px;
    }

• Blockquote With Canopy Style Image At Top and Bottom

  Berikut Code-nya :

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

    .post blockquote div{
    background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhndvJZ32epmAWBCVWNsmyuLwxeCq9e7Go2mKMsYwEOUxmMcS2hX8mEq4yayUFSq1Z0Jb4Z-iGACSm-6cg0AzsIcjGqi615yFin8qrAOM18IsnLCSsRmsIyTG2ZWfvIkeqdKPd0wDgQPxM/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom;
    padding-bottom: 50px;
    }

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

  Berikut Code-nya :

    .post 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/AVvXsEhaMrcb2Z0IweXtK7DZ8kvz5cxmJY8PFP52v-ypYAhyBlIAQSUiGozxhUXV-kBNWyq1U9k9R7ANsiOPWK_m8NC_hbYSZr1C8h-Vps-oGh9At_aBhioM1JAN85swrZrm1cTbAtfSXvcI9GQ/s400/left.gif) no-repeat top left;
      text-indent: 65px;
    color:#6299E4;
      }
      .post blockquote div {
        display: block;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEEFpmzh9UHOHICwEpRG74fbrspznP9P3P4Jo6wvD1Fg9Z5juexYRo2a8fMWX3ddX9xiIQw0A1wu0dUh2tGrxVFxiKfs4wlc_0n4Teljxfr2PNn8ilk_a4Uu5vTVeSk5IpqWUii7u9BSw/s400/right.gif) no-repeat bottom right;
    padding-bottom:30px;
    }

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

Saya rasa cuma itu yang terlihat Uniq dan menarik, yah semua tahu kita sebagai blogger terkadang mendapatkan artikel ini sekedar salin dan menyalin, untuk Sumber silahkan klik DISINI.