Rabu, 11 Februari 2015

Akhir-akhir ini aku cari di semua blog teman, mencari tutorial blockquote. Eh, ketemunya di Kak Mutiara Nurul Izzati. Makasih tutorialnya, ya, Kak Tiara! Mau? Seperti ini blockquotenya.

This is blockquote

Mau? Oke, ikuti step-nya.

  • Masuk akun blog kalian.
  • Dashboard > Template > Edit html
  • Cari kode ini
.post-body {
  • Ketemu? Sip. Nah, di bawah kode itu pasti ada kode ini:

line-height: 1.4;
  font-size: 110%;
  position: relative;
}
  • Di bawah kode banyak tadi, kamu copy kode di bawah ini, lalu paste di BAWAH kode itu.
.post blockquote {
margin: 1em 20px;
border-radius:15px;
padding:10px;background:#ffffff;
border:2px solid #addfff;
border-left:12px double #addfff;
font:14px souvenir lt bt;
background-image:url(http://media.tumblr.com/6b13012bed560155c76bda4678ff0ee5/tumblr_inline_mo53ftf30L1qz4rgp.gif);
background-repeat:no-repeat;
background-position:99% 100%;
background-size:95px;
-webkit-transition: all 1.0s ease-in-out;
-moz-transition: all 1.0s ease-in-out;
-o-transition: all 1.0s ease-in-out;
-ms-transition: all 1.0s ease-in-out;
transition: all 1.0s ease-in-out;
}
blockquote:hover {
-webkit-box-shadow: 0px 0px 8px 1px #3399ff;
-goog-ms-box-shadow: 0px 0px 8px 1px #3399ff;
box-shadow: 0px 0px 8px 1px #cccccc;
background-image:url(http://media.tumblr.com/6b13012bed560155c76bda4678ff0ee5/tumblr_inline_mo53ftf30L1qz4rgp.gif);
background-size:95px;
background-repeat:no-repeat;
background-position: -35% 100%;
}

  • Klik save template. Tidak ada perubahan.
  • Tapi kamu harus membuat blockquotenya dulu.
  • Entri baru > Tulis tulisan yang mau kamu masukin ke blockquote
  • Highlights semuanya, lalu klik tanda kutip di sebelah tanda bullets.
  • Publikasikan, lalu lihat hasilnya.
  • Simpel kan?