[Tips] 5 Cara Membuat Blockquote yang Menarik di Blogger dan Wordpress

BlockQuotes

Blockquotes biasanya digunakan untuk mengidentifikasikan sebuah kutipan dalam sebuah artikel yang mana kutipan tersebut bisa berasal dari sumber luar, atau highlight dari kutipan seseorang ataupun sebuah gagasan/ide yang ada dalam sebuah postingan blog.

Saat ini, hampir semua blogger sudah mulai menggunakan fitur Blockquotes ini di blog mereka untuk membuat artikel mereka lebih terkenal, menarik dan dapat memikat banyak pengunjung.

Kebanyakan dari platform blogging sudah memiliki setingan dasar untuk Blockquotes, tapi kita juga bisa memodifikasi setingan dasar tersebut dengan sesuatu yang baru yang sesuai/serasi dengan gaya dari template blog kita. Misalkan template blog kita mengusung nuansa flat, maka style Blockquotes yang kita pakai juga bernuansa flat.

Dalam tutorial ini, saya akan menunjukkan bagaimana cara memodifikasi gaya Blockquotes di Blogger dan Wordpress. Disepanjang tutorial ini nanti juga akan ditampilkan Contoh hasil dari modifikasi Blockquotes style yang akan kita lakukan ini.

Banyak blogger bertanya-tanya Apakah penggunaan dari Blockquotes ini berpengaruh pada SEO?

Menurut saya Tidak! 

Banyak sekali blogger Profesional diluar sana yang telah menggunakan Blockquotes di blog mereka namun saya tidak pernah melihat ada yang mengatakan bahwa Blockquotes bisa menaikkan SEO. Tetapi Blockquotes ini bisa membantu menaikan rank kalian di mata Google.

Bagaimana Cara Kustomisasi Blockquotes Style di Blogger/Blogspot :

Untuk mengkustomisasi Blockquotes style di blogger kalian hanya perlu login ke Blogger Dashboard >> Template >> Edit HTML dan cari kode </head>

Sekarang kalian tinggal pilih jenis style Blockquotes mana yang kalian suka, lalu copy kode CSS-nya dan pastekan sebelum kode </head>. 

Siap! Save template kalian!

Jadi setiap kali kalian ingin membuat sebuah kutipan, tinggal block saja kutipan tersebut kalu tekan simbol quotes di menu atas New post blogger kalian. Lihat gambar dibawah!

Bagaimana Cara Kustomisasi Blockquotes Style di Template Wordpress :

Untuk menambahkan Blockquotes style di wordprress cukuplah mudah, kalian hanya perlu menambahkan coding dibawah nanti ke file style.css atau custom.css template wordpress kalian. Kalian juga bisa melakukan dengan cara lain yaitu dengan memilih Appearance >> Editor didalam Wordpress admin atau edit.

Nah sekarang, silahkan pilih Blockquotes Style mana yang kalian suka.

1. BlockQuotes Style 1 : Simple

Pada contoh ini saya menggunakan style kutip ganda. Kalian bisa mengubah ukuran dari tanda kutip dengan mengedit font-size:4em; dengan ukran yang kalian suka.

BlockQuotes Style 1 : Blogger

<style>
.post blockquote {
background:#f9f9f9;
border-left:6px solid #ccc;
font-family: Georgia, serif;
margin:1.5em 10px;
padding:.5em 10px;
quotes:"\201C""\201D""\2018""\2019";
}
.post blockquote:before {
color:#ccc;
content:open-quote;
font-family: cambria, Georgia;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
.post blockquote p {
display:inline;
}
.post blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 10px;
}
</style>

BlockQuotes Style 1 : Wordpress

 blockquote {
    background:#f9f9f9;
    border-left:6px solid #ccc;
    font-family: Georgia, serif;
    margin:1.5em 10px;
    padding:.5em 10px;
    quotes:"\201C""\201D""\2018""\2019";
    }
    blockquote:before {
    color:#ccc;
    content:open-quote;
    font-family: cambria, Georgia;
    font-size:4em;
    line-height:.1em;
    margin-right:.25em;
    vertical-align:-.4em;
    }
    blockquote p {
    display:inline;
    }
    blockquote cite {
    color: #999999;
    font-size: 14px;
    display: block;
    margin-top: 10px;
    }

2. BlockQuotes Style 2 : Hover Effect

Ini adalah style favorit saya, saya menemukannya di codepen, dalam contoh ini kalian bisa melihat bahwa style ini sangatlah elegan.

BlockQuotes Style 2 : Blogger

<style>
   .post blockquote {
    text-align:left;
    font: 16px/24px Arial, sans-serif;
    color: #555;
    padding: 0.5em 10px;
    margin: 1.5em 10px;
    }
    .post blockquote:before {
    content: open-quote;
    font-size: 24pt;
    text-align: center;
    line-height: 42px;
    color: #fff;
    background: #ddd;
    float: left;
    position: relative;
    border-radius: 25px;
    margin-right: 0.5em;
    vertical-align: -0.4em;
    display: block;
     height: 25px;
     width: 25px;
    }
    .post blockquote:after {
    content: close-quote;
    font-size: 24pt;
    text-align: center;
    line-height: 42px;
    color: #fff;
    background: #ddd;
    float: right;
    position: relative;
    border-radius: 25px;
    margin-right: 1em;
    vertical-align: -0.5em;
    display: block;
    height: 25px;
    width: 25px;
    }
    .post blockquote:hover:after, blockquote:hover:before {
    background-color: #555;
    transition: all 350ms;
    -o-transition: all 350ms;
    -moz-transition: all 350ms;
    -webkit-transition: all 350ms;
    }
    </style>

BlockQuotes Style 2 : Wordpress

 blockquote {
text-align:left;
font: 16px/24px Arial, sans-serif;
color: #555;
padding: 0.5em 10px;
margin: 1.5em 10px;
}
blockquote:before {
content: open-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: left;
position: relative;
border-radius: 25px;
margin-right: 0.5em;
vertical-align: -0.4em;
display: block;
height: 25px;
width: 25px;
}
blockquote:after {
content: close-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: right;
position: relative;
border-radius: 25px;
margin-right: 1em;
vertical-align: -0.5em;
display: block;
height: 25px;
width: 25px;
}
blockquote:hover:after, blockquote:hover:before {
background-color: #555;
transition: all 350ms;
-o-transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;
} 

3. BlockQuotes Style 3 : Garis putus-putus & Latar belakang gambar

Dalam contoh ini saya telah menambahkan bingkai/border garis putus-putus disekeliling BlockQuotes, gambar tanda kutip saya pakai Muli font dari Google web fonts library.

BlockQuotes Style 3 : Blogger

<style>
.post blockquote {
@import url(http://fonts.googleapis.com/css?family=Muli);
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYMOByZuS2NN3r3dkNbUotsUJyhyQURUDcRgghvdX_OX7Ex5U1QF6FL66mkkxANOJ13qVe0v-Xk1OFSgVi6DVOuFHl9yvXBPTDjaupWcWarnDyAzuSGQYLGSGU3sX_aS37APzgA_e0NjQZ/h120/blockquote.png) no-repeat;
border: dashed 2px #ccc;
color: #333;
font-family: muli;
margin: 30px;
padding: 20px 30px 30px 40px;  
}
</style>

BlockQuotes Style 3 : Wordpress

blockquote {
@import url(http://fonts.googleapis.com/css?family=Muli);
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYMOByZuS2NN3r3dkNbUotsUJyhyQURUDcRgghvdX_OX7Ex5U1QF6FL66mkkxANOJ13qVe0v-Xk1OFSgVi6DVOuFHl9yvXBPTDjaupWcWarnDyAzuSGQYLGSGU3sX_aS37APzgA_e0NjQZ/h120/blockquote.png) no-repeat;
border: dashed 2px #ccc;
color: #333;
font-family: muli;
margin: 30px;
padding: 20px 30px 30px 40px;  
} 

4. BlockQuotes Style 4 : Cool Circle

Contoh yang ke-empat ini memiliki lingkaran pada tanda kutipnya.

BlockQuotes Style 4 : Blogger

<style>
.post blockquote{
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 16px;
border-top: solid 2px #dddddd;
border-left: solid 2px #dddddd;
border-right: solid 2px #dddddd;
border-bottom: solid 2px #dddddd;
margin: 1em 0px;
padding: 1em 1em;
font-family: Georgia, Times, "Times New Roman", serif;
font-style: italic;
font-size: 1em;
min-height: 60px;
}
.post blockquote:before {
display: block;
float: left;
content: "\201C";
font-size: 100px;
margin-right: 10px;
color: #fff;
background-color: #03C9A9;
padding: 15px 12px 5px 8px;
width: 50px;
height: 50px;
line-height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.post blockquote cite {
position: relative;
display: block;
text-align: right;
margin-top: 5px;
color: #999;
}
</style>

BlockQuotes Style 4 : Wordpress

 blockquote{
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 16px;
border-top: solid 2px #dddddd;
border-left: solid 2px #dddddd;
border-right: solid 2px #dddddd;
border-bottom: solid 2px #dddddd;
margin: 1em 0px;
padding: 1em 1em;
font-family: Georgia, Times, "Times New Roman", serif;
font-style: italic;
font-size: 1em;
min-height: 60px;
}
blockquote:before {
display: block;
float: left;
content: "\201C";
font-size: 100px;
margin-right: 10px;
color: #fff;
background-color: #03C9A9;
padding: 15px 12px 5px 8px;
width: 50px;
height: 50px;
line-height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
blockquote cite {
position: relative;
display: block;
text-align: right;
margin-top: 5px;
color: #999;
}

5. BlockQuotes Style 5 : Awesome

Contoh dibawah ini adalah salah satu Blockquotes style yang paling menarik yang saya temukan di codepen. Blockquotes style ini juga saya pakai di blog saya.

BlockQuotes Style 5 : Blogger

 <style>
.post blockquote{
display:block;
background: #fff;
padding: 15px 20px 15px 45px;
margin: 0 0 20px;
position: relative;
font-family: Georgia, serif;
font-size: 16px;
line-height: 1.2;
color: #666;
text-align: justify;
border-left: 15px solid #c76c0c;
border-right: 2px solid #c76c0c;
-moz-box-shadow: 2px 2px 15px #ccc;
-webkit-box-shadow: 2px 2px 15px #ccc;
box-shadow: 2px 2px 15px #ccc;
}
.post blockquote::before{
content: "\201C"; /*Unicode for Left Double Quotes*/
font-family: Georgia, serif;
font-size: 60px;
font-weight: bold;
color: #999;
position: absolute;
left: 10px;
top:5px;
}
.post blockquote::after{
content: "";
}
.post blockquote a{
text-decoration: none;
background: #eee;
cursor: pointer;
padding: 0 3px;
color: #c76c0c;
}
.post blockquote a:hover{
color: #666;
}
.post blockquote em{
font-style: italic;
}
</style>  

BlockQuotes Style 5 : Wordpress

blockquote{
display:block;
background: #fff;
padding: 15px 20px 15px 45px;
margin: 0 0 20px;
position: relative;
font-family: Georgia, serif;
font-size: 16px;
line-height: 1.2;
color: #666;
text-align: justify;
border-left: 15px solid #c76c0c;
border-right: 2px solid #c76c0c;
-moz-box-shadow: 2px 2px 15px #ccc;
-webkit-box-shadow: 2px 2px 15px #ccc;
box-shadow: 2px 2px 15px #ccc;
}
blockquote::before{
content: "\201C"; /*Unicode for Left Double Quotes*/
font-family: Georgia, serif;
font-size: 60px;
font-weight: bold;
color: #999;
position: absolute;
left: 10px;
top:5px;
}
blockquote::after{
content: "";
}
blockquote a{
text-decoration: none;
background: #eee;
cursor: pointer;
padding: 0 3px;
color: #c76c0c;
}
blockquote a:hover{
color: #666;
}
blockquote em{
font-style: italic;
}

Akhir Kata!

Jadi, hanya ini saja [Tips] Cara Membuat BlockQuotes yang Menarik di Blogger dan Wordpress dari saya. Saya sangat berharap tutorial ini dapat membantu dan bermamfaat untuk kalian semua.

Sedikit tips! setiap kali kalian copy kode HTML diatas, kalian pastekan dulu ke notepad baru kemudian kalian copy hasil paste di notepad tadi ke HTML kalian. Hal ini dikarenakan notepad bisa menetralkan setingan penulisan yang ada di blog saya.