TUTORIAL: Letak Semut dalam Blog.

Yeayyy saya kuat!

Hahaha ini paling kelakar. Kalau anda tengok di blog saya bahagian kiri atas sekali ada semut hitam kan? Hahhh... ramai kawan Ain kena tipu ohhh. Mereka ingat ada semut betul. Siap ketuk ketuk lagi laptop diorang. Haha ada yang tenyeh tenyeh la. Adoyyy~ So anda pon nak buat jugak? Mari ikut tuto ini.

First pergi ke Dashboard >> Layout / Design >> Add a Gadjet >> HTML/JavaScript.

Copy kod di bawah ini dan paste.

<div id="img" style="position: fixed; left: 5px; top: 20px;">
<img src="http://i228.photobucket.com/albums/ee122/najjah94/ant.gif" />
</div>

HIJAU: Left atau Right

Then save! Amacam? Jadi tak? Kalau jadi sila komen dan credit kepada saya. Thanks!

Nak lagi??? Tekan TUTORIAL ok!

TUTORIAL: Letak Cursor dalam Blog.


Ok kali ni Ain nak ajar anda macam mana nak letak cursor dalam blog. Apa itu cursor? Cursor adalah pointer. Tak tahu buka kamus dewan muka surat 345 bab 7.

Mula mula pergi Dashborad >> Layout / Design >> Add a Gadjet >> HTML/JavaScript.

Then copy kod di bawah ini dan paste:
<style type="text/css">body, a, a:hover {cursor: url(URL CURSOR), progress;}</style>

BIRU: Masukkan URL CURSOR yang anda nak.

So Ain nak bagi freebies cursor untuk anda. Nahhh.


http://ani.cursors-4u.net/nature/nat-11/nat1034.gif


http://ani.cursors-4u.net/nature/nat-11/nat1029.gif


http://ani.cursors-4u.net/nature/nat-11/nat1028.gif


http://ani.cursors-4u.net/nature/nat-11/nat1031.gif


http://ani.cursors-4u.net/nature/nat-11/nat1030.gif

Kalau dah jadi, sila komen ok. And kalau dah ambil juga, sila komen. Wajib! Thanks! 

Nak lagi??? Tekan TUTORIAL ok!

TUTORIAL: Buat New Pages.


Anda tak tahu apa itu new pages? Ok baca requets di atas. Hmmm pon tak faham jugak? Ok new pages macam ni, kalau anda nak buat kotak macam INI dan INI, kan dia minta link kan? So anda nak cipta satu page untuk "about me" "tutorial" "home" dan sebagainya. So inilah gunanya new pages.

Ada dua pilihan. Pilihan pertama adalah anda tekan new post macam biasa dan tulis la apa yang anda nak. Then after publish, copy link di atas dan masukkan ke dalam code INI dan INI yang anda pilih.

Pilihan kedua adalah anda pergi ke New Post >> Edit Pages >> New Page dan anda tulis la apa yang anda nak. Bila dah habis, anda Publish Page. Lepas itu, rujuk di bawah ini.


Lepas dah publish, copy link tu dan masukkan ke dalam code INI dan INI yang anda pilih itu. Faham? Tak faham tanya saya ok di SINI. Dah menjadi, sila komen ok. Sekian~

Nak lagi??? Tekan TUTORIAL ok!

TUTORIAL: Icon for older, newer and home.


So Ain nak ajar macam mana nak buat seperti gambar di atas itu. Mari... Mula mula pergi ke Dashboard >> Template / Design >> Edit html *tick expand widget templates

Untuk NEWER post, search:

expr:title='data:newerPageTitle'><data:newerPageTitle/>


Untuk OLDER post, search:

expr:title='data:olderPageTitle'><data:olderPageTitle/>


Untuk HOME, search:

expr:href='data:blog.homepageUrl'&gt;<data:homeMsg/>

Yang warna merah tu, gantikan dengan code ini:

<img src='URL IMAGE'/>

BIRU: Masukkan url image anda.

Ulang benda sama ok. Nak icon free? Nahhh.

http://2.bp.blogspot.com/-3hQqvHWj4BU/TkxT6LbrfmI/AAAAAAAABG0/Bt4UPOgQK_Q/s1600/greynewer2.png

http://3.bp.blogspot.com/-yGMcaPTDczQ/TkxYTLBDq1I/AAAAAAAABHk/FkALZnjGgkU/s1600/greyhome2.png

http://2.bp.blogspot.com/-r45kJCfYQoQ/TkxZDYOLhtI/AAAAAAAABH4/pBvWys36rbE/s1600/greyolder2.png

Nak warna lain and nak lagi? Boleh la ke blog INI ye. Ain credit to you.

Nak lagi??? Tekan TUTORIAL ok!

TUTORIAL: Autoplay Youtube type 2.

Ok kali ni Ain nak tunjuk anda macam mana buat autoplay youtube type 2 di bawah ini. First of all, credit to UNA.

Mula mula cari lagu di youtube. Tak tahu macam mana nak ambil code? Boleh rujuk autoplay youtube type 1. Then copy code di bawah ini ok.

<object width="250" height="25"><param name="movie" value="http://www.youtube.com/v/zTvSIquJ5tE?fs=1&amp;autoplay=1&amp;loop=1&amp;rel=0&amp;color1=0x7E354D&amp;color2=0xFFFFFF;hl=en_US&amp;rel=0" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/zTvSIquJ5tE?fs=1&amp;autoplay=1&amp;loop=1&amp;rel=0&amp;color1=0x7E354D&amp;color2=0xFFFFFF;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="250" height="25" allowscriptaccess="always" allowfullscreen="true"></embed></object>


HIJAU: Link lagu yang anda nak.
UNGU: Code itulah yang menjadikan youtube player anda berwarna. Yang 7E354D code colour untuk border youtube player dan FFFFFF background youtube player anda. Nak code colour, klik SINI.

Ok sudah siap! Dah jadi? Ok bagusss!

Nak lagi??? Tekan TUTORIAL ok!

TUTORIAL: Autoplay Youtube type 1.

Comel kan dia? Haha, ok saya tipu.

Nak buat autoplay youtube? Alaa bila orang masuk dalam blog kita, tiba tiba ada dengar lagu. Lagu tu on sendiri. Nak try buat? Mari...

Mula mula cari la lagu kat youtube dan ikut step di bawah. Kalau tak nampak, sila klik ok.


Dah? Nanti code anda akan jadi macam di bawah ini. Yang Ain merah kan itu, anda kena tambah sendiri.
<object width="236" height="150"><param name="movie" value="http://www.youtube.com/v/8c2ahBlTPz0?fs=1&amp;autoplay=1&amp;version=3&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/8c2ahBlTPz0?fs=1&amp;autoplay=1&amp;version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="236" height="120" allowscriptaccess="always" allowfullscreen="true"></embed></object>
Tambah sendiri tau yang Ain merahkan tu. Cari la lagu apa yang anda nak. Semoga menjadi!

Nak lagi??? Tekan TUTORIAL ok!

TUTORIAL: Navigation Menu type 2.

Tambahan: Navigation Menu type 1.


First step: Dashboard >> Layout / Design >> Page element >> Add gadjet >> Add HTML

Second step: Copy saja code di bawah ini dan paste kan.

<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.sidebarmenu ul{
width:250;
text align:center;
list-style-type: none;
font: normal 13px Century gothic;
}
.sidebarmenu ul li{
position: relative;
}
/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-align:center;
text-decoration: none;
padding: 0px;
}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #F778A1; /*background of tabs (default state)*/}
.sidebarmenu ul li a:visited{
color: white;}
.sidebarmenu ul li a:hover{
background-color: #E6A9EC;}
/* Holly Hack for IE */
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */
</style>
<script type="text/javascript">
//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas
function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
  if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
   ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
  else //else if this is a sub level submenu (ul)
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
  ultags[t].style.visibility="visible"
  ultags[t].style.display="none"
  }
  }
}
if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)
</script>
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="LINK">HOME</a></li>
<li><a href="LINK">ABOUT ME</a></li>
<li><a href="LINK">TUTORIAL</a></li>
<li><a href="LINK">CONTEST</a></li>
</ul>
</div>

MERAH: Panjang kotak yang anda nak.
UNGU: Colour sebelum tab disentuh.
BIRU: Colour selepas tab disentuh.
KUNING: Letakkan link yang anda nak tuju.
HIJAU: Tulis perkataan apa yang anda nak.

Nak cari code color, click SINI.

Last step: Tengok jadi ke tak. Kalau jadi, sila save. Kalau tak jadi, tanya saya ok! Good luck!

Nak lagi??? Tekan TUTORIAL ok!

TUTORIAL: Navigation Menu type 1.


Okey ada orang requets kat Ain macam mana nak buat navigation macam Ain. Macam mana tu? Lihat di bawah ini.
Haahhh... macam tu la kan. So anda nak buat jugak? Jom...

First step: Dashboard >> Layout / Design >> Page element >> Add gadjet >> Add HTML

Second step: Copy saja code di bawah ini dan paste kan.

<center><br />
<center><span class="Apple-style-span"><span id="nav" style="font-size: 11px; font-family: arial; background-color: #ffccff; color: #000000; text-align: center; text-transform: uppercase; padding-top: 4px; padding-bottom: 4px; padding-left: 6px; padding-right: 6px; height: 19px; cursor: pointer; "><a href="URL PAGE" style="text-decoration: none; -webkit-transition-duration: 0.5s; color: #000000; " target="_blank">profile</a></span> <span id="nav" style="font-size: 11px; font-family: Arial; background-color: #ffccff; text-align: center; text-transform: uppercase; padding-top: 4px; padding-bottom: 4px; padding-left: 6px; padding-right: 6px; height: 19px; cursor: pointer; "><a href="URL PAGE" style="text-decoration: none; -webkit-transition-duration: 0.5s; color: #000000; " target="_blank">tutorial</a></span> <span id="nav" style="font-size: 11px; font-family: Arial; background-color: #ffccff; text-align: center; text-transform: uppercase; padding-top: 4px; padding-bottom: 4px; padding-left: 6px; padding-right: 6px; height: 19px; cursor: pointer; "><a href="URL PAGE" style="color: #000000; text-decoration: none; -webkit-transition-duration: 0.5s; " target="_blank">freebies</a></span></span></center><center>

PURPLE: Yang URL PAGE tu anda letak la link yang anda nak tuju.
HIJAU: Tulis la perkataan yang anda suka.
MERAH: Colour untuk kotak anda. Nak colour lain, click SINI.

Last step: Tengok dulu jadi ke tak. Kalau jadi, save. Kalau tak jadi tanya saya di Fan Page. Sekian~

Nak lagi??? Tekan TUTORIAL ok!

FREEBIES: Opening Note.

Nyummm nyummm.

Hye... hehehe. Ok Ain nak bagi opening note free untuk anda? Apa tu? Macam mana nak buat? Klik SINI dulu. Dah tahu, baru ambil ini free punya. Dan jangan lupa credit to me and komen ok! Wajib!

http://2.bp.blogspot.com/-UDDUKcEi1Ls/TxfGooXvQuI/AAAAAAAABFY/tVwHtjjWxic/s1600/open+1.png

http://1.bp.blogspot.com/-vZ7X9UfWqxs/TxfGpO5ZJaI/AAAAAAAABFg/9haJ6CyJqT0/s1600/open+2.png

http://3.bp.blogspot.com/-4inqAxj_lNU/TxfGpiBNisI/AAAAAAAABFo/q70PCsmL8-I/s1600/open+3.png

http://1.bp.blogspot.com/-FpLSZdVzR_k/TxfGp6qwXXI/AAAAAAAABFw/l7JFjJUJHy8/s1600/open+4.png

Width 310 Height 50
Preview then save ok.. K bye~

Nak lagi??? Tekan TUTORIAL ok!

TUTORIAL: Opening Note.


Nampak tak gambar di atas? Kalau tak sila klik. So Ain nak ajar macam mana nak buat opening note.

First korang kena pergi ke Dashboard >> Template / Design >> Edit HTML *tick expand widget then korunk click ctrl + F untuk search code ni :
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

Then copy code yang Ain nak kasi ni kat bawah code yang atas ni.
<center><img src='URL IMAGE'/></center><br/>

Masukkan url anda itu. Preview then baru save ok! Hmmm nak opening note free tak? Nahhh Ain nak kasi dan jangan lupa credit to me ok. Ini hasil tangan saya.

http://i228.photobucket.com/albums/ee122/najjah94/salam.jpg

Nak lagi??? Tekan TUTORIAL ok!

TUTORIAL: Hover Header bergerak ke bawah.

Ok rasa terliur pulok.

Ok kali ni Ain nak ajar hover header bila disentuh ia akan bergerak ke bawah. Nak tahu macam mana? Jom tengok!


First step Go to Dashboard >> Template / Design >> Edit html *tick expand widget then click ctrl + F and search for this code :
#header {
atau

#header h1 {

atau

h1.title {

Second step: Dah jumpa? Then korang nampakkan code dia panjang, sampai kat simbol " { " korang paste kan code yang Ain nak bagi ni kat bawah simbol " { " ok.
#header:hover{
padding-top:40px;
-webkit-transition-duration: 2s;
}

Last step: Sudah? Preview dan save dulu jadi ke tak okey. Selamat mencuba!

Nak lagi??? Tekan TUTORIAL ok!

TUTORIAL: Hover Header bergerak ke tepi.

Comel nyeeeee~

Ok Ain nak kongsi hover header yang bergerak ke kiri. Bila korang sentuh header tu, header tu akan bergerak ke kiri ataupun ke kanan. Jom try!


First step: Go to Dashboard >> Template / Design >> Edit html *tick expand widget then click ctrl + F and search for this code :
#header {
atau

h1.title {

atau

#header h1 {

Second step: Dah jumpa? Then korang nampakkan code dia panjang, sampai kat simbol " { " korang paste kan code yang Ain nak bagi ni kat bawah simbol " { " ok.
#header:hover {
padding-left: 40px;
-webkit-transition-duration: 2s;
}

Last step: Preview then save. Ok sudah siap! Jadi tak? Kalau jadi sila komen and kalau tak jadi pon sila komen. Saya akan bantu awak.


P/S: Yg " left " tu boleh tukar kepada " right " kalau anda nak, ok.

Nak lagi??? Tekan TUTORIAL ok!

FREEBIES: Background Design 3.

Tambahan: Background design 1 dan design 2.

Hello there... Ok Ain nak bagi anda freebies background bunga kecik kecik yang comel comel gituwww. Amboiii~ Banyaknya kata ganda, haha. Sumber daripada Encik Google ok. So Ain dah colorize colour semua jadi pelbagai warna. Eh betul ke ayat? Hahaha so kalau dah ambil tu, sila komen ok. Pentinggg!

http://1.bp.blogspot.com/-4_2i6hvPZcI/TxaqwgwHxdI/AAAAAAAABEY/SwUhUb9jY4E/s320/blue+flower.png

http://3.bp.blogspot.com/-5u46D_EM5dA/TxaqyTIXiaI/AAAAAAAABEg/ExySSUFpr9o/s1600/green+flower.png

http://2.bp.blogspot.com/-ibU2qMWNIt8/TxaqzIhnWkI/AAAAAAAABEk/2g3L4uxvRH0/s1600/grey+flower.png

http://1.bp.blogspot.com/-sPiD-UjM8t8/Txaq0Mpw2GI/AAAAAAAABEw/5fIuxLIiJ7Q/s1600/orange+flower.png

http://1.bp.blogspot.com/-J9RTOOiuhMY/Txaq2h42VrI/AAAAAAAABE4/JcE7O4ZXA1s/s1600/purple+flower.png

http://1.bp.blogspot.com/-P6j6952FV6g/Txaq3HuJqXI/AAAAAAAABE8/-DP8K4v9MAM/s1600/red+flower.png

Preview then save ok!

Nak lagi??? Tekan TUTORIAL ok!

FREEBIES: Background Design 2.

Tambahan: Background design 1.

Ok kali ni Ain nak kasi background gambar kucing comel. Kalau dah ambil, please komen ok! Preview then save!

http://2.bp.blogspot.com/-tcRObhjoLiE/TxQlouOyGhI/AAAAAAAABCw/eG9306wAiO0/s200/kucing+1.jpg

http://1.bp.blogspot.com/-vku7wDDKNSc/T0fMgmSbQfI/AAAAAAAABSw/Ju5Z8sN0roY/s200/kucing+2.jpg

http://3.bp.blogspot.com/-FdRuAsgw3cQ/TxQluXGLstI/AAAAAAAABDA/dvo1S4ZsZjw/s200/kucing+3.jpg

http://3.bp.blogspot.com/-PNNoathCbtw/TxQlxeABF9I/AAAAAAAABDI/1VUGrCHt4B4/s200/kucing+4.jpg

http://2.bp.blogspot.com/-kOIsl7KbVsw/TxQl1EXnz9I/AAAAAAAABDQ/6uCHjuLagd0/s200/kucing+5.jpg

 http://3.bp.blogspot.com/-_TlOlk3CUl0/T0fMx-FZCNI/AAAAAAAABS4/Xrlkd1BdsPs/s320/kucing+6.jpg

Nak lagi??? Tekan TUTORIAL ok!

FREEBIES: Background Design 1.

Hye... Ain nak kasi background design rumput. Hope anda semua suka. Kalau dah ambil, sila komen ok!

http://1.bp.blogspot.com/-yhVqm8rWep0/TxQb11hETLI/AAAAAAAABCQ/yGdFt2KR2f8/s1600/grass+kuning.gif

http://1.bp.blogspot.com/-cCD1Uxn1JWc/TxQb2vppUsI/AAAAAAAABCU/uzstTV8vVc8/s1600/grass+merah.gif

http://2.bp.blogspot.com/-jHYD1XGC6KE/TxQb2_cRONI/AAAAAAAABCc/u22JJzifR5M/s1600/grass+purple.gif

http://1.bp.blogspot.com/-QXGJKOoTfx4/TxQb3fm9IGI/AAAAAAAABCk/9A0OW775viw/s1600/grass.gif

Nak lagi??? Tekan TUTORIAL ok!

Cara membuat header dengan mudah.

Anyone minum petang?

Hai anda. Hari ni Ain nak ajar macam mana nak buat header versi Ain sendiri. Ini untuk sesiapa yang tak ada Adobe Photoshop macam saya, haha. Kesian~ So benda yang anda perlu ada adalah Photoscape dan Gimp 2. Belum ada lagi? Sila download ok. Mari kita mulakan.

STEP 1: Guna Gimp 2 dulu untuk buat transparent. Klik file >> New. Lepas itu, tentukan ukuran yang anda nak untuk header anda. Klik ok! Lepas tu ia akan keluar warna putih.


STEP 2: Ok kita nak transparent kan pula. First tekan yang no 1 tu then tekan ke arah warna putih anda. Second ikut langkah di bawah.


STEP 3: Tadaaa~ Dah jadi kan? Ok mari kita save pula. Dan jangan lupa tukar kepada "PNG" ok! Save la kat mana mana file yang anda nak.


STEP 4: Sudah siap save gambar transparent tadi, kita pergi ke Photoscape pula. Klik editor.


STEP LAST: Masukkan balik gambar transparent tadi dan anda boleh mula mengedit. Selamat mencuba! Tak faham boleh tanya saya ok. Peace yawww~


So Ain ada edit header and nak bagi kat anda. Nahhhhh~ Hehehe. Right click then save. Sekian~

http://4.bp.blogspot.com/-uOufKgqNcT8/TxPRUBORGhI/AAAAAAAABCA/PvzdjnVpuB4/s1600/freebies.png
Transparent. Width: 800. Height: 300.

P/S: Tak faham, tanya saya. And kalau tak nampak, sila klik gambar tersebut. Tq!

Nak lagi??? Tekan TUTORIAL ok!