Eldania's Blog

Photobucket

Ok!
Korang ada menghadapi masalah nak letak code HTML dalam entry / Create Post?
Well, aku penah gak bengang pasal ni.

Tapi, google kan ade. Hehe!

Proceed !

Cara dia senang je !

<textarea id=”code-source” rows=”3″ cols=”28″ name=”code-source”>Letak Code Di Sini</textarea>

#Yang Merah tu korang boleh letak code HTML yang korang nak paparkan kat entry

Ni la hasilnya :)

Photobucket

Hye! Ok~ Tutorial lagi.

Tau tak apa itu Alert Message? Kalau tak tahu boleh tengok kat sini : Alert Message

Ha! Pop-ups box yang ada tulis 'Masukkan Mesej Di Sini'

Ok! Macam ni~

Copy & Paste code di bawah ni Pada :

Dashboard ~> Design ~> Page Element ~> Add Gadget ~> HTML/JavaScript

Lepas tu, gantikan 'Masukkan Mesej Anda Di Sini' dengan mesej anda ! and Save!
Ok Done!

Photobucket

Photobucket

Woke! Hari ni nak buat Tutorial lagi.

Tutorial pasal macam mana nak letak Bubble atau Bintang Pada Cursor ~

Cuba gerakkan cursor aku ni, ade keluar bubble kan?

Ataupun korang pergi kat >sini< , gerakan cursor, ada bintang bertaburan kan?

Nak buat?

Jom tengok ni!

Bubbles

Pergi Dashboard ~> Design ~> Page Element ~> Add Gadget > HTML/JavaScript

Copy/Paste pada ruang HTML?JavaScript tu :

<span style="color: green;"></span><script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/bubblecursor.js"></script><script type="text/javascript"><br><br>// <![CDATA[<br><br>var colours=new Array("#FF00D5", "#FF24DB", "#FF44E1", "#FF5FE5", "#FF86EB"); // colours for top, right, bottom and left borders and background of bubbles<br><br>var bubbles=100; // maximum number of bubbles on screen<br><br><br><br>/****************************<br><br>* JavaScript Bubble Cursor *<br><br>* (c) 2010 mf2fm web-design *<br><br>* http://www.mf2fm.com/rv *<br><br>* DON'T EDIT BELOW THIS BOX *<br><br>****************************/<br><br>var x=ox=400;<br><br>var y=oy=300;<br><br>var swide=800;<br><br>var shigh=600;<br><br>var sleft=sdown=0;<br><br>var bubb=new Array();<br><br>var bubbx=new Array();<br><br>var bubby=new Array();<br><br>var bubbs=new Array();<br><br><br><br>window.onload=function() { if (document.getElementById) {<br><br>var rats, div;<br><br>for (var i=0; i<bubbles; i++) {<br><br>rats=createDiv("3px", "3px");<br><br>rats.style.visibility="hidden";<br><br><br><br>div=createDiv("auto", "auto");<br><br>rats.appendChild(div);<br><br>div=div.style;<br><br>div.top="1px";<br><br>div.left="0px";<br><br>div.bottom="1px";<br><br>div.right="0px";<br><br>div.borderLeft="1px solid "+colours[3];<br><br>div.borderRight="1px solid "+colours[1];<br><br><br><br>div=createDiv("auto", "auto");<br><br>rats.appendChild(div);<br><br>div=div.style;<br><br>div.top="0px";<br><br>div.left="1px";<br><br>div.right="1px";<br><br>div.bottom="0px"<br><br>div.borderTop="1px solid "+colours[0];<br><br>div.borderBottom="1px solid "+colours[2];<br><br><br><br>div=createDiv("auto", "auto");<br><br>rats.appendChild(div);<br><br>div=div.style;<br><br>div.left="1px";<br><br>div.right="1px";<br><br>div.bottom="1px";<br><br>div.top="1px";<br><br>div.backgroundColor=colours[4];<br><br>div.opacity=0.5;<br><br>if (document.all) div.filter="alpha(opacity=50)";<br><br><br><br>document.body.appendChild(rats);<br><br>bubb[i]=rats.style;<br><br>}<br><br>set_scroll();<br><br>set_width();<br><br>bubble();<br><br>}}<br><br><br><br>function bubble() {<br><br>var c;<br><br>if (x!=ox || y!=oy) {<br><br>ox=x;<br><br>oy=y;<br><br>for (c=0; c<bubbles; c++) if (!bubby[c]) {<br><br>bubb[c].left=(bubbx[c]=x)+"px";<br><br>bubb[c].top=(bubby[c]=y)+"px";<br><br>bubb[c].width="3px";<br><br>bubb[c].height="3px"<br><br>bubb[c].visibility="visible";<br><br>bubbs[c]=3;<br><br>break;<br><br>}<br><br>}<br><br>for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);<br><br>setTimeout("bubble()", 40);<br><br>}<br><br><br><br>function update_bubb(i) {<br><br>if (bubby[i]) {<br><br>bubby[i]-=bubbs[i]/2+i%2;<br><br>bubbx[i]+=(i%5-2)/5;<br><br>if (bubby[i]>sdown && bubbx[i]>0) {<br><br>if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {<br><br>bubb[i].width=bubbs[i]+"px";<br><br>bubb[i].height=bubbs[i]+"px";<br><br>}<br><br>bubb[i].top=bubby[i]+"px";<br><br>bubb[i].left=bubbx[i]+"px";<br><br>}<br><br>else {<br><br>bubb[i].visibility="hidden";<br><br>bubby[i]=0;<br><br>return;<br><br>}<br><br>}<br><br>}<br><br><br><br>document.onmousemove=mouse;<br><br>function mouse(e) {<br><br>set_scroll();<br><br>y=(e)?e.pageY:event.y+sleft;<br><br>x=(e)?e.pageX:event.x+sdown; }<br><br><br><br>window.onresize=set_width;<br><br>function set_width() {<br><br>if (document.documentElement && document.documentElement.clientWidth) {<br><br>swide=document.documentElement.clientWidth;<br><br>shigh=document.documentElement.clientHeight;<br><br>}<br><br>else if (typeof(self.innerHeight)=="number") {<br><br>swide=self.innerWidth;<br><br>shigh=self.innerHeight;<br><br>}<br><br>else if (document.body.clientWidth) {<br><br>swide=document.body.clientWidth;<br><br>shigh=document.body.clientHeight;<br><br>}<br><br>else {<br><br>swide=800;<br><br>shigh=600;<br><br>}<br><br>}<br><br><br><br>window.onscroll=set_scroll;<br><br>function set_scroll() {<br><br>if (typeof(self.pageYOffset)=="number") {<br><br>sdown=self.pageYOffset;<br><br>sleft=self.pageXOffset;<br><br>}<br><br>else if (document.body.scrollTop || document.body.scrollLeft) {<br><br>sdown=document.body.scrollTop;<br><br>sleft=document.body.scrollLeft;<br><br>}<br><br>else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {<br><br>sleft=document.documentElement.scrollLeft;<br><br>sdown=document.documentElement.scrollTop;<br><br>}<br><br>else {<br><br>sdown=0;<br><br>sleft=0;<br><br>}<br><br>}<br><br><br><br>function createDiv(height, width) {<br>var div=document.createElement("div");<br>div.style.position="absolute";<br>div.style.height=height;<br>div.style.width=width;<br>div.style.overflow="hidden";<br>return (div);<br>}<br><br>// ]]><br></script>

Nampak x code yg ini berada pada HTML di atas?

 var colours=new Array("#ff0080", "#ff0080", "#ff0080", "#ff0080", "#ff0080"); // colours for top, right, bottom and left borders and background of bubbles

#Yang Merah tu ialah colour pada bubble korang. Korang boleh tukar warna dia dengan pilihkan code warna & gantikan yg warna merah tu. Korang boleh pilih code warna kat sini : HTML Colour Codes

Ok lepas tu jangan lupe click save kalau dah puas hati ! Nak tengok Preview pon boleh!

Bintang

Cara dia sama jugak ! Copy & Paste pada ruang HTML/JavaScript. Korang boleh dapatkan code dia kat sini :

Cursor Bintang 1

atau sini

Cursor Bintang 2

Selamat Mencuba !

Photobucket

Photobucket

Da lame tak post ! Selame ni aku sedang design blog ni!!

Ok! Ok! Aku nak sambung tutorial untuk ShoutBox !

Hari ni, aku nak ajar untuk tukar Tabs pada ShoutBox korang yang dah sedia di tepi tu ~

Ha ! Yang tu!

OK! Sebelum tu, korang dah sorokkan shoutbox belom? Maksud aku, buat pop-ups untuk Shoutbox..

Kalau belum, meh tgok kat sini dulu : Macam Mana Nak Sorokkan ShoutBox tu?

Dah buat? Woke! Proceed~

Actually, member aku nak suruh aku tunjukkan cara nak buat ni dulu.. jadi aku dah siapkan tutorial (dlm bentuk gambar) ni awal2~

So, korang tgok sini lah :

Er.. nampak sgt ke loghat Melaka ni? Melaka ade loghat ke?

Tak nampak ?

Woke, aku tunjukkan :

Pg ke : Dashboard --> Design --> Page Element --> Gadget (ShoutBox korang yang dah sedia ada tu)

Korang boleh gune CTRL + F untuk cari code ni :

gbtab{ height:100px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjffqnrxs3k09kF8FVoZYG26jaBDJysUQ-35QMhygd166NDaCTts7VIMbti9edmKv0ALHOS87rOh_oczodkkhnXrCky03HG5Avb7Ev_UODFrh8P4zGaK5G9l5gNJQIKk3tFPpw9FT-101Id/s320/tabs.png') no-repeat; }

Merah

: Pastikan scroll tu ade bahagian atas ~ so, tak de lah tertukar URL nanti (pada gambar)

Hijau : Adjust kat situ mengikut dimension Tab yg korang dah design

Pink : Paste kan URL Tab yang korang dah upload ~ ( Lebih senang korang Upload kat Photobucket and copy URL kat Direct Link)

Paham? Paham? Paham?

#ShoutBox Tab tu korang boleh dapat kat mana2 atau design sendiri.. boleh jugak Search kat Google Images HEHE! Ok~ tu je ! Jangan lupe click Save yeah!

by :

Photobucket