สร้างกระดานข่าว (Scroll News) ง่าย ๆ ด้วย JQuery

สัวสดีสมาชิกทุกคนนะครับ หลังจากที่ได้เขียนมาหลายบทความแล้ว บทความหลังๆ นี้ก็จะยกระดับความยากขึ้นเล็กน้อย ถ้าท่านใดเพิ่งเริ่มต้นทำบล็อกก็แนะนำให้เริ่มอ่านบทความในหมวดหมู่ “basic” ก่อนนะครับ เพราะถ้าเริ่มต้นเข้ามาเจอกับบทความนี้ก้อาจจะงงกับวิธีอธิบายเล็กน้อย

สำหรับบทความนี้ผมมีลูกเล่นที่น่าสนใจอีกอย่างมาแนะนำ ซึ่งก็คือ การสร้างกระดานข่าวแบบ เลื่อนได้ (Scroll News) ที่สามารถติดตั้งบน blogger ได้อย่างง่ายดาย

สำหรับตัวอย่างสามารถดูได้จากหน้าแรกของบล็อกนี้หรือดูจากรูปด้านล่างนี้ก็ได้ครับ

สอนทำบล็อก

ก่อนเริ่มทำการแก้ไขใดๆ ใน template ควรจะ back up แม่แบบ (template) เก็บไว้ก่อนเสมอนะครับ เพราะถ้ามีอะไรผิดพลาดก็ อัปโหลดขึ้นมาใหม่ทุกอย่างจะเป็นปกติเหมือนเดิม วิธีการ back up ดูที่นี่

วิธีติดตั้ง

ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ไม่ต้องคลิกขยายแม่แบบเครื่องมือ!

ขั้นที่ 1 ขั้นนี้เป็นการติดตั้ง CSS code เพื่อกำหนดหน้าตาของกระดานข่าว
 
ให้ค้นหาโค้ด ]]></b:skin> แล้วแทนที่ด้วยโค้ดต่อไปนี้ครับ


/* Scroll news for blogger Modify by Hackublog */

#ticker {   
width:180px; /* ควรปรับค่าความกว้างให้ตรงกับความกว้างของตำแหน่งที่ติดตั้ง*/
height:300px; /* ปรับความสูงตามใจชอบครับ*/  
overflow:auto; 
border:1px solid #aaaaaa;   
}    
#ticker dt {    
font:normal 14px Georgia; 
padding:0 10px 5px 10px;   
background-color:#e5e5e5; padding-top:10px; border:1px solid #ffffff;    
border-bottom:none; border-right:none;    
}    
#ticker dd {    
margin-left:0; font:normal 11px Verdana; padding:0 10px 10px 10px;    
border-bottom:1px solid #aaaaaa; background-color:#e5e5e5;    
border-left:1px solid #ffffff;    
}    
#ticker dd.last { border-bottom:1px solid #ffffff;} 
#ticker div { margin-top:0; }  /* Fix IE */

]]></b:skin>


ขั้นที่ 2 เป็นขั้นการเรียกใช้ Java script ของ JQuery ให้กล่องข้อความเกิด even ทำโดย
ค้นหาโค้ด </head> แล้วแทนที่ด้วยโค้ดต่อไปนี้ แล้วบันทึกแม่แบบได้เลยครับ


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>    
<script type='text/javascript'>    
$(function() {    
//cache the ticker    
var ticker = $(&quot;#ticker&quot;);    
//wrap dt:dd pairs in divs    
ticker.children().filter(&quot;dt&quot;).each(function() {    
var dt = $(this),    
container = $(&quot;&lt;div&gt;&quot;);    
dt.next().appendTo(container);    
dt.prependTo(container);    
container.appendTo(ticker);    
});    
//hide the scrollbar    
ticker.css(&quot;overflow&quot;, &quot;hidden&quot;);    
//animator function    
function animator(currentItem) {    
//work out new anim duration    
var distance = currentItem.height();    
duration = (distance + parseInt(currentItem.css(&quot;marginTop&quot;))) / 0.025;    
//animate the first child of the ticker    
currentItem.animate({ marginTop: -distance }, duration, &quot;linear&quot;, function() {    
//move current item to the bottom    
currentItem.appendTo(currentItem.parent()).css(&quot;marginTop&quot;, 0);    
//recurse    
animator(currentItem.parent().children(&quot;:first&quot;));    
});    
};    
//start the ticker    
animator(ticker.children(&quot;:first&quot;));    
//set mouseenter    
ticker.mouseenter(function() {    
//stop current animation    
ticker.children().stop();    
});    
//set mouseleave    
ticker.mouseleave(function() {    
//resume animation    
animator(ticker.children(&quot;:first&quot;));    
});    
});    
</script>

</head>


หมายเหตุ ถ้าใน Temmplate หรือ Gadget ของท่านได้เคยติดตั้ง jquery เวอร์ชัน 1.3.2.min ไปแล้วก็ไม่จำเป็นต้องติดตั้งเพิ่มอีก นั่นคือเราสามารถลบโค้ด

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
ในขั้นที่ 2 ทิ้งไปได้เลยครับ

ขั้นที่ 3 ระบุตำแหน่ง/เรียกใช้ ด้วย HTML ทำโดย
ไปที่แผงควบคุม >> รูปแบบ >> องค์ประกอบหน้า >> Add Gadget ชนิด HTML จาวาสคริปต์ แล้ววางโค้ดต่อไปนี้ลงไป บันทึกและดูผลงานครับ

<dl id="ticker">   
  <dt>หัวข้อที่1</dt><dd>วาง ข้อความ,รูปภาพ,Videos หรือ Links ที่นี่</dd>    
  <dt>หัวข้อที่2</dt><dd>วาง ข้อความ,รูปภาพ,Videos หรือ Links ที่นี่</dd>    
  <dt>หัวข้อที่3</dt><dd>วาง ข้อความ,รูปภาพ,Videos หรือ Links ที่นี่</dd>    
  <dt>หัวข้อที่4</dt><dd>วาง ข้อความ,รูปภาพ,Videos หรือ Links ที่นี่</dd>    
  <dt>หัวข้อที่5</dt><dd>วาง ข้อความ,รูปภาพ,Videos หรือ Links ที่นี่</dd>    
</dl>

เมื่อจบขั้นที่ 3 ถือว่าการติดตั้งสำเร็จแล้วครับ แต่ยังคงต้องแก้ไขให้เป็นแบบฉบับของคุณเองโดยอาจจะเพิ่มข้อความ / รูปภาพ / วีดีโอ / ลิงค์ / HTML อื่นๆ ในส่วนต่อไปนี้จึงเป็นการอธิบายแนวทางการแก้ไขและมีโค้ดตัวอย่างให้เอาไปทดลองดูก่อนครับ


แนวทางการแก้ไข

1. ถ้าต้องการใสข้อความปกติ

<dt>ใส่หัวข้อ</dt><dd>พิมพ์ข้อความที่ต้องการ</dd>

2. ตัวอย่างโค้ด ข้อความที่มี link เชื่อมโยง

<dt>ใส่หัวข้อ</dt><dd><a href="ใส่ลิงค์">ข้อความที่จะแสดง</a></dd>

3. ตัวอย่างโค้ดเมื่อต้องการใส่รูป

<dt>ใส่หัวข้อ</dt><dd><a href="link ที่ต้องการเชื่อมโยง" ><img alt="" src="ใส่ URL ของรูป" width="200" height="150"/></a></dd>

4. ตัวอย่างโค้ดการใส่รูปโดยไม่มี link เชื่อมโยง

<dt>ใส่หัวข้อ</dt><dd><img alt="" src="ใส่ URL ของรูป" width="200" height="150" /></dd>

5. ตัวอย่างการใส่โค้ดวีดีโอ



หมายเหตุ สำหรับโค้ด video จาก youtube จะต้องดัดแปลงโค้ดเล็กน้อย มิฉะนั้น จอของวีดีโอจะเลยออกมานอกกรอบ

โดยแก้คำว่า allowFullScreen เป็น wmode
และเปลี่ยนค่า "true" ของallowFullScreen ให้เป็น "transparent"

6. ตัวอย่างการใส่ HTML โค้ด
<dt>ใส่หัวข้อ</dt><dd>วาง HTML โค้ดตรงนี้ได้เลยครับ</dd>

และถ้าใครอยากทดลองโดยยังไม่อยากปรับแก้ก็เอาโค้ดนี้ไปทดลองก่อนครับ

โค้ดตัวอย่าง

<dl id="ticker"> 
<dt>TEXT</dt><dd>Text,Images,Videos or Links here</dd>

<dt>LINK</dt><dd><a href='http://hackublog.blogspot.com'>Hackublog</a></dd>

<dt>IMAGE</dt><dd><img alt="" width="185" src='http://upic.me/i/dj/8iua1.jpg' height="150"/></dd>

<dt>VIDEO</dt><dd>&lt;object width="185" height="150"&gt;&lt;param value='http://www.youtube.com/v/ysSxxIqKNN0&hl=en_US&fs=1&' name="movie"/&gt;&lt;param value="transparent" name="wmode"/&gt;&lt;param value="always" name="allowscriptaccess"/&gt;&lt;embed allowscriptaccess="always" width="185" src='http://www.youtube.com/v/ysSxxIqKNN0&hl=en_US&fs=1&' wmode="transparent" height="150" type="application/x-shockwave-flash"&gt;&lt;/embed&gt;&lt;/object&gt;</dd>

<dt>IMG & LINK</dt><dd><a href='http://hackublog.blogspot.com' ><img alt="" width="185" src='http://upic.me/i/dj/8iua1.jpg' height="150"/></a></dd> 
</dl>

หากยังมีข้อสงสัยสามารถสอบถามที่กล่องข้อความด้านล่างหรือกล่องสนทนาในหน้าแรกได้เลยครับได้เลยครับผม

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

  1. พี่ Hack ครับ คือผมอยากทำ Slide แบบหน้าเว็บ www.mthai.com อ่ะครับ พี่ช่วยเขียนบทความเกี่ยวกับการทำ slide แบบนี้ได้มั้ยครับ คือเอา label ไว้ที่ส่วนหัว และเอาโพสล่าสุดของแต่ละ label ไว้ด้านข้างอ่ะครับ ผมจะเอามาประยุกต์กับ blog ผมอ่ะครับ > http://9professionaltrader.blogspot.com

  1. ผมมีปัญหาอยู่ว่า
    หลังจากใส่โค้ค slide ตัวนี้ (ใช้ได้)
    ทำให้ slide ตัวที่มีอยู่ก่อน ที่มาพร้อมกับ Template
    กลับค้างไม่ทำงานอะครับ แก้ยังไงดี

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

  1. ขอบคุณมากค่ะ
    สอบถามเพิ่มนิดนึงนะคะ ถ้าอยากให้พื้นหน้าสุดท้ายเป็นรูปภาพแทนเป็นแบบสี จะเพิ่มโค๊ดแบบไหนคะ

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

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

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