Pages

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. . ! !


blockquote keren untuk blogger

4.BLOCKQUOTE KEREN UNTUK BLOG


Blockquote keren untuk blogger
.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;
}

Blockquote keren untuk blogger
.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

Blockquote keren untuk blogger
.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. .  :)

Blockquote keren untuk blogger dengan hover effect
.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. .

Share it:
Sobat sedang membaca artikel tentang MEMBUAT BLOCKQUOTE KEREN UNTUK BLOGGER. Silahkan baca artikel bloger sejati Tentang | yang lainnya.
Anda baru saja membaca artikel yang berjudul MEMBUAT BLOCKQUOTE KEREN UNTUK BLOGGER.Anda boleh copy paste artikel ini dengan menyertakan link http://lisaariyansyah.blogspot.com/2013/07/membuat-blockquote-keren-untuk-blogger.html sebagai sumbernya.Dan Jika Anda ingin berlangganan Artikel dari blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel terbaru setiap ada artikel yang terbit di blog ini.

0 comments:

Kode Smiley Untuk Komentar


:a :b :c :d :e :f :g :h :i :j :k :l :m :n :o :p :q :r :s :t

Post a Comment

 

bloger sejati Copyright © 2008-2009 | Edited By : arieadie