Tutorial Cute Blockquote
Siapa yang tak nak blog dia cantik kan? Tutorial hari ini ialah tutorial cute blockquote.Kali ini D'ya Marshmello mendapat request tutorial dari Ain .Untuk tidak menghampakan pengunjung setia blog D'ya Marshmello, D'ya akn cuba tunaikan okay.Tak tahu apa itu blockquote? Cuba halakan cursor kamu di bawah ini.
Halakan cursor kamu di sini .! tink toink :P
Nampak tak perbezaan blockquote di atas sebelum dan selepas.Cantik kan? Inilah dinamakan blockquote hover, tapi buka blockqoute yang biasa-biasa tu.Yang ni blockqoute special sikit, so D'ya akan bagi kod yang D'ya ubah sikit-sikit macam blockquote D'ya Marshmello .Jom start tutorial ;)
Pergi ke dashboard >> design >> edit HTML >> tick expand widget Langkah kedua , sila cari kod seperti di bawah.post blockquote {
Dah dapat cari, kalau kod lebih kurang sama pon takpe, tak kesah.Lepas tu D'ya akan kasikan code blockquote D'ya.Paste code ini di BAWAH code di atas tadi.Ingat okay, paste di bahagian bawah.background-image : url(URL GAMBAR);
border:3px solid #ffc7cd;
padding: 5px;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
.post blockquote:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrNqBEPXOvX4et1zr6OOc5XalPmpxWSWcAdp5W-QbX91CKI3n2asndAG1mr7YAeYUu8TaBW1yAo7rC1rNwsIeTZSHsQi7mx4RizHoaci7EYC6ei3psxzPVcMNX_e56O-UXNHs_A3Hp48w/s1600/lovegerak.gif);
background-position:bottom right;
background-repeat:no-repeat;}
border-left:5px solid #ffeded;
padding: 5px;
color: #000000;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}
Dapat tak? Tukarkan URL GAMBAR dengan background yang anda suka.Untuk
background cantik-cantik sila klik di sini :-
Untuk text yang bewarna PURPLE tu anda boleh tukarkan small icon sesuka hati la, D'ya bagi free icon untuk kamu and replace balik dekat text warna purple tu okay.
http://i561.photobucket.com/albums/ss52/angelicxmelody/Small%20Icons/1552l2f.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrNqBEPXOvX4et1zr6OOc5XalPmpxWSWcAdp5W-QbX91CKI3n2asndAG1mr7YAeYUu8TaBW1yAo7rC1rNwsIeTZSHsQi7mx4RizHoaci7EYC6ei3psxzPVcMNX_e56O-UXNHs_A3Hp48w/s1600/lovegerak.gif
http://dl.glitter-graphics.net/pub/308/308091qbafsek801.gif
http://dl2.glitter-graphics.net/pub/2617/2617372pgrsy5telp.gif
http://dl10.glitter-graphics.net/pub/1446/1446520ym4f5k37n5.png
Small icon di atas ni boleh replace dalam text yang bewarna ungu tu, kalau default je pon dah kira okay.Kalau nak banyak lagi icon comel-comel boleh cari di Glitter Graphics .Pastikan icon yang kecil je tau, karang bila masuk icon besar-besar jadi hodoh pula.Kalau dah dapat, feel free to leave a comment. Selamat mencuba :)
30 marshmallow komen