Assalamualaikum wr.wb. Kali ini saya akan posting tentang
Cara Membuat Blockquote keren v.2. postingan ini merupakan kelanjutan postingan tentang
cara membuat blockquote keren di blog .Keduanya memiliki kode yang hampir sama perbedaan yang paling mencolok adalah pada saat efek hover dan perubahan warna teks ,Secara keseluruhan ini adalah perbedaan cara membuat blockquote keren di blog dengan
Cara Membuat Blockquote keren v.2 :
1.pada blockquote v.1 blockquote menggunakan efek hover sehingga jika anda mengscroll mouse ke bagian blockquote maka warnya akan berubah,sedangkan di v.2 ini tidak menggunakan efek hover
2.efekbox shadow yang lebih ditonjolkan daripada v.1 dengan menggunakan efek biru bercahaya(bisa diganti sesuai keinginan anda )
3.perubahan warna teks,jika warna blockquote hitam(artikel tidak bi block ) maka warna teks menjadi putih sedangkan jika warna backgroundnya putih(artikel di block) maka warna teks berubah menjadi hitam
Sebagai contoh anda bisa klik gambar di bawah ini
jika anda ingin memasangnya pastikan anda sudah menghapus kode css dari
blockquote v.1
- 1.buka blogger
- 2.buka template lalu html
- 3. cari kode ]]></b:skin> menggunakan CTRL + F
- 4.copy kode dibawah ini taruh diatas kode ]]></b:skin>
.post blockquote
{
font-size: 15px;font-family: georgia;font-weight: normal;
background-color: #000000;
color: #FFFFFF;
margin: 5px 10px;
padding: 20px 20px 20px 20px;
border: 2px dotted lightgrey;
border-radius: 10px;
box-shadow: -1px -1px 12px 4px blue;
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:active
{
background-color: white ;
color: #000;
}
.post blockquote { background: black; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; } .post blockquote p { margin: 0; padding-top: 10px; }
- 5.ubah kode background-color: white ; menjadi warna kesukaan anda(gunakan bahasa inggris)/kode warna yang anda inginkan dan untuk menggati teksnya ubah color: #000 lihat kodenya disini
- 6.untuk mengganti kotak bayangan ubahlah kode box-shadow: -1px -1px 12px 4px blue;
- 7.jika anda ingin menambahkan efek hover anda sisipkan kode ini diatas .post blockquote:active
.post blockquote:hover
{
background-color: darkgreen ;
color: #fff;
}
untuk penggunaannya anda tinggal menambahkan kode ini di bagian html(bukan compose)
<blockquote> teks anda </blockquote>
jika ada yang ingin agan tanyakan silahkan berkomentar/mengcontact saya di fb yang bisa anda lihat urlnya di bagian
contact us.assalamualaikum wr.wb.
