Cara Membuat Blockquote's Info, Tips, dan Warning

Blockquote atau yang sering disebut kutipan ini berfungsi untuk membuat jarak dari postingan di blog. Misalkan kamu memiliki kata-kata atau kalimat yang sangat penting, nah kamu ingin itu tidak menyatu dengan tulisan artikel. Maka kamu akan menggunakan si blockquote disini. Namun barang kali kamu bakalan bosan dengan tampilan blockquote template default dari Blogger bukan? Nah makanya ane share tutorial ini :D . Langsung check it out! (Y) .



Sebelumnya ane bakal liatin contoh blockquote dari template default yang diberikan Blogger dan blockquote versi template ane. Berikut SS nya :) .

Blockquote default Blogger.

Blockquote template Vienna Lite 2.

Oke sekarang kita akan membuat blockquote Info, Tips, dan Warning.

Blockquote Info, Tips, dan Warning.

Berikut caranya, disimak dengan cermat ya gan :v / . Oke let's go!.

1.  Login dulu ke Blogger.
2.  Pilih blog yang mau diterapin efek blockquotenya.
3.  Klik menu Template, kemudian Edit HTML.
4.  Agan and sist tinggal cari kode ]]></b:skin> gunakan CTRL + F untuk mempermudah.
5.  Kemudian copy kode berikut dan pastekan tepat diatas kode ]]></b:skin> tersebut.
   

   .info, .tips, .warning {  line-height: 22px;  min-height: 38px;  padding: 10px 12px 12px 68px;  margin: 5px 0; } .info {  background: #e0e5eb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP5KmjuY-sEPw2-CgC1PUaoG_3Hjbkp7PSwvbpDKBQIPbvGAHfUbHoXf5Lzs3JylUXfvEI6CvV6WdiyMwx_jXllOT2qRVW-EQbDa3SvRsp6ssXR9cRNwpYmfPuZyjzoNqPiAp7Gkf-Xnk/s1600/info.png') no-repeat 12px 8px;  color: #222 } .tips {  background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj94ZsM5vrcsr1_eHv_W47tY539OXTPDLfp5dMP02BkJQP6jQ7W-ZocnwdIEXI4BzadtqlXFuEm1-k5jMyUCDHEQ1r8T8L242KX_h9e37OdP2P9sHu9ybo1FxmPAY1heO5hE6wjg0wWsZ8/s1600/tips.png') no-repeat 12px 8px;  color: #fff; } .warning {  background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt9taEXGJhbM9Nv1yAAkT81fPtwIr6-ve3ne0V4mroBLx-kQXlvR5wBIvy-_1-POhCwf20VZavlQ0j1nf0aeMvctPxtANilBxKOHAWb0Zmw7MR-q0hMOXMaVakCKTjsQzgJyic5NFXlM8/s1600/warning.png') no-repeat 12px 8px;  color: #fff; }

6.  Kemudian klik simpan Template atau Save Template.
7.  Sekarang kita membutuhkan cara untuk menggunakannya. Berikut caranya.
8.  Buka postingan yang ingin diberikan blockquote, dan klik bagian HTML disebelah Compose dipojok kiri atas pada menu post.
9.  Copy dan pastekan kode berikut.
   

   <div class="info">Ini contoh blockquote Info</div>
   <div class="tips>Ini contoh blockquote Tips</div>
   <div class="warning">Ini contoh blockquote Warning</div>

    NB : Ganti tulisan berwarna merah menjadi teks blockquote nya .

Oke mungkin cuman segitu yang bisa ane sampein . Kurang lebihnya tolong dimaafin :3 / . Salam :D .