Circle hover effect

Assalamualaikum and heyyo eberybuddy... ^^,

Harinie saya nak buat tutorial pasal circle hover macam tempat saya letak ask.fm tu...sebenarnya saya tak nak buat tutorial pasal apa yang saya letak kat blog nie sebab takut nanti ada pulak klon blog nie...tapi, kesian pulak dengan orang yang ada request pasal tutorial nie kat ask.fm...

This is a tutorial about circle hover effect ( rotate , scale , opacity )

Live Preview

For template designer :

www.blogger.com/home --> Layout --> add gadget --> HTML/Javascript

For blogskin :

www.blogger.com/home --> Template --> Paste it anywhere you want it to appear

The Code

<style type="text/css">
.navs {
width:100%;
height:100%;
margin-top:10px;
text-align:center;
border-radius:50%;opacity:0;
 -webkit-transform: scale(0) rotate(-360deg);
 -moz-transform: scale(0) rotate(-360deg);
 -o-transform: scale(0) rotate(-360deg);
 -ms-transform: scale(0) rotate(-360deg);
 transform: scale(0) rotate(-360deg);
background-color:white;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwmeNLJCwEVfkpU65-Oc2Z6GsYSsEQX2XmDsEMl9CDDbiWLO6thjewFqxfbvkPNxZvveM26Bq9iX4DNrf34ame28IbAbTtTNM52vCDKBHAlgee0DpZ_CJRrAFEeT7R1t_pikVh3OvTVRs/s1600/spotty-pink-background-seamless.jpg);
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;}
.navs a {
color:white;
}
.outside:hover .navs {
opacity:1;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
}
.outside {
height:250px;
width:250px;
border-radius:50%;
 box-shadow:
  inset 0 0 0 15px rgba(255,255,255,0.6),
  0 1px 2px rgba(0,0,0,0.1);
-webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
}

#outside1 {
background-image: url(http://wallpapers.avantzone.com/data/media/102/Forever_Friends_14.jpg);
background-position:50% 50%;
background-size:330px;
background-color:#FFFFFF;
}
#outside1:hover {
box-shadow:
  inset 0 0 0 0px rgba(255,255,255,0.6),
  0 1px 2px rgba(0,0,0,0.1);
}
</style>
<center><div class="outside" id="outside1"><div class="navs">
ANYTHING HERE
</div></div></center>

The Note

Blue text : Background image URL find at Google

Fuchsia text : Width and height

Orange text : Color code Find Here

Red text : Put anything you want

Preview and save when done...comments are really appreciated...

Btw, I have update my old blogskin... Blogskin : I'm Rilakkuma , Blogskin : Blue wonderland

Basic thing in editing blog

Assalamualaikum and hello everyone... \o/ actually I've been thinking of making a tutorial about this since a long time ago...But, only now I have the the diligence to write this entry...

This tutorial are for template designer like simple, watermark , awesome or etc

Before editing blog, you must log in to your Blogger account with your username and password. Once you are logged in, make sure you are at your Blogger's Dashboard, otherwise click on the "Dashboard" link, which will take you to a list of your blogs.

If you don't have any blogger account, sign up first

How to add widget / gadget ?

1.   Go to blogger dashboard

     

2.   Access the Layout page of your blog

3.   Click on add a gadget

4.   After you click on add a gadget,a pop-up will appear...

5.   Save your widget

6.   Add a custom widget to Blogger using the HTML and JavaScript widget.

7.   Add HTML/JavaScript code to the box

You can ignore the title field if you don't want to add title

How to edit code ?

1.   Go to blogger dashboard

2.   Access the Template page of your blog

3. Click on Edit HTML button under the "Live on blog" view

4.   Save when done editing

Click save template to save

Click Preview template to preview

Click Revert changes to cancel changes made

How to find code ?

1.   Click on the template box code

2.   Hit the "Ctrl" key (lower left area of your keyboard) AND the letter "F" key at the same time (simultaneously)

3.   A little pop-up window will appear.

Write the keyword that you want to find in the search box then press "enter"

How to copy code ?

1.   Highlight the word that you want to copy

To highlight text using your mouse, position your cursor at the beginning of the text you want to highlight.

Press and hold your primary mouse button (commonly the left-button) until the end of the text.

2.   Hit the "Ctrl" key (lower left area of your keyboard) AND the letter "C" key at the same time (simultaneously)

How to paste code ?

1.   Hit the "Ctrl" key (lower left area of your keyboard) AND the letter "V" key at the same time (simultaneously)

Well, I think that all the basic things you should know in editing blog...

If you have any problem with this post just ask me by leaving a comment...

Affiliates page

Assalamualaikum dan hai semua...harinie saya nak bagi freebies skin untuk letak senarai link dan banner...

skin nie dibuat dalam masa kurang dari 24 jam dan codenya ditaip 99% oleh saya sendiri...

This is how the skin look

Live Preview // The Code

Rules :

My first affiliates skin... hope you'll like it...don't remove the credit ! don't use this skin as a base code! don't copy anything in this skin without proper credit...

Edit this skin as much as you want as long as the credit remains...

How to use this skin?

Firstly make a new affiliates blog...Then, revert the blog into classic template (at the bottom of template page) Then, copy and paste the code of the skin into the template code box...

Lastly,preview and save...

Do comment if u are using this skin

Kepada yang request banner dan saya belum buat lagi sabar yer...paling cepat pown boleh siap tengah malam nie...

Customize comment box ( Designer )

Assalamualaikum dan hai semua...^^ semalam kat Tiqa ada request kat cbox dia tanya macam mana nak buat comment box macam saya...so, here the tutorial...

This comment box will only work in template designer like simple template, denim or etc... As for me I use simple template...

Don't RE-POST this tutorial !!

Want to have a comment box exactly like above? follow below instructions...

The instuction :

1. Sign in www.blogger.com
2. Choose Template --> Edit HTML
3. Search   /* Comments using f3 or ctrl+f
4. Delete the code that you search and all the code after that until the comment code end
5. After deleting the old comment code, replace the code with the one that I give below

/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
.comments .comments-content .loadmore a {
  border-top: 1px solid $(widget.alternate.text.color);
  border-bottom: 1px solid $(widget.alternate.text.color);
}
.comments .comment-thread.inline-thread {
  background-color: transparent;
}
.comment-thread ol {
counter-reset: countcomments;
}
.comment-thread li:before {
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: right;border:2px solid #FEE8E8;
z-index: 2;
position:relative;
font-size: 14px;border-radius:50%;
color: #333333;
padding-left:8px;
padding-top:3px;
background:#FFFFFF;
margin-top:7px;
margin-left:10px;
width: 24px; /*comment counter width*/
height: 23px; /*comment counter height*/
}
.comment-thread ol ol {
counter-reset: contrebasse;
}
.comment-thread li li:before {
content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
counter-increment: contrebasse;
float: right;
font-size: 13px;
color: #666666;
}
.comment-block{
background:#FFFAFA;
padding:5px;
border:3px solid #FFF0F2;
margin-left:65px;position:relative;
border-radius:10px;
}
.comment-header{
font-size:14px;border-radius:10px;
background-color:#FFFFFF;
border-bottom:1px solid #FFF0F2;padding:5px;
}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0;}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{
margin-top:0;
}

.comments .comments-content .datetime a{
color:#555555;font:12px candara;float:right;text-decoration:none;
}

.comment-content{
font: 13px candara;
background:#FFEBED;
padding:8px;
border-radius:10px;
color:#333333;
}
.avatar-image-container{background:#FFE2E2;padding:5px;border-radius:50%;
}

.avatar-image-container img{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
border-radius:50%;}

.avatar-image-container img:hover{
border-radius:50%;
transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;
}

Let's edit the code...

Purple text : The default image URL to show admin comment you can change it with other icon

find the code here

Orange text : Border color

Blue text : Text color

Red text : Background color

Fuchsia text : Width and height

Color code here

Next,you can save it...preview on single post page with comments...

Example : http://tetingblo.blogspot.com/2012/12/vintage-flower-picture.html instead of http://tetingblo.blogspot.com

kalau tak faham tanyalah

...sekian terima kasih...

Banner for them...

Assalamualaikum dan hai semua...haritu dalam post yang nie saya ada cakap nak buatkan banner untuk tiga orang yang paling awal...jadi seperti yang telah dijanjikan amiklah banner kalian nie...

Copy je link banner yang saya dah bagi tuw...kalau tak tahu macam mana nak letak dalam blog tengok sini...

For : Aliyah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Jt2QEokgQLE28VEs075WvwtH4Y7oN6le1yZXfy7iSTw5BSxlmbTSsoeZUkcWorzontHbZJoXcSc_Mj0umxlv4ER06ZGoeoT54N4uMoG3QOHOnva1HJ7CnlkJWphCxDJaFTfpl8x3v_js/s1600/Banner-Aliyah.gif

For : Amirah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidbXdy7_56NoB1_DRgYWOrTfrNAQpi3Zt_-q0E7Sd8yMB9SRgI9vmCQbsxfxGVcOJKyLUvP4uCpVXZND-Sv65TpQDbI_uT42q1FXCSbIF0nrk1sYcF9VZsHLj5Q5EHnIMCYVLpVvBIziKw/s1600/Banner-Amirah.gif

For : Asilah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8fNNuPenDJTQaMUMUQwBgB8M5GPJ0JajYay8-_O4uhI_-e0BqAUOhL8LBKV4xpFXNiORL14o5-bE2KnPMdVq08Rth0f40twHMYbCsE6q3mk5ekQejM3MCSPi1iI_gT8h7jppvKW1ahhWe/s1600/Banner-Asilah.gif

For : Nasharina

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-plm2REH8yqdUtM6OjZPlubb28LmtkuOF53Q_pNT6cOuo8f8BMDqfCKbPPtp_uviQwISXd5oDtIb9paPzWL2cbqYArc4KxgD9hw_lREmYUBUJGaKZ4mtzLwK08qKgTOvbSYD0b1CPrcRN/s1600/nasharina-banner.gif

For : Dhyani

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZgQzWW62KTyTXTZvowmrSXwmcBznzvUduo_CqtKFBGrdSHMSe3KltHnxEAKM0awZBbIg72rp4-fTcQ7SZu-pXD1pqiw_C6zLkmz5FKG-5EQdKDdldlZ3G619PNhOl6k-MX3JL332m5bKF/s1600/dhyani-banner.gif

For : Alan

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYvxuLQb13jVYNbkWjqQXlpDigWAbvIPCT7ZaabC1dkEKvrDu-ZEVVIKrAfOuIIMyrnDieZuMRegAiZkuXyZmu__7W09qHltyYfUZ2Xti6m-5f5vGkFrJxwz2xSmDkwNbQbsevTve8OscP/s1600/Banner-Alan.gif

For : Amirah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXUIusPxSQn7Z54iDQWt9nLTvFRLnWQzjLjByD1ITQyic4GFKCO8wXoBfTRwXDLxaYEbHk8hJq-hr7AWyEfwlIHhZI7Na-w2bGvs8-zcBMBtnyUL8_6Uqz3P-HpcNBfXctR0pI12PkFOMa/s1600/Amirah.gif

For : Alya Tory

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKuVx_hc8QcJBlvBJjbdNsbZsfGgl20HtffEoToGPg9SyBd3Hj8_TT4FwcwwN-Bc5J_RV-aGpI-xGKIqNJTJ79HsnCE_CGb-sbM2PzVxt8-7sRqFY5-RIOXA79sKQFMEt9ZGVofcakMAp/s1600/Banner-Alya.gif

Sorry akak tak tau macam mana nak tambah glitter... :-/

For : Alan

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO9an0ZlHHggrrE_S-h2hMDgWNHruCp0agwPZfuH2wKODN_WQTrNqzxIQ3atve1-4QcPiZsAJMvbDNc0fZD4G62YTyCK2M7qpLV2mpzST_0suXDwnwCg6x5OCwFje9qgC5B-dcyhmcqy_h/s1600/Alan-Banner.gif

For : Aulia

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheqoO5nHAqP6GcDnQUbySrTrfABmC1Qij1SR7JmxnCk2CxtKIZm5nUQuVxrXXf1TlWV5WrWRLC4uRqWMCdmfQFLpcXCeuXjKsWJOp7mc0Mn1COHYISrCFyqfqnH7XMd6s2OhpV4LfMyaDV/s1600/Aulia.gif

Buat dua sebab gambar yang awak bagi macam terpotong...
Pilihlah yang mana awak nak... ;)

For : Aulia

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxkV5-R8RLy66pZLF5iqFddCeLUugLY36AG64Ydtq98DgTYhb8ZjoUbxVdW5tBMf0y5s-tDIG5PQKWZ-lNmjqU9d8g0szBXx5oV82z7ElCShMjmWlt-zDpWnFsjJBDXYntCr8djBcqjwXz/s1600/Banner-Aulia.gif

For : Maya

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLhqgp5N8iyMq9WONoGbuZDwMOsNi49ro0xDnVhn5I6hRAm-MM3t17ZrYYQYFZ4VvxbCzNPhXusfVLAY_p5r5uNzaKRb7hMAJ2C9kXc0E7QDCbXqmsd9jTnUb4IIcf1DqFsarLZ35FE5VT/s1600/Banner-Maya.gif

For : Syazwani

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2l0TNPnP853dngw3torifmKZgADjHz6d3MQkp0Rh1Wrk4nbQf4bSBlLCw4Nu77QvmRRphsh68S7Elb9AeyBMdCEw5-qhi7S42XQbnXc3vXhovXg4gYXm6AoZPKBxBMVwKKn-mI9x549ut/s1600/Banner-ana.gif

For : Azkiya

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQzU0DWNfpdRCIFjE6tlye9F39Jn3q6mTTXr99DwpbruolHRzGNk1GCiqU8lSfnmmW7RcCeS1QQRdGXRBQT0Sgxjd-IT-jTXJCO147lkH7OAubD6oBPJNS3qcoJVsLlHbCugQhLt75ogBZ/s1600/Banner-Azkiya.gif

For : Mufidah

Ha...comel tak ? comel tak ? kepada yang telah diberikan banner jangan lupa credit blog saya kat credit section awak...nie code credit...
Banner by : <a href="http://kawaiilady.blogspot.com/">Kawaii Lady</a>

Request banner secara percuma dibuka sehingga jam 9.00 malam 23.11.2013

Sila komen detail banner seperti :

- URL image untuk diletakkan pada banner

- Apa yang hendak ditulis di banner

- Tema warna banner

- Bentuk bulat atau petak

- Animated atau tidak

--------------------------------------------------------------------------------------------
Saya tidak mengambil request banner lagi kerana sibuk
--------------------------------------------------------------------------------------------

Customize blogskin profile

Assalamualaikum dan hai semua...semalam ada yang tanya kat ask.fm macam mana nak buat profile blogskin.com jadi macam saya punya...tapi...daripada bagi code blogskin saya lebih baik saya buat tutorial cara nak cantik kan profile blogskin from A to Z supaya kalian boleh cantikkan profile kalian sendiri dan boleh tambah ilmu kan?
I learned all of this from HERE...

Ways to customize blogskins.com profile are a bit different than customizing blogger blog...

Things you should know before styling

All styles declaration must be joined together unlike normal blogskins.
Setiap isi dalam <style> hingga </style> perlulah ditaip rapat tanpa ( space )

Example of a normal blogger skins :

<style>
a {
text-decoration: none;
color: #666666;
}
</style>

Example of Blogskins profile code :
<style>a{text-decoration: none;color: #666666;}</style>

Place to put all the styling code :
Tempat untuk anda meletakkan kode pengubahsuaian :

For styling your blogskin profile page :
Untuk mengubahsuai laman profil anda :
Go to your profile --> Edit --> Put the code in about me section

For styling your skin page :
Untuk mengubahsuai laman untuk blogskin anda :
Put the code in skin description of skin.

Profile page dissected
( Code for Blogskin Profile )

1.   .logo{}

2.   .navsearch{}

3.   .footernavright{}

4.   .footernav{}

5.   .footer{}

6.   #my_favorites{}

7.   #my_comments{}

8.   #user_profile_ad{}

9.   #my_skins{}

10. #friends_skins{}

11.   .tabs{}

12.   .tabSelected{} + b{}

13.   #user_profile_about{}

14.   #user_profile_avatar{}

15.   #user_profile_info{}

16.   .topnav{}

17.   #profile_skins{}

18.   .body{}

Lists above are the general areas of Blog Skins profile page.

Simple styling

Now for some really simple styling.

Example 1 - getting reed of some parts of the profile which you don't want to see. like your comments.
Untuk menmbuang beberapa elemen laman profil anda yang tidak diperlukan ( contohnya komen )

All you need is 1 simple line.

<style>#my_comments{display:none}</style>

Example 2 - how about putting some background image?
Untuk menambah background pada laman blogskin...

<style>body{background-image:url(http://i214.photobucket.com/albums/cc105/24168/egobox/backgrounds/cat/Vintage/p9.jpg);Background-color:white;}</style>

Example 3 - changing how your links look like
Untuk mengubahsuai link :

<style>a{color: #777777;text-decoration:none;}</style>

Example 4 - changing  looks for the titles
Untuk mengubahsuai tajuk :

<style>h1,h3{color: purple;}</style>

More precise styling
Example 1 - changing the links of just the #user_profile_about{}.
Mengubahsuai link hanya bagi ruang ( About the user )

<style>#user_profile_info a{color:red;text-decoration:none;}</style> or
<style>#user_profile_info a:hover{color:red;text-decoration:none;}</style> or
<style>#user_profile_info a:hover,a:visited{color:red;text-decoration:none;}</style>

Example 2 - changing the title of just the #user_profile_about{}
Mengubahsuai tajuk hanya bagi ruang ( About the user )

<style>#user_profile_info h1,h3{color: purple;}</style>

Example code

Dont forget to add <style> and </style> tag at both start and end of the code
Jangan lupa untuk menambah kode <style> dan </style> pada mula dan akhir kode

.logo{display:none;}
.footer{display:none;}
.navsearch{display:none;}
.footernav{display:none;}
.footernavright{display:none;}
#my_favorites{display:none;}
#my_comments{display:none;}
#user_profile_ad{display:none;}
body{background:#ffffff;font-family:tahoma;font-weight:normal;text-transform:lowercase;}
b{color:#595b3e;}
a{color:#ffffff;text-decoration:none;}
a:hover{color:#ffffff;text-decoration:none;}
.nickname{padding:0px;}
.tabSelected{background:#c0c0c0;}
.tabs{padding:0px;}
.body{padding:0px;}
#user_profile_avatar{border:0px;padding:5px;}
#user_profile_info a{color:#595b3e;text-decoration:none;}
#user_profile_info{font-size:11px;line-height:90%;letter-spacing:2;color:#595b3e;border-top:6pxsolid#ffffff;border-bottom:4pxsolid#000000;text-align:left;margin:3px;}
#profile_skins a{color:#ffffff;}
#profile_skins td{padding:1px;}
#profile_skins{border-collapse:collapse;}
#profile_skins h1,h3{font-size:15pt;letter-spacing:2px;color:#595b3e;}
#profile_skins img {position:relative;display:inline;background-color:#f1f1f1;border: 1px solid #000000;padding: 2px 2px 4px 2px;}
td{color:#ffffff;}
td a{color:#ffffff;text-decoration:none;}
td img{position:relative;display:inline;background-color:#ffffff;padding:2px2px4px2px;}
.topnav a{color:#595b3e;}.topnav img{background-color:#ffffff;}
.topnav{background:transparent;font-size:11px;line-height:90%;letter-spacing:0;border-top:6pxsolid#ffffff;border-bottom:4pxsolid#c0c0c0;text-align:center;margin:3px;}

After you have done all the styling, you can start writing your about me section.

Hopefully this entry will help you...credit me in your blogskin profile if you're using my tuto...
(Add below code at the the end of about me section)

Helped by : <a href="http://kawaiilady.blogspot.com">Kawaii Lady</a>

If you don't want to add the credit it's up to you...I don't mind..

Put banner in blog

Assalamualaikum and hello readers...semalam ada yang tanya macam mana nak letak banner dalam blog...so, here the tutorial...( malas nak taip banyak )

For template designer

www.Blogger.com/home --> Layout --> Add gadget --> HTML/Javascript --> Copy and paste the banner code that I given below in your HTML/Javascript gadget

For bogskin 

www.Blogger.com/home --> Template --> Find your sidebar code -->  Copy and paste the banner code that I given below in your sidebar section code

The code :

<center>
<img style="width: 200px;" src="YOUR BANNER URL" /><br /><br />
<textarea cols="30" onclick="this.focus();this.select()" readonly="" rows="3" style="border: 1px dotted #555555; color: black; font: 12px candara; padding: 5px; text-align: left;"><a href="YOUR BLOG URL"><img style="width: 200px;" src="YOUR BANNER URL" /></a></textarea>
</center>

The note :

Fuchsia text : Width of banner

Blue text : Your blog URL

Red text : Your banner image URL
Orange text : Text color

...Preview and save...

Make Animated Blog Banner

Assalamualaikum dan hai sekali lagi semua...tadi check cbox ada yang request tutorial cara nak  buat banner blog macam saya...sebenarnya malas nak buat tutor nie sebab susah nak terangkan dan kalian susah nak faham nanti...kalau nak senang faham awak buat satu per satu sambil baca tutorial nie...

I used PHOTOSHOP to make an animated banner...so, you need to download photoshop first...Click here to download photoshop

1. Firstly open your photoshop no matter cs3, cs4 or etc...

2. Choose File ( located at the top left corner ) --> New --> Choose the size that you want...As for me I choose 200px X 200px

3. Draw shape on the canvas by clicking the rectangle tool...

4. Now,we will add an image to the canvas File --> Open --> Choose image that you want to put in the banner --> Copy the image by clicking CTRL + A and CTRL + C

5. Paste the image on the blog banner canvas by pressing CTRL + V

6. Window --> Animated

7. Make a new canvas with the same size using step 1 and 2

8. Copy Blog banner frame by clicking the icon like below --> Choose copy frame

9. Paste the frame on new canvas that you make in step 7 by clicking the icon like above and choose paste frame --> After selection After done pasting, delete the empty frame

10. Add some text to the banner by choosing T like below picture ( Type letter one by one ) copy the frame every time you add letter until the text compete then paste the frame on the new canvas that you make in step 7...

11. Type text on first canvas then, copy the frame and paste it on the second canvas...Add as many frame as you want at the second canvas

12. When you done adding frame you can save it by choosing File --> Save for web & devices...

13. ( A pop-up will appear ) click save

14. After you done, upload your banner here Imgur or photobucket...

Woww...panjanggggnya tutorial nie...nak dekat 5 jam buat tutorial nie akhirnya siap jugak...kalau rasa susah nak buat yang animated buatlah yang biasa-biasa dulu...kalau dah pro nanti buat lah yang animated...Jangan re-post tutorial nie !! susah payah saya buat tutor nie jangan senang-senang jer copy...

Tak faham commentlah...InsyaAllah saya tolong..