[How to] มาใส่ Loading ให้กับบล็อกกัน

posted on 10 Apr 2009 19:26 by cstproject in iT, Programmer

           สวัสดีครับ .. ^ ^ คิดถึงมากเลย เป็นไรไม่รู้ไปละ ไม่ได้อัพ 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) ขอรับ ^ ^

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