Tutorial : Blockquote(Hover Tulisan Bertindih)

Assalamualaikum dan selamat sejahtera,to all visitor.Ok hari ni aku nak buat tutorial pertama aku sepanjang aku dok berkecimpung dalam industri blog ni*Muahaha cewah ayat*Seriously sebelum ni aku tak pernah nak buat entry tutorial.So let's go!!!

Ok nampak tak tajuk atas tu?Blockquote tulisan bertindih macamana tu?Macam yang aku guna sekarang nilah.Ok jom tengok.

Dah nampakkan? Ok so sesiapa yang nak guna,boleh ikut tutorial ni k.

DENIM TEMPLATE
  • Sign In dulu.Pergi ke Template > Edit HTML > Tekan CTRL+F
  • Cari code ni ]]></b:skin>
  • And then copy kan code bawah ni atas code tadi.
blockquote{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwjYj7Fj6zHmMci6aQHeRE_QtGzKg2_oHjkeiEtRE4is5X_7J3iVNtSI3H0JX4pVKLNnxL1rEy8sAqjhBrgJRCHA-Q8miK0oh8Sph6Ok28MKb1y6Vd5Kn0I4D8Dr3TK5xB2RJbd9zCpSSB/s1600/grey.png);
padding:10px;
border-radius:0px;
border-left:6px solid #2DDA44;
border-right:2px solid #2DDA44;
border-top:2px solid #2DDA44;
border-bottom:2px solid #2DDA44;
color:#000000;
font:Trebuchet MS;
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
text-shadow: -6px 0 000, 0 6px 000,
6px 0 000, 0 -6px 000;
}
blockquote:hover{
border-radius:0px;
-webkit-box-shadow: 0px 0px 15px #FAFE04;
-moz-box-shadow:    0px 0px 15px #199CE2;
box-shadow:         0px 0px 20px #199CE2;
-webkit-transition:All 0.8s ease;
-moz-transition:All 0.8s ease;
-o-transition:All 0.8s ease;
text-shadow: 0px 0 000, 0 0px 000,
0px 0 000, 0 0px 000;
}
If korang guna Blogskin,korang just cari code  </style> and paste code kat atas ni macam biasa.

 BIRU     : Korang gantilah dengan URL background yang korang suka.
MERAH : Korang ubahlah dia punya border-radius,border left right semua tu,ketebalan box shadow and text shadow ikut suka hati korang.
HIJAU : Korang boleh tukar warna border dan warna tulisan.
PURPLE : Tukar jenis tulisan.

Kalau ada silap dan salah,or tak jadi ke minta maaf.Ok bye hehe!!

~Put Your Words~

Fais-SKA said...

ha3 menarik gak tutorial ni =) skali tgok mmg pning..nice sharing..

Santan Manis said...

waaa.... nice sharing nih :D Btw SM done follow sini, jemput singgah ke blog kalau sudi :)

 
Amir Rusyaidi©