Cara Membuat Desain Kutipan Unik (Blockquote) Artikel
Blockquote - Setiap blogger tentu mempunyai keinginan untuk membuat desain tampilan artikelnya agar lebih menarik dan unik. Apalagi bila didalam artikelnya tersebut memuat kutipan teks 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.
Blockquote merupakan elemen HTML yang menyediakan tempat untuk kutipan 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:
Blockquote Style 1
Buka tema blog teman-teman.
Copy kode berikut kemudian sisipkan "Sebelum atau di Atas" tulisan </style>.
blockquote{
display:block;
font-size:18px;
font-style:italic;
background:#edf1f2;
color:#000;
margin:20px 0px;
padding:20px 20px 20px 50px;
position:relative;
border-radius:13px;
}
blockquote:before{
content:"\201D";
position:absolute;
left:10px;
top:0px;
font:700 70px Arial, sans-serif;
color:rgba(79, 75, 75, 0.5);
}Simpan dan tutup tema blog teman-teman.
Sekarang buka Entri baru postingan blog.
Lalu panggil blockquote dalam postingan teman-teman dengan menggunakan <blockquote> dan </blockquote>, berikut contoh penulisannya:
<blockquote>
Böi tuko wulawa tanömö golowingöu
</blockquote>Hasilnya sebagai berikut.
Blockquote Style 2
Buka tema blog teman-teman.
Copy kode berikut kemudian sisipkan "Sebelum atau di Atas" tulisan </style>.
ononihablockquote{
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;
}
ononihablockquote:before{
content:"\201D";
font:700 60px Arial,sans-serif;
color:#fff;
position:absolute;
top:-20px;
left:0;
right:0;
text-align:center;
z-index:1;
}
ononihablockquote:after{
content:'';
background-color:#008c5f;
position:absolute;
top:-25px;
left:0;
right:0;
display:inline-block;
width:50px;
height:50px;
margin:auto;
border-radius:100px;
}Simpan dan tutup tema blog teman-teman.
Sekarang buka Entri baru postingan blog.
Lalu panggil ononihablockquote dalam postingan teman-teman dengan menggunakan <ononihablockquote> dan </ononihablockquote>, berikut contoh penulisannya:
<ononihablockquote>
Hadia wa mauwu ndraono na tenga'ö, ba hadia wa mauwu zatua tenga böwö
</ononihablockquote>Hasilnya sebagai berikut.
Blockquote Style 3
Buka tema blog teman-teman.
Copy kode berikut kemudian sisipkan "Sebelum atau di Atas" tulisan </style>.
/* Click to Tweet Quote Box for Blogger by igniel.com */
.ignielQuoteTwitter {
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;
}
.ignielQuoteTwitter a {
display: block;
text-decoration: none;
text-transform: none;
color: #666666;
cursor: pointer;
font-size: 20px;
line-height: 140%;
letter-spacing: 0.05em;
}
.ignielQuoteTwitter a:hover, .ignielQuoteTwitter:hover a:after{
text-decoration: none;
color: #666666;
}
.ignielQuoteTwitter 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;
}Simpan dan tutup tema blog teman-teman.
Sekarang buka Entri baru postingan blog.
Lalu panggil ignielQuoteTwitter dalam postingan teman-teman dengan menggunakan <ignielQuoteTwitter> dan </ignielQuoteTwitter>, berikut contoh penulisannya:
<div class="ignielQuoteTwitter"><a onclick=".href + "&text=" + encodeURIComponent(this.innerText) + " - by: @ononihanias ", "sharer", " toolbar=0, status=0, width=626, height=436"); 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>Ganti by: @ononihanias dan title="Amaedola Ono Niha" sesuai keinginan teman-teman. Bila langkah yang teman-teman buat sudah benar, hasilnya sebagai berikut.
Blockquote Style 4
Buka tema blog teman-teman.
Copy kode berikut kemudian sisipkan "Sebelum atau di Atas" tulisan </style>.
.styled-blockquote {
margin: 0;
padding: 40px 60px 30px 70px;
background: #FFE66B;
border-left: 12px solid #EF911C;
color: #252525;
position: relative;
text-align: justify;
}
.styled-blockquote:before {
font-size: 300%;
font-family: arial;
display:block;
position: absolute;
}
.styled-blockquote:before {
font-family: 'icomoon';
content: "\201D";
color: #B1A25B;
left: 20px;
line-height: 40px;
top: 35px;
}
.styled-blockquote:after {
content: "";
}
.quote-source {
text-align: right;
color: #868686;
font-style: italic;
font-size: 95%;
margin-top: 15px;
}Simpan dan tutup tema blog teman-teman.
Sekarang buka Entri baru postingan blog.
Lalu panggil class styled-blockquote dalam postingan teman-teman dengan menggunakan <div class="styled-blockquote"> dan </div>, berikut contoh penulisannya:
<div class="styled-blockquote">
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>Hasilnya sebagai berikut.
Blockquote Style 5
Buka tema blog teman-teman.
Copy kode berikut kemudian sisipkan "Sebelum atau di Atas" tulisan </style>.
.bubble-blockquote {
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);
}
.bubble-blockquote:before {
font-family: 'icomoon';
content: "\201D";
color: #FF4242;
left: 20px;
line-height: 40px;
top: 18px;
text-shadow: 7px 5px 10px rgba(0, 0, 0, 0.26);
}
.bubble-blockquote: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;
}Simpan dan tutup tema blog teman-teman.
Sekarang buka Entri baru postingan blog.
lalu panggil blockquote dalam postingan teman-teman dengan menggunakan <div> dan </div>, berikut contoh penulisannya:
<div class="bubble-blockquote">
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>Hasilnya sebagai berikut.
Referensi:
1. igniel.com
2. jagowebdev.com