12/12/16

Menambahkan Style Blockquote Pada Template Default Blogger

Mungkin Anda telah sering mendengar istilah kata blockquote, atau bahkan mungkin Anda pernah melihat bermacam-macam style blockquote yang unik dan tentunya berbeda-beda pada setiap blog / website. Jika kita menggunakan blockquote pada template default blogger maka tampilannya tidak akan jauh berbeda dengan tulisan lain, dan yang membedakannya hanya sedikit menjorok kedalam dari batas tepi kiri dan tepi kanan area posting kita. Yang tentunya blockquote tersebut bisa di bilang kurang menarik dan tidak ada bedanya.

Nah untuk mengatasi itu, maka pada kesempatan ini saya akan membagikan 3 Style Blocquote untuk di pasangkan di template default blogger. Sebelum saya membagikan style blocquote-nya Anda perlu memahami dulu pengertian dari blockquote.
Blockquote adalah tulisan yang menjorok ke dalam dari batas tepi kiri dan tepi kanan area posting, yang tujuannya adalah untuk mempertegas isi tulisan ataupun teks yang dianggap penting dan menonjol dari tulisan lainnya, agar tidak terlewatkan oleh pembaca.  Contohnya ini.. Anda akan lebih tertarik pada paragraf ini, daripada di atasnya.
Di atas itu adalah sedikit pengertian tentang blockquote semoga Anda bisa memahaminya. Selanjutnya kita akan melangkah pada pemasangan style blockquotenya, Silahkan Anda pilih style blockquote di bawah ini dan copy pastekan kodenya tepat diatas atau sebelum kode ]]></b:skin>.

Blockquote Style 1


Blockquote for blogger Style 1

.post blockquote{
  display:block;
  background: #fff;
  padding: 15px 20px 15px 45px;
  margin: 0 0 20px;
  position: relative;
  
  /*Font*/
  font-family: Georgia, serif;
  font-size: 13px;
  line-height: 1.2;
  color: #666;
  text-align: justify;
  
  /*Borders - (Optional)*/
  border-left: 10px solid #c76c0c;
  
  /*Box Shadow - (Optional)*/
  -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 Quote*/
  
  /*Font*/
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #999;
  
  /*Positioning*/
  position: absolute;
  left: 10px;
  top:5px;
}

.post blockquote::after{
  /*Reset to make sure*/
  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;
}

Blockquote Style 2


Blockquote for blogger Style 2

.post blockquote{
  position:relative;
  padding:15px;
  margin:5px 0;
  border-left:6px solid rgba(0,0,0,0.1);
  border-right:6px solid rgba(0,0,0,0.1);
  font-wight: 400px;
  background:#f9f9f9
}

.post blockquote,q{
  quotes:none;
}

.post blockquote:before,blockquote:after,q:before,q:after{
  background:transparent;
}

Blockquote Style 3


Blockquote for blogger Style 3

.post blockquote{
  background:#F7F7F7;
  border-left:6px solid #1abc9c;
  margin:1.0em 10px;
  padding:5px 10px;
  font:italic 11px Georgia,"Times New Roman",Times,serif;
  line-height:20px;
  word-wrap:break-word;
}

.post blockquote p{
  display:inline;
}

.post blockquote:before{
  color:#bdbdbd;
  font-size:1.7em;
  display:block;
  content:"Quote"; 
  margin:10px .25em 20px 0px;
  vertical-align:-.4em;
}

.post blockquote:after{
  color:#bdbdbd;
  font-size:1.7em;
  display:block;
  content:"End of Quote";
  margin:20px .25em 10px 0px;
  vertical-align:-.4em;
}

Cara Menggunakan Blockquote 

1. Login ke blog Anda dan buatlah postingan baru.
2. Setelah anda menulis beberapa kata  lalu block tulisan yang ingin dijadikan sebuah quote dan klik tanda kutif dua, yang ditunjukan oleh panah merah pada screenshot gambar dibawah ini.

Cara Menggunakan Blockquote

3. Klik Pratinjau untuk melihat perubahan.

Demikian tutorial yang bisa saya sampaikan pada kesempatan ini. semoga tutorial ini bisa bermanfaat. Jika Anda kurang puas dengan tampilan style blockquote yang saya berikan, silahkan Anda belajar modifikasi sendiri kode tersebut. 

You might also enjoy reading

Subscribe

Daftarkan email Anda untuk mendapatkan Artikel terbaru pilihan dari Andito Blog

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Silahkan berkomentar sesuai dengan topik.