Cara membuat BlockQuote keren di blog ~ Salam hangat untuk kalian para senior blog maupun kalian yang baru ujicoba di dunia per-blogan, dalam hal ini saya hanya sedikit berbagai apa yang saya ingin bagikan saja dan bukan ada maksud untuk menggurui apalagi so tau, hanya kebiasaan dari dulu kalau sedikit tau pasti suka di pamerin ke orang-orang, susah si yaaa kalo punya jiwa pamer hehe.
Baca Juga
Dalam postingan kali ini, tidak jauh-jauh dari utak-atik seputar blog yaitu bagaimana membuat blockquote terlihat lebih simple, menarik, elegan dan enak di pandang. Tujuan untuk membuat blog tampil semenarik mungkin tidak lain hanya untuk meremajakan pengunjung blog, karena blockquote atau biasa disebut sebagai catatan umumnya selalu hadir dalam setiap postingan. sebagai contoh kalian pasti pernah melihat blok seperti "Baca Juga: Link Artikel Lain" yang menunjukkan artikel lain yang mungkin pengunjung tertarik untuk melihatnya. Nah kalian yang ingin mencoba untuk membuatnya saya akan bagikan beberapa style blockquote yang simple but elegan.
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: 'catatan-pelupa';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;}
<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.catatan-pelupa
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>catatan-pelupa</h3>
... tulisan kalian </blockquote>
Ganti catatan-pelupa 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
catatan-pelupa ~ 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://1.bp.blogspot.com/-deC0nmbw3C0/WSrZ-FepYOI/AAAAAAAAC_M/DPfTlOLTCHkGmteOkArMT17fG3Mw-p3zwCLcB/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
catatan-pelupa ~ 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://1.bp.blogspot.com/-SnJYi5HN6Is/WZwK8eSpK3I/AAAAAAAADNc/q6dyS901prMWfUjRJTPfW9JZUgCTcp9eQCLcBGAs/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
catatan-pelupa :
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">
catatan-pelupa :</div>
<br />
... tulisan kalian </div>
Semua tipe keren blockquote di atas saya ambil dari berbagai sumber yang saya tidak bisa ucapkan satu persatu karena lupa. Terima kasih saya ucapkan, bagi yang mau diskusi perihal pemasangannya bisa kita bahas di komentar. Sampai jumpa di artikel-artikel berikutnya.
0 Response to "5 Blockquote Keren Untuk Di Pasang Di Blog"
Post a Comment