Open Multiple Windows in OneClick Link

บทความนี้ผมจะสอนให้สร้าง Tex Link ที่สามารถเปิดหลาย ๆ หน้าต่างภายในการคลิกเพียงครั้งเดียว ซึ่งสามารถทำได้โดยใช้จาวาสคริปต์อย่างง่าย และสามารถประยุกต์ไปใช้กับหัวเรื่องของบทความ Text Link ใน Menu bar ก็ได้

สอนทำบล็อก วิธีสร้างบล็อก วิธีทำ blogger blogspot


ปกติแล้วการสร้าง Text Link นั้นสามารถสร้างได้อย่างง่ายดายโดยใช้โค้ด

<a href="ใส่ URL ที่ต้องการ">ใส่ข้อความที่จะแสดงแทน Link</a>
และถ้าเราต้องการให้ลิงค์นี้เปิดในหน้าต่างใหม่เมื่อมีการคลิกก็เติมโค้ด target="_blank" ลงไป
<a href="ใส่ URL ที่ต้องการ" target="_blank">ใส่ข้อความที่จะแสดงแทน Link</a>


วิธีสร้าง Multiple window in OneClick

ถ้าคุณต้องการให้คลิกลิงค์แล้วเปิดหน้าต่างอื่นแถมหรือเพิ่มมาอีก 1 หน้าต่าง ก็เพิ่มโค้ด
onclick="window.open(&quot;URLที่2&quot;);"
ลงไปซึ่งจะได้โค้ดของ Link ที่ใช้เป็น
<a href="URLที่1" target="_blank" onclick="window.open(&quot;URLที่2&quot;);" >ข้อความ</a>

และถ้าต้องการให้ลิงค์มีการเปิดหน้าต่างแถมขึ้นมาอีก 2 หน้าต่าง (รวมแล้วเปิดครั้งเดียว 3 หน้าต่าง) ก็ให้เติมโค้ด
window.open(&quot;URLที่3&quot;);
ลงไปต่อจากโค้ดเดิมดังนี้
<a href="URLที่1" target="_blank" onclick="window.open(&quot;URLที่2&quot;);
window.open(&quot;URLที่3&quot;);" >ข้อความ</a>

โค้ดตัวอย่าง
<a href="http://www.mybloglog.com/buzz/community/hackublog" target="_blank" onclick="window.open(&quot;http://www.facebook.com/hackublog&quot;); window.open(&quot;http://www.twitter.com/hackublox&quot;);">Hackublog Community</a>
ทดสอบผลลัพธ์ครับ

จิ้มเลยครับ >> Hackublog Community

ส่วนท่านที่ต้องการให้เปิดครั้งเดียวมากกว่า 3 หน้าต่าง ลองไปคิดเป็นการบ้านว่าต้องเพิ่มโค้ดอย่างไร แต่ไม่ต้องทำมาส่งผมนะครับ (ที่ผมไม่ยกตัวอย่างกรณี 4 หน้าต่างให้ดูเพราะคิดว่ามันเยอะเกินไป คนคลิกจะเกิดความรำคาญได้)
ลองทำดูนะครับ ในบทความต่อ ๆ ไปผมก็จะนำวิธีนี้ไปขยายผลกับหัวเรื่องของบทความ และ Link ของ Menu bar ให้ดูครับ สวัสดีครับ

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

  1. โอ้ว ใช้งานได้ดีมากมายเลยคับพี่HackBlog
    ปล.ขอบคุณมากมายคับพี่ ที่แนะนำบทความดีๆๆแบบนี้ ให้สู่คนไม่มีความรู้คับ เป็นกำลังใจให้คับ สู้ๆๆ

  1. @AngelofDeath: เขียนให้ตามคำขอแล้วนะครับ ว่าแต่มีชื่อเล่นไหมครับจะได้เรียกกันง่ายขึ้นครับ

  1. พี่ Hack คับ ลบกวน ขอถามหน่อยคับ คือถ้าเราต้องการ ให้ คลิีกที่ลิ้ง ของบทความ แล้ว เด้งไปที่หน้าต่างใหม่
    จะต้องใช้code แบบนี้ช่ายไม๊คับ <a href="ใส่ URL ที่ต้องการ" target="_blank">ใส่ข้อความ ที่จะแสดงแทน Link</a>
    แต่ถ้าเราอยากจะให้ คลิีกแล้ว เด้ง ที่หน้าต่างให้ แล้ว นับเวลาถอยหลัง10วินาที แล้วก็จะเปลี่ยนเป็นอีก เวปนึง จะต้องแก้ code ยังไงหรอคับ
    ปล.กลัวพี่งง ก็คือ หลังจากคลิ๊กที่ลิ้ง แล้ว ก็จะเด้งไปที่หน้าเวปใหม่ใช้ไม่คับ แล้วอยากจะให้ หน้าเวปที่เด้งมาเนี่ย นับเวลาถอยหลัง10วินาที หลังจากครบ10วินาทีแล้วก็จะเปลี่ยน เป็นอีกเวป1 พอจะมีวิธีแก้ code บ้างไม๊คับ
    ด้วยความนับถือ ขอบคุณคับพี่

  1. @AngelofDeath:เอาโค้ดนี้ไปใส่ในเว็บที่ 2 ครับ
    <b:if cond='data:blog.url == "ใส่ URL เว็บที่ 2"'>
    <meta content='10; url=ใส่ URL เว็บที่ 3' http-equiv='refresh'/>
    </b:if>

    เลข 10 เปลี่ยนเป็นเลขที่ต้องการได้ครับ

  1. You can also try this great url opener tool http://directory.fm/url_opener.html

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

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

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