Vintage background

Assalamualaikum dan hai semua... Hari nie semangat pulak nak update freebies...

If you want to copy image url...

Firstly click image --> Right click --> Copy image url / Copy image location...

If you want to save the image...

Click image --> Right click --> Save image as...

Tak payah credit... comment jer.. ^^,

Jangan re-freebies...

Zoom in and zoom out image hover

Assalamualaikum...hari nie saya nak buat tutorial tentang zoom in dan jugak zoom out image hover... 2 in 1...

Firstly as usual : Dashboard --> Template --> Edit HTML

For template designer : Denim,simple,watermark...
Search the code    img{   or  img {  or   a img {  then, replace the code with the code I have given below...

For classic template and blogskin...
Search the code   img{  or  img {  then, replace the code with the code I have given below...

If there is no code like above add the code that I have given before  </style>   for blogskin and before
]]></b:skin>   for template designer.

ZOOM IN...

img{

-webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; -o-transition: all 1.5s ease;

}

img:hover{

-moz-transform: scale(1.2);

-o-transform: scale(1.2);

-webkit-transform: scale(1.2);

}

ZOOM OUT...

img{
-webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; -o-transition: all 1.5s ease;
}
img:hover{
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-webkit-transform: scale(0.8); }
}

Jadik tak? mestilah jadik kan? ;D kalaw tak jadi jangan malu untuk bertanya...

Reflection image hover

Assalamualaikum and hello everybody ... today I want to make a tutorial about reflection effect on image...for example  try hovering over the image above...

Firstly as usual : Dashboard --> Template --> Edit HTML

For template designer : Denim,simple,watermark...
Search the code    img{   or  img {  or   a img {  then, replace the code with the code I have given below...

For classic template and blogskin...
Search the code   img{  or  img {  then, replace the code with the code I have given below...

If there is no code like above add the code that I have given before  </style>   for blogskin and before
]]></b:skin>   for template designer.

img{

padding:4px;

-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)))

-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;

}

img:hover{

opacity: 1;-webkit-box-reflect: below 0px

-webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));

}

Done? do comment if you do not understand anything...^^

Blogskin : Nature friend

My blog skin are free to use...You don’t have to pay anything :-)
But because of this, they come with rules.Please follow the rules as I have put in a lot of effort into creating the best blog skin I can for you guys.

What you can do to this skin...

✔ edit the theme as much as you like

✔ move the credits onto another page within the blog ( make it visible)

What you can't do to this skin...

✘  Remove any credit in the skin

✘  Steal or claim my blog skin as your own

✘  Redistribute my blog skin

✘  Use my skin as a base code for your skin

Preview / Code / Download

Features :

✿ Scalloped edged

✿  Comment box

✿  Navigation

✿  Follow/dashboard button

Do comments okay... ^^,

Scrollbar mine version

Assalamualaikum... ok sekarang saya nak buat tutorial tentang scrollbar macam saya memandangkan ada yang tanya...saya rasa scrollbar saya ni biasa jer x chantek mane... ok mula-mula mcm biasa dashboard--> template search   ::-webkit-scrollbar  search guna ctrl+f...

kalau tak ada paste code yang akan saya bagi sebelum  </style> bagi blogskin dan  sebelum  ]]></b:skin>  bagi template designer...
preview here...

::-webkit-scrollbar {

width: 9px;

height: 9px;

}

::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {

height: 9px;

width: 9px;

display: block;

background: #FFC2E0;

border: 1px solid #FFA3D1;

}

::-webkit-scrollbar-track-piece {

background-color: #FFC2E0;

border: 3px solid #FFFFFF;

}

::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {

background:url(URL BACKGROUND);

border: 1px solid #FFC2D6;

}

Merah : code warna disini
Fucshia : url background...

kalau tak faham tanya taw...

Four navigation style

Assalamualikum dan hai semua....setelah bereksperiment dengan kod akhirnya terhasilah empat style navigation ini... (over pulak)

boleh guna code ni tapi credit taw... penat saya ubah suai code...

This is an updated style on 11 October 2013

For blogskin / classic tempate paste the navigation code  anywhere you want it to appear...for template designer Layout --> Add gadget --> HTML/Javascript 

Live preview Here

Style  number one

<style>
.tablo{
font-size:12px;
color:black;
text-transform:uppercase;
background:#FFF9FA;
font-family:century gothic;
text-decoration:none;
padding:3px;
width: 50px;
display:inline-block;
border:1px solid #FFE3E6;
margin-top: 5px;margin-bottom: 5px;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.tablo:hover {
background:#FFC6CF;
color:white;
}
</style>
<center>
<div style="background: #FFEBED;width:260px;border: 2px solid #FFEEEE;margin-bottom:7px; margin-top:7px;box-shadow:0px 2px 2px 2px #ffeeee;border:3px solid #ffffff;">
<a class="tablo" href="http://kawaiilady.blogspot.com/">Home</a>
<a class="tablo" href="http://kawaiilady.blogspot.com/">About</a>
<a class="tablo" href="http://kawaiilady.blogspot.com/">Stuff</a>
<a class="tablo" href="http://kawaiilady.blogspot.com/">Linky</a>
</div>
</center>

Style number two :

<style>

.haha{

width:60px;height:40px;

box-shadow:0px 0px 2px 3px #FFE9C6;

background:#FFF9E1;

font:12px century gothic;

text-align:center;

Text-decoration:none;

color:#888888;

display:inline-block;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

padding-bottom:5px;

padding-top:20px;padding-left:0px;padding-right:0px;

display:inline-block;

border-bottom-left-radius: 35px;

border-bottom-right-radius: 35px;

}

.haha:hover{

background:#FFFFFF;

color:#777;

border-top-right-radius: 35px;

-webkit-transform: rotate(-50deg) ;

-moz-transform: rotate(-50deg) ;

-o-transform: rotate(-50deg) ;

-ms-transform: rotate(-50deg) ;

}

</style>

<center>

<a class="haha" href="http://kawaiilady.blogspot.com/">Home</a>

<a class="haha" href="http://kawaiilady.blogspot.com/">About</a>

<a class="haha" href="http://kawaiilady.blogspot.com/">Stuff</a>

<a class="haha" href="http://kawaiilady.blogspot.com/">Linky</a>

</center>

Style number three :

<style>
.lola{
width:51px;height:35px;
padding-top:17px;
text-transform:uppercase;
border: 1px solid #E7F4FF;
background:#EFF8FF;
font:12px century gothic;
text-align:center;
Text-decoration:none;
color:#333333;
display:inline-block;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
margin:5px;margin-bottom:20px;
display:inline-block;
border-radius: 100%;
}
.lola:hover{
background:#FFFFFF;
color:#FFFFFF;text-shadow:0px 37px 0px #333333;
-webkit-transform: rotate(-360deg) ;
-moz-transform: rotate(-360deg) ;
-o-transform: rotate(-360deg) ;
-ms-transform: rotate(-360deg) ;
}
</style>
<center>
<a class="lola" href="http://kawaiilady.blogspot.com/">Home</a>
<a class="lola" href="http://kawaiilady.blogspot.com/">About</a>
<a class="lola" href="http://kawaiilady.blogspot.com/">Stuff</a>
<a class="lola" href="http://kawaiilady.blogspot.com/">Linky</a>
</center>

Style number 4 :

<style>

.leaf {

width:45px;height:30px;

padding-top:15px;

text-transform:uppercase;

border: 3px solid #E2FFD5;

background:#E8FFE1;

font:11px century gothic;

text-align:center;

Text-decoration:none;

color:#333333;

display:inline-block;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

margin:3px;

display:inline-block;

border-radius: 100%;

border-top-right-radius:0px;

}

.leaf:hover{

background:#FFFFFF;

color:#000000;

border: 3px solid #E8FFE1;

background:#E2FFD5;

border-top-right-radius:100%;

border-bottom-left-radius:0px;

}

</style>

<center>

<div style="width:240px;padding:5px;background:#FFFCF2;box-shadow:0px 0px 2px 3px #FFF9E7;border:2px solid #ffffff;">

<a class="leaf" href="http://kawaiilady.blogspot.com/">Home</a>

<a class="leaf" href="http://kawaiilady.blogspot.com/">About</a>

<a class="leaf" href="http://kawaiilady.blogspot.com/">Stuff</a>

<a class="leaf" href="http://kawaiilady.blogspot.com/">Linky</a>

</div>

</center>

Kalau dah jadi comment taw... kalau tak jadik pon comment jugak...

Letak widget twitter like me

Assalamualaikum...hai hari ni nak buat tutorial lagi...tuto kali nie ialah cara letak widget twitter macam saya ...tutorial ne direquest oleh Meura..

Ini contoh widget twitternya...

Blogskin

Mula-mula pegi home --> template --> edit html  (macam biasa)

Copy paste code yang saya akan bagi pada tempat yang dikehendaki...

Template designer

Home-> layout -> add gadget -> HTML/javascript

Untuk template designer copy paste code yang saya akan bagi ke dalam HTML/Javascript

<center><script src="http://widgets.twimg.com/j/2/widget.js"></script>

<script>

new TWTR.Widget({

  version: 2,

  type: 'profile',

  rpp: 6,

  interval: 6000,

  width: 220,

  height: 220,

  theme: {

    shell: {

      background: '#D6EBFF',

      color: '#4D4D4D'

    },

    tweets: {

      background: '#EBF5FF',

      color: '#4D4D4D',

      links: '#70B8FF'

    }

  },

  features: {

    scrollbar: true,

    loop: false,

    live: false,

    hashtags: true,

    timestamp: true,

    avatars: true,

    behavior: 'all'

  }

}).render().setUser('USENAME ANDA').start();

</script></center>

Perlu diubah :

Ungu : Lebar dan tinggi widget anda
Biru : warna background
Fuchsia : Warna tulisan
Oren : Warna link
Merah : username anda

Kalau tak tahu apa usename bukak twitter kalian  copy linknye yang saya hijaukan ialah username...

https://twitter.com/nurfaezah_97

Preview dan save...kalau tak jadi jangan ubah kod yang saya bagi kecuali username...

Put follower gadget or follow button

Assalamualaikum dan selamat tengah malam...malam ni saya nak buat tutorial sikit sebab ada orang tanya macam mana nak letak follower gadget...

For Template Designer ( Denim, Watermark, Simple etc...)

1. Log in to your blogger account.
2. Go to Dashboard > Layout > Add a Gadget
3. Click on more gadget > Scroll down

4. Choose Followers > Click on (+)

5. Click Save.. Done !

For classic template

You cannot add the follower gadget like above ( maybe you can but it would be difficult to do )

So, let's add the follower button instead.. ( Click on a button to follow )

1. Log in to your blogger account.

2. Go to Dashboard > Template > Click ctrl + C and search for <head>

3. Copy below code and paste it after <head>

4. Preview and save

<center><div style="display:fixed;position:fixed; top:10px; right: 10px; width:150px;padding:5px; font-family: Century Gothic; letter-spacing: 2px; background:url(https://i.imgur.com/tDtge.png); font-size:13px;"><center><a href="http://www.blogger.com/follow-blog.g?blogID=<$BlogID$>">Follow</a>|<a href="http://blogger.com/">Home</a></center></div>

The Noted :
Red text : Background image URL
Blue text : Text to display

For Template designer user, U can also add the follower button just by :
1. Log in to your blogger account.
2. Go to Dashboard > Layout > Add a Gadget
3. HTML/Javascript > Add the code on the content section

..........PREVIEW AND SAVE..........

Tutorial buat & letak written by...

Assalamualaikum...tadi ada orang tanya macam mana saya buat written by:ezah pada setiap post saya...
ini contohnya:

sebenarnya written by nie saya buat sendiri guna photoshop...kalau tak ada photoshop pakai photoscape pun boleh sebelum saya ajar cara letak lbih baik saya ajar cara nak buat guna photoscape...kalau tak ada photoscape download disini

dah download? ok mula2 bukak photoscape lepastu tekan editor

Menu -> New photo

Ubah width & height ikut kesesuaian

Tekan T untuk text , icon hati untuk msukan icon , icon gunung untuk msukkan gambar anda

Adjust warna dan saiz...lpastu tekan OK

Kalau dah siap save as PNG...

Hasilnya :

Kalau dah siap upload ke sini dan copy image url gambar tu...

Cara untuk masukkan dalam blog...

Classic template:

Paste code nie selepas   <$BlogItemBody$>  (kalau ada dua paste lepas kedua-dua code...

<center><img style="border:0px;"src="Image URL"/></center>

Image url tukar sendiri guna gambar yang awak dah buat...

Template designer:
Paste code nie selepas:

<div class='post-footer-line post-footer-line-3'/> ataupun
<div class='post-footer-line post-footer-line-1'>

<center><img style="border:0px;"src="Image URL"/></center>

Preview dan save... kalau tak jadi cakap...

contest header/blog comel

klik banner untuk join

Assalamualaikum... hari ni saya nak join satu contest iaitu contest header/blog comel... saya memang jarang join contest...hanya contest tertentu je saya join...saya dah follow blog mereka berdua dan like fanpage...

ok sekarang saya nak bagi sebab kenapa saya suka blog creamlovebunny...
saya memang susah nak puji orang lain..kalau puji diri sendiri tuw selalu lah...XD

Ok sebab-sebab saya suka blog creamlovebunny ialah kerana blognya kemas , tak semak , menarik ,comel , cepat loading + mesra pembaca...susunan blognya pown kemas,teratur dan mempunyai tema warna yang sesuai...header blognya pown simple but nice...^^, lastly, saya suka kalendar kat sidebarnya...

Ok mangsa tag saya ialah :

http://princessloveglamorous.blogspot.com/

http://anisfarhanalife.blogspot.com/

http://natasya-pink.blogspot.com/

Border on image

Assalamualaikum and hello everyone... : ) It been a long time since I post my last tutorial...
This tutorial is about the grey border like above...

Firstly as usual : Dashboard --> Template --> Edit HTML

For template designer : Denim,simple,watermark...
Search the code    img{   or  img {  or   a img {  then, replace the code with the code I have given below...

For classic template and blogskin...
Search the code   img{  or  img {  then, replace the code with the code I have given below...

If there is no code like above add the code that I have given before  </style>   for blogskin and before
]]></b:skin>   for template designer.

Code for all image :

Img{

 border:5px solid #EEEEEE;margin-top:5px;

-webkit-box-shadow: 3px 3px 8px #b2b2b2;

-moz-box-shadow:    3px 3px 8px #b2b2b2;

box-shadow:         3px 3px 8px #b2b2b2;

}

If you want to add the border only for one image just add the code below...

Code for only one image :

<center><img src="URL IMAGE"style="border:5px solid #EEEEEE;margin-top:5px;width:500px;

-webkit-box-shadow: 3px 3px 8px #b2b2b2;

-moz-box-shadow:    3px 3px 8px #b2b2b2;

box-shadow:         3px 3px 8px #b2b2b2;" ><br>

The note:

Blue text : Change with your own image url...

Orange : The size of boorder...

Green : color code change it if you want find it HERE
Purple : Width of image

...Preview and save...

Blogskin : Meaningless

My blog skin are free to use...You don’t have to pay anything :-)

But because of this, they come with rules.Please follow the rules as I have put in a lot of effort into creating the best blog skin I can for you guys.

What you can do to this skin...

✔ edit the theme as much as you like
✔ move the credits onto another page within the blog ( make it visible)

What you can't do to this skin...

✘  Remove any credit in the skin
✘  Steal or claim my blog skin as your own
✘  Redistribute my blog skin
✘  Use my skin as a base code for your skin

Preview / Code / Download

Features :
✿  Music player
✿  Comment box
✿  Navigation
✿  Header

Do comments okay... ^^,

Background line

Hye and assalamualaikum...yeah... my blog change it appearance again.... hehex...cantik tak?
Memandangkan mood saya tengah rajin sekarang... jadi,saya nak bagi free stuff background line ala2 buku tulis nie... background nie memang sesuai sangatlah untuk dijadikan background untuk blockquote...
background ni saya buat sendiri...jadi, jangan  re-freebies yer...kalau amik silalah komen...

If you want to copy image url...
Firstly click image --> Right click --> Copy image url / Copy image location...

If you want to save the image...
Click image --> Right click --> Save image as...

 

Ok itu sahaja assalamualaikum...