30.12.12

Tutorial : Blockquote Hover Mine Version ll

Author : Nabila Medan Time : 12/30/2012 08:16:00 PM Total Comment : 3 Label :

اَلسَّلَامُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَا تُهُ Dan Selamat Malam

Live Preview Here

Yang ni ada orang request, dia tanya macam mana nak buat blockquote macam nabila.. Tulisan dia nanti bergerak sikit. Nabila takpasti la ada atau tutorial ini dekat blog lain, sebab yang ni nabila main buat je. Kalau nak cuba , ikut langkah dibawah

1.Dashboard > Template > Edit HTML > Proceed > Tick Expand Widget
2.Ctrl + F , Search code .post blockquote p {
(Kalau sebelum ni dah ada buat tutorial untuk blockquote, tolong padam dulu code nya ye)
3.Copy code bawah ni dan paste atas code .post blockquote p {
blockquote{
border-top:2px solid #000;
border-bottom:2px solid #000;
background:#ddd;
-webkit-transition: 1.1s;
-moz-transition: 1.1s;
padding: 5px;
}
blockquote:hover{
padding-left:30px;
padding-right:30px;
-webkit-transition: 1.1s;
-moz-transition: 1.1s;
}
4.Preview dan save
*warna biru tu, tukar ikut suka korang*


3 comments

Sunday, December 30, 2012 8:53:00 PM Delete! [Reply Comment]

yey! thanks kak nabila ^_^
nanti nak buad tuto ni lah:)

Sunday, December 30, 2012 9:03:00 PM Delete! [Reply Comment]

thx u.. good tuto.

Monday, December 31, 2012 1:48:00 AM Delete! [Reply Comment]

Thanks Nabila :)

Post a Comment
Related Posts Plugin for WordPress, Blogger...