Tutorial Numbered Page Navigation

Assalamualaikum.. Hai u'olls, setelah sekian lama kini muncul kembali dengan tutorial baru. Kali ni nak buat tutorial numbered page. Dah tak pakai dah home, next & previous tu. Kita pakai number pulak. Tapi cun punya. Korang boleh buat ikut warna blog korang macam yang BCC buat ni. 

Biasa punya.

Bila halakan cursor. Warna berubah pada number 4.
1. Dashboard > Layout > Add Gadget/HTML 2. Copy code ini. Tekan Ctrl+C untuk Copy

<style type="text/css">

.blog-pager,#blog-pager{

font-family:arial, serif;

font-weight:bold;

font-size:12px;

width:98%;}

.showpageNum a,.showpage a {

background: #95fedb repeat-x;

background-position:0px -0px;

border:3px solid #F8BDBB;

-webkit-border-radius:3px;

-moz-border-radius:3px;

border-radius:3px;

margin:0px 1px 0 1px;

padding:3px 10px;

color:#000;

line-height:30px;

cursor:pointer;}

.showpageNum a:hover,.showpage a:hover {

background: #F8BDBB repeat-x;

background-position:0px -30px;

border:3px solid #95fedb;

-webkit-border-radius:3px;

-moz-border-radius:3px;

border-radius:3px;

color:#fff;

-text-decoration:underline;}

.showpageOf{

margin:0 8px 0 0;

background:#95fedb repeat-x;

background-position:0px -0px;

border:3px solid #F8BDBB;

-webkit-border-radius:3px;

-moz-border-radius:3px;

border-radius:3px;

line-height:30px;

padding:3px 10px;

color:#000;}

.showpagePoint {

background:#F8BDBB repeat-x;

background-position:0px -30px;

margin:0 3px 0 3px;

padding:3px 10px;

line-height:30px;

cursor:pointer;

white-space:nowrap;

border:3px solid #95fedb;

-webkit-border-radius:3px; 

-moz-border-radius:3px;

border-radius:3px;

color:#fff;

text-decoration:underline;

font-weight:bold;

 </style>

<script type='text/javascript'>

//<![CDATA[

    var postperpage=2;

    var numshowpage=4;

    var upPageWord ='« Prev ';

    var downPageWord ='Next »';

    var urlactivepage=location.href;

    var home_page="/";

//]]>

</script>

<script type='text/javascript'src='https://dl.dropboxusercontent.com/s/msf4tmk4gr7gzs9/navipage-faiz-tutorial.js'></script>

3. Yang berwarna MERAH adalah untuk background. Yang berwarna HIJAU adalah untuk bolder & yang berwarna BIRU untuk tulisan.
4. Yang berwarna OREN adalah untuk entry disetiap halaman. Macam BCC ada 2. So BCC letak 2. Kalau korang ada 3, letak 3.

Preview dulu. Kalau menjadi bolehlah save :D.
Tutorial sebenar - Faiz Tutorial
Di Ubah Oleh - Cik Hawa Comel

Tutorial Letak Button Like Fanpage Dalam Entry

Selamat petang dan salam sejahtera. Okay, maybe ada yang dah tahu cara ni & maybe ada yang belum tahu tutorial ni. Dedeq tanya macam mana nak letak button like dalam GA/Segmen yang biasa kita buat tu..

Contoh dia mcm kat bawah ni.. Like sekali tau

1. Pergi dekat SINI

Klik untuk tumbesaran

2. Tengok gambar atas ni, ikut macam mana CH buat ya. Bila dah siap semuanya. Click Get Code.

3. Bila dah click Get Code tu. Ada keluar 1 popup. Korang pilih IFRAME.

Klik untuk tumbesaran.

Eh.. Nanti dulu. Belum siap lagi. Ni cara letak dalam entry pulak. Bila korang dah copy semua coding tadi tu. Pergi dekat blogger.com. Macam biasa, pergi dekat new entry. 

4. Pastekan code korang diruangan HTML.. HTML tau.. Bukan COMPOSE. Macam gambar kat bawah ni.

Klik untuk tumbesaran.

5. Dah letak coding tu macam tu.. Cuba preview. Kalau menjadi. Letak lagi satu code pulak. Tak perlu letak <br> dekat <iframe> terakhir tu.. Then siap lepas tu save.

Selamat Mencuba.

Tutorial | Top Commentator Widget For Blogger

Selamat pagi. Okay, dulu dah pernah buat tutorial pasal top commentator ni. Tapi tak jadi sebab ada nama kita kat atas. So kali ni setelah diubah-ubah. Baru la takde nama kita melainkan kita komen banyak sikit baru naik nama kita sendiri. So now, meh kita tengok resipinya. 1. Dashboard > Layout > Edit HTML 2. Copy semua code dibawah ini dan pastekan diruangan kotak edit HTML tu.

<script type="text/javascript"> function getYpipe(feed) {  document.write('<ol>');  var i;  for (i = 0; i < feed.count ; i++)  {  var href = "'" + feed.value.items[i].link + "'";  if(feed.value.items[i].link == "") var item ="<li>" + feed.value.items[i].title + "</li>"; else var item = "<li>" + "<a href="+ href + '" target="_blank">' + feed.value.items[i].title + "</a> </li>";  document.write(item);  }  document.write('</ol>');  }  </script> <script src="http://pipes.yahoo.com/pipes/pipe.run?  YourBlogUrl= http://superdreamland.blogspot.com/  &ExcludedNick1= Cik Hawa  &ExcludedNick2= Anonymous  &ExcludedNick3=  &ShowHowMany=5  &ExcludeCommentsBefore=01-07-2013  &IncludeCommentsBefore=31-07-2013  &_callback=getYpipe  &_id=50b225c916b74b06779b9489abceef2a  &_render=json" type="text/javascript"></script><br /> <center><a href="http://superdreamland.blogspot.com/2013/07/tutorial-top-comment.html">Get Widget Here</a></center>

Yang BIRU - Letak link blog korang.
Yang MERAH - Nama korang. Suka hati la nak letak nama apa pun.
Yang PINK - Letak berapa orang. Macam saya, saya letak 5orang.
Yang HIJAU - Macam tertera diatas.

Preview dulu. Kalau jadi. Save la. Selamat mencuba. Sebelum tu tolong isi saya punya tabung kawen 1. --> http://bit.ly/11uFVWt .. Time kasih awak :D

Tutorial | Elakkan Dari Tertekan Link Iklan

Jawab salam kat atas tu. Sebelum baca tu TEKAN IKLAN ni sikit. Terima Kasih awak yang klik tu. Okay, tajuk hari ni memang ada kena mengena dengan iklan.. Tak kira la iklan Churp-churp ke Says ke. Apa-apa je la. Maybe bagi pendapat orang lain benda ni dah lapok. No, benda ni tak lapok, ada di segelintir kalangan blogger ni ramai lagi yang tak tahu. So kat sini Cik Hawa nak tunjuk cara-caranya.

Klik gambar untuk tumbesaran

Halakan cursor atau anak panah dekat nama yang dalam kotak MERAH tu. Dan korang akan dapat jawapannya, bila korang nampak dalam kotak BIRU tu :D
P/s : Please credit to me if you wanna share this tutorial. Thank you. 

Tutorial Clear Cache and Cookies

*pinjam dari page wanny*

Selamat petang semua. Arini rajin sikit nak buat tutorial. Jap lagi nak buat dadih lak.. hihihi.. Okay, Kebanyakkan ramai yang buat Mini GA, Segmen or Exchange link kat blog. So sebelum korang klik mana-mana iklan yang disediakan tu. Korang kena clearkan cache and cookies dulu. Baru iklan yang korang klik tu masuk duit.. SD harap korang faham ngan tutor ni.. Okay now, lets start this tutorial. Cara dia sama je okay. Google chrome akan keluar tab baru.. Kalau mozila firefox akan keluar sebelah kiri laptop.. Macam gambar bawah ni..

Klik untuk tumbesaran

Google Chrome

1- Tekan Ctrl + Shift + Del

2- Nanti akan keluar tab baru and akan keluar macam gambar kat bawah ni..

3- Keluar 1 popup kecil. And ikut macam mana SD buat ni

5- Dah klik semua.. Tekan button Clear browsing data tu.. Kalau nak tengok ada lagi ke tak. Tengok sebelah kiri korang ada History, Extensions and Setting kan? Korang pergi kat history, tengok ada lagi tak. Korang buat macam yang korang buat tadi..

Mozila Firefox

1- Tekan Ctrl + Shift + Del

2- Akan keluar 1 popup di sebelah kiri korang.

3- Tukarkan yang time range to clear to dari Last Hour ke Everything

4. Tick macam mana SD tick kat dalam gambar tu then tekan clear now. 

SELAMAT MENCUBA.

Tutorial Letak Follower Gadgets

Tutorial ni bagi yang pakai blogskin takde gadget followers yang Google Friend Connection tu. Bagi yang pakai follow button yang comey tu. Yang tu sebenarnya ada limit dan limit dia hanya sampai 300 sahaja. Lepas pada 300orang korang dah tak boleh nak follow mana-mana bloggers. So tutorial ni ada yang requestkan. Jadi SD tolong dia la, kesian dia.. So, jom kita tengok tutor dia.

• Dashboard > Template > Tekan Save Template Dulu > Upgrade template ( atas pada code blogskin korang ). Jangan risau, bila korang upgrade code tu tak hilang.
• Lepas dah revert ke template designer, korang pilih je template pe pon. contohnya korang pilih Simple Template. Pastu, Design > Add A Gadget > Pilih Gadget Followers ye.
• Lepas tu, korang pergi blog korang. Tekan Right Click > pilih View Page Source ye. CTRL+F search "</div><div class='widget Followers' id='Followers1'>" ye. Contoh tengok pada gambar ni.

Klik untuk tumbesaran

• Copy ayat yang korang cari tadi tu.. scroll kebawah sampai korang jumpa code macam ni

 site: "09845065656073829231",

locale: 'en' },

skin);

</script>

Klik untuk tumbesaran

• Faham tak? Kalau tak faham meh tengok code followers SD punya.. Jangan copy code ni.. ni code SD punya tau.. Kalau nak copy pon korang cuma tukarkan ape yang SD warnakan tu je. Code tu ade kat view:source korang. 

<script type="text/javascript">
if (!window.google || !google.friendconnect) {
document.write('<script type="text/javascript"' +
'src="http://www.google.com/friendconnect/script/friendconnect.js">' +
'</scr' + 'ipt>');
}
</script>
<script type="text/javascript">
if (!window.registeredBloggerCallbacks) {
window.registeredBloggerCallbacks = true;

gadgets.rpc.register('requestReload', function() {
document.location.reload();
});
gadgets.rpc.register('requestSignOut', function(siteId) {
google.friendconnect.container.openSocialSiteId = siteId;
google.friendconnect.requestSignOut();
});
}
</script>
<script type="text/javascript">
function registerGetBlogUrls() {
gadgets.rpc.register('getBlogUrls', function() {
var holder = {};
holder.postFeed = "http://www.blogger.com/feeds/6800851196659454699/posts/default";
holder.commentFeed =
holder.currentBlogUrl = "http://superdreamland.blogspot.com/";
holder.currentBlogId = "6800851196659454699";
return holder;
});
}
</script>
<script type="text/javascript">
if (!window.registeredCommonBloggerCallbacks) {
window.registeredCommonBloggerCallbacks = true;
gadgets.rpc.register('resize_iframe', function(height) {
var el = document.getElementById(this['f']);
if (el) {
el.style.height = height + 'px';
}
});
gadgets.rpc.register('set_pref', function() {});
registerGetBlogUrls();
}
</script>
<div id="div-1ua82xw687cyx" style="width: 100%; "></div>
<script type="text/javascript">
    var skin = {};
    skin['FACE_SIZE'] = '32';
    skin['HEIGHT'] = "260";
    skin['TITLE'] = "Followers";
    skin['BORDER_COLOR'] = "transparent";
    skin['ENDCAP_BG_COLOR'] = "transparent";
    skin['ENDCAP_TEXT_COLOR'] = "#333333";
    skin['ENDCAP_LINK_COLOR'] = "#000000";
    skin['ALTERNATE_BG_COLOR'] = "transparent";
    
    skin['CONTENT_BG_COLOR'] = "transparent";
    skin['CONTENT_LINK_COLOR'] = "#000000";
    skin['CONTENT_TEXT_COLOR'] = "#333333";
    skin['CONTENT_SECONDARY_LINK_COLOR'] = "#FFFFFF";
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#000000";
    skin['CONTENT_HEADLINE_COLOR'] = "#000000";
    skin['FONT_FACE'] = "normal normal 100% Verdana, Arial, Sans-serif;";
    google.friendconnect.container.setParentUrl("/");
    google.friendconnect.container["renderMembersGadget"](
    {id: "div-1ua82xw687cyx",
     height: 260,
     
     
     
     site: "12515941746317810549",
     
     locale: 'en_GB' },
     skin);
</script>
</div>

•  Bila dah dapat copy macam code kat atas ni. Pergi semula ke Dashboard > Template > Revert to classic template > Dah dapat template yang asal balikkan? Paste apa yang korang copy tu kat mana-mana sidebar yang korang nak letak.
• P/S :: Kalau tak faham jugak, inbox kan email n paswrd korang kat Page SD.
• Selamat Mencuba ya :D

Tutorial : Letak Banner Segmen/Giveaway Dalam Entry

Holla holli Cikembung Ciktembam sekalian.. Selamat malam.. hehe, ada request tutor dari atynsyera ni.. Kat sini Hawa nak buat tutor untuk new blogger. Meh kita turun bawah tengok cara dia

• Cara Masukkan Banner Dalam Entry

1- Dashboard > Create New Post  2- Ikut macam gambar bawah ni..

Klik button yang dalam kotak hitam tu. Nanti akan keluar satu pop up macam kat bawah ni.

Bila dia dah jadi macam ni. Korang ikut cara macam dalam gambar tu. Ikut satu-satu.

Okay dah siap untuk copy banner. Eh nanti dulu belum siap sepenuhnya lagi. Sekarang ni cara nak backlink kan link kat banner tu.. mcm kadang2 ada yang buat kat bawah banner tu "KLIK BANNER UNTUK JOIN".. Mesti pernah tengok kan, tipu la kalau tak pernah tengok.. So jom kita tengok cara seterusnya..

Klik untuk tumbesaran

Klik untuk tumbesaran 

Okay dah siap, apalagi.. save la.. So selamat bersegmen n mengjoinkan diri dalam mana-mana Giveaway :D

p/s :: haram kalau amik tutor ni awak cakap ni awak punya. Kalau nak amik la. Tapi creditkan kat Hawa okay.. Sayang korang

Tutorial : Centerkan Header

Okay, korang nampak tak gambaq apa kat atas ni. 1 request dari Seneorita Baharin ni. Okay dia tanye macam mana nak buang tulisan kat header tu. Meh kita tengok header dia yang cun ni. Sape la buat header tu, lawa betul. Katne nak tempah ek.. kihkihkih..

Ni header blog dia. Nampak tak ada tulisan lam kotak biru tu. kalau nak buang tulisan tu.. jom kita tengok tutor bawah ni

Cara Buang Tulisan Sebelum Header

1. Dashboard > layout  > Rujuk pada gambar-gambar bawah ni. ni just for template designer

Klik untuk tumbesaran. 

2. Bila dah klik yang tu, nanti akan keluar satu pop-up kan.. okay now tengok gambar ni lagi. ikut je ape yang SD buat. 

3. Dah save pastu tengok ada tak lagi tulisan tadi tu.. Kalau dah takde sekarang meh kita pergi ke tutorial untuk centerkan header pulak.

Cara Centerkan Header

1. Dashboard > Layout > Edit Html

** Ada sesetengah blogger tak jumpa lagi kat mana edit Html ni selepas dashborad bertukar baru. Ni gambar bawah ni akan tunjukkan kat korang semua.

i- mesti pernah nampak semua ni kan? okay, click template tu. Bila korang click template tu nanti jadi macam kat bawah ni.

ii- tekan Edit HTML yang SD bulatkan tu. bila korang tekan nanti kuar satu pop-up yang penuh dengan code.

iii- Sebelum cari code, click yang SD bulatkan tu.. okay, now kita cari code yang nak di cari tu..

2. Tekan Ctrl + F , cari :

/* Content 

 3.  Lepas tu , copy kod kat bawah ni , then paste ATAS kod yang korang carikan tadi tu  .

    .Header img {
      margin-$startSide: auto;
      margin-$endSide: auto;
    }  

4. Paham ke tak ? if korang tak paham , tengok contoh ni : 

    .Header img {
      margin-$startSide: auto;
      margin-$endSide: auto;
    }                                                            
/* Content
----------------------------------------------- */

5 . Preview dulu . Kalau jadi , SAVE yerk ^_^ 
p/s : Kalau tak jadi atau tak faham, Tanya tau, jangan segan2, jangan malu2. Ahak*

Cara Letak cursor dalam blog

Selamat malam semua. Ni tuto untuk newbie or old blogger. kat sini SD nak tunjuk 3 cara masukkan cursor lam blog. Tak susah, senang je. 2 cara untuk template designer. 1 lagi cara untuk blogskin. So meh kita tengok cara dia. Baca bismillah dulu sebelum mula tu. Jangan gelojoh. 
Okay, yang ni untuk template designer. template designer tu macam mana? Okay template designer/denim ni sama. Cuma kadang-kadang ada coding2 yang tak sama je.
1- Template Designer ( kat BAWAH ni ADA 2 CARA untuk cursor )

> Dashboard > design > Add a Gadget > HTML/JavaScript > copy code bawah ni

i- Ni untuk 1 cursor sahaja..

 <style type="text/css">body, a, a:hover { cursor: url(URL CURSOR), progress;} </style><a href="URL CURSOR" target="_blank"><br /></a>

ii- Ni bila cursor pergi kat link tukar jadi cursor lain mcm yang SD punya.. if x jadi bgtau okay !

<style type="text/css">body, a, a:link{cursor:url(url cursor 1), default;} a:hover {cursor:url(url cursor 2),wait;}</style> 

2- Ni pulak untuk blogskin, blogskin n template designer/denim TAK SAMA. 

iii- Blogskin

- Dashboard > TEMPLATE > cari code body {

- Dah? Pastekan kod ni dibawah body { 

cursor: url(URL CURSOR), progress;

Dah siap, preview dulu. kalau jadi SAVE !!

Kalau tak faham boleh tanya.. Selamat mencuba :D

Tukar-tukar background

CIK NATASHA_MINHO buat request. Tanya macam mana nak choose your own background macam yang SD buat kat sidebar belah kiri ni. Nampak tak? tu yang tajuk LOVE THIS.. kalau tak nampak jugak tengok gambar bawah ni.. Tutorial ni just for blogskin. Harap korang faham dengan tutor ni :D

Haa, macam ni la. Okay now let see this tutorial. Hamboi, speaking tu. Hahaha.. 

1. Pergi "Dashboad". Lepastu pergi "Template". Dah siap, gud!

2. Copy semua code kat bawah ni

#background a img{

width:30px;

height:50px;

display:inline;

margin-right:10px;

margin-top:4px;

border: 1px solid #333;

}

#background a:hover img{

display:inline;

margin-right:10px;

margin-top:4px;

border: 1px solid #a1daff;

}

3. Korang dah copy then CTRL+F cari code </style>. Dah jumpa? Paste atas code tadi.
4. Dah paste? Korang cari tempat yang korang nak letak ni, Macam SD, SD pilih sidebar.
5. Dah jumpa? Copy code bawah ni dan pastekan kat tempat yang korang nak letak tadi. 

<div id="background">

<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'></script>

<script>

$(document).ready(function(){

            $("#bgcolor1").click(function(){

                        $("body").css({"background":"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjde6HyGqpZU2znqc6GWPv6YOnXls8COOYBNAXVRfcdIiBOXmJanLIJ5wf-o6HLf-hYxu6diRiHJ_pe2nFSPeg9tcxqdeyz0jU71wOoCKBGFlrYnz7v6j2UFxeiOVcNhT1fsLmMxUzZS2k/s1600/pinkk.png)"});

            });

});

$(document).ready(function(){

            $("#bgcolor2").click(function(){

                        $("body").css({"background":"url(http://i.imgur.com/rQQox.png)"});

            });

});

$(document).ready(function(){

            $("#bgcolor3").click(function(){

                        $("body").css({"background":"url(http://i.imgur.com/aFE0R.jpg)"});

            });

});

$(document).ready(function(){

            $("#bgcolor4").click(function(){

                        $("body").css({"background":"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibWFuEgWX0xMCd6noPEIgX0cTb07KUek9VNkILZl2RHjKxNG_YqdHCaj3-K-XutBzOlsZT6Rkuxgdh_bKAvfKDlJBKdvTF95-jw1WEoM7KokqDJDQkgs7-DHVZVJokw0LmoGXLar14ouk/s1600/pinkk.gif)"});

            });

});

$(document).ready(function(){

            $("#bgcolor5").click(function(){

                        $("body").css({"background":"url(http://i.imgur.com/pwQLk.gif)"});

            });

});

</script>

<center>Choose your own background ;</center>

<center><a href="javascript:void(O)" id='bgcolor1' "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjde6HyGqpZU2znqc6GWPv6YOnXls8COOYBNAXVRfcdIiBOXmJanLIJ5wf-o6HLf-hYxu6diRiHJ_pe2nFSPeg9tcxqdeyz0jU71wOoCKBGFlrYnz7v6j2UFxeiOVcNhT1fsLmMxUzZS2k/s1600/pinkk.png" /></a>

<a href="javascript:void(O)" id='bgcolor2' "><img src="http://i.imgur.com/rQQox.png" /></a>

<a href="javascript:void(O)" id='bgcolor3' "><img src="http://i.imgur.com/aFE0R.jpg" /></a>

<a href="javascript:void(O)" id='bgcolor4' "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibWFuEgWX0xMCd6noPEIgX0cTb07KUek9VNkILZl2RHjKxNG_YqdHCaj3-K-XutBzOlsZT6Rkuxgdh_bKAvfKDlJBKdvTF95-jw1WEoM7KokqDJDQkgs7-DHVZVJokw0LmoGXLar14ouk/s1600/pinkk.gif" /></a></center>

<center>Back to Original background ;</center>

<center><a href="javascript:void(O)" id='bgcolor5' "><img src="http://i.imgur.com/pwQLk.gif" /></a>

</div><br><br>

6. Apa yang SD BOLD kan tu korang tukarkan sendiri ya.. Kalau nak amik yang SD punya pon boleh tapi takut tak berapa kene ngan tema blog korang.

7. Oke dah siap, preview dulu, if jadi terus save tau ;)

8. Tak faham? boleh tanya. 

Nak copy code tekan Ctrl+C. Selamat mencuba..

Tutorial From : Adie Putra
Request From : CIK NATASHA_MINHO

Blockquote Goyang-Goyang

Assalamualaikum. Hai peeps.. Alangkah indahnya kalau ada orang lamar SD kawen, haha.. Gatal la SD ni. Bukan apa, serunya dah sampai tapi jodohnya belum ada lagi. Sedih je rasanya. Korang doa2kan la SD cepat dapat jodoh. nanti bila kendurinya SD jemput semua para pembaca/pelawat yang penah datang ushar blog SD ni.. hehe.. oke balik pada citer dia. sebenarnya ade budak tomey ni tanya..

Hah.. Nak tahu camne blockquote goyang2 uw? Ni SD nak tunjuk..

Haaa.. ni la Blockquote goyang2 tu..

Template designer/blog skin
- Cari code blockquote {  atau yang sama macam code tu dan delete code tersebut
- Copy code dekat bawah dan paste kan dekat tempat yang sama korang padam tadi tu.

-webkit-user-select:text;
-moz-user-select:text;
-webkit-animation-name: shake;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtel3GfvwvRTZIIipUaPMMOcLNW3jgGrZNW7eoBfGsuldotLYzhRFX66YE7pWIvh6yFkXxXWj3sCoPZNuLialMl7rdt0tRjFiwxci6dvupcdlmkHE40acAkJ5Yz6zllFeQb2oDtGY_zTQ/s1600/butterflygrey.png);
padding:15px;
border-top:3px solid #FFC6BC;
border-bottom:5px double #FFC6BC;
border-right:1px dashed #A7D3D2;
border-left:1px dashed #A7D3D2;
color:#000000;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;}

blockquote:hover{
-webkit-animation-name: none;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
color:#555;}
@-moz-keyframes shake /* Firefox*/
{
{ -ms-transform:: translate(-1px, -2px) rotate(-1deg); }
 20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
 30% { -moz-transform:  translate(0px, 2px) rotate(0deg); }
 40% { -moz-transform:  translate(1px, -1px) rotate(1deg); }
 50% { -moz-transform:  translate(-1px, 2px) rotate(-1deg); }
 60% { -moz-transform:  translate(-3px, 1px) rotate(0deg); }
 70% { -moz-transform:  translate(2px, 1px) rotate(-1deg); }
 80% { -moz-transform:  translate(-1px, -1px) rotate(1deg); }
 90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
 100% { -moz-transform:  translate(1px, -2px) rotate(-1deg); }
}
@-ms-keyframes shake /* IE9*/
{
10% { -ms-transform:: translate(-1px, -2px) rotate(-1deg); }
 20% { -ms-transform: translate(-3px, 0px) rotate(1deg); }
 30% { -ms-transform: translate(0px, 2px) rotate(0deg); }
 40% { -ms-transform: translate(1px, -1px) rotate(1deg); }
 50% { -ms-transform: translate(-1px, 2px) rotate(-1deg); }
 60% { -ms-transform: translate(-3px, 1px) rotate(0deg); }
 70% { -ms-transform: translate(2px, 1px) rotate(-1deg); }
 80% { -ms-transform: translate(-1px, -1px) rotate(1deg); }
 90% { -ms-transform: translate(2px, 2px) rotate(0deg); }
 100% { -ms-transform: translate(1px, -2px) rotate(-1deg); }
}
@-webkit-keyframes shake /* Safari and Chrome */
{
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

Then dah paste, preview dulu kalau jadi save dulu ye..

Yang warna biru tu korang leh tukar ngan mana-mana background image yang korang suka :D

tutorial by Afiqah Junizan