Untuk dapat menerapkan style blockquote di bawah ini, cara pertama masuk Blogger > Edit HTML > pastekan kode css tepat di atas kode </b:skin> simpan template.
Cara kedua, kalian bisa langsung pastekan langsung di postingan blog dengan diapit tag <style>...css...</style> di mode HTML.
Style Blockquote Keren Pertama
Ini merupakan salah satu gambaran dari blockquote yang bisa kalian customize di blog kesayangan kalian, selamat berkreasi.CSS nya di bawah ini, kalian bisa ubah sesuai dengan keinginan kalian ya.
#a {text-align: left;background: #abc9f4;position: relative;display: block;padding: 55px 20px 20px;color: #fff;border-radius: 3px;}
#a:before {font-family: trebuchet ms, arial;position: absolute;content: 'UR_TITLE';background: #609cf2;position: absolute;top: 0;padding: 9px 0;left: 0;right: 0;color: #fff;display: block;margin: 0;font-weight:700;text-indent: 15px;border-radius:3px 3px 0 0;}
#a:after {display: inline-block;content: "\f0a1";font-family: fontAwesome;font-style: normal;font-weight: normal;font-size: 18px;color: #fff;top: 0;right: 0;padding: 9px 14px;position: absolute;}
Setelah kalian simpan css nya di template atau di postingan, cara pemanggilannya adalah seperti di bawah ini:
<blockquote id="a"> ... tulisan kalian </blockquote>
Style Blockquote Keren Kedua
Dalam style kedua ini, ada 12 varian warna yang kalian dapat gunakan. Gimana, keren bukan? pengen pasang yuk simak css nya.UR_TITLE
Ini merupakan salah satu gambaran dari blockquote yang bisa kalian customize di blog kesayangan kalian, selamat berkreasi.
#b{
display:block;
background: #fff;
padding: 15px 20px 15px 45px;
margin: 0 0 20px;
position: relative;
font-family: Georgia, serif;
font-size: 14px;
line-height: 1.2;
color: #666;
-moz-box-shadow: 2px 2px 15px #ccc;
-webkit-box-shadow: 2px 2px 15px #ccc;
box-shadow: 2px 2px 15px #ccc;
border-left-style: solid;
border-left-width: 15px;
border-right-style: solid;
border-right-width: 2px;
}
#b::before{
content: "\201C";
font-family: Georgia, serif;
font-size: 60px;
font-weight: bold;
color: #999;
position: absolute;
left: 10px;
top:5px;
}
#b::after{
content: "";
}
#b a{
text-decoration: none;
background: #eee;
cursor: pointer;
padding: 0 3px;
color: #c76c0c;
}
#b a:hover{
color: #666;
}
#b em{
font-style: italic;
}
/*warna dasar*/
#b.default{
border-left-color: #656d77;
border-right-color: #434a53;
}
/*warna si anggur*/
#b.grapefruit{
border-left-color: #ed5565;
border-right-color: #da4453;
}
/*warna inilahpokoknya*/
#b.bittersweet{
border-left-color: #fc6d58;
border-right-color: #e95546;
}
/*warna bunga matahari*/
#b.sunflower{
border-left-color: #ffcd69;
border-right-color: #f6ba59;
}
/*warna rumput*/
#b.grass{
border-left-color: #9fd477;
border-right-color: #8bc163;
}
/*warna mint*/
#b.mint{
border-left-color: #46cfb0;
border-right-color: #34bc9d;
}
/*warna aqua*/
#b.aqua{
border-left-color: #4fc2e5;
border-right-color: #3bb0d6;
}
/*warna biru jeans*/
#b.bluejeans{
border-left-color: #5e9de6;
border-right-color: #4b8ad6;
}
/*warna levander*/
#b.lavander{
border-left-color: #ad93e6;
border-right-color: #977bd5;
}
/*warna pink*/
#b.pinkrose{
border-left-color: #ed87bd;
border-right-color: #d870a9;
}
/*warna terang*/
#b.light{
border-left-color: #f5f7fa;
border-right-color: #e6e9ed;
}
/*warna gray*/
#b.gray{
border-left-color: #ccd1d8;
border-right-color: #aab2bc;
}
Untuk pemanggilan css nya, pastekan kode html di bawah ini di postingan kalian dalam mode HTML ya.
<blockquote class="aqua" id="b"> <h3>UR_TITLE</h3> ... tulisan kalian </blockquote>
Ganti UR_TITLE dengan teks yang kalian inginkan, teks yang di tandai dengan warna biru di atas bisa diganti dengan nama warna sesuai dengan yang tersedia di css guys, mudah bukan.
Style Blockquote Keren Ketiga
UR_TITLE ~ Ini merupakan salah satu gambaran dari blockquote yang bisa kalian customize di blog kesayangan kalian, selamat berkreasi.
Css untuk style keren blockquote nya bisa di lihat di bawah gan.
#c {
background: white; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(right bottom, #FAFAFA, #F2F2F2); /* Safari 5.1-6.0 */
background: -o-linear-gradient(top left, #FAFAFA, #F2F2F2); /* For Opera 11.6 to 12.0 */
background: -moz-linear-gradient(top left, #FAFAFA, #F2F2F2); /* For Firefox 3.6 to 15 */
background: linear-gradient(to top left, #FAFAFA, #F2F2F2); /* Standard syntax (must be last) */
padding: 12px 12px 12px 0;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin: 20px 5px 5px 15px;
display: flex;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
#c:before {
content: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7zzepbVzwL5nSTMLmusFMikxH81aPlBzp7KEAd9IDzeZzM6QSJHHY8M9H66LfGiaEFzeOLwFt1sTJVAk1a82-pUjdjerPPu0wVaTXyiD1xI7stWsSe5xTnw3R-1g_TNPxm_DVc7ZWWtQ/s1600/klip-kertas.png");
display: block;
position: relative;
left: -15px;
top: -30px;
}
#c:hover {
box-shadow: 0px 4px 2px 0px rgba(0, 0, 0, 0.2), 0 0px 7px 0 rgba(0, 0, 0, 0.19);
}
Seperti biasa untuk pemanggilannya kalian bisa pasang di postingan mode HTML.
<blockquote id="c">
... tulisan kalian </blockquote>
Style Blockquote Keren Keempat
UR_TITLE ~ Ini merupakan salah satu gambaran dari blockquote yang bisa kalian customize di blog kesayangan kalian, selamat berkreasi.
Css untuk blockquote ini segera amankan gan.
#d {
background: #3e4048;
padding: 12px 12px 15px 20px;
margin: 20px 5px 5px 5px;
display: flex;
color: #fff;
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
}
#d:before {
content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVX0llyA5NcDtcYgyw2S7RbBheGySeiySBves2UZWtJQNQ6Y-WWHNIwXtyMdvKLjPA5ZJg342Htps3f7z18lJe8bW0DBLokiYaVMG7dlx0BL8HcOi4FNbwUVNzFQ5LwSgxVzEaJwtCodE/s50/quotation-marks.png');
display: block;
position: relative;
left: -13px;
top: -15px;
}
#d:after {
content: '';
display: block;
position: absolute;
width: 0%;
height: 5px;
background: #d2b30e;
left: 0;
bottom: 0;
-o-transition: 1s;
-ms-transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
#d:hover:after {
width: 100%;
}
Nah pemanggilannya gan.
<blockquote id="d">
... tulisan kalian </blockquote>
Style Blockquote Keren Kelima
UR_TITLE :
Ini merupakan salah satu gambaran dari blockquote yang bisa kalian customize di blog kesayangan kalian, selamat berkreasi.
Css untuk blockquote keren terakhir gan
.e {position: relative;display: block;padding: 10px 12px 12px 68px;color: #f5f6e8;background: #415471;line-height: 1.4;}
.e::before {content: "\201C";background-color: #83a2d1;border-radius: 50%;width: 40px;height: 40px;font-size: 60px;font-family: FontAwesome;color: #415471;text-align: center;line-height: 68px;position: absolute;left: 16px;top: 10px;}
.cool {position: relative;padding: 5px 0;border-bottom: 2px solid #ddd;}
.cool:before {content: '';position: absolute;bottom: -2px;left: 0;right: 0;background: #30cc91;width: 75px;height: 3px;}
Sedikit berbeda dengan pemanggilan style blockquote sebelumnya, namun pada intinya sama aja sii.
<div class="e"> <div class="cool"> UR_TITLE :</div> <br /> ... tulisan kalian </div>
0 comments:
Posting Komentar