Cara Menghasilkan Desain Kutipan Unik (Blockquote) Di Postingan Blog

byMakalula Networks •
0

Blockquote - Setiap blogger pasti memiliki impian untuk menghasilkan konsep penampilan artikelnya biar lebih memukau dan unik. Apalagi jikalau didalam artikelnya tersebut menampung kutipan teks unik dari sumber beken atau kata-kata sendiri yang penting untuk dipahami oleh pembaca.

Untuk mengakomodir impian tersebut maka ada baiknya kutipan atau kata-kata tersebut dibentuk didalam elemen blockquote.

Setiap blogger pasti memiliki impian untuk menghasilkan konsep penampilan artikelnya biar le Cara Membuat Desain Kutipan Unik (Blockquote) di Artikel Blog

Blockquote ialah elemen HTML yang menawarkan wilayah untuk kutipan pendek / panjang didalam suatu postingan blog. Penulisannya diawali dengan tanda kutip buka (open quote) dan diakhiri dengan tanda kutip tutup (close quote).

Meskipun tanda kutip buka dan tutup memiliki penampilan yang berlawanan tiap browser bukan mempunyai arti tampilannya tidak sanggup kita buat secara permanent. Caranya dengan mengendalikan jenis karakter didalam arahan html-nya.

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


7 Desain Kutipan Unik (Blockquote) Blogspot

Blockquote Style 1

Blockquote style 1 ini sanggup sobat jumpai di blog mbak igniel. Saya sendiri terpikat dengan penampilan blockqoute ini sampai memustuskan untuk menerapkannya di blog aku sendiri. Berikut tindakan memasang arahan blockquote style 1 beserta pola tampilannya:

  1. Buka tema blog teman-teman.
  2. copy arahan berikut lalu sisipkan "sebelum atau di atas" goresan pena </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 memakai <emanblockquote1> dan </emanblockquote1>, berikut pola penulisannya:

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

  6. Berikut penampilan blockquote yang sobat dapatkan. Desain background blockquote berwarna abu-abu dipadukan dengan garis berwarna hijau, dibentuk memukau 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 konsep kotak-kotak berwarna putih yang telah diberi efek bayangan (shadow) disekitar kotak. Cocok digunakan jikalau hendak menulis kutipan unik yang panjang seumpama lirik lagu, puisi, dll. Berikut tindakan memasang arahan blockquote style 2 beserta pola tampilannya:

  1. Buka tema blog teman-teman.
  2. copy arahan berikut lalu sisipkan "sebelum atau di atas" goresan pena </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 memakai <emanblockquote2> dan </emanblockquote2>, berikut pola 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 penampilan 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 jumpai di blog /situs yang dibangun dengan CMS Wordpress. Tapi hening saja, konsep kutipan jenis ini sanggup juga digunakan diblogspot. Berikut tindakan memasang arahan blockquote style 3 beserta pola tampilannya:

  1. Buka tema blog teman-teman.
  2. copy arahan berikut lalu sisipkan "sebelum atau di atas" goresan pena </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 memakai <emanblockquote3> dan </emanblockquote3>, berikut pola 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="Cara Membuat Desain Kutipan Unik (Blockquote) di Artikel Blog"color:#03A9F4;">Amaedola Ono Niha" sesuai impian teman-teman. Bila langkah yang teman-teman buat telah benar, kesannya selaku berikut.

    Aoha noro nilului wahea, aoha noro nilului waoso, alisi khöda ta fadaya-daya, hulu khöda ta faewolo-wolo


Blockquote Style 4

Berikut tindakan memasang arahan blockquote style 4 beserta pola tampilannya:

  1. Buka tema blog teman-teman.
  2. copy arahan berikut lalu sisipkan "sebelum atau di atas" goresan pena </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 memakai <emanblockquote4> dan </emanblockquote4>, berikut pola 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 penampilan 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 tindakan memasang arahan blockquote style 5 beserta pola tampilannya:

  1. Buka tema blog teman-teman.
  2. copy arahan berikut lalu sisipkan "sebelum atau di atas" goresan pena </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 memakai <emanblockquote5> dan </emanblockquote5>, berikut pola 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 penampilan 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 tindakan memasang arahan blockquote style 6 beserta pola tampilannya:

  1. Buka tema blog teman-teman.
  2. copy arahan berikut lalu sisipkan "sebelum atau di atas" goresan pena </style>.

    .emanblockquote6{background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQv_KAzNwSEwEUnhaXWMuzoxF-7kljDaJQ9DjGZezZo8A9IMZwAh7ZY05-u9bZR5bpZioqgv1CYTc-tb1aQCzT6YTRJBNWBgzFOrmU63MXI5ZpHpJTJtBIwjgcsBE0FnNL7CZPwgx63L-z/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 memakai <emanblockquote6> dan </emanblockquote6>, berikut pola penulisannya:

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

  6. Berikut penampilan blockquote yang sobat dapatkan. Tampilannya sederhana memang tetapi cukup berkesan. Saat permulaan ngeblog, aku memakai konsep blockquote ini.

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


Blockquote Style 7

Berikut tindakan memasang arahan blockquote style 7 beserta pola tampilannya:

  1. Buka tema blog teman-teman.
  2. copy arahan berikut lalu sisipkan "sebelum atau di atas" goresan pena </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 memakai <emanblockquote7> dan </emanblockquote7>, berikut pola 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 penampilan blockquote yang sobat dapatkan. Biasanya blockquote ini baik digunakan jikalau hendak memperlihatkan gunjingan peringatan. Ayo secepatnya gunakan konsep kutipan ini, pribadi 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 bimbingan cara menghasilkan konsep kutipan unik (blockquote) di postingan blog, mudah-mudahan bermanfaat. Salam Ono Niha - Ya'ahowu. Sumber: igniel.com dan jagowebdev.com

Tags:
Post a Comment (0)
Previous Post Next Post