Kumpulan Jenis Style Blockquote Manis Dan Praktis Untuk Blogger

Kumpulan Jenis Style Blockquote Manis Dan Praktis Untuk Blogger

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

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

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

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

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

Dan dibawah ini aku sajikan 5 rujukan instruksi style blockquotes yang sanggup diadaptasi untuk blog anda dengan memakai 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/AVvXsEichcrvOObZg-zqrSv9EEY3juNNc_cx1yN0qsucmI8a7RbfH8wtefurqrNA6yvYA6AHgJR86FCfG5V_PHoO2QfDHYVAtJrII03FiNSGy6h_3DNhHjd9DvXONq_V_qBimAVGYAVTjAAQWqwH/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 instruksi 5 ini, penggunaannya sedikit berbeda yaitu dengan cara memasukan instruksi secara manual supaya akhirnya sesuai yang diharapkan, sebagai rujukan penggunaan kodenya ibarat 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 sanggup ditampilkan ibarat pada hasil 5, silahkan tambahkan instruksi dibawah ini persis diatas instruksi </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 ibarat dibawah ini:
blockquote:before {display:none;} untuk content blockquote awal, dan blockquote:after {display:none;} content blockquote akhir.