Membuat Blockquote Menjadi Lebih Menarik

Tutorial Blogspot - Setelah pada postingan terdahulu telah dibahas mengenai Membuat blockquote tampil cantik yang berisi cara membuat blockquote dengan berbagai macam bentuk, maka pada kesempatan kali ini saya ingin berbagi sedikit tips yang masih berhubungan dengan blockquote. Yang pasti menurut saya model blockquote/kotak kutipan yang akan dibahas tentu lebih keren dan minimalis dari versi sebelumnya.

Design blockquote ini terinspirasi dari model blockquote milik Google yang ada di Webmasters Tools. Saya melihat blockquote Google ini sangat menarik dan saya mencoba untuk memasangnya diblog ini.

Adapun tampilan blockquote yang sudah jadi akan berbentuk seperti berikut :

Blockquote oleh http//kangamphi.blogspot.com - Terinspirasi dari Google Webmasters Tools

Bagaimana, lumayan bagus kan? Ok jika teman-teman blogger berminat, langsung saja kita simak cara membuatnya.

Membuat Blockquote Menjadi Lebih Menarik

1. Login ke blogger
2. Klik Design > Edit HTML
3. Cari Kode
   
   .post blockquote {
   ---------------------
   ---------------------
   ---------------------
   }
   
   
4. Hapus kode diatas dan ganti dengan kode dibawah ini :
   
   .post blockquote {
   -moz-background-clip: border;
   -moz-background-origin: padding;
   -moz-background-size: auto auto;
   background-attachment: scroll;
   background-color: #FFFFD9;
   background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOq6qU3V5SG2_IbyylbY-R9zawWvPPYAVnx1DxuYUkf1wZ7Yu47Sbj2hOgQ54g2OyktJHN_yqUwLe0lQ1a_UzfI98NcTjpxaaHImFQ4SASG6lZgFc8Ts5RrCG7XLgnyfoVo3O2-JJjDRcU/s1600/blockquote_icon.png");
   background-position: 0.5em 0.5em;
   background-repeat: no-repeat;
   border-bottom-color: #B3B3B3;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   border-left-color-ltr-source: physical;border-left-color-rtl-source: physical;
   border-left-color-value: #B3B3B3;
   border-left-style-ltr-source: physical;
   border-left-style-rtl-source: physical;
   border-left-style-value: solid;
   border-left-width-ltr-source: physical;
   border-left-width-rtl-source: physical;
   border-left-width-value: 1px;
   border-right-color-ltr-source: physical;
   border-right-color-rtl-source: physical;
   border-right-color-value: #B3B3B3;
   border-right-style-ltr-source: physical;
   border-right-style-rtl-source: physical;
   border-right-style-value: solid;
   border-right-width-ltr-source: physical;
   border-right-width-rtl-source: physical;
   border-right-width-value: 1px;
   border-top-color: #B3B3B3;
   border-top-style: solid;
   border-top-width: 1px;
   color: #353535;
   padding-bottom: 0.5em;
   padding-left: 2.5em;
   padding-right: 0.5em;
   padding-top: 0.5em;
   }
   
   
5. Simpan template

Share on :

Tweet