MEMBUAT BLOCKQUOTE KEREN UNTUK BLOGGER

Bagi para blogger,saya rasa sudah sepantasnya kalau membuat tampilan blognya lebih menarik dan indah lebih enak di pandang mata,sehingga pengunjung blog kita pun setidaknya tidak bosen saat membaca artikel di blog kita,seumpama rumah kalau rumahnya bersih dan rapi, pasti tamu kita akan betah berkunjung di rumah kita. .hhe, halah Admin sok tau yaa? Nah pada postingan saya kali ini, saya akan memberikan tips atau cara membuat blockquote keren untuk blog,barangkali anda mau memperindah blockquote pada blog anda?atau emang blockquote dengan CSS di blog anda sudah bagus?ya sudah tidak perlu di ganti kalau sudah bagus,hhe Oke langsung saja ke cara membuatnya gan,sesuai screenshot dibawah ini,silahkan di lihat dulu,jika ada yang cocok silahkan copy kode CSS dan memasangnya ke blog anda. . ! !

4.BLOCKQUOTE KEREN UNTUK BLOG

.post blockquote {

background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmBfxiVpy7OuZXm6ysKcFVzSgiNdECPL8n6bzfhfBSKmA8fBsEfHF806j4NhClHXyUuYCJddM25FalsSmyczRHXgHZx-atZeDoGyl-nadkBPDwAetOPCixVjcAqwNa9IFeo5dFKVJb2hU/s1600/postbg.png) repeat-x;

margin: 10px;

padding: 10px 20px 10px 20px;

font-size: 0.9em;

overflow:hidden;

width:530px;

font: normal 14px

color: #555;

border-top: 1px solid #a2ccdb;

border-bottom:1px solid #a2ccdb;

border-right:1px solid #a2ccdb;

border-left:8px solid #a2ccdb;

-moz-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

}

.post blockquote:hover {

border-top: 1px solid #a2ccdb;

border-bottom:1px solid #a2ccdb;

border-right:1px solid #a2ccdb;

border-left:8px solid #4475c1;

-moz-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

}

---

.post blockquote {

background: #F2F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxaDgeK90eC4WqK8qIHPSMLBQErKacNpfCazWPf2rCoTFOIpERVhzI37g8bxCJUeutq0pWHZKAR8HImhSyjlWIsqVM1Q7sxAcUHPKFLoTdry1MfxXVdHvlAAgZBh16reF1V60fmr-5mZ9I/s1600/premium+blogger+blockquote+copy.png) no-repeat bottom center;

margin: 5px 10px;

padding: 10px 20px 40px 20px;

border: 1px solid #CCC;

font-size: 0.9em;

overflow:hidden;

width:530px;

font: normal 12px Georgia, Arial,Verdana;

color: #555;

}

.post blockquote:hover {

border: 1px solid #DDD; }

KETERANGAN : Link yang brwarna MERAH silahkan anda ganti dengan link gambar horisontal yang anda inginkan, gambar maksimal berukuran 570x33px ya,biar sesuai dengan blockquotenya. .kalau tidak ingin memakai blockquote yang ini,masih ada yang ke 3 dan ke 4 sob. . hhe

---

.post blockquote {

background: #F2F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIjjT1TYx9BDs-5NVTA4sLdosmSzEii-vMXvjs02lfCY5M0g_fgLc9gR4xNwUUf3TRbXVnQrSi0V1ne6zrPIyPjhuY-rT00RPpFr75Bi0e0n6dma9qpyV19KVlglajdOWfYgwzPq6q0smU/s1600/featuredItem_withShadow.png) no-repeat right top;

margin: 0 20px;

padding: 25px 20px 10px 10px;

border: 1px solid #CCC;

font-size: 0.9em;

overflow:hidden;

width:530px;

padding-right:28px;

color: #555;

border-bottom-left-radius:10px;

border-top-right-radius:10px;

}

.post blockquote:hover {

border: 1px solid #DDD;

}

KETERANGAN : Link yang berwarna MERAH di atas,silahkan ganti dengan url gambar yang anda inginkan,gambar maksimal harus berukuran 52x52px biar sesuai tepat di kanan atas sperti screenshot blockquote di atas. kalau masih ingin blockquote yang lebih keren dengan effect hover,silahkan lihat screenshot contoh blockquote yang ke 4 sob. . 

---

.post blockquote {

background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw0zpxoPPWYbMF_psB71w3olg2wjEiM1YM3QoYRBZbUnAUmuRaHXPyNDvp-McUwKUz9kcBPlpeKUJZXWSXWBZifPJx19OQ5JF2aQYpd3ATnXQH2KZFr5aoJiYPsuFpx1z-A3pFw76Y5eB5/s1600/premium+blogger+blockquotevertical+copy.png) ;

background-position:;

background-repeat:repeat-y;

margin: 0 20px;

padding: 20px 20px 10px 45px;

}

.post blockquote p {

margin: 0;

padding-top: 10px;

}

.post blockquote

{

font: normal 17px "Garamond",Georgia, Times, serif;

background-color: #BFE3FE;

color: #000;

margin: 5px 10px;

padding: 20px 10px 20px 37px;

border: 2px dotted lightgrey;

border-radius: 10px;

box-shadow: -1px -1px 12px 2px gainsboro;

transition: background-color .777s;

-webkit-transition: background-color .777s;

-moz-transition: background-color .777s;

-o-transition: background-color .777s;

-ms-transition: background-color .777s;

}

.post blockquote:hover

{

background-color:#009999 ;

color: #fff;

}

.post blockquote:active

{

background-color: CornflowerBlue ;

color: #000;

}

KETERANGAN : Seperti biasa Link yang berwarna MERAH bisa anda ganti dengan url gambar anda,ingat gunakan gambar vertikal sob berukuran 31x439px agar sesuai seperti contoh blockquote di atas. .

Saya rasa itu saja sob,Silahkan berinspirasi sendiri mengotak-atik kode CSSnya agar sesuai pada tempelate anda,kalau ada pertanyaan atau saran silahkan komen,sebisa mungkin saya akan balas komenya. .Happy blogging. .