สวัสดีครับ .. ^ ^ คิดถึงมากเลย เป็นไรไม่รู้ไปละ ไม่ได้อัพ 1 วันแทบเป็นบ้า!! = =; จริงๆ เรื่องนี้ผมนี้ผมนั่งทดสอบไปหลายรอบละ กว่าจะได้โค้ดที่สมบูรณ์ สาเหตุที่ไม่ได้อัพบล้อกเมื่อวานมันมีที่มาอยู่ครับ
           เมื่อวานน้องเล่นเกมที่คอมอย่างเมามัน.. ในตอนเช้า จู่ๆ ก็มีเสียงดังขึ้น..

           "ตู้ม!!!!!!"

          
            "ว๊าก!! ที่ม็อบเค้าปาก๊าซน้ำตาแล้วเหรอ" "ไม่ใช่โว้ย -*- หม้อแปลงระเบิด หม้อแปลงที่อยู่หน้าบ้านอ่ะ"
            มันมีที่มาครับ ตอนที่มันระเบิดตู้มไป มันระเบิดไปสามรอบครับ (เรียกได้ว่าเล่นเกมยิงกันอยู่ มันได้มีอารมณ์ร่วมไปเลย เจอระเบิดจริง ไม่ใช่ละ) เพราะว่า กระรอก(บ้าเอ๊ย!!)มัน วิ่งผ่านสายไฟ (คงวิ่งกันสนุกเลยทีเดียว) วิ่งท่าไหนไม่รู้ (ไม่ได้ดู) ไปโดนสายไฟ (ท่าจะพันกันแล้วลัดวงจร) ก็เลยบึ้ม แต่... แต่กระรอกไม่ตาย -*- เง้อ.. โดนไฟช็อตซะขนาดนั้นยังไม่ตายอีก มันคงไม่เดือนร้อนละครับ แต่ผมเดือดร้อน ว๊ากก... เน็ตล่มไปเลย มันแจ๊กพอตตรงกับสายสัญญาณเน็ตที่บ้านเลย ก็เลยอดเล่น T^Tตอนนี้เลยพึ่งความเร็ว 56K ไปก่อน (จะไปฆ่ากระรอกมัน!!!~~ -*- )

           เกริ่นเรื่องนิดนึง จริงๆอยากทำเรื่องนี้ครับ เพราะว่าใช้ของเค้ามาเยอะละ ทั้ง search ทั้ง favorite ก็เลยต้องหัดทำบ้าง(ช่วยๆกัน เพราะหาว่าดูดอีก)  จริงๆแล้วโค๊ดที่ผมใช้ อาจจะไม่จำเป็นก็ได้ แต่อยากใช้กับบล็อกผมเอง เพราะว่าธีมบล็อกโหลดโหดมาก.. + ใครที่เข้าบ่อยน่าจะรู้ว่า เมนูขวามือมาก่อนเอนทรี่ซะอีก เรียกได้ว่า คนนอกเข้ามา นึกว่าโหลดเสร็จแล้วก็มี (แต่ไม่มีเนื้อหาเพราะโหลดอยู่) บล็อกนี้ลูกเล่นซะเยอะเลย ทั้งค้นหา ทั้ง favorite โดยโค๊ดที่ใช้ ได้ผ่านมือผม(เฮ้ย!! อย่าคิดลึก)  ไปแล้ว คริ คริ มีปัญหาอะไรลองถามได้แล้วกัน ตัวอย่างก็ดูบนบล็อกนี้ได้เลย (เห็นไม่ชัดกด Ctrl+F5 อีกรอบก็ได้) อยู่มุมซ้ายมือ

=================================================

สรรพคุณ(เหมือนยาเลย)

+ มันจะขึ้น Loading เป็นอันดับแรก (ตามที่เขียน) จนกว่าจะโหลดเสร็จหน้าต่างนั้นจึงจะหายไป
+ เมื่อขยับไป ที่ใดๆ มันก็จะตามไปด้วย เพื่อให้รู้ว่ายังโหลดไม่เสร็จ

คำแนะนำ(edit ให้หัวโตๆละ อ่านกันหน่อย)

+ Lite - สำหรับคนที่ขี้เกียจมากๆ (เหมาะสำหรับคนที่ต้องการใช้เวลาน้อย.. ) ให้อ่านกรอบสีฟ้าครับ
+ Advance - สำหร้บคนขยันหน่อย อ่านทั้งหมดเลยแล้วกัน (ไม่มีความรู้เรื่องนี้ก็อ่านได้นะ)

เข้าเรื่องดีกว่านะ

  • อันดับแรก เข้า CSS Editor(Manage -> Theme -> CSS Editor) แล้วใส่โค้ดตรงนี้ได้ล่างสุดครับ แก้ได้นะครับ เพราะใส่คอมเมนต์ให้แล้ว  
  • (คนใช้วิธีสีฟ้า ก็อปโค้ดนี้ใส่ CSS Editor ด้วยนะ ) 
/* Code Div Loading */
div.loading-invisible {
display:none;
}
div.loading-visible {  
position:absolute;   
display:block;   
top:0px;  
left:-10px;   
width:180px;                                       // ขนาดความกว้าง
text-align:center;  
background:#ffffff;                              // พื้นหลัง
border-top:1px solid #ddd; 
border-bottom:1px solid #ddd;  
filter:alpha(opacity=90);                      //ใส่ค่าขนาดความทึบ ทั้ง 3 บรรทัด
-moz-opacity:.90;   
opacity:.90;
}

 

<<ตัวอย่างตำแหน่งที่ใส่


อธิบายคำสั่ง (สำหรับหัวโปรแกรมเมอร์ ส่วนคนอื่นข้ามไปก็ได้ครับ -- สีฟ้าเลื่อนต่อไปด้านล่างที่กรอบสีฟ้าเลย)
position:absolute - กำหนดให้มันลอย(ออกจาก widget นั่นแหละ) <-- ไม่ต้องยุ่ง
display:block
- กำหนดให้เป็นรูปแบบ block
<-- ไม่ต้องยุ่ง
top:0px left:-10px - กำหนดให้ค่าที่อยู่บนหน้าจอห่างจากด้านบน (top) เท่าไร ห่างจากด้านซ้าย (left) เท่าไร ใส่ค่าเลขเอา (ไปทางขวา หรือ ล่าง ใส่ปกติ ไปทางซ้ายหรือด้านบน ใส่ - (ติดลบ) ไว้ด้านตัวเลข ดัดแปลงได้ ค่อยๆปรับทีละนิดนะ)
width:180px - ขนาดความกว้างครับ ของผม 180 pixel (ปรับได้ตามความเหมาะสม)
text-align:center;   - รูปแบบตัวอักษรตรงกลาง (center ตรงกลาง / left ซ้าย / right ขวา)
background:#ffffff;   - พื้นหลังของตาราง (กำหนดสีเป็น RGB Code เอา <-- RGB คืออะไร กูเกิ้ล ช่วยคุณไำด้ =w=)
border-top:1px solid #ddd; border-bottom:1px solid #ddd;  - เส้นขอบของตาราง
filter:alpha(opacity=90); 
-moz-opacity:.90;   opacity:.90; - ใส่ค่าขนาดความทึบ (โดย 100% เข้มเต็มที่ 0% จางเต็มที่ ลองปรับลดลงเรื่อยๆ)ใส่ให้เหมือนกันนะครับ เพราะว่ามี 3 คำสั่งทำมาเพื่อรองรับทุก browser ไง 

 

  •  copy คำสั่งนี้ใส่โปรแกรม notepad (หรือโปรแกรมอื่นๆ) เซฟไฟล์เป็น .js ครับ แล้วนำไฟล์ไปฝากไว้สักที่ เช่น skydrive ก็ได้
/* Loading Extension for Exteen 4 */
/* Modified By cartoonst : http://cstproject.exteen.com */

/* Loading code */
document.getElementById("loading").className = "loading-visible"; window.onload=function() { document.getElementById("loading").className = "loading-invisible";
}

/* Layer float code */
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function JSFX_FloatDiv(id, sx, sy) {
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
var px = document.layers ? "" : "px";
window[id + "_obj"] = el;
if(d.layers)el.style=el; el.cx = el.sx = sx;
el.cy = el.sy = sy;
el.sP=function(x,y){
this.style.left=x+px;
this.style.top=y+px;
};
el.floatIt=function() {
var pX, pY; pX = (this.sx >= 0) ? 0 : ns ? innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth; pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
if(this.sy<0) pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
this.cx += (pX + this.sx - this.cx)/8;this.cy += (pY + this.sy - this.cy)/8;
this.sP(this.cx, this.cy);
setTimeout(this.id + "_obj.floatIt()", 40);
}
return el;
}
JSFX_FloatDiv("divTopLeft", 10,30).floatIt();


คำสั่งนี้ไม่ขออธิบายนะ (มันยาว) ผมเอามาจากเว็บแห่งหนึ่ง หลายๆเว็บมายำกัน ^ ^ ;;;;;

  • ไปที่ Manage -> Theme -> Widget ขอรับ ก๊อปโค๊ดข้างบนไปยัดที่ Custom Code (แนะนำว่าลากไปด้านบนสุด เพราะว่ามันต้องโหลดเป็นอันดับแรกไง) ก็อปโค้ดได้เลย ทำไว้ให้แล้วที่กรอบสีฟ้า

ตรงสีเทาๆ ไปปรับเอาเองนะครับ
เทาๆบรรทัดที่ 1 - แก้ Loading เป็นอะไรก็ได้ ใส่รูปภาพก็ได้ (ถ้าเขียนคำสั่งเป็น) อ้าว.. ไม่เป็นเหรอ คำสั่งใส่รูปภาพก็ึืคือ <img src="ที่อยู่รูปภาพ" />
เทาๆบรรทัดที่ 2 - ใส่ที่อยู่ที่เซฟไฟล์ js ไว้เมื่อกี้ไง แก้เป็นของตัวเองซะ
บางคนอยากมีภาพประกอบ เช่น ก็ไปหาโหลดเอาได้ที่ http://www.ajaxload.info/

จะได้ประมาณนี้ครับ

"กด Save"

        เสร็จแล้วๆ ^ ^ ~* ลองไปปรับเข้ากับบล็อกของตัวเอง เป็นอย่างไร เล่าสู่กันฟัง(โฆษณาเว็บเค้าไม)ดู มีปัญหาก็ถามได้นะครับ เจอกันใหม่เอนทรี่หน้า ขอบคุณครับ (ปล. บล็อกมันร้อนอ่ะ สาดเยอะๆ ก็ดีนะ อิอิ)
        เออๆ จะว่าไป How to มันจะเริ่มเยอะไปละ เดี๋ยวหาอย่างอื่นลองทำดูดีกว่า

 Edit เพิ่ม อีกวิธีที่ง่ายๆ (แต่เสี่ยงนิดนึง) ก็คือ ก็อปโค้ดนี้ไปใส่ widget เท่านั้นแหละ
(อย่าลืมก็อปโค้ด CSS ไม่งั้นลอยแถวๆ widget แน่)

<div id="divTopLeft"     style="position:absolute">
<div id="loading" class="loading-invisible">
  <p><img src="http://cstproject.exteen.com/images/ajax-loader.gif" />  Loading...</p>
</div>
</div>
<script type="text/javascript" src="http://www.stbuurobot.co.cc/exteen_blog/cstproject/myjavablog.js"></script>

Thank Original Code : andrewpeace.com (Loading Code) ,  javascript-fx.com (Float Layer) ขอรับ ^ ^

ใครใช้ได้ผลหรือเป็นอย่างไรลองเล่าให้ฟังดูก็ได้นะ ขอบคุณทุกคอมเมนต์ครับ ^ ^

Comment

Comment:

Tweet

I constantly spent my half an hour to read this web site's posts daily along with a cup of coffee.

More: <a href="http://www.bestonlinecasinosworld.com">http://www.bestonlinecasinosworld.com</a>

#18 By I constantly spent my half an hour to read this web site's posts daily along with a cup of coffee. More: <a href="http://www.bestonlinecasinosworld.com">http://www.bestonlinecasinosworld.com</a> (89.73.66.160|89.73.66.160) on 2015-03-28 14:40

If some one wishes expert view regarding blogging and site-building then i suggest him/her to pay a quick visit this website, Keep up
the nice work.
More: <A HREF='http://www.bestonlinecasinosworld.com'>http://www.bestonlinecasinosworld.com</A>

#17 By If some one wishes expert view regarding blogging and site-building then i suggest him/her to pay a quick visit this website, Keep up the nice work. More: <A HREF='http://www.bestonlinecasinosworld.com'>http://www.bestonlinecasinosworld.com</A> (89.73.66.160|89.73.66.160) on 2015-03-26 04:28

ฮี่ๆ ใจนะ tongue

#16 By เกมส์ (114.128.179.187) on 2009-11-16 15:38

ขอบคุณมากจ้าที่แนะนำ >w<
จะลองเอาไปใช้ดูน๊า

ปล.อธิบายละเอียด และเข้าใจง่ายมากเลย

#15 By Cat dreams wanna fly. on 2009-05-01 09:51

เวิร์คค่าา....
ขอบคุณมากนะคะ

หาบลอกอย่างงี้มาตั้งนานแย้ว ^^
ขอ add favourite เลยนะค่าา... big smile

#14 By ~•INUAMI•~ on 2009-04-29 21:53

เอ่อ..อยากรู้ฝากไฟล์ ยังไงค่ะ ^^'' ยังงงๆอยู่เลย

อันอื่นทำได้อ่ะจ๊ะ แต่พอถึงตอนฝากไฟล์
= ='' มึน...

ขอแอดเลยแล้วกันค่ะ ยังไงก็ ems.มาบอกทีนะคะ

#13 By oDINSOULo on 2009-04-26 18:09

เยี่ยมมากเลยครับผม

#12 By kwamkid on 2009-04-24 15:36

ความรู้ใหม่ๆ ฮอตๆๆๆ

Hot! Hot! Hot! Hot! Hot!

#11 By Prae on 2009-04-14 22:54

น่าสนใจแหะ เดียวลองเอาไปใช้ละกัน

สาดนํ้าให้~

ขันน้ำ ขันน้ำ ขันน้ำ ขันน้ำ ดอกมะลิ

#10 By ~@!BukKen-Ito!@~ on 2009-04-12 18:03

Hot! Hot! ขันน้ำ ขันน้ำ ดอกมะลิ ดอกมะลิ
อ๊ากก ความรู้ใหม่ อิอิ
ขอบคุณมากค่า big smile

#9 By Z o r a ` on 2009-04-12 11:13

แล้วคำว่าไอ้โหลดดิ้งก็เลื่อนตามๆกันมา 55
Hot! ขันน้ำ ขันน้ำ ขันน้ำ ขันน้ำ ขันน้ำ ขันน้ำ

#8 By ลิงหกกะล้ม on 2009-04-11 19:33

Hot! ขันน้ำ ปืนฉีดน้ำ

อ่าน แล้ว งง แต่ โคตร เทพพ !!!

#7 By RoB-LighT on 2009-04-10 23:01

โฮกกกกกกกกก สุดยอดเลยครับ
ขอ+fav นะครับ

Hot! Hot! ขันน้ำ ขันน้ำ

#6 By r i j e -[a x k i z e l] on 2009-04-10 22:34

อย่างไรเหรอ ครับ คุณ sage_nu

#5 By cartoonst on 2009-04-10 22:30

เจ๋งดีนะคับ ;)
ว่าแต่กล่องข้อความที่อยุ่หลังจาก

" copy คำสั่งนี้ใส่โปรแ

#4 By sage_nu on 2009-04-10 22:16

ไว้จะลองทำดูนะครับbig smile

ขันน้ำ ขันน้ำ ขันน้ำ ขันน้ำ สาดให้หายร้อนconfused smile

#3 By UnknowPerson on 2009-04-10 22:13

ขอบคุณสำหรับทิปดี ๆ ค่ะ big smile

#2 By Daughter Of Sparda on 2009-04-10 21:59

สวยดีๆ
แต่ธีมบล็อกตัวเองยังไม่เสร็จดีเลยอ่ะนะ
แปะโป้ง add favไว้ แล้วเดี๋ยววันหลังจะลองขอไปทำเล่นดู

ปืนฉีดน้ำ ปืนฉีดน้ำ ปืนฉีดน้ำ เห็นHeadบ่นว่าร้อน big smile

#1 By ฅนตัวเล็ก on 2009-04-10 21:52