Skip to content Skip to sidebar Skip to footer

Cara Membuat Desain Kutipan Unik (Blockquote) di Artikel Blog

Blockquote - Setiap blogger tentu mempunyai keinginan untuk membuat desain tampilan artikelnya agar lebih menarik dan unik. Apalagi bila didalam artikelnya tersebut memuat kutipan teks unik dari sumber terkenal atau kata-kata sendiri yang penting untuk diketahui oleh pembaca.

Untuk mengakomodir keinginan tersebut maka ada baiknya kutipan atau kata-kata tersebut dibuat didalam elemen blockquote.

Cara Membuat Desain Kutipan Unik (Blockquote) di Artikel Blog

Blockquote merupakan elemen HTML yang menyediakan tempat untuk kutipan pendek / panjang didalam sebuah artikel blog. Penulisannya diawali dengan tanda kutip buka (open quote) dan diakhiri dengan tanda kutip tutup (close quote).

Meskipun tanda kutip buka dan tutup mempunyai tampilan yang berbeda tiap browser bukan berarti tampilannya tidak bisa kita buat secara permanent. Caranya dengan mengatur jenis huruf didalam kode html-nya.

Biar tidak kelamaan dan merasa bosan, berikut kode dan cara membuatnya:


7 Desain Kutipan Unik (Blockquote) Blogspot

Blockquote Style 1

Blockquote style 1 ini bisa sobat temui di blog mbak igniel. Saya sendiri tertarik dengan tampilan blockqoute ini hingga memustuskan untuk menerapkannya di blog saya sendiri. Berikut langkah-langkah memasang kode blockquote style 1 beserta contoh tampilannya:

  1. Buka tema blog teman-teman.
  2. copy kode berikut kemudian sisipkan "sebelum atau di atas" tulisan </style>.

    emanblockquote1{
    background-color:#ededed;
    color:#213040;
    display:block;
    font-size:18px;
    font-style:italic;
    margin:40px 0 20px;
    padding:40px 20px 20px;
    position:relative;
    border:3px solid #008c5f;
    border-radius:20px;
    }
    emanblockquote1:before{
    content:&quot;201D&quot;;
    font:700 60px Arial,sans-serif;
    color:#fff;
    position:absolute;
    top:-20px;
    left:0;
    right:0;
    text-align:center;
    z-index:1;
    }
    emanblockquote1:after{
    content:&#039;&#039;;
    background-color:#008c5f;
    position:absolute;
    top:-25px;
    left:0;
    right:0;
    display:inline-block;
    width:50px;
    height:50px;
    margin:auto;
    border-radius:100px;
    }
    

  3. Simpan dan tutup tema blog teman-teman.
  4. Sekarang klik Postingan Baru di dashboard blog.
  5. Lalu panggil emanblockquote1 dalam postingan teman-teman dengan menggunakan <emanblockquote1> dan </emanblockquote1>, berikut contoh penulisannya:

    <emanblockquote1>
    Hadia wa mauwu ndraono na tenga'ö, ba hadia wa mauwu zatua tenga böwö
    </emanblockquote1>
    

  6. Berikut tampilan blockquote yang sobat dapatkan. Desain background blockquote berwarna abu-abu dipadukan dengan garis berwarna hijau, dibuat menarik dengan adanya tanda kutip dibagian atas kotak blockquote. Unikkan teman-teman??

    Hadia wa mauwu ndraono na tenga'ö, ba hadia wa mauwu zatua tenga böwö


Blockquote Style 2

Blockquote style 2 memiliki desain kotak-kotak berwarna putih yang sudah diberi efek bayangan (shadow) disekitar kotak. Cocok digunakan bila hendak menulis kutipan unik yang panjang seperti lirik lagu, puisi, dll. Berikut langkah-langkah memasang kode blockquote style 2 beserta contoh tampilannya:

  1. Buka tema blog teman-teman.
  2. copy kode berikut kemudian sisipkan "sebelum atau di atas" tulisan </style>.

    .emanblockquote2 {
    background: #FFF;
    box-sizing: border-box;
    border: 1px solid #dddddd;
    border-radius: 5px;
    padding: 30px 30px 20px;
    box-shadow: 5px 5px 45px -27px rgba(0,0,0,0.5);
    -webkit-box-shadow: 5px 5px 55px -27px rgba(0,0,0,0.5);
    -moz-box-shadow: 5px 5px 45px -27px rgba(0,0,0,0.5);
    }
    .emanblockquote2-judul {
    font-size: 18px;
    line-height: 21px;
    color: #303030;
    text-transform: capitalize;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    font-weight:bold;
    }
    .emanblockquote2-isi {
    font-size: 16px;
    color: #606060;
    }
    

  3. Simpan dan tutup tema blog teman-teman.
  4. Sekarang klik Postingan Baru di dashboard blog.
  5. Lalu panggil emanblockquote2 dalam postingan teman-teman dengan menggunakan <emanblockquote2> dan </emanblockquote2>, berikut contoh penulisannya:

    <div class="emanblockquote2">
    <div class="emanblockquote2-judul">
    AMAEDOLA LI NIHA ~ Ono Niha | Nias</div>
    <br />
    <div class="emanblockquote2-isi">
    <p>Hulö fambambatö galitö, hulö famatua mbalö ndrögö <br />
      Sambua mbongi fambambö, samuza luo aröu manö</p>
    </div>
    </div>
    

  6. Berikut tampilan blockquote yang sobat dapatkan

    AMAEDOLA LI NIHA ~ Ono Niha | Nias

    Hulö fambambatö galitö, hulö famatua mbalö ndrögö
    Sambua mbongi fambambö, samuza luo aröu manö



Blockquote Style 3

Tampilan blockquote ini biasa kita temui di blog /situs yang dibangun dengan CMS Wordpress. Tapi tenang saja, desain kutipan jenis ini bisa juga digunakan diblogspot. Berikut langkah-langkah memasang kode blockquote style 3 beserta contoh tampilannya:

  1. Buka tema blog teman-teman.
  2. copy kode berikut kemudian sisipkan "sebelum atau di atas" tulisan </style>.

    .emanblockquote3 {
      background-color: #edf1f2; /* Warna background */
      display: block;
      position: relative;
      border: 1px solid #dddddd;
      -moz-border-radius: 4px;
      border-radius: 4px;
      padding: 15px 30px;
      margin: 15px 0px;
      font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 400;
      text-align: left;
    }
    .emanblockquote3 a {
      display: block;
      text-decoration: none;
      text-transform: none;
      color: #666666;
      cursor: pointer;
      font-size: 20px;
      line-height: 140%;
      letter-spacing: 0.05em;
    }
    .emanblockquote3 a:hover, .emanblockquote3:hover a:after{
      text-decoration: none;
      color: #666666;
    }
    .emanblockquote3 a:before {
      content: '';
      display: inline-block;
      width: 50px;
      height: 50px;
      vertical-align: bottom;
      background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,7L8,11H11V17H5V11L7,7H10M18,7L16,11H19V17H13V11L15,7H18Z' fill='%23666'/%3E%3C/svg%3E") no-repeat right center;
    }
    

  3. Simpan dan tutup tema blog teman-teman.
  4. Sekarang klik Postingan Baru di dashboard blog.
  5. Lalu panggil emanblockquote3 dalam postingan teman-teman dengan menggunakan <emanblockquote3> dan </emanblockquote3>, berikut contoh penulisannya:

    <div class="emanblockquote3"><a onclick=".href + &quot;&amp;text=&quot; + encodeURIComponent(this.innerText) + &quot; - by: @emanmendrofa &quot;, &quot;sharer&quot;, &quot; toolbar=0, status=0, width=626, height=436&quot;); return false;" title="Amaedola Ono Niha">Aoha noro nilului wahea, aoha noro nilului waoso, alisi khöda ta fadaya-daya, hulu khöda ta faewolo-wolo</a></div>
    

  6. Ganti by: @emanmendrofa dan title="Amaedola Ono Niha" sesuai keinginan teman-teman. Bila langkah yang teman-teman buat sudah benar, hasilnya sebagai berikut.



Blockquote Style 4

Berikut langkah-langkah memasang kode blockquote style 4 beserta contoh tampilannya:

  1. Buka tema blog teman-teman.
  2. copy kode berikut kemudian sisipkan "sebelum atau di atas" tulisan </style>.

    .emanblockquote4 {
        margin: 0;
        padding: 40px 60px 30px 70px;
        background: #FFE66B;
        border-left: 12px solid #EF911C;
        color: #252525;
        position: relative;
        text-align: justify;
    }
    .emanblockquote4:before {
        font-size: 220%;
        font-family: arial;
        display:block;
        position: absolute;
    }
    .emanblockquote4:before {
        font-family: "sans-serif";
        content: "201D";
        font-size:50px;
        color: #B1A25B;
        left: 20px;
        line-height: 40px;
        top: 35px;
    }
    .emanblockquote4:after {
        content: "";
    }
    .quote-source {
        text-align: right;
        color: #868686;
        font-style: italic;
        font-size: 95%;
        margin-top: 15px;
    }
    

  3. Simpan dan tutup tema blog teman-teman.
  4. Sekarang klik Postingan Baru di dashboard blog.
  5. Lalu panggil emanblockquote4 dalam postingan teman-teman dengan menggunakan <emanblockquote4> dan </emanblockquote4>, berikut contoh penulisannya:

    <div class="emanblockquote4">
    Hulö mbaewa ba dete gahe, u'ewa göi ba ahegu tou, ba lö göi u'ewa ba ahulua
    <div class="quote-source">Amaedola Ono Niha - Nias</div></div>
    

  6. Berikut tampilan blockquote yang sobat dapatkan

    Hulö mbaewa ba dete gahe, u'ewa göi ba ahegu tou, ba lö göi u'ewa ba ahulua
    Amaedola Ono Niha - Nias


Blockquote Style 5

Berikut langkah-langkah memasang kode blockquote style 5 beserta contoh tampilannya:

  1. Buka tema blog teman-teman.
  2. copy kode berikut kemudian sisipkan "sebelum atau di atas" tulisan </style>.

    .emanblockquote5 {
        background: #FFD6D6;
        border: 1px solid #FFAEAE;
        border-radius: 10px;
        color: #131313;
        padding: 40px 30px 30px;
        margin: 0;
        position: relative;
        text-align: justify;
        box-shadow: 5px -5px 8px -1px rgba(199, 199, 199, 0.6);
    }
    .emanblockquote5:before {
        font-family: "sans-serif";
        font-size:50px;
        content: "201D";
        color: #FF4242;
        left: 20px;
        line-height: 40px;
        top: 18px;
        text-shadow: 7px 5px 10px rgba(0, 0, 0, 0.26);
    }
    .emanblockquote5:after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 20px solid #FF6C6C;
        bottom: -20px;
        right:20px;
    }
    .bubble-source {
        position: absolute;
        bottom: -50px;
        right: 0;
        text-align: right;
        color: #868686;
        font-style: italic;
        font-size: 95%;
        margin-top: 15px;
    }
    

  3. Simpan dan tutup tema blog teman-teman.
  4. Sekarang klik Postingan Baru di dashboard blog.
  5. Lalu panggil emanblockquote5 dalam postingan teman-teman dengan menggunakan <emanblockquote5> dan </emanblockquote5>, berikut contoh penulisannya:

    <div class="emanblockquote5">
    Alölö nafo na no munganga, ahori gö na no mu'a, awai zi lö mondröi zi lö taya ha taromali si sambua
    <div class="bubble-source">Amaedola Ono Niha - Nias</div></div>
    

  6. Berikut tampilan blockquote yang sobat dapatkan

    Alölö nafo na no munganga, ahori gö na no mu'a, awai zi lö mondröi zi lö taya ha taromali si sambua
    Amaedola Ono Niha - Nias


Blockquote Style 6

Berikut langkah-langkah memasang kode blockquote style 6 beserta contoh tampilannya:

  1. Buka tema blog teman-teman.
  2. copy kode berikut kemudian sisipkan "sebelum atau di atas" tulisan </style>.

    .emanblockquote6{background: #F3F3F1 url(https://1.bp.blogspot.com/-Hl0zzkv5DUg/Xo-4-Rup4LI/AAAAAAAAQe8/tvnQbu_jorcqQJ8fDsrcPRn_Qa2Qb5a9ACKgBGAsYHg/s1600/blockquote.gif);
    background-position:; background-repeat:repeat-y;border: solid #F3F3F1;border-width: 1px 1px 1px 5px;color: #000; font: 16px &#39;monospace&#39;, Comic Sans MS, Courier;line-height: 16px;margin: 10px 0 10px 10px;max-height: auto;min-height: 16px;overflow: auto;padding: 10px 10px 10px 30px; width: 90%;}
    

  3. Simpan dan tutup tema blog teman-teman.
  4. Sekarang klik Postingan Baru di dashboard blog.
  5. Lalu panggil emanblockquote6 dalam postingan teman-teman dengan menggunakan <emanblockquote6> dan </emanblockquote6>, berikut contoh penulisannya:

    <div class="emanblockquote6">
    Bua ziraya-raya bua söfö-söfö, famakhai famakitö budida sinonumalö
    </div>
    

  6. Berikut tampilan blockquote yang sobat dapatkan. Tampilannya sederhana memang namun cukup berkesan. Saat awal ngeblog, saya memakai desain blockquote ini.

    Bua ziraya-raya bua söfö-söfö, famakhai famakitö budida sinonumalö


Blockquote Style 7

Berikut langkah-langkah memasang kode blockquote style 7 beserta contoh tampilannya:

  1. Buka tema blog teman-teman.
  2. copy kode berikut kemudian sisipkan "sebelum atau di atas" tulisan </style>.

    .emanblockquote7{color:#333333;border-left:5px solid #f1c40f;background-color:#edf094;background-position:12px 17px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' fill='gray'/%3E%3C/svg%3E")}.emanblockquote7{background-size:35px;background-repeat:no-repeat;min-height:50px;padding:17px 12px 12px 60px;transition:all .3s ease}
    

  3. Simpan dan tutup tema blog teman-teman.
  4. Sekarang klik Postingan Baru di dashboard blog.
  5. Lalu panggil emanblockquote7 dalam postingan teman-teman dengan menggunakan <emanblockquote7> dan </emanblockquote7>, berikut contoh penulisannya:

    <div class="emanblockquote7">
    Sökhi tö wanou'ö, sökhi tö wa me, tumbu nono gae mbanua sa wöli-wöli,<br />Lö sökhi tö wanou'ö, lö sökhi tö wa me, tumbu nono gae mbanua nikabi wewe
    </div>
    

  6. Berikut tampilan blockquote yang sobat dapatkan. Biasanya blockquote ini baik digunakan bila hendak menampilkan informasi peringatan. Ayo segera gunakan desain kutipan ini, langsung saja copy paste kodenya ke template blog teman-teman.

    Sökhi tö wanou'ö, sökhi tö wa me, tumbu nono gae mbanua sa wöli-wöli,
    Lö sökhi tö wanou'ö, lö sökhi tö wa me, tumbu nono gae mbanua nikabi wewe


Demikian tutorial cara membuat desain kutipan unik (blockquote) di artikel blog, semoga bermanfaat. Salam Ono Niha - Ya'ahowu. Sumber: igniel.com dan jagowebdev.com

Post a Comment for "Cara Membuat Desain Kutipan Unik (Blockquote) di Artikel Blog"