TUTORIAL : Letak Icon Comel Sebelah Comment

Assalamualaikum w.b.t. Pada malam yang indah nie, saya nak share cara nak Letak Icon Comel Sebelah Comment. Di bawah nie terdapat contohnye, klik pada gambar untuk besarkan. Perhatian! tutorial ni hanya untuk pengguna blog TEMPLATE DESIGNER sahaja.

Dah paham? Mari sini nak ajar.

1. Dashboard > Template > Edit HTML > Tick Expand Widget Templates 

2. Tekan F3 dan cari kod nie :

<span class='post-comment-link'>

3. Dah jumpe? Ok, lepas tu korang copy pulak kod ni ye :

<img src="URL CUTE ICON"/> 

4. Then, korang paste di sebelah kod yang korang cari tadi. Faham tak? Kalau tak faham, bloeh tengok contoh di bawah.

5. Preview dulu. Kalau dah jadi, boleh la SAVE.

*kat bawah nie ade beberapa freebies URL CUTE ICON untuk diletakkan di sebelah komen. Kalau berkenan ambik la.

http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic000demoji_9266200decoojp.gif

 

http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic011demoji_15430247decoojp.gif

http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic016demoji_14841866decoojp.gif

 

http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic012demoji_15496649decoojp.gif

http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic018demoji_416449decoojp.gif 

 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic017demoji_895744decoojp.gif

 freebies credit to :- Asmaamalina.

TUTORIAL : Unique Link Hover

Assalamualaikum w.b.t. Hari tu saya ada ajar tutor Double Dashed Link Hover. Tutorial yang ni lebih kurang sama je dengan tutor tu. Cuma, link hover bagi tutor nie sangat unik dan boleh la dikatakan 'cute'. (hehehe) Nak tengok contoh tak? Ade di bawah.

Klik untuk tumbesaran

Unik tak? Kalau nak try, sila ikut step di bawah.

1. Dashboard > Template > Edit HTML > Tick Expanf Widget Templates

2. Korang cari kod nie a:hover {

3. Korang nampak tak bawah kod a:hover { ada kod (warna biru)? Macam ni :-

4. Then, korang padam kod berwarna biru tu, dan gantikan dengan kod di bawah.

color: #ffffff;
background:#57D0F9;
text-decoration:none;
border: #ffffff 2px dashed;
padding:3px 5px;
-moz-border-radius:10px;
}

Note : 

* merah : warna background link hover korang

* oren : warna boader link hover

* pink : ketebalan boader link hover

* hijau : boleh pilih sama ada nak buat solid, dashed atau dotted

* biru : Kod ni sangat penting coz kod inilah yang mencantikkan lagi link hover korang. Kalau nak ubah boleh, tak nak pun tak pe (tak marah pun ^^). Pandai-pandai la buat uji kaji yup!

p/s : kod warna boleh dapatkan di SINI

5. Ok, kalau dah siap boleh tekan SAVE template. Selamat mencuba! Annyeong.

TUTORIAL : Double Dashed Hover (LIKE ME)

Assalamualaikum w.b.t. Ape itu Double Dashed Hover erk? Mesti korang tertanya-tanya kan. Nak tengok contoh? Hah, sila halakan CUSOR anda pada link di bawah.

HALAKAN CUSOR ANDA DI SINI

Yang tu la double dashed hover. Nak try? Jom mulakan.

1. Dashboard > Template > Edit HTML > Tick Expand Widget Templates

2. Tekan F3 dan cari kod ni :

a:hover

3. Dekat bawah kod tu ade kod (biru) macam nie kan :

4. Dah jumpa? Then, padam kod berwarna biru tu, dan gantikan dengan kod di bawah.

border-top: 2px dashed #ff8fc1;
border-bottom: 2px dashed #ff8fc1;                                                                                                        

*warna merah tue, korang boleh tukarkan dengan kod warna fav korang. Kod warna boleh dapatkan di SINI.

5. Done and SAVE! Lihatlah hasilnye (dah macam iklan produk kecantikkan pulak, LOL~)

TUTORIAL : Menukar Home, Older Post dan New Post Kepada Icon Yang Comel

Assalamualaikum w.b.t. Hari yang baik nie, saya nak share cara nak tukar Home, Older Post dan New Post Kepada Icon Yang Comel. Ape benda tu? Bawah ni ada contohnya.

Korang fokus betul-betul eh. Nanti takut tertinggal step, tak pasal-pasal tak jadi. Here we go!

1. Dashboard > Template > Edit HTML > Tick Expand Widget Templates

2. Tekan F3 dan cari kod ini <data:newerPageTitle/>

3. Tukarkan kod tadi dengan kod nie :

<img src="http://i947.photobucket.com/albums/ad318/hannacrazee/Decorated%20images/go5.png"/>

*warna merah tue korang punya URL New Post Icon. Yang tu contoh je

4. Then, tekan F3 sakali lagi dan cari kod ni <data:olderPageTitle/>

5. Tukarkan kod di atas dengan kod nie :

<img src='http://i561.photobucket.com/albums/ss52/angelicxmelody/Web%20materials/go5.png'/>

*warna merah tue korang punya URL Older Post Icon

6. Next, untuk button home pulak.

7. Tekan F3 lagi sekali untuk cari kod ini <data:homeMsg/>

8. Tukarkan kod di atas dengan kod nie :

<img src='http://i561.photobucket.com/albums/ss52/angelicxmelody/Web%20materials/home1.png'/>

*warna merah untuk URL Home Icon Korang.

9. Preview dulu. Kalau korang dah puas hati bolehlah SAVE!

p/s > URL yang berwarna merah tu adalah URL Icon Home, Older Post dan New Post. Kalau korang nak ambil terus pun tak pe. Dipersilakan.

TUTORIAL : Centerkan Header

Assalamualaikum w.b.t. Tutorial kali nie ialah cara nak centerkan header. Maybe kalau header senget sebelah, takde keseimbangan pulak kat blog korang. Pendek kata tak sedap mata memandang. Tutor nie ada dua cara. Korang pilihla cara mane yang korang bersesuaian dengan blog korang.

CARA PERTAMA

1. Dashboard > Template > Edit HTML > Tick Expand Widgets

2. Tekan F3 dan cari kod nie /* Content

3. Then, copy kod di bawah :

.Header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}

4. Paste di atas kod yang korang cari tadi. Contohnya ada di bawah :-

5. Preview dulu, kalau jadi SAVE yer.

CARA KEDUA

1. Dashboard > Template > Edit HTML > Tick Expand Widgets

2. Tekan F3 dan cari kod nie #outer-wrapper {

3. Bawah kod yang korang cari tadi ada kod ini kan?

background:#FFFFFF;
width: 1000px;

4. Maknanya, outer wapper tu berukuran 1000px. Korang punya tak tahu la. Maybe bersaiz kecik lagi dari tu. Jangan usik apa-apa kod di atas. Just tengok ukuran width sahaje.

5. Then, korang cari pulak kod ini #header-wrapper {

6. Dah jumpe? Pastikan width dekat header wrapper dan outer wrapper tu sama. Baru la header korang akan jadi center.

7. Preview dulu, lepas tu SAVE!

TUTORIAL : Letak Cute Cusor dalam Blog

Assalamualaikum w.b.t. Ok, untuk mencantikkan blog korang, mesti korang nak letak cusor yang cute dan 'cool' kan. So, kat sini caranya. Senang je.

1. Mula-mula, pergi ke SINI untuk dapatkan CUSOR yang cute lagi comel gitu. (kena mintak izin dulu yup)
*cusor yang boleh bergerak (animated), hanya untuk INTERNET EXPLORE sahaja!

2. Copy URL cusor tu.

3. Then, paste URL cusor tu pada kod di bawah ini.

<style>body {cursor:url(URL CUSOR), url(URL CUSOR), auto;} </style> <a href="URL BLOG KORANG" target=_blank><div style="height: 50px; width: 50px; position: absolute; top: 0px; left: 0px;"> </div></a>

*warna purple letak URL CUSOR korang
*warna merah letak URL BLOG korang

4. Selepas siap isi URL CUSOR dan URL BLOG korang, copy kod tersebut.

5. Klik Dashboard > Layout > Add a Gadget > Html/JavaScript.

6. Paste kod tadi dalam ruangan Html/JavaScript.

7. Then, SAVE. Selamat mencuba.

TUTORIAL : Letak Ayat di Bawah Setiap Post

Assalamualaikum w.b.t. Hari nie saya nak share cara nak letak ayat di bawah setiap post dalam blog korang.
Nak tengok contoh? Ada kat bawah nie.

Let's go babe!

1. Dashboard > Template > Edit HTML > Tick Expand Widgets

2. Tekan F3 dan cari kod ini <data:post.body/>

3. Copy kod di bawah nie :

<hr/><center>AYAT KORANG</center><hr/>

4. Paste di atas kod <data:post.body/> tadi.

5. Preview. Then, kalau dah puas hati, boleh la SAVE.

TUTORIAL : Disable Right Clik Tanpa Alert

Assalamualaikum w.b.t. Mase tue saya ada buat tutorial Disable Right Clik with Alert. Tapi tutor kali nie, tanpa sebarang alert! Nak cuba, JOM!

1. Dashboard > Layout > Add a Gadget > Html/ JavaScript

2. Copy kod di bawah.

<script language=JavaScript><!--
//Disable right click script III- By Renigade (renigade@mediaone.net)//For full source code, visit http://www.dauspozi.com
var message="";///////////////////////////////////function clickIE() {if (document.all) {(message);return false;}}function clickNS(e) {if(document.layers||(document.getElementById&&!document.all)) {if (e.which==2||e.which==3) {(message);return false;}}}if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")// --></script>

4. Done dan SAVE!

TUTORIAL : Colour Codes

Assalamualaikum w.b.t. Ni ada link untuk Colour Code. Klik kat SINI. Cari je warna ape yang korang nak. Semoga berjaya!

TUTORIAL : Cara Letak Scroll Back Jquery Top Button (LIKE ME)

Assalamualaikum w.b.t. Hari nie, saya nak share cara letak jquery top button dalam blog korang. Nak tengok contoh, just klik button FLY yang ada kat bawah belah kanan blog ni. ^^. Satu lagi, tutor nie hanya untuk pengguna template designer sahaja! Jom kita mula.

1. Dashboard > Template > Edit HTML > Tick Expad Widgets

2. Tekan F3 dan cari kod </body>

3. Copy kod di bawah nie :

<a href='#' id='toTop'><img src='URL IMG?t=1292762029' style='border:0;'/></a>

*warna merah tu, gantikan dengan URL Top Button.

4. Lepas tu, pastekan di atas kod </body> tadi.

5. Then, korang cari pulak kod ]]></b:skin>

6. Copy kod di bawah :

/* to top */#toTop { width:100px;background:none;border:0px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }

7. Pastekan di atas kod ]]></b:skin>

8. Next, cari kod nie </head>

9. Copy kod di bawah :

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>/*----------------------- * jQuery Plugin: Scroll to Top * by Craig Wilson, Ph.Creative (http://www.ph-creative.com) * Bring to you by Zen from http://zenplate.blogspot.com * Copyright (c) 2009 Ph.Creative Ltd. * Description: Adds an unobtrusive &quot;Scroll to Top&quot; link to your page with smooth scrolling. * For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx * Do not delete these infomation * Version: 1.0, 12/03/2009 -----------------------*/
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr(&quot;href&quot;);if($(window).scrollTop()!=&quot;0&quot;){$(this).fadeIn(&quot;slow&quot;)}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()==&quot;0&quot;){$(scrollDiv).fadeOut(&quot;slow&quot;)}else{$(scrollDiv).fadeIn(&quot;slow&quot;)}});$(this).click(function(){$(&quot;html, body&quot;).animate({scrollTop:0},&quot;slow&quot;)})}});
$(function() { $(&quot;#toTop&quot;).scrollToTop(); });
</script>

10. Lepas tu, pastekan di atas kod </head> tadi.

11. Preview and SAVE!

12. Kalau nak freebies TOP BUTTON, korang boleh pergi ke SINI. Kena mintak izin dulu yup.

TUTORIAL : Timbang Berat Blog

Assalamualikum w.b.t. Nak tahu berat blog korang? Mesti tertanya-tanyakan, sama ade blog korang terlebih berat or sebaliknye. Di sini caranya.

1. Pergi ke SINI.

2. Lihat contoh kat bawah ni. Ikut je step die.

3. Then, korang dapat tahu berapa berat blog dan masa diambil untuk enter blog korang. Kalau berat blog yang melebihi 100 kb, sila-silalah ber'diet' yup. Hehehe, selamat mencuba!

TUTORIAL : Macam Mana Nak Dapatkan URL IronDJ

Assalamualaikum w.b.t. Ok, hari nie saya nak share cara nak dapatkan URL di IronDJ. URL nie boleh digunakan untuk MP3 Player seperti Cute Mini MP3, AudioPlay Music Player dan Billy Player. Jom kita mulakan.

1. Pergi ke site INI

2. Taip tajuk lagu yang korang nak. Lihat contoh :

3. Bila dah keluar lagu pilihan korang, boleh la klik.

4. Nanti akan keluar gambar bawah nie.

5. Lepas tu, korang scroll ke bawah sikit dan akan jumpa HTML Embed box macam nie.

6. Jangan copy semua kod dalam HTML box tu. Just copy kod dari http://irondj hingga mp3.

7. Siap! Selamat mencuba.

TUTORIAL : Letak Lagu Youtube dalam Blog

Assalamualaikum w.b.t. Ok, tujuan letak lagu dalam blog nie sebab nak hiburkan pengunjung yang singgah blog korang (tu pun kalau dieorang suka lagu korang, kalau tak suka boleh tekan butang PAUSE! kan, kan?). Tutor nie maybe ramai yang dah tahu. Contohnya seperti di bawah :

Dengan cara nie, orang lain tak tahu lagu ape yang korang pasang.

So, jom kita mulakan!

1. Cari lagu yang korang suka di YOUTUBE

2. Lepas tu, ikut step di bawah nie :

1. Klik Share.

2. Klik Embed.

3. Tick Use old embed code.

4. Copy highlight text dalam box tue.

3. Lepas tu, log in ke blog korang.

4. Dashboard > Layout > Add a Gadget > Html/JavaScript

5. Then, pastkan kod tadi. Akan jadi macam nie :

<object width="560" height="349"><param name="movie" value="http://www.youtube.com/v/8UhFOwsXgQc?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/8UhFOwsXgQc?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="560" height="349" allowscriptaccess="always" allowfullscreen="true"></embed></object> 

6. Kalau korang tak nak nampakkan video, ikut step di bawah.

 <object width="200" height="25"><param name="movie" value="http://www.youtube.com/v/8UhFOwsXgQc?fs=1&autoplay=1&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/8UhFOwsXgQc?fs=1&autoplay=1&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="200" height="25" allowscriptaccess="always" allowfullscreen="true"></embed></object> 

7. version 3 boleh gantikan dengan kod fs=1&autoplay=1 (kalau nak music tue dimainkan secara automatik)

8. width dan height boleh diubah ikut kesesuaian blog masing-masing.

9. Kalau dah puas hati, preview and then SAVE!

TUTORIAL : Macam Mana Nak Guna Blockquote

Assalamualaikum w.b.t. Hari nie saya nak share tutorial cara nak guna BLOCKQUOTE. Tutor nie khas untk newbies. Nak try tak? Jom.

BLOCKQUOTE

1. Dashboard > New post

2. Taip ayat korang, macam contoh bawah nie :

3. Lepas tue, HIGHLIGHT ayat korang tadi. Misalnye :

4. Preview dan SAVE.

5. Cube tengok, ada tak blockquote korang tu. Kalau ade, maknanye korang dah berjaya! 

TUTORIAL : Disable Right Clik

Assalamualaikum w.b.t. Korang tahu tak ape tu Disable Right Clik? Mesti dah tahu kan. Tutorial nie bertujuan untuk mengelakkan hasil tulisan korang kena COPY oleh COPYCAT di luar sana. Contohnya macam nie :-

So, tanpa buang masa, kita mulakan step pertama.

1. Dashboard > Layout > Add a Gadget > Html/JavaScript

2. Copy kod kat bawah nie :

<script language=JavaScript><!--
//edit by unwanted

var message="Masukkan Mesej Anda Disini";
///////////////////////////////////function clickIE4(){if (event.button==2){alert(message);return false;}}
function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}
if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}
document.oncontextmenu=new Function("alert(message);return false")
// --></script>

3. Then, paste. Kalau jadi, SAVE!

*Yang warna merah tu, korang tukar dengan ayat sendiri ye.

*Kepada sesiapa yang hendak COPY code dalam tutorial nie , buat mcm ni :-
  TEKAN = Ctrl+C (serentak)!

TUTORIAL : Tukar Background Blog (Simple, Denim and Minima Template)

Assalamualaikum w.b.t. Hari nie saya nak tunjukkan cara nak tukar background blog bagi template jenis Simple, Denim and Minima Template. Dah sedia, let's go, babe!

SIMPLE TEMPLATE

1. Dashboard > Template > Customise > Background. Cuba tengok contoh kat bawah nie :

3. Klik Upload image > Choose file. Masukkan la gambar background dalam dekstop korang.

4. Bila dah selesai kerje mengupload tu, tekan DONE. Then, apply to blog.

DENIM & MINIMA TEMPLATE

1. Dashboard > Template > Edit HTML > Tick Expand Widget Templates

2. Tekan F3 dan cari kod nie body }

3. Then, cari kod macam nie

background: $bgColor;

4. Dah jumpa? Lepas tu, gantikan kod tadi dengan kod nie

 background: url('URL BACKGROUND') fixed; 

5. Preview and kalau dah puas hati, SAVE!

TUTORIAL : Cara Nak Ambil URL Image di Glitter Graphics

Assalamualaikum w.b.t. Macam mana nak dapatkan URL Image kat Glitter Graphics erk? Begini caranya.

1. Korang masuk SINI dulu.

2. Pilih image mana yang korang berkenan.

3. Then, tengok gambar kat bawah nie. Ade tak kod macam nie :

4. Yang bergaris merah tu adalah URL Image korang.

5. Tapi kalau klik kat situ mesti secara automatik semua kod akan terCOPY, kan. So, korang kena pastekan dulu semua KOD tu dalam NOTEPAD dan yang berkenaan.

6. Lastly, korang carila URL Image tue. Selamat mencuba. Annyeong!

TUTORIAL : Masukkan Header ke Dalam Blog

Assalamualaikum w.b.t. Bertemu lagi kita. Kali nie saya nak ajar tutorial di atas. Tutorial nie untuk new blogger sahaja. Senang dan mudah saja step die. Ready?

1. Dashboard > Layout > Tekan EDIT seperti di bawah :

2. Lepas tu, akan keluar macam nie :

3. Kalau takde apa-apa aral, keluarla header kat blog korang. Selamat mencuba!

TUTORIAL : ShoutBox Yang Simple

Assalamualaikum w.b.t. Tutorial ShoutBox nie memang simple, sebabnya korang tak perlu sign in untuk tulis e-mail address, nama dan sebagainya. Tapi, kekurangan ShotBox nie, korang tak boleh nak wat cantik-cantik, berwarna-warni dan yang sewaktu denganya. Kepada blogger yang suka ShoutBox simple nie, boleh ikut step di bawah.

1. Korang pergi ke link nie > Shoutbox Widget

2. Copy kod no. 2, seperti gambar di bawah :

3. Dashboard > Layout > Add a Gadget > Html/JavaScript

4. Pastekan kod yang korang copy tadi.

5. Save. 

TUTORIAL : Macam Mana Nak Cari Blog ID

Assalamualaikum w.b.t. Korang tahu tak ape itu blog ID? Bagi blogger yang dah expert tu, tak payah ikut tutorial ni. Pejam mata pun boleh cari, erk. Tutorial nie khas untuk blogger yang baru nak berjinak-jinak dalam dunia blog nie.

1. Log in > Layout

2. Tengok gambar kat bawah, lepas tu follow je.

3. Ok! Dah siap. Mudah kan. Seamat mencuba!

TUTORIAL : Cara Tick Expand Widget Templates

Assalamualaikum w.b.t. Tujuan kena TICK EXPAND WIDGET nie nak cari kod yang takde semasa kita search. Tutorial nie khas untuk new bloggers. Selamat mencuba!

1. Log in > Dashboard > Template > Edit Html > Tick je macam nie :

Klik pada gambar untuk besarkan

2. Lepas tu bolehla cari kod yang korang idamkan tu. Senang je.