Saturday, 29 December 2012

Vintage background

5 Comments so far

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

Thursday, 27 December 2012

Zoom in and zoom out image hover

1 Comment so far


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

Monday, 24 December 2012

Reflection image hover

Be the first to comment!


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

13 Comments so far

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




Features :
✿ Scalloped edged
✿  Comment box
✿  Navigation
✿  Follow/dashboard button

Do comments okay... ^^,

Wednesday, 19 December 2012

Scrollbar mine version

8 Comments so far

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

Keputusan PMR yang KO

1 Comment so far

Assalamualaikum...seperti yang semua sedia maklum hari ini 19.12.2012 keputusan PMR telah dikeluarkan...saya merupakan salah seorang calon PMR tahun ini... saya rasa bangga kerana sekolah saya telah mencapai seramai 84 orang dapat semua A...walaupun saya tak mencapai keputusan semua A saya tetap bangga dengan keputusan saya kerana keputusan PMR ini merupakan keputusan terbaik sepanjang saya bersekolah dari ting 1 hingga tingkatan 3... Saya berjaya mendapat semua A masa UPSR dahulu...Tetapi,tidak bagi PMR. PMR ni saya jawab macam main-main, rasa macam PMR tak penting. Tak ada semangat nak skor straight A. Mungkin sebab saya anggap miracle yg berlaku masa UPSR tu akan berulang.Lagipun, target saya memang hanya nak lepas 6A agar boleh kekal di sekolah saya yg merupakan sekolah kawalan.
So, konklusinya jangan target rendah. Biar impian setinggi gunung.Setidaknya, kita akan berusaha dengan lebih gigih untuk mencapainya. Bak kata pepatah omputeh “Shoot for the moon. Even if you miss, you'll land among the stars.”

Semua mesti tertanya-tanya kan saya dapat berapa A? ;P *perasan...
biarlah saya merepek dulu... bagi suspens... ^^,


Ok saya telah mencapai keputusan  4A+7A+6A-5A-7A+1A + 2B=Result saya... ;)

Monday, 17 December 2012

Four navigation style

21 Comments so far
Yummm&#8230;.

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

Saturday, 15 December 2012

Letak widget twitter like me

Be the first to comment!

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

2 Comments so far
Tumblr_lypatzruah1qiwduxo1_1280_large

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

Friday, 14 December 2012

Tutorial buat & letak written by...

1 Comment so far


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

Thursday, 13 December 2012

Doodles berbaju kurung

1 Comment so far

Assalamualaikum...dan selamat sejahtera... ^^, Akhirnya dapat jugak saya bagi freestuff doodles yang telah saya buat menggunakan paint tool sai...saya tak pandai sangat lukis doodles nie...so, tak sempurnalaa...

Kalau nak amiklah...dialu-alukan...tapi jangan re-freebies taw! haram!

click image--> right click--> copy image url / copy image location untuk ambil...Do comment first... ^^,








Yang pink nie Limited edition... welk ;P 


Tuesday, 11 December 2012

contest header/blog comel

2 Comments so far

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/