css เล่นมัลติพลายอย่างไรไม่ให้ตกข่าว

ก็เอาข่าวมาแปะหน้าบ้านเลยสิ อิอิ เล่นไปเหลือบตามองข่าวไป ทางขวาล่างอะเห็นปะครับ กล่องข่าว


วิธีทำนะครับ สำหรับผู้ที่อยากทำให้บ้านท่านรก และหน่วงเวป

1.ก่อนอื่นก็ต้องมีข่าว  หรือเวปข้อมูลอื่นแล้วแต่ความสนใจของท่าน 
เวปข่าวที่ผมเลือกคือ  http://news.googeek.com/   
เข้าไปแล้วท่านก็เลือกเลยว่าสนใจหัวข้อไหน แล้วก็ก้อปปี้ลิ้ง ที่เขียนคำว่า RSS ของหัวข้อนั้นมา
ในที่นี้ผมก้อปปี้มาได้ลิ้งนี้ครับ  http://news.googeek.com/xml/News.xml 
(ถ้าจะไปทำกับเวปอื่น ต้องหาเวปที่ลงท้ายด้วย xml)

มาถึงขั้นนี้ก้อปปี้โค้ด 1.เก็บไว้ก่อน


2.ได้ข่าวแล้วก็มาสร้างกล่องข้าว  เอ้ยกล่องข่าว
ไปที่เวปนี้  http://www.yourminis.com/minis/yourminis/yourminis/mini:rsscontainer   จะเห็นกล่องสีฟ้าๆให้ใส่ข้อมูล 
บรรทัดแรกเป็นหัวข้อกล่อง
บรรทัดสองเป็น แอดเดรสครับ   ให้เอาแอสเดรสที่ก้อบมาจาก โค้ด1.  แปะตรงนี้
ที่เหลือก็ปรับแต่งตามชอบใจ แล้วกด save ท่านจะได้หน้าตากล่องตัวอย่างมา 
สามารถปรับขนาดได้โดยลากเม้าที่มุมกล่องล่างขวา 
สามารถปรับสีสันกล่อง  ขนาดฟ้อน ได้ตามชอบใจ จากตัวเลือก ด้านบนขวาของกล่อง
สุดท้าย กด copy me  เลือกโค้ด embed ครับ

มาถึงขั้นนี้ก้อปปี้โค้ด 2.ที่ได้เก็บไว้ก่อน



3.หาที่วางไว้ที่มัลติพลาย
ท่านที่ต้องการวางไว้หน้าแรกในเวลคัมหรือ หน้าต่างใดๆ ก็นำโค้ด2.วางได้เลยตามปกติ

ท่านที่ต้องการให้ วางแล้วปรากฏอยู่ทุกหน้าของมัลติพลาย โปรดทำดังนี้
3.1 ก้อปปี้โค้ดต่อไปนี้ไปวางต่อท้ายใน css  (ก้อปปี้ จุด . ไปด้วยนะ)
สามารถปรับแต่ง ตำแหน่งการวางกล่องได้โดยเปลี่ยนตัวเลขในบรรทัด bottom และ right ครับ
ตัวเลขนั้นบอกว่า กล่องนี้จะวางห่างจากด้านขวาและจากด้านล่างเท่าไร

.widget1 {
background-color: transparent;
width: 160px;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000000;
}

วางเสร็จ เซฟ css ได้  ทางที่ดีควรแบ้กอัพ css ของท่านไว้ก่อน



3.2 ก้อปปี้ โค้ดนี้ไปวางใน ไตเติ้ลครับ  (ไปวางต่อจากของเดิมได้เลย  แนะนำว่าก้อปปี้ของเดิมไว้ก่อนกันหาย)
โดยนำโค้ด2. ที่เราได้มานั้นมาแทนที่ในช่องกลางบรรทัดข้างล่างนี้ก่อนนะครับ

<div class="widget1"><โค้ด2.></div>


ลอง 

ถ้าไม่มีอะไรผิดพลาด ก็เสร็จแล้วครับ  หากต้องการจะขยับกล่องก็ไปแก้ไขตัวเลขใน css ได้เลย

หมายเหตุ
1.อย่าลืมก้อปปี้ข้อมูลเก็บไว้ กันบ้านพัง
2.สามารถนำไปประยุกต์ใช้กับการวางรูป วิดเจต หรือ อื่นๆได้ โดยใช้หักการเดียวกัน
3.อ้างอิงและอ่านเพิ่มได้ที่นี่ http://multiplydesign.multiply.com/journal/item/94/Adding_a_Widget_Anywhere_on_Your_Page