WANASEOBY: September 2012

9/30/2012

Add cute bias list on your blog - Style 1

9/30/2012

Name	Name	Name	Name
Name	Name	Name	Name

Assalamualaikum and hi! Currently, placing your bias list in you About Me page is a trend among bloggers. So, I made this cute bias list with icons for all of you to use! Tehee. Both Classic Template and Blogger Template Designer can use this codes.

1. You will need to edit the codes first. For time saving and less effort, copy and paste the codes below to this website http://htmledit.squarefree.com/ and edit the codes there. You may edit the colors, and size. Don't forget to change YOURIMAGEURL to your own square images and change "name" to your idol name.

<style>
.iconborder{background:#EEE2DC;width:80px;height:80px;padding:5px;border-radius:333px;box-shadow:0 0 6px #ddd;}
.icon{background:#EEE2DC;width:80px;height:80px;border-radius:333px;box-shadow:0 0 6px #ddd;padding:0;border:none;}
.name{background:#FBEBED;width:84px;padding:2px; text-align:center;color:#aaa; text-transform:uppercase;box-shadow:0 0 6px #ddd; margin-top:-5px; }
</style>
<center>
<table border="0" bordercolor="0" style="font-size:11px;" width="500px" cellpadding="3" cellspacing="10">
<tr>
  <td><div class="iconborder" style="margin-left:20px;">
<img class="icon" style="padding:0;border:none;" src="YOURICONURL"></div>
<div class="name"style="margin-left:20px;">
Name</div>
</td>

  <td><div class="iconborder" style="margin-left:20px;">
<img class="icon" style="padding:0;border:none;" src="YOURICONURL"></div>
<div class="name"style="margin-left:20px;">
Name</div>
</td>

  <td><div class="iconborder" style="margin-left:20px;">
<img class="icon" style="padding:0;border:none;" src="YOURICONURL"></div>
<div class="name"style="margin-left:20px;">
Name</div>
</td>

  <td><div class="iconborder" style="margin-left:20px;">
<img class="icon" style="padding:0;border:none;" src="YOURICONURL"></div>
<div class="name"style="margin-left:20px;">
Name</div>
</td>

 </tr>
<tr>

  <td><div class="iconborder" style="margin-left:20px;">
<img class="icon" style="padding:0;border:none;" src="YOURICONURL"></div>
<div class="name"style="margin-left:20px;">
Name</div>
</td>

  <td><div class="iconborder" style="margin-left:20px;">
<img class="icon" style="padding:0;border:none;" src="YOURICONURL"></div>
<div class="name"style="margin-left:20px;">
Name</div>
</td>

  <td><div class="iconborder" style="margin-left:20px;">
<img class="icon" style="padding:0;border:none;" src="YOURICONURL"></div>
<div class="name"style="margin-left:20px;">
Name</div>
</td>

  <td><div class="iconborder" style="margin-left:20px;">
<img class="icon" style="padding:0;border:none;" src="YOURICONURL"></div>
<div class="name"style="margin-left:20px;">
Name</div>
</td>

 </tr>
</table>
</center>

2. Once you have done editing, copy the whole edited code. 3. For classic template, you may paste the codes anywhere in your blogskin codes. Specifically anywhere you wanted the bias list to appear. 4. For Template designer, go to Home > Pages > New Pages > click HTML > and paste the codes > Save the page immediately, don't click Compose as it will corrupt your bias list.

9/29/2012

How to add Quick Edit button to your Classic Template

9/29/2012

Assalamualaikum and hi!

Yang berbentuk pensil tulah Quick edit, kalau template designer benda tu memang dah ada dekat option Blog Post. Fungsi Quick edit ni memang sangat berguna untuk saya, sebab memang banyak benda nak kena edit lepas post terutamanya bila perasan ada typo, ataupun kesalahan code. Nama pun Quick - so tak payahlah saya pergi dekat post balik then edit blahblahblah. Btw, pensil tu boleh dilihat oleh blog owner sahaja

1. Paste codes bawah ni dekat atas <style type="text/css">

1. Paste these codes before/on the top of <style type="text/css">

<$BlogMetaData$>

2. Letak code ni, dekat atas/sebelum </Blogger>
2. Copy the codes below and paste it before </Blogger>

<$BlogItemControl$>

If you need help or want to ask me anything just leave your comment in this entry or send a message through cbox.

Dari mana aku belajar coding \extra : merepek story of past/

Assalamualaikum,
Aku post ni sebab terasa nak post. Ada orang tanya dari mana aku belajar coding semua ni, actually ramai yang tanya hohok k .Nak kata aku terror memang langsung tak lah kan -_- al maklumlah aku ni mentah lagi. Buat blogskins pun biasa-biasa je takde unik mana pun. Sama je macam blogger yang lain, okay itu membuatkan aku segan untuk post entry sebegini. lol aku try untuk elak dari pada kepoyoan yang melampau lulz.

Minat aku dalam coding tu dari dulu lagi, zaman Myspace. Hahaha. Otak aku dulu creative sikit kot. Habis web web layout myspace aku selongkar. Code pertama yang aku belajar code <br/> dari satu laman web kecik yang aku jumpa. Sebab time tu aku envy tengok kawan aku buat profile myspace ayat dia selang-selang, so aku pun usaha jugak cari code dia. Hahaha. GOOGLE tu ada, tinggal cari je.

Aku jenis yang takkan bertanya, akan try dapatkan jugak sendiri. Melainkan dah desperate sangat.

Lepas tu sambung lagi saluran otak-otak aku ni dengan remove link dekat music player, basic coding untuk letak gambar, tukar font semua. Myspace je kot, apalah sangat yang boleh edit. Kalau old version tu takpe jugak boleh buat macam blogskins.

Eh dah melambung jauh -_- soalan dia "Dari mana awak belajar coding?" First, dari zaman myspace aku dah tau basic so bila dah masuk blogger, aku guna jugak lah basic yang sama. Masa awal-awal buat blog, aku terjumpa kakak ni punya blog. Dia guna blogskins dari dulu lagi, http://ommo-ommona.blogspot.com/ {kebetulan pulak, dia ada kena mengena dengan pelajar sekolah Smkkk, hehe} ~~Forever Inspiration, kakak tu comel sangat-sangat ;_;~~ eh lari tajuk. Dari dia lah aku discover blogskins tapi putus asa sebab tak reti guna HUAHAHAAHAHAH -_- so berakhirlah dengan menggunakan simple template. What a nasib.

Aku tak sanggup nak tunjuk sebab memalukan, tapi demi menceritakan semuanya, aku pun terpaksa tunjukkan. Hahahaha. Jangan gelak aku simbah air campur tepung nanti kang,

Comel kan =_= simple je xd =_= lol rugi aku tak screencapture satu blog dulu. Confirm korang tahan gelak pfft haha

Ni lagi creative . . . . . . . . . tak sangka kau comel ye wana.

Nilah header dulu-dulu wa pakai. Simple and penuh dengan senyum yoseob, hohoho k -_- sebelum wanaseoby, ada wanaliopink ;p Simple gila kan . . . . lol

Ni pulak zaman kegemilangan ze:a dihatiku, err. Masa tu Dongjun telah merampas hati nak buat acano, still guna GIMP dengan photoscape tu, siang malam duk buek nye. Isk isk //ketuk kepala sendiri//

Zaman kegemilangan Ukiss pun datang, itu 100% pakai tangan sendiri tuh.

Okay, nampak header ni terus rindu kevin muahahaha. Masa ni pakai simple template , lamanya tak tengok header ni ;_; hampir lupa dah.

Lepas tu masa zaman Nothing's Over, manusia ni terlampau comel =_= =_= dan buatkan aku tak fangirl ukiss, jadikan ukiss kebawah sikit dalam carta bias list ._. Masa ni aku janji kalau Ukiss buat comeback, aku nak tukar header kevin balik. tapi .. . . .

Terus membuat header woohyun . . .

Dan masih woohyun . . .

Header ni paling aku suka omg omeinyew ;_; Masa ni, ukiss dah comeback hahahah tapi aku tak tukar header kevin, still guna Woohyun. Ingat lagi tau xd

Aku suka woohyun, tapi aku suka sangat sandeul masa ni ;_; demam sekejap susah jadi k-poppers ni hahah. Url header ni , https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI5e595bsuAF9lWNarwMyNFuHyR3T5QjJ71-mmjM6TOgbRYwCaeL3712Fan_kURMQ6xCzB3YQQj0p4ev4fCOyJ9SDOHk0X87cMZYZHktHsrl4I9pr6_2yR2pZOMbEbCDRbYO-_h3HpWJo/s1600/woohyunnnnnnnnnnnnnnn.png see aku sayang woohyun. lol

Bila aku guna simple template, minat aku makin mendalam mendalam dan mendalam. Asyik tukar rupa blog jeh. Setiap kali aku try tukar rupa blog, mesti aku akan belajar something yang baru. Dari situ dah dapat banyak ilmu dah. Basic macam border, underline blahblah aku dah tau. Dok kaji code blog tu, try sana try sini sampailah dapat.
Lepas tu masuk Denim Template pulak, sama jugak. Sikit-sikit aku dapat fahami basic coding. Macam tu jelah masa berlalu fiuhhhh . . . .

Sehinggalah suatu hari, Kak Nazihah guna blogskins, aku pun terpengaruh dan tergoda juga lah dengan kelebihan blogskins. Al maklumlah itew memang minat try benda baru. Baru faham konsep blogskin ni.

Banyak kali aku search "How to make Blogskins" and everything. Tapi takde jawapan yang sebenarnya jawab soalan aku tu. Tanya orang pun, tak mungkin dia boleh jawab sebab aku takkan faham -_- so aku guna blogskin orang lain, dan guna blogskins untuk blog sendiri.

Yes. Selagi awak tak code skin tu sendiri, JANGAN BUAT FREEBIES. Guna untuk diri sendiri,cukuplah - pendapat saya.

So masa cuti tu, aku ada idea baru. Iaitu dengan mengedit classic template. Aku edit menggunakan cara dan coding yang lebih kurang macam denim/simple template dulu. Memang seronok sebab apa yang kita letak semuanya jadi dekat tempat yang kita nak. Jadi, kalau edit template designer pun tak reti, rasanya lupakan je lah niat nak buat bs ^^V

Ini skin pertama dan kedua yang aku edit hahah;
-http://beautifultarget-preview.blogspot.com/
-http://flyhighpreview.blogspot.com/

[rancang nak remake balik sebab messy gilaa -.-]

Bila dah edit dua skin, aku try edit edit edit dan aku try remove semua feature classic template ni sehinggalah aku betul-betul faham macam mana coding ni berfungsi. See, kita belajar dari pengalaman edit blog dari awal. Bukannya senang macam tu je , not to brag but its a reality.

Ni website favourite aku - http://css-tricks.com/ , selalu belajar tricks dari website ni. Kadang-kadang bila tengah browse website ni, mesti terjumpa benda penting yang aku tak tau lagi .

Dulu masa start belajar blogskins aku memerlukan pertolongan dari google, alhamdulillah sekarang aku hafal code ni semua so aku boleh type sendiri semuanya ^^ Thanks jugak dekat tumblr theme maker sebab coding diorang dah ajar aku banyak gilaaaa ilmu special effect dalam css3.

Takde idea nak sambung .Bai \o/ sorry kalau korang tak faham XD haha

9/26/2012

How to add Navigate-able box to your blog - Style 2

9/26/2012

Assalamualaikum,coding ini khasnya dibuat untuk Simple Template, denim dan lain-lain template Designer. Navigate dia macam classic template/blogskins tapi untuk diletakkan di sidebar template designer ^^

Click here to see live preview.

<style type="text/css">
a.navigateable-box-menu{
-webkit-transition: all 0.5s ease-in-out;
-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;
cursor:pointer;
background:#FFDDDD;
width:50px;
font:8px tt;
padding:3px;
text-decoration:none;
color:#555; 
display:inline-block;
text-align:center;
}
a.navigateable-box-menu:hover{background:#FF7171;color:#fff;}

</style>
<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglTQ8lzt8qrXLyrSBtPtGcTYW6oqVE2LgzTkEg5zNGHwJ8MoN6cfzT1v6UaNiiGuzsLAXZ4jPmqP4pcUNiY-YKzZpO2BEiGcu1oKM56SWRuwxFP1lB3nTbHB0pBTY1KA7AhD2Pkw6V0rgp/s1600/stripe_62c6ac6939f9a44527fb43f6f1c8ce64.png);width:100%;padding:2px;  ">
</div>
<center>
<a class="navigateable-box-menu" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >Tab 1</a> 
<a class="navigateable-box-menu" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >Tab 2</a> 
<a class="navigateable-box-menu" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML" >Tab 3</a> 
<a class="navigateable-box-menu" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('4').innerHTML" >Tab 4</a>
</center>
<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglTQ8lzt8qrXLyrSBtPtGcTYW6oqVE2LgzTkEg5zNGHwJ8MoN6cfzT1v6UaNiiGuzsLAXZ4jPmqP4pcUNiY-YKzZpO2BEiGcu1oKM56SWRuwxFP1lB3nTbHB0pBTY1KA7AhD2Pkw6V0rgp/s1600/stripe_62c6ac6939f9a44527fb43f6f1c8ce64.png);width:100%;padding:2px;margin-top:5px; ">
</div>
<div id="wnsb" style="margin-top:5px;padding:10px;text-align:justify">

Navigate around. Replace this with anything/your own words.

</div>
<div id="1" style="display: none;">
This navigation no.1 , remove this and replace with anything you want to be here.
</div>
<div id="2" style="display: none;">
You can also put cbox codes here. Just anything without messing the codes.
</div>
<div id="3" style="display: none;">
This navigation no.3 
</div>
<div id="4" style="display: none;">
This navigation no.4 
</div>
</div>

To have this kind of tab simply follow instructions below.
1. Copy and paste these codes to http://htmledit.squarefree.com/. In this website you may edit this tab the way you want, you may change the colors, the style, and the content of this tab box.
2. Once done, go to Home > Layout > Add a gadget > Pick HTML/Javascript 3. Paste the codes you have edited and save immediately. Do not click 'Rich Text' or else the codes will automatically corrupted.
Goodluck! Any questions and problem you may comment down below or ask me on my Ask.fm.

9/15/2012

How to add Image Hover to your blog - Style 9

9/15/2012

1. Blogskins/ Classic template : Paste the codes giver before/above </style>

2. Template designer : Paste codes given before/above ]]></b:skin>

img{
border:2px solid #FFDDDD;
background:url(http://i.imgur.com/ozpcL.png);
padding:10px;
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
}

img:hover{
box-shadow:0 0 6px #ddd;}

9/14/2012

How to add image hover to your blog - Style 8

9/14/2012

1. Blogskins/ Classic template : Paste the codes giver before/above </style>

2. Template designer : Paste codes given before/above ]]></b:skin>

img{
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}

img:hover{
-webkit-filter: hue-rotate(90deg)}

How to add image hover to your blog - Style 7

1. Blogskins/ Classic template : Paste the codes giver before/above </style>

2. Template designer : Paste codes given before/above ]]></b:skin>

img{
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}

img:hover{
-webkit-filter: grayscale(0.8);}

How to add Image Hover to your blog - Style 6

1. Blogskins/ Classic template : Paste the codes giver before/above </style>

2. Template designer : Paste codes given before/above ]]></b:skin>

img{
-webkit-transform: perspective(400px) ;
-moz-transform:perspective(400px) ;
-o-transform:perspective(400px) ;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}

img:hover{
-webkit-transform:perspective(400px) translateZ(150px) ;
-moz-transform:perspective(400px) translateZ(150px) ;
-o-transform:perspective(400px) translateZ(150px) }

How to add image hover to your blog - style 5

1. Blogskins/ Classic template : Paste the codes giver before/above </style>
2. Template designer : Paste codes given before/above ]]></b:skin>

How to add image hover to your blog - Style 4

1. Blogskins/ Classic template : Paste the codes giver before/above </style>

2. Template designer : Paste codes given before/above ]]></b:skin>

How to style your post blockquote - Style 6

This is the live preview of blockquote style 2. Please hover this blockquote to see the hover effect. To use blockquote, highlight the text and click

. To have this kind of blockquote in your blog, simply follow the instruction below.

1. Blogskins/ Classic template : Paste the codes giver before/above </style>

2. Template designer : Paste codes given before/above ]]></b:skin>

blockquote{
background:#fff;
padding:20px;
color:#808080;
border-top:5px groove #FFD7D7;
border-bottom:5px groove #FFD7D7;
-webkit-transition: all 0.5s ease-in-out;
-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;
}

blockquote:hover{
border-top:5px groove #FF9999;
border-bottom:5px groove #FF9999;
}

How to style your blockquote - Style 5

Demo:

This is the live preview of blockquote style 2. Please hover this blockquote to see the hover effect. To use blockquote, highlight the text and click

. To have this kind of blockquote in your blog, simply follow the instruction below.

1. Blogskins/ Classic template : Paste the codes giver before/above </style>

2. Template designer : Paste codes given before/above ]]></b:skin>

How to style your blockquote - Style 4

Demo:

This is the live preview of blockquote style 2. Please hover this blockquote to see the hover effect. To use blockquote, highlight the text and click

. To have this kind of blockquote in your blog, simply follow the instruction below.

1. Blogskins/ Classic template : Paste the codes giver before/above </style>

2. Template designer : Paste codes given before/above ]]></b:skin>

blockquote{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih9Xsi1O8L0f5tZixKHYkBLMPH335hsy8uF7xorhIvBdRMesRfb-zcZ7XI4eGPgOuKzhCpYGDxPgo7ky1PqN_acIzQp0cg7qn0lN3CQzWHtKXiNk-ylhLWAeU8HycdWRyh56d-AYtD62Ey/s1600/grey.png);
padding:20px;
border:3px solid #ffd5d5;
color:#808080;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}

blockquote:hover{
border-radius:20px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
-webkit-box-shadow: 0px 0px 8px #ffd5d5;
-moz-box-shadow:    0px 0px 8px #ffd5d5;
box-shadow:         0px 0px 8px #ffd5d5;
}