วิธีสร้าง WelCome Page บน Blogger

สอนทำบล็อก
บทความนี้ผมจะสอน Hack Blogger ให้มี Welcome Page หรือจะเรียกอีกอย่างหนึ่งว่า Splash Page ซึ่งน่าจะเคยเห็นอยู่ตามเว็บไซต์ทั่วไป และคงอยากให้มีใน Blogger บ้าง

Feature ของ Gadget ชนิดนี้คือแสดงเป็น Lightbox เพียงครั้งเดียวที่เปิดหน้าแรก ส่วนในการเปิดครั้งถัดไปจะไม่แสดงผล ผู้เข้าชมจะต้องคลิก Enter ก่อนจึงจะเข้าถึง Page ของบล็อกคุณได้ และในการติดตั้งใช้จาวาสคริปต์เพียงเล็กน้อยเท่านั้นจึงไม่ส่งผลต่อการโหลดหน้าบล็อกของคุณให้ช้าลง

สำหรับผลลัพธ์ที่ได้จากการทำตามบทความนี้สามารถดูได้ที่
http://hackudesign.blogspot.com

ขั้นตอนการติดตั้ง Welcome Page

ขั้นที่ 1 สร้างพื้นที่สำหรับ WelCome Page
เริ่มต้น Log in เข้าไปที่ blogger.com >> รูปแบบ >> แก้ไข HTML

สอนทำ blospot วิธีทำ blogger

ค้นหาโค้ด <body> แล้ววางโค้ดต่อไปนี้ต่อจากโค้ดดังกล่าว  และทำการบันทึกแม่แบบ

<!-- Welcome page Start hacked By http://www.hackublog.com -->
<div id='welcome-wrapper'>
<b:section class='welcome' id='welcome' showaddelement='no'>
<b:widget id='HTML77' locked='false' title='Edit title Here' type='HTML'/>
<b:widget id='HTML88' locked='false' title='' type='HTML'/>
</b:section>
</div>
<!-- Welcome page End -->

ขั้นที่ 2 ใส่ข้อความต้อนรับและใส่ จาวาสคริปต์เพื่อให้ข้อความทำงาน
จากขั้นที่ 1 คลิกที่องค์ประกอบของหน้า ซึ่งคุณจะเห็น Gadget ปรากฎอยู่ 2 Gadget คือ HTML77 Gadget และ HTML 88 Gadget

ทำบล็อก
ในส่วน HTML77 Gadget ให้ใส่ข้อความต้อนรับหรือใส่รูปภาพที่ต้องการและบันทึก

ตัวอย่างโค้ด
<img src="http://upic.me/i/z0/welcome.png" title="hackublog.com" />
<!--ใส่ข้อความต้อนรับตรงนี้ -->
คุณสามารถเปลี่ยน URL สีแดงเป็น URL รูปภาพของคุณเองได้ตามต้องการ

และในส่วน HTML88 Gadget ให้ใส่โค้ดต่อไปนี้ลงไปและบันทึก
<!-- Welcome page Start by http://www.hackublog.com  -->
<!-- CSS part -->
<style type='text/css'>
#welcome-wrapper{width:60%;margin:0 auto;height:0px;text-align:center;font-family:Arial,Helvetica,serif;font-variant:small-caps;text-shadow:0.5px 0.5px 0.5px #ffffff;}
/* welcome message widget */
#HTML77, #EPEntryButton, #EPGrab {position:relative;z-index:510;top:100px;}
#HTML77 {background-color:#fff;border:solid 10px #FFA500;color:#222;display:none;padding:15px;font-size:14px;}
#HTML77 h2{display:none;}
#HTML77 img{width:200px;height:200px;margin:10px;float:left}
#HTML88 {display:none;}
/* DarkLayer div */
#EPDarkLayer {background-color:#000;opacity:0.6;filter:alpha(opacity=60);top:0px;left:0px;z-index:500;position:fixed;}
/* Entry button*/
#EPEntryButton {background-color:#D7D7D7;border: 2px solid #000;color:#333;cursor:pointer;font-size:20px;padding:5px;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;}
</style>
<!--[if IE]>
<style>
#EPDarkLayer {position:absolute;}
</style>
<![endif]-->

<!-- HTML part -->
<div style="padding-top:15px;"> <a id="EPEntryButton" onclick="document.getElementById(&quot;HTML88&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;HTML77&quot;).style.display=&quot;none&quot;">Enter</a> </div> <div id="EPDarkLayer">
</div>

<!-- Javascript part -->
<script type="text/javascript">
YourBlogUrl="http://hackublog.blogspot.com/"; //enter your blog url here
fromInternal=document.referrer.search(YourBlogUrl); //check come from where
getDarkLayer=document.getElementById("EPDarkLayer").style;
getHTML77=document.getElementById("HTML77").style;
getHTML88=document.getElementById("HTML88").style;
if (fromInternal == -1)
{ //if visitor comes from external page
getDarkLayer.width=screen.availWidth+"px"; //set DarkLayer width
getDarkLayer.height=screen.availHeight*2+"px"; //set DarkLayer height
getHTML88.display="block"; //show DarkLayer
getHTML77.display="block"; //show message
}
else
{ //if visitor comes from internal page
getHTML88.display="none"; //hide HTML gadget
getHTML77.display="none"; //hide message
}
</script>
<!-- Welcome page End -->

คำว่า Enter สามารถเปลี่ยนเป็นคำอื่นได้ตามใจชอบ
และให้เปลี่ยน http://hackublog.blogspot.com/ เป็น URL ของบล็อกที่ทำการติดตั้ง Hack นี้

เมื่อดำเนินการ 2 ขั้นตอนนี้เสร็จสิ้น คุณก็จะได้หน้า Welcome แบบมืออาชีพ บนบล็อกของคุณแล้วครับ สุดท้ายหากคุณชอบบทความนี้อย่าลืมบอกต่อด้วยนะครับ ขอบคุณครับ

ตอนนี้มีความคิดเห็น : 33 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. นำโค้ดไปวางและบันทึกแม่แบบแล้ว แต่ว่าไม่ขึ้น gadget ค่ะ
    หรือถ้าเราเอา template สำเร็จมาใช้ จะมีส่วนเกี่ยวมั้ยคะ ที่จะไม่ขึ้น gadget 2 อันนี้
    ช่วยชี้แนะด้วย

  1. @ คุณ up2funclub : ไม่ทราบว่าวางโค้ด HTML ในขั้นที่ 1 ถูกตำแหน่งหรือไม่ คือจะต้องวางเอาไว้ถัดจาก <body> นะครับ

  1. วางตามแล้วค่ะ แต่เวลากลับไปลบโค้ดออก มันก้อถามนะคะว่าจะให้เก็บ gadget html 77 html 88 ไว้รึเปล่า แต่ตอนทำกลับมองไม่เห็นว่ามี gadget ไหนเพิ่มขึ้นมาเลย

  1. @ คุณ up2funclub : งั้นผมจะปรับปรุงวิธีให้ใหม่นะครับ ลองทำตามดูอีกครั้งครับ

  1. เจ๋งมากครับลองทำแล้ว แต่เวลาเปลี่ยนหน้ามันกับแสดงทุกหน้าเลยครับมีวิธีแก้ใหม

  1. ทำได้แล้วค่ะ ขอบคุณมากๆเลย

  1. @ ardulb : คุณต้องเปลี่ยนชื่อบล็อกด้วยครับ

  1. เวลาเปลี่ยนหน้า มันมาตลอดเลยครับ...ชื่อบล็อกก็เปลี่ยนแล้วครับ...งงง
    ขอบคุณครับ
    http://fr-phakk.blogspot.com/

  1. เออได้แล้วครับ
    พบว่ายังไม่ได้เปลี่ยนชื่อบล็อกอีกที่หนึ่ง
    ของคุณครับ

  1. ขอบคุณคร้าบบบ

  1. เย้้...ทำได้แล้วค่ะ ขอบคุณมากค่ะ

  1. ทำตามได้แล้วครับ แต่wibiya toolbar ไม่ยอมไปอยู่ข้างหลังdark layerอ่ะครับ จะต้องเอาscriptของtoolbar ไปไว้ตรงไหนครับ

  1. @ คุณบงกช : เ้พิ่มค่า z-index:500; ในสคริปต์ให้เยอะขึ้นครับ เช่น z-index:9999; ถ้ายังไม่ได้ก็เพิ่มไปเรื่อย ๆ ครับ

  1. ได้แล้วครับ ขอบคุณมากครับ

  1. อยากให้ภาพมีขนาดใหญ่อีกนิด อยู่ตรงกลาง เพราะไม่ต้องการใส่ข้อความ ไม่ทราบว่าทำได้ไหมครับ

  1. ใช้โค้ดในขั้นที่ 2 เป็น


    <center><img src="http://upic.me/i/z0/welcome.png" title="hackublog.com" /></center>

    และแก้โค้ดในขั้นที่ 2 จากบรรทัดนี้
    #HTML77 img{width:200px;height:200px;margin:10px;float:left}

    แก้เป็น
    #HTML77 img{width:500px;height:500px;margin:10px;}

    ปรับตัวเลข 500 ได้ตามใจชอบครับ

  1. เย้.. (อีกคน) ทำได้แล้วครับ แจ๋มมากเลย
    แต่ตอนนี้กำลังมีปัญหากับ IE ที่แสดงผลเน่า ทั้งที่ Chrome โอเคอยู่
    ขอบคุณมากๆครับ

  1. รบกวนหน่อยค่ะ ลงแล้วค่ะแต่มันมีกรอบสีเหลองด้วยอ่ะคะ เวลาย่อม่อยุต้องกลางด้วย ทามยังไงถ็จะเอากรอบสีเหลือง เอาวั้ยแต่รูปกับ enter อย่างเด๋วอะคะ รบกวนหน่อยนะคะ

  1. สวัสดีค่ะ
    มีปัญหานิดหน่อยจะสอบถามค่ะ พอดีว่า นัทลองเอาโค้ดนี้ไปใช้
    ก็ใช้งานได้ปกติ แต่พอทดลองคอมเม้นต์ในบทความ มันจะเด้งตลอดเลย
    ไม่ทราบว่ามีวิธีแก้มั้ยคะ ขอบคุณค่ะ

  1. @do little : ต้องเปลี่ยนโค้ด http://hackublog.blogspot.com/ เป็น URL บล็อกตัวเองด้วยนะครับ

  1. เปลี่ยนแล้วค่ะ ทั้งสองอันเลย แต่ก็ยังเป็น ;__;
    คือมันปกติทุกอย่าง แต่เวลาคอมเม้นมันจะเด้งค่ะ
    ว่าจะเอาออกก็เสียดาย มันดีมากเลยค่ะ
    ขอบคุณมากนะคะ

  1. ทามมัยในบล็อกขอผมม่ายมี < body> อ่ะ มีแต่ < /body> ผมลองค้นหาโดยกด Ctrl+f แล้วน่ะแต่ก็ไม่มีอ่ะคับ พอช่วยอะไรได้ไหมอ่ะคับ

  1. @chirapat: ต้องมีนะครับเพราะ <body> เป็นองค์ประกอบพื้นฐานของโค้ดภาษา HTML ในการเขียนเว็บ หาดี ๆ ครับ

  1. มีแต่< body expr:class='"loading" + data:blog.mobileClass'> อ่ะคับ

  1. ok คับพี่ในบล็อกผมเป็นโค้ด < body expr:class='"loading" + data:blog.mobileClass'> นี้ ถ้าหาแค่< body จะเจอ ขอบคุณมากเลยคับ

  1. ใน IE ตำแหน่งเพี้ยนและก็ขึ้นทุกหน้าเลยครับ แต่ FF กับ Chrome ปกติ จะแก้ไงครับ หรือว่าแก้ไม่ได้เป็นที่ Browser รึเปล่าครับ

  1. ขอบคุณมากครับ ไว้ว่างๆจะเอาไปใช้ ( ถ้ามีโอกาส )

  1. ทำไมของผมไม่มี&amp;amp;amp;amp;lt;body&amp;amp;amp;amp;gt;ล่ะครับ

  1. ผมทำอันนี้ไ่ม่ได้อ่ครับ อันดับแรกเลย ในเทมเพทของผม หา body ไม่เจอะครับ ทำงัยดีครับ

  1. ผมทำได้แล้วครับ(ตอนแรกหา <body> ไม่เจอะเพราะไม่อ่านให้ทั่วก่อน) เลยเอาลิ้งค์มาแปะได้ดูครับ เว็บยังไม่เสร็จนะครับ ปรับไปเรื่อยๆ ขอบคุณเว็บไซต์นี้มากครับ
    http://ideadodee.blogspot.com/

  1. รายงานความคืบหน้าครับ ปรากฏว่า มีปัญหาในการแสดงผลบน IE ครับ เลยต้องถอดออก

  1. ลองทำแล้วเยอะมาก งงๆ มีแบบง่ายกว่านี้มั๊ยครับ

  1. หาโค๊ดbody ไม่เจออ่าครับ กด ctrl+f ค้นหาก็ไม่เจออ่าครับ ไม่ทรายว่ามันอยู่แถวไหนครับ

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel