Friday, 29 November 2013

Circle hover effect

2 Comments so far

Assalamualaikum and heyyo eberybuddy... ^^,
Harinie saya nak buat tutorial pasal circle hover macam tempat saya letak 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

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

For template designer : --> Layout --> add gadget --> HTML/Javascript

For blogskin : --> Template --> Paste it anywhere you want it to appear

The Code

<style type="text/css">
.navs {
 -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);
 -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 {
.outside:hover .navs {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
.outside {
  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(;
background-position:50% 50%;
#outside1:hover {
  inset 0 0 0 0px rgba(255,255,255,0.6),
  0 1px 2px rgba(0,0,0,0.1);
<center><div class="outside" id="outside1"><div class="navs">

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

Wednesday, 27 November 2013

Basic thing in editing blog

Be the first to comment!

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...

Monday, 25 November 2013

Affiliates page

32 Comments so far

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...

Sunday, 24 November 2013

Customize comment box ( Designer )

9 Comments so far

Assalamualaikum dan hai semua...^^ semalam kat Tiqa ada request kat cbox dia tanya macam mana nak buat comment box macam, 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
  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 {
  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;
font-size: 14px;border-radius:50%;
color: #333333;
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;
border:3px solid #FFF0F2;
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{

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

font: 13px candara;

.avatar-image-container img{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;

.avatar-image-container img:hover{
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
Orange text : Border color
Blue text : Text color
Red text : Background color
Fuchsia text : Width and height
Next,you can save it...preview on single post page with comments...
Example : instead of

kalau tak faham tanyalah
...sekian terima kasih...

Friday, 22 November 2013

Banner for them...

35 Comments so far

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

For : Amirah

For : Asilah

For : Nasharina

For : Dhyani

For : Alan

For : Amirah

For : Alya Tory

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

For : Aulia

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

For : Aulia

For : Maya

For : Syazwani

For : Azkiya

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="">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

7 Comments so far

Assalamualaikum dan hai semua...semalam ada yang tanya kat macam mana nak buat profile 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 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 :
a {
text-decoration: none;
color: #666666;

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.

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

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

#user_profile_info a{color:#595b3e;text-decoration:none;}
#profile_skins a{color:#ffffff;}
#profile_skins td{padding:1px;}
#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 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;}

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

Hopefully this entry will help 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="">Kawaii Lady</a>
If you don't want to add the credit it's up to you...I don't mind..

Thursday, 21 November 2013

Put banner in blog

Be the first to comment!

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

For template designer --> Layout --> Add gadget --> HTML/Javascript --> Copy and paste the banner code that I given below in your HTML/Javascript gadget

For bogskin --> Template --> Find your sidebar code -->  Copy and paste the banner code that I given below in your sidebar section code

The code :

<img style="width: 200px;" src="YOUR BANNER URL" /><br /><br />
<textarea cols="30" onclick="this.focus();" 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>

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...

Tuesday, 19 November 2013

Make Animated Blog Banner

14 Comments so far

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, 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..