Kumpulan Jenis Style Blockquote Cantik dan Simpel untuk Blogger

Style Blockquote Cantik dan Simpel - Blockquotes biasanya digunakan untuk menunjukkan kutipan dari bagian besar teks dari sumber eksternal atau sorot kutipan seseorang, pikiran dalam artikel blog.

Biasanya semua platform blogging memiliki styling default untuk blockquotes, tapi kita dapat memodifikasi styling default dengan sesuatu yang relevansi dengan tema / template. Jadi, tutorial ini akan menunjukkan cara untuk menyesuaikan gaya blockquote di Blogger dan WordPress.

Style Blockquote Cantik dan Simpel
Cara yang saya gunakan adalah memberikan pseudo-elemen yang berbeda seperti: before, after,: agar terlihat tampilan yang unik. Sementara itu untuk menambah gaya blockquote yang disesuaikan pada pengguna blogger cukup arahkan ke Dashboard >> Template >> Edit HTML dan cari </head> atau kode ]]></b:skin> dengan menekan tombol [CTRL + F] pada keyboard.

Sekarang pilih salah satu gaya yang disarankan di bawah ini dan salin kode CSS dan paste sebelum tag </head> atau sebelum kode ]]></b:skin> Selanjutnya simpan template Anda! dan lihat hasilnya. Untuk pengguna CMS Wordpress silahkan disesuaikan saja untuk diedit melalui menu tema masing-masing blog.

Selanjutnya untuk menampilkan blockquote pada postingan, silahkan buka menu Pos >> Entri Baru. Buatlah beberapa paragraf postingan, lalu sorot salah satu paragraf dan akhiri dengan mengklik tombol quote pada sudut kanan baris sidebar editor.

Dan dibawah ini saya sajikan 5 contoh kode style blockquotes yang bisa disesuaikan untuk blog anda dengan menggunakan CSS.

Kode 1

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "201C""201D""2018""2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

Hasil 1

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Kode 2

blockquote {
font-size:14px; 
background: #f3f3f3; 
color: #2d41fd; 
padding: 15px; 
quotes: "201C""201C""201C""201C"; 
position: relative; 
margin:0; 
}

blockquote:before { 
display: inline-block; 
content: open-quote; 
color:#2d41fd; 
font-family: Georgia; 
font-size: 2em; 
padding: 8px 0 0 0; 
background: #f3f3f3; 
border-radius: 50%; 
width: 1em; 
height: 1em; 
text-align: center; 
position: absolute; 
top: -16px; 
margin-left: auto;
margin-right: auto; 
left: 0; 
right: 0; 
}

blockquote p:last-child { 
margin-bottom: 0 !important 
}

Hasil 2

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Kode 3

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

Hasil 3

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Kode 4

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;
}

Hasil 4

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Kode 5

body { 
 background: #ddd no-repeat fixed center center;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 background-size: cover;
}
.mb-wrap {
 width: 300px;
  margin: 20px auto;
 padding: 20px;
 position: relative; 
}

.mb-wrap p{
 margin: 0;
 padding: 0;
}

.mb-wrap blockquote {
 margin: 0;
 padding: 0;
 position: relative;
}

.mb-wrap cite {
 font-style: normal;
}

.example5 {
 width: 675px;
 height: 200px;
 background: #ecedf9;
 border-radius: 4px;
}

.example5:before, .example5:after {
 content: "";
    position: absolute;
    z-index: -5;
    -moz-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
    bottom: 10px;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    height: 20%;
    left: 10px;
    max-height: 100px;
    max-width: 700px;
    width: 30%;
}
.example5:after {
    -moz-transform: rotate(3deg);
 -webkit-transform: rotate(3deg);
 -o-transform: rotate(3deg);
 -ms-transform: rotate(3deg);
 transform: rotate(3deg);
    left: auto;
    right: 10px;
}

.example5 blockquote{
 background: #777782;
 height:25%;
 padding: 40px;
 text-align: center;
        border-left:none;
        border-right: none;
}
.example5 blockquote:after{display:none;}

.example5 blockquote:before{
 color: rgba(255,255,255,0.2);
 position: absolute;
 content: '022';
 font-size: 130px;
 line-height: 120px;
 font-style: italic;
 top: 0px;
 right: 10px;
 font-family: Cambria, Georgia, serif;
}

.example5 blockquote p {
 color: #fff;
 font-family: 'Poppins', sans-serif;
 font-size: 21px;
 text-shadow: 1px 1px 1px #000;
text-decoration: none;
}
.example5 .mb-attribution {
 padding: 20px;
}

.example5 .mb-author {
 font-size: 24px;
 font-family:'Dancing Script';
 -moz-transform: rotate(-4deg);
 color: #070d5f;
}
.example5 cite a{
 color: #999;
 text-transform: uppercase;
 letter-spacing: 3px;
 font-size: 12px;
}
.example5 cite a:hover{
 color: #000;
}

Untuk kode 5 ini, penggunaannya sedikit berbeda yaitu dengan cara memasukan kode secara manual agar hasilnya sesuai yang diharapkan, sebagai contoh penggunaan kodenya seperti dibawah ini:

<div class="mb-wrap example5">
<blockquote cite="http://www.hanyapedia.com">
For what is man without desires, without free will, and without the power of choice but a stop in an organ?</blockquote>
<div class="mb-attribution">
<div class="mb-author">
Fyodor Dostoevsky</div>
<cite><a href="http://www.hanyapedia.com/">Notes from the Underground</a></cite></div>
</div>

Hasil 5

For what is man without desires, without free will, and without the power of choice but a stop in an organ?

Fyodor Dostoevsky

Notes from the Underground

Agar fontnya dapat ditampilkan seperti pada hasil 5, silahkan tambahkan kode dibawah ini persis diatas kode </body>

<script src='https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js'></script>
<script>
 WebFont.load({
    google: {
      families: ['Poppins:400,300,700,500,600','Dancing+Script:400,700:latin']
    }
  });
</script>

PROTIPS:
Bila content blockquote (awal dan akhir) yang ingin disembunyikan (hide) tampilannya namun tidak aktif, maka cukup tambahkan code CSS seperti dibawah ini:
blockquote:before {display:none;} untuk content blockquote awal, dan blockquote:after {display:none;} content blockquote akhir.