Cara letakkan chatbox/shoutbox di header blog (Tutorial)

Assalamualaikum semua..

Selamat menyambut hari raya deepavali pada bangsa indian.. Bangsa lain pun boleh raya jga kn.. Satu Malaysia la katakan.. ^__^

Okey2.. sebelum Armz melalut tah kemana, lebih baik kita terus ke main story. Atas pertanyaan dari kawan Armz ni,  Nashriey Nash nama nak glemer*** hahaha

maka dengan senang hatinya Armz nk ajar korang semua cara letakkan chatbox/shoutbox di header blog. Caranye rumit sikit.. Follow baik baik yer apa yg akan Armz ajar guna ayat cikgu tadika sat.

Part 1. Sebelum tu, bg yg belum signup shoutbox, korang boleh dapatkan disini. Lepas je signup dapatkan code shoutbox tersebut.

Part 2. Yang paling penting korang kena la design header blog korang macam contoh header yang Armz pernah buat dulu.(header edisi kemerdekaan )

 

Upload gambar header korang pada Posting. Ini untuk memudahkan korang dapatkan url link gambar header yg korang buat tadi. Tak tahu macam mana nk dapatkan url link gambar pada post, korang boleh tengok cara nak dapatkan url gambar dengan senang.

Part 1 dan part 2 (ok) da siap, ikut part seterusnya.

Part 3. Copy dan paste-kan code dibawah ni pada Html/JavaScript. Caranya open Dashboard > Design > Page elements > Add a gadget > Html/JavaScript. (pastikan korang letak pada kolum paling atas. Bukan pada sidebar atau main kalau tak faham yg ni, kena tanya Armz). Rujuk gambar dibawah ni pon boleh.

Ini code yg korang kena copy dan paste.

<div style="background-image:url(URL HEADER); background-repeat:no-repeat; width:1000px;   height:500px;"><div style="margin-left:200px; margin-top: 45px; padding-left: 344px; position: absolute; x-index: 300;">

<div style="border: 0px ridge #1569C7; height: 160px; width: 320px;"> LETAK CODE SHOUTBOX KORANG DISINI </span></div></div>

Keterangan:

URL HEADER = letakkan url link gambar (part 2) di sini.

LETAK CODE SHOUTBOX KORANG DISINI = letakkan code shoutbox (part 1) di sini.

width:1000px = lebar gambar header

height:500px = ketinggian gambar header

yang ini mencabar kesabaran korang, satu je pesanan aku "usaha tangga kejayaan" sempat lagi tu

margin-left:200px, margin-top: 45px, padding-left: 344px. Korang kena adjust sendiri kedudukan chatbox tdi biar betul betul berada macam yang korang nak.

Bila dah berpuas hati, klik preview. Bila dah rasa ok,cun, ngam boleh la klik save.

Sampai sini tutorial Armz. Jadi selamat menghias blog korang.

---

Maaf!!! penggunaan "Aku" pada yang lebih tua.

---

TUTORIAL #3-Kelopak bunga ros berguguran di blog

Selain daripada effect salji, korang boleh hiaskan blog dengan cantik jikalau guna effect ini. "Kelopak bunga ros berguguran", effect ni memang menarik. Seolah olah blog kita berada di dalam taman. Ok la.. Jom kita belajar tutorial ni..

Ikuti tutorial ringkas ini:

1.Dari dashboard > design > add a gadget > HTML/javascript

2.Copy dan paste kod di bawah ke dalam ruangan HTML/javascript yang anda buka tadi

<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png";image_urls['rain2']="http://4.bp.blogspot.com/-teXCIicWPF4/TpWcLLg0A2I/AAAAAAAAG0U/IPPCr1gponc/pinkpetal2.png";image_urls['rain3']="http://3.bp.blogspot.com/-3JG9HLECCRU/TpWcLZGSYtI/AAAAAAAAG0g/zIJINua93TE/redpetal1.png";image_urls['rain4']="http://2.bp.blogspot.com/-BByhQEK5E24/TpWcLux4xRI/AAAAAAAAG0s/x2hIr1AV_Ac/redpetal2.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv') .css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)]) .css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script><br /> <br /> <script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://tutorialuntukblog.blogspot.com/2011/10/tutorial-kelopak-bunga-berguguran-di.html'}).append(a).appendTo('body')});</script>
Korang boleh klik ini untuk auto install

<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png";image_urls['rain2']="http://4.bp.blogspot.com/-teXCIicWPF4/TpWcLLg0A2I/AAAAAAAAG0U/IPPCr1gponc/pinkpetal2.png";image_urls['rain3']="http://3.bp.blogspot.com/-3JG9HLECCRU/TpWcLZGSYtI/AAAAAAAAG0g/zIJINua93TE/redpetal1.png";image_urls['rain4']="http://2.bp.blogspot.com/-BByhQEK5E24/TpWcLux4xRI/AAAAAAAAG0s/x2hIr1AV_Ac/redpetal2.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv') .css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)]) .css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script><br /> <br /> <script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://tutorialuntukblog.blogspot.com/2011/10/tutorial-kelopak-bunga-berguguran-di.html'}).append(a).appendTo('body')});</script>

3. Preview, kalau ok klik save.

---

Maaf!!! penggunaan "Aku" pada yang lebih tua.

---

TUTORIAL #2-Effect image zoom yang cantik

Salam semua,

Dah muncul tutorial ke-2 aku ari ni. Moga moga tercapai la misi aku nak postkan 10 entry tutorial seminggu. Aku harap korang support misi aku ni.. Nanti aku belanja choki choki sorang satu.hehe......^_^

Tutorial ke dua plak, aku nak ajar korang cara membuat image zoom lebih nampak professional. Lepas ni tak payah la nak ke "new tab" bila nak tengok gambar lebih jelas... Korang boleh cuba, try, test gambar kat bawah ni.

Kalau nak buat macam tu.. Jom ikut tutorial ni:

1.Copy code di bawah, kemudian letakkan di HTML/javascript dalam blog anda.
(Dashboard > layout > add page element > HTML/javascript )

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<script src="                                                                                                                                      
http://www.yourjavascript.com/610310434009/unwanted86.blogspot.com.js" type="text/javascript"> 
</script>                                                                                                                                            

Dah letak kode tu, boleh klik save.

2.  Setelah selesai meletak code asas (code di atas). Kita teruskan dengan code yang lain. Code kat bawah ni korang kena letakkan setiap kali nak gambar korang ada effect tersebut. Diletakkan di dalam "edit HTML" pada posting.

<img src="url gambar disini" class="magnify" data-magnifyby="2" style="width:200px; height:150px cursor: url(magnify.cur), -moz-zoom-in; " />                                                                                                          

Keterangan :

• url gambar disini : Masukkan url gambar.
• 2 : Skala pembesaran. Bergantung kepada width dan height. Nilai lebih besar dari 1 akan membesarkan gambar, nilai kurang dari satu akan mengecilkan gambar contoh 0.5
• 200 : Masukkan lebar gambar yang anda rasakan bersesuaian
• 150 : Masukkan tinggi gambar yang anda rasakan bersesuaian

Semoga berjaya.
p/s: Kalau ada yang tak paham, boleh hantarkan komen. Insyaallah, aku cuba membantu.

---

Maaf!!! penggunaan "Aku" pada yang lebih tua.

---

TUTORIAL #1-Link pada blog warna warni

Salam semua,

Kali ni aku nak perbanyakkan tutorial di dalam blog ni. Lepas ni korang bolehla selalu usha usha tutorial kat sini yer. Aku akan cuba publishkan 10 tutorial setiap seminggu. Kalau korang ada pertanyaan tutorial, boleh cadangkan di shout box. Insyaallah, aku akan usahakan...

Bagi 1st day misi aku, aku akan ajar korang cara membuat link dalam blog bertukar warna warni (pelangi). Ni untuk korang yang nak kan blog nampak cantik. Ok.. Jom tutorial.

1. Copy code kat bawah ni.

<script src="https://sites.google.com/site/unwanted86/javascript/rainbowlink.js" type="text/javascript">
</script>

2. Pergi dashboard blog korang (boleh klik sini). Kemudian pergi design/layout > page element > add a gadget.

3. Pilih Html/Javascript. Bila dah buka, pastekan code tadi kat situ.

4. Siap dan save. Korang boleh cuba halakan cursor pada link di dalam blog.

Insyaallah menjadi. Selamat mencuba.

---

Maaf!!! penggunaan "Aku" pada yang lebih tua.

---

Tutorial cara buat widget halaman posting blog

Dah lama Arm'z tak buat entry tutorial. Rindu la plok kn.... Kali ni Arm'z datang bertutorial semula dengan mengajar korang cara buat widget halaman posting yang cool... "yearrhhh coolll"... Let's go to tutorial..

Langkah 1

Seperti biasa backup templet dulu kemudian Log in blog>Dashboard>Layout>Edit HTML. kemudian klik pada Expand Widget Templates.

Langkah 2

Cari code ini ]]></b:skin> dan copy code di bawah...

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

Kemudian paste code tersebut sebelum/di atas code ini ]]></b:skin>

Langkah 3

Kemudain cari code </body> dan copy code di bawah...

<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;

var upPageWord ='Previous';

var downPageWord ='Next';
</script>
<script src='http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/blogger_navpage.js' type='text/javascript'/>
</b:if>

Kemudian paste code tersebut sebelum/di atas code ini </body>

Klik preview, kalau ok klik save.. Dan lihatlah hasilnya macam dekat blog Arm'z ni...

Selamat mencuba......

---

Maaf!!! penggunaan "Aku" pada yang lebih tua.

---

Cara letakkan banner kecil di sidebar.

Menjawab pada soalan oleh Lilypelangi ini "awk , cmne awk letak kan banner kat tepi ??". Berikut adalah tutorial cara macam mana nak buatkan banner berada di tepi sisi blog dengan ukuran kecil serta tersusun. Let's tuto....

1. Copy dan pastekan kod dibawah ini di javascript/html (dashboard>design>add  a element/gadget>javascript/HTML)

<center><embed>
<a href="letakkan url blog disini" target="_blank"><img src="letakkan url gambar disini" width="100" height="100" /></a>

</embed></center>

Penerangan:

target="_blank" = kod ini adalah untuk membuka URL yang kita masukkan itu kepada new tab. Ini bermakna, takdelah kita terpaksa back balik kalau nak ke page kita semula..

width="100" height="100" = ini yang penting.. secara automatiknya gambar banner yang kita letakkan di sidebar akan bertukar menjadi ukuran 100 x 100px. Tapi korang boleh ubah saiz tersebut mengikut kesesuaian blog korang.

Letakkan url blog disini = copy dan pastekan url blog yang korang nak link kan dengan gambar tersebut.

Letakkan url gambar disini = ini dah terang terang la url gambar tu pastekan di situ yer..

Macam mna kalau nak tambah gambar lagi??

Ok..ini soalan yang bagus. Caranya senang saja. copy code yang diatas tadi dan pastekan semula dibawahnyer. Contoh macam bibawah:

ini kod asal:

<center><embed>
<a href="http://armzstory.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5zSMRHQoy4Q2F0g9Wb9fqX33NMmoLzG9x9Pdkerpz5xk28vLUC1nroEgiHV395EemOXT9jRSe3OpHqSmJLgI8wx_h0YF6qU493vJyakp-OT1H6gV37tyNaeEb7Cg4eQUv_ktOdJkcg0EL/s1600/bannerexchange.gif" width="100" height="100" /></a>

</embed></center>

bila kita tambah akan jadi macam ini:

<center><embed>
<a href="http://armzstory.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5zSMRHQoy4Q2F0g9Wb9fqX33NMmoLzG9x9Pdkerpz5xk28vLUC1nroEgiHV395EemOXT9jRSe3OpHqSmJLgI8wx_h0YF6qU493vJyakp-OT1H6gV37tyNaeEb7Cg4eQUv_ktOdJkcg0EL/s1600/bannerexchange.gif" width="100" height="100" /></a>

<a href="http://armzstory.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5zSMRHQoy4Q2F0g9Wb9fqX33NMmoLzG9x9Pdkerpz5xk28vLUC1nroEgiHV395EemOXT9jRSe3OpHqSmJLgI8wx_h0YF6qU493vJyakp-OT1H6gV37tyNaeEb7Cg4eQUv_ktOdJkcg0EL/s1600/bannerexchange.gif" width="100" height="100" /></a> 

</embed></center>

2. kemudian bolehla klik save. Tengok apa akan jadi..

Ok.. macam tu jew caranya.. makin banyak gambar makin cantik susunannyer.. Selamat mencuba.

p/s: Lilypelangi: kalau ada apa apa lagi bolehla tanya yer.. jangan malu malu.. Ala malu lak dia... "Malu bertanya kawan..Sesat cari jalan pulang....." bak kata lagu tu... lagu apa ntah... Damn!! terantuk katil plak....uuuUU...

---

Maaf!!! penggunaan "Aku" pada yang lebih tua.

---

Nak lagi video dan cerita menarik???:

Klik laju-laju kat sini!!

Button to top versi Arm'z (ada 6 pilihan warna)

Kali ni Arm'z buatkan button to top.. Rasa mcm best lak kalau pkai benda ni.. Senang cikit orang yang melawat blog kita nak ke atas kalau dah jauh ke bawah.... Cara nyer mcm ni.

1. Dashboard>Design>Add gadget>Javascript/Html

2. Masukkan code code di bawah ni dalam javascript/html tadi. (pilih salah satu)

BLUE

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqHF3fL-_nolkadXAp3-IABW_ynWZtZpZmlc4cn7r8CHPtdafwArU8Euwpmceu1ETG1WWSLCQmdKp3z1kbWuc9w9orpAA3D8k76CM5Ht1FP3Bkk4PQBUl6hIU5nbj2VnSs-eKtwXTqfyCX/s1600/btnttpblue.png" width="50" height="80" /></a>

---

ORANGE

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj57cd2cgXv1AY_TESn3JJ0B7YYUHoCYoJXLAZYMsOmoYiYPWNbXbFN59eqC7LizVGiF-6u0Nr-gNOYgzFm8ViisSa7I3vKAU_kcNYe99VcAL3QVoW7jBdnHUnrDwqp-0rrF_N7X33l1GfS/s1600/bttoren.png" width="50" height="80" /></a>

---

PINK

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnFrv-K__UADwq0JaOl6V-psyFeAalDOCVezevDuHVIDGKmj3Igq9se6Xo6Gq94jyImCniT8ChYcmhYsXccXUafFZ1-75dpN3fEmGfJpZAE6eqQwRjQd25hYhPXHphb4mRcThpMr0D4sRU/s1600/bttpink.png" width="50" height="80" /></a>

---

YELLOW

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZBsP6YRK_vPYo5g6wnsw9pROUGAoKHTOu2AWhhaKSQW_wA5nMqd33bWV-3A6yAj6aICqUoWJWlRBsbno6Ch7-drIzkHdjou5jYTWyq3m_oLU5pdnNA9omjA7eZoeeuO6geRqltzSMCb1q/s1600/bttyellow.png" width="50" height="80" /></a>

---

BLACK

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuB6yfDVriZ8UNHKNPoFhG79F-c2KKL6IosnWd5XHm7T7Y9GvYz4j-yKpSkciQcr8m98lRsyoDF3ZJkIUiRKkAU3cYE1hyphenhyphenGDAxeDguvj_V0-OPUQybyTs5KByyAZt8XkiDK3GJbKI83z1u/s1600/bttblack.png" width="50" height="80" /></a>

---

GREEN

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNlJJP0nnE1Q-bz0owHEC3ii5mE7v4JxiGRVqUmFDDz1NKyWL6KPQsd7FG0lI1ht-JMhz-DGPHJ9MvKEGK03CuWEuODOE-KQk85XRRwFsQ070qNODT7U8bwshShUk7LW1Z7QKibexCN9Lf/s1600/bttgreen.png" width="50" height="80" /></a>



Lepastu klik save...

Selamat mencuba!!

---

Maaf!!! penggunaan "Aku" pada yang lebih tua.

---

Nak lagi video dan cerita menarik???:

Klik laju-laju kat sini!!

Button back to top + gif. image.

Kali ni Arm'z akan mengajar korang buat button to top dengangambar gif.... apa gambar gif tu???? gambar Gif tu gambar yang boleh bergerak.. ada paham.??. ok lets go to tutorial..

Langkah 1:

Login pada Blogger >Klik Layout pada Dashboard korang>Klik Add a Gadget>Klik HTML / Javascript>Masukkan kode berikut.

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmGaGQXDvrMl45x8ST0ct9gwt7r4_ZGsSlcf2okv4pJWVQy3bVL95lmGOvZ6c1m9m7hgq1EKou-wLiBviqP-mZQ7p4m12L6rw4_xuXUHkbL6_WzPpSHzyEscDeZwCdwzQjQg_23i6Y4mm4/s1600/th_cute-kittens-emoticons-brown-12.gif" /></a>

Langkah 2:

Kod yang warna merah tu, korang bolehla tukar dengan URL gambar korang.. kalau nak pakai yang tu pon xpe... tapi dekat bawah ni ada la sikit contoh2 gambar yang korang rasa sesuai bolehla ambik yer..

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUAHIbdsKYSsa3rr1zgjfgF-JY_0yB1oSDyOSRRDFPZLJ5mz5AvUv1WUYtyyDYpUTJHiQq09v79k86ks6nIJi0ta_X5ZDj60Udy7oFjRWCSW_S-dh153L95-U2xkO0wMddG_g85s8sUIbe/s1600/gc25.gif

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA8CWKefbiebWefqzudHft1hbcNBzIw7jGv-vass-rMVybf-Ha_j-6HLmONypWs85pOsq2XkuiahjVQEyRRlXZkGcl5YrPzFctDGM5Vr_O4ZfdrSPEjoEIuUAB1fkZfZCfq1yIeIK5YIf3/s1600/th_75_cutiePuffAnimated.gif

 

 

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3sV-ufvuABszOdawIhUnDGRGPJICkNMh_tBj9pUzTlQVb4ztuob9m6rbyRC4u-_uJ7JOqwvIAnUt6rTsgdtArlxmubPDbj8uIXhaof57E64qLf-uOSV3QhMkvsLZtL0GIb6pXmNRiQpxJ/s1600/th_bears55.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXGSE3eMsV1ALDeSD6XexjGqHjMko_ok6kql3hAZUL6BBmlH6E2w_gomagCvdSA7a3Wz7rBfmyvfKS1Y2_9xi1MvIGXW8kK8BWJPjmqjqf_XSsPlDk4t3iejbrNsNJkqVimli4w-xeRrD7/s1600/th_pinkbutterfly.gif

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Hpk3En0wKEUg1a1W5UvLb1ArLA8GlQ_KgxD88D3EQv0GlY9ZytyKY1Ur029hyphenhyphenL6AlzV25dRiMpUQRMSEsErLmhsKJPR9CrHg_Xwr-O8cR5BlESjSvlrXh0pIt_nWSt7kjg2ZUG7hOmpF/s1600/th_PoohHeadBalloon.gif

 

 

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQWPeOfk3KBSoKTu8DpgS95hVPtpNby8_scwRJDq11oXcFwwpgpq5U25_9S9NFbqIbuPdflXZj0eiIWD1NeiNWOo4kRj2Tx8sDSdG5ZjQBwCoIvjVmqFXYBxpAdCgvU9Ub07l3ylUtShuO/s1600/th_nodd.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0BcUbtnv4tnJcBfDFNUwWenXupkWA2StCkG-UKasexVGF0MezYisO4xePoabz3BGvsc-0KVDTfsIJIqiWtlzl-YeWO-6VyP2XltyzgBdgwk9Dz1iuLbTGZs3BTtVa6c8a9TpbUiFtnL0-/s1600/th_mommamushroom.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmGaGQXDvrMl45x8ST0ct9gwt7r4_ZGsSlcf2okv4pJWVQy3bVL95lmGOvZ6c1m9m7hgq1EKou-wLiBviqP-mZQ7p4m12L6rw4_xuXUHkbL6_WzPpSHzyEscDeZwCdwzQjQg_23i6Y4mm4/s1600/th_cute-kittens-emoticons-brown-12.gif

selamat mencuba...

---

Maaf!!! penggunaan "Aku" pada yang lebih tua.

---

Nak lagi video dan cerita menarik???:

Klik laju-laju kat sini!!

Cara buat button follow dan dashboard

Kali nie, aku nak ajar korang cara buat button follow dan dashboard macam kat blog aku ni... Cuba korang dongak ke atas sekali... nampak tak????? rrr....yang tu la...hehehe..

Cara nak buat nyer senang je. Jom ikut tutorial ni.

1. Dashboard>Design>Page Elements>Add Gadget>HTML/Javascript

2. Copy code di bawah ni dan pastekan pada ruang HTML/Javascript

<div style="display:scroll; position:fixed; top:5px; left:105px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=BLOG ID" target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-right: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL6MK1uh10-BGD8_iGumArK7GnjOIBlg7hFRWc9Pg6zakiy0-rlTFsmKvnAHbM9lDSb9IvD070GvkL_EdMgFQTkWWNojkFO26XYeMI-G5yxUfvaDgcZcXT1BDyl-glBBpoZquPFM8ReO7y/s1600/buttonfollowpink.png" /></a> <div style="display:scroll; position:fixed; top:5px; left:0px;"><a class="linkopacity" href="http://blogger.com/home" target="_blank" rel="nofollow" title="Dashboard !" imageanchor="1" style="margin-right: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgalL3ClBluUkUU2hyg6I05c6z4Lh3t6udFLBP8gFJgK93gSEncr0jEjkv8Kq1pVnrW4ac-gF8v6-rpJI8dYIL8Qz2EhNPray2nW9RG3evJIM7Fri7NbATt8ohgbJkKDb2d85HyOFjHcK7z/s1600/dashboardbuttonblack.png" /></a></div></div>

Seterusnya korang kena kodek koding cikit.

1.Tukarkan Blog ID (merah) kepada blog id korang. Copy dan pastekan yer. Cara nak ambil blog id ikut cara dibawah:

   Dashboard>Design

2. Tukarkan URL gambar (hijau) mengikut kesukaan korang. Kalau xnak pun xpe. Dekat bawah ni ada beberapa design yang aku buat. Copy code dibawah dan tukarkan pada code yang bewarna hijau.

Code pertama tu untuk button FOLLOW.
Code kedua plak untuk button DASHBOARD.
Jangan silap plak yer....hehe

3. Setelah tu, klik save. Dan korang bolehla tengok perubahan pada blog korang.

dah pun selesai... Kalau jadi tu hantarla komen kat entry ni yer.....

Selamat mencuba.

::::::: Code design yang aku buat:::::::

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsX2fmXit1QXCZ60AmVl950BQ6WaFiGUnNAjMz9pxDJ5PdEXNvGannq9d3h6_9Is5f8O9bu-c5lQ-Qxq2TN4CGNTeudJEqV4d6wtk3RPpJZAgLBsqIFawTHeEBjgalyMiskJrb53ul5kdd/s1600/buttondashboardblue.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM18r3ZgNmDYqz9FMmNZQA7XdTmSUyblGygB_mLxaWW7VwpPCoNt5cY1xe8BkdxU9LkVjx3lrPx1Od8Y5Vv9k-lTfk79cg8Ljkq0qYQlebbmo7sg8QSAkDecypnNIkn_k6ZuhLy8wowTcf/s1600/buttonfollowpblue.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPYOFfTt-y06bkaHQVbjaywT7H427F1KzQAFqkC9CztCtyPY7yAfybsXo4qYqE31aageuWxZIzOwedTh-SciJ9wan6BW9sFXaujoytLm7NBrbUJgYdS2MBOG-QR0Aoad5zEwtY0yRJDn2l/s1600/buttondashboardemas.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb6LhspFClWHbAoQr77CXcDC-D2YQ_Kzqjs3oxhNp-PRq2xxCz4TCuBmy3GOxA2eBADcesu5yL48v0l6jxvIHJHQBt9RRzh7JJoV73hHd3XPmvdiNj5N8grMZzOe2vF8IQPZNDZeQwF9QO/s1600/buttonfollowemas.jpg

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgPvjdjat3nEAWxsDQbT0RwRn9zntadhDarnDwlsPCiwUk4R_iiVd5fhiqdXdjSIJVNeAbTfGwE4LlQtLGLHlSNI1-k-Hf80YiqYTdjziL0D5PNCG-r1Pk6WJYT5xhgkCB5uNzlvv8L-45/s1600/buttondashboardpink.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL6MK1uh10-BGD8_iGumArK7GnjOIBlg7hFRWc9Pg6zakiy0-rlTFsmKvnAHbM9lDSb9IvD070GvkL_EdMgFQTkWWNojkFO26XYeMI-G5yxUfvaDgcZcXT1BDyl-glBBpoZquPFM8ReO7y/s1600/buttonfollowpink.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgalL3ClBluUkUU2hyg6I05c6z4Lh3t6udFLBP8gFJgK93gSEncr0jEjkv8Kq1pVnrW4ac-gF8v6-rpJI8dYIL8Qz2EhNPray2nW9RG3evJIM7Fri7NbATt8ohgbJkKDb2d85HyOFjHcK7z/s1600/dashboardbuttonblack.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Erqd5TtABaVxATC_ydN5fnSI9G-42trxEAhwbrM1YIt_n3zACz38w3MH-8jyw1kOXP_YnudUBffy_0JAaK_UfRMBqXcWSvh_jGAWnGRPvBw23914rBA9flzWWPXPJUJMnIOQqwIu1L_-/s1600/followbuttonblack.png

p/s: Cik Anne... Dah tak menjadi rahsia lagi...huhu

---

Maaf!!! penggunaan "Aku" pada yang lebih tua.

---

Nak lagi video dan cerita menarik???:

Klik laju-laju kat sini!!

Cara buat tulisan berada di tengah-tengah.

Assalamua'alaikum.... Kali ini aku ditanya oleh Cik Anne cara bagaimana nak wat kan tulisan posting kita berada di tengah. JAdi Anne, atas permintaan ko. Aku tunaikan hajat dengan membuat tutorial ini. Lagipun da lama aku tak wat tutorial ni..huhu...rindulak tuto... Jom kita Tuto..

Korang ikuti langkah-langkah ini yer... Ikut cikgu sekarang...

1. buka halaman posting = posting>new post. Tulis apa yang korang nk postkan. Bleh tengok macam kat bawah ni.

2. Lepas dah tulis apa yang korang nk post. Highlight (kn tulisan tu)>Alignment>Align center. Tengok mcm kat bawah ni.

3. Hasilnya jadila mcm kat bawah ni.

dah jadi. Publish post korang..

Selesai.. senangkn... Selamat mencuba.

p/s: Cik Anne.. Kalau nk tutorial lagi pm me ok..

---

Maaf!!! penggunaan "Aku" pada yang lebih tua.

---

Nak lagi video dan cerita menarik???:

You Tube snake games!! Hilangkan tension...

 

Assalamua'alaikum... penat badan ni, kena selsema plak ari nie...rrrr.... :( dengan mata yang kuyup, aku merangkak juga nk tulis entry untuk korang...

Ok every body.... Kali nie aku nk kongsi dengan korang benda yang menarik kat you tube. Mungkin ramai yang da tahu, dan pada mereka...mereka.....dan mereka..... yg belum tahu... Jom rapatkn mata kat screen lappy korang... hehehe ^_^.. You tube!!! errmmm.... ada apa pada you tube??? Ada apa arrr...???? video je la kt you tube.. apa lagi cik Arm'z....

Sebenarnya, mungkin korang tak sedar ataupun belum menyedari nyer pun...(pelek johan).. You tube bukan sje blh tonton video, tapi dalam masa korang duduk menunggu buffering tu.... cuba tangan korang ringan2 tekan keyboard arrow kekiri, kekanan, ataupun bawah dan atas. Tengok apa jdi pda you tube korang. Tiba-tiba buffering yang bulat tu da bertukar jadi ular.. Bukan ular sawa, atupun anakonda la.... ni games ular... rrrrrrr..... betul game ular.. Tak caye cuba korang buka you tube skrg dan tekan arrow...

ok la...da mcm karangan sekolah da entry aku nie.. Korang enjoy la dlu dengn game you tube tu... ok.....

Ingat tagline ini: Cara Terbaik Untuk Berkongsi

Nak lagi video dan cerita menarik???:

Cara nak dapatkan URL gambar dengan senang

 Assalamualaikum... Dah bape ari Arm'z tak post tutorial.. Tangan nie da gatal2 kudis arr...huhu.. Kali nie Arm'z akan ajar korang cara nak dapatkan URL link untuk gambar dengan senang dan mempercepatkan loading page korang. Dulu kalau pakai photobucket, mesti korang akan terima nasib seperti ini: Muncul satu gambar yang seraya berseru kepada korang Upgrade to Pro Today.. Habis gambar korang punah dik ulat2 photobucket..hahahaha.... padan muke... ^_^ 

Sekarang korang da tak perlu risau, nak dapatkan URL gambar senang saje...Jom bertutor sekarang..

Arm'z akan tunjukkan 2 cara yang terbaik untuk korang....

Langkah 1: buatkan new post di posting.

Langkah 2:  pada new post, korang cari insert image (lihat arrow merah pada gambar di bawah)

Cara 1:

Langkah 3: lepas da masukkan gambar klik kanan pada mouse sambil tuju pada gambar, cari open link a new tab.

secara automatiknyer... gambar korang akan dibuka pada new tab, copy kode seperti arrow dibawah. Itulah kode URL gambar korang. Korang boleh copy n than paste kat blog.

Cara 2: dalam keadaan mode edit HTML, korang cari kode seperti arrow pada gambar di bawah. Itulah URL gambar korang.

Macam mana??? Senangkan.... dengan cara ini, korang tak perlu risau dengan serangan ulat photobucket ataupun whatever la....

Selamat mencuba.....

Jangan lupa.............................................................

|

|

|

|

|

|

|

|

|

|

|

|

V
Nak lagi tutorial dan video menarik, klik gambar di bawah:

Cara buat cursor comel dalam blog

Salam semua.. Arm'z harap korang seronok ari ni. Tengah bosan2 teringat lak nak post tutorial.. Kali ni kita belajar wat cursor comel dalam blog.. Step dia simple jew.... Jom kita terjah....


Untuk wat cursor ni, korang pergi ke link nie dulu Link
Dah klik, nanti korang akan nampak macam kat bawah nie:

 

Lepas tu korang copy code yang ada kat situ (macam arrow merah tu) korang boleh pilih ikut suka korang...

Bila dah copy, pergi dashboard>design>add a gadget klik html/javascript

Pastekan kat situ dan save.. (jangan tulis tajuk la yer)

Dah pun siap.... simple kan... macam simple plan je...

Selamat mencuba...

Cara membuat Exchange banner

Selamat pagi semua... Tutorial kali nie Arm'z nak ajak korang semua buat satu widget sendiri yang memang terbaik dari ladang koko krunch...hehehe.. Korang tau apa tu banner exchange? Xtau... Ni nak habaq mai..(dah kluaq bhasa kedah ^_^ ). Banner Exchange ni adalah satu cara tuk korang bertukar banner seseorang yang berbentuk gambar.. Ala2 follower juga la...hehe.. Jom la kita lompat ke tutorial...


Langkah 1:


1. Buatkan satu gambar berukuran lebih kurang 200px X 200px. Korang boleh buat banner ni dalam Photoshop atau Illustrator, save samada dalam format jpg., png., ataupun gif.(bergerak).
2. Setelah itu, masukkan gambar korang pada post (new post). Ini adalah bertujuan untuk korang ambil link URL gambar. Bila dah masukkan gambar, klik kanan pada mouse> open new tab. Dah buka new tab, ambil link gambar tersebut dan simpan dalam note pad dulu.


Langkah 2:

Buka dashboard>design>page element>add a gadget>Html/javascript

Copy kod dibawah ni, dan pastekan kod tersebut di html/javascript


<center><img alt="Arm&#39;z Story" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5zSMRHQoy4Q2F0g9Wb9fqX33NMmoLzG9x9Pdkerpz5xk28vLUC1nroEgiHV395EemOXT9jRSe3OpHqSmJLgI8wx_h0YF6qU493vJyakp-OT1H6gV37tyNaeEb7Cg4eQUv_ktOdJkcg0EL/s1600/bannerexchange.gif" border="0" />
<textarea name="code" rows="3" cols="22"><center><a href="http://armzstory.blogspot.com" target="_blank"><img border="0" alt="Cara Terbaik Untuk Berkongsi..Arm'z Story" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5zSMRHQoy4Q2F0g9Wb9fqX33NMmoLzG9x9Pdkerpz5xk28vLUC1nroEgiHV395EemOXT9jRSe3OpHqSmJLgI8wx_h0YF6qU493vJyakp-OT1H6gV37tyNaeEb7Cg4eQUv_ktOdJkcg0EL/s1600/bannerexchange.gif" /></a></center></textarea></center>


yang bewarna merah, tukarkan dengan URL gambar korang, manakala biru masukkan address blog korang.


Setelah itu, klik save....
Lihat apa hasilnya pada blog korang..


Selamat mencuba....

Assalamualaikum.....

p/s: Korang jangan malu dan segan untuk exchage banner Arm'z yer ^_^... Cuma perlu ringan2-kan tangan tuk copy kod pada banner exchange Arm'z dan paste kan dalam blog korang.

Cara membuat favicon muncul di semua browser

Terlebih dahulu Arm'z nak cerita sedikit apa itu Favicon. Macam pernah dengar?? Tapi ramai diantara kita tidak tahu apa kebenda tu.... Bagi yang tidak tahu, meh sini Arm'z nak bg tau...rapatkan telinga korang yer.. Favicon adalah singkatan bagi "Favourite Icon" yang merupakan sebuah gambar kecil yang akan muncul pada browser ataupun bookmark. Ia dimasukkan untuk membezakan antara blog korang dengan blog yang lain..

Ada paham ka??? kalau da paham, bolehla kita mulakan yer..... ok..sebelum tu, ambil gula2 sorang satu dulu...^_^..ermmmm..nyam...nyam...


Langkah 1:

1. Buat gambar yang berukuran kecil, lebih kurang dalam ukuran 16x16
2. Upload gambar tersebut ke image hosting, ataupun di new post pun boleh..
3. Ambil URL gambar tersebut dan simpan di notepad

Langkah 2:


1. Login Ke blogger.com/dashboard
2. Pilih menu "Design"
3. Klik "Edit HTML"
4. Cari kode </head> dan letakkan kode di bawah ini tepat di atasnya

                <link rel="shortcut icon" href="URL gambar favicon"/>


Pada kode yang merah, gantikan dengan URL gambar korang yang save tadi.


Tetapi mengikut kajian makmal Arm'z, dengan cara ini favicon akan muncul dibeberapa browser sahaja. Untuk munculkan gavicon di semua browser, ikut langkah seterusnya.


Pada kod diatas tadi, tambahkan code dibawah.  

                      type="image/vnd.microsoft.icon

Buat sehingga jadi seperti ini:

<link rel="shortcut icon" href="URL gambar favicon" type="image/vnd.microsoft.icon"/>

Langkah 3:

Klik save, dan lihat hasilnya akan jadi seperti blog Arm'z nie.

Selamat mencuba....

Cara membuat effect salji turun di blog

Hai! semua...... seperti yang telah Arm'z janjikan didalam tutorial lepas (Cara buat button to top) Arm'z da pun tunaikan janji tersebut... Pada tutorial kali ini, korang akan diajar cara meletakkan/membuat effect salji pada blog... Effect salji ini akan membuatkan blog korang rasa seperti ditengah2 padang yang dituruni salji... Kalau nak tunggu salji turun kat Malaysia ni da tentu la tak mungkin terjadi, tapi kalau dengan kuasa-Nya tak tahu la satu hari nanti Malaysia ni ada turun salji, mana la kita tahu..... Disebabkan terungin sangat nak main salji nie, dalam blog pun jadi la kan.... janji sempoi...huhu... ok la... jom kita teruskan dengan tutorial nie..^_^


Langkah 1:

Pertama sekali korang pergi Design/Layout>Page Elements>Add a Gadget>HTML/Javascript



Langkah 2:

Copy dan paste-kan kod dibawah ini:


<br />
<script src="http://snow-effect.googlecode.com/files/snow.js" type="text/javascript"></p>
<p>/***********************************************</p>
<p>* Effect Salji pada blog at http://armzstory.blogspot.com/</p>
<p>* Please keep this notice intact</p>
<p>***********************************************/</p>
<p></script><br />

Kemudian save...dan lihatlah hasilnya...

Selamat mencuba.......