Blogger: เมนูไอคอนรูปภาพที่เลื่อนเองตามเนื้อหา


เมนูไอคอนรูปภาพที่เลื่อนได้เองไปตามเนื้อหา (Floating Icons) ช่วยให้ไอคอนที่เราต้องการแสดงอยู่ในตำแหน่งที่ง่ายต่อการพบเห็นซึ่งทำได้ด้วยวิธีดังนี้

นำภาพเหล่านี้ใส่ในเมนูก็ได้


อธิบายเพิ่มเติม
โดยบทความนี้จะมีวิธีทำคล้ายกับการทำ "เมนู Facebook Like และ Google Plus ที่เลื่อนตามเนื้อหา" ในลิงก์ข้างล่างนี้
http://tip.maxlayout.com/2012/03/blogger-floating-menu-social-share.html
ซึ่งสามารถนำไอคอนจากทั้งสองบทความนี้มารวมอยู่ในเมนูอันเดียวกันก็ได้ครับ

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่ 'แม่แบบ > แก้ไข HTML'


ขั้นตอนที่ 2. วางเมนูไอคอน
โดยกด 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหาคำว่า
  </head>
จากนั้นให้แทนที่โค้ดที่หาเจอนั้นด้วยโค้ดข้างล่างนี้
  </head>
<div class='floating-menu'>
<!--Floating Menu Icons Start-->

<div>
<a href="http://www.facebook.com/maxlayout" target="_blank">
<img src="https://lh5.googleusercontent.com/-aBDEiq56FTY/T2FkbL5DegI/AAAAAAAAEOg/_4erx_c_2qg/s55/web2_490to55_FaceBook.png" />
</a></div>

<div>
<a href="http://feeds.feedburner.com/Tipmaxlayout" target="_blank">
<img src="https://lh5.googleusercontent.com/-ixPV-GMVsvs/T2FkbtGJ3iI/AAAAAAAAEOc/ATli8-vbu1w/s55/web2_490to55_Rss.png" />
</a></div>

<div>
<a href="http://twitter.com" target="_blank">
<img src="https://lh6.googleusercontent.com/-fdd_O6s9hoE/T2FkcMBcqbI/AAAAAAAAEOk/kvE9C_xSYVQ/s55/web2_490to55_Twitter.png" />
</a></div>

<div>
<a href="https://plus.google.com/108378280786875080944" target="_blank">
<img src="https://lh6.googleusercontent.com/-Eyp8W4TIlXM/T2Ft180lc1I/AAAAAAAAEQU/BKoeft_K8q0/s53/gplus-64to52-add-space.png" />
</a></div>

<!--Floating Menu Icons End-->
</div>
<style>
.floating-menu {
background: #ffffff;
border: 1px solid #c0c0c0;
padding: 5px;
position: fixed;
z-index: 10;
top: 100px;
left: 0;
}
</style>


อธิบายเพิ่มเติม 
เมนูอันนี้เป็นแบบชิดขอบจอด้านซ้าย ถ้าหากว่าใครชอบเมนูแบบชิดด้านขวาก็ให้เปลี่ยนโค้ดใน
'ขั้นตอนที่ 2 นี้ตรงบรรทัดที่ 3 นับขึ้นมาจากด้านล่างสุด'
จากโค้ดแบบเดิมที่เขียนไว้ว่า
left: 0;
ให้กลายเป็น
right: 0;


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


ขั้นตอนที่ 4. วิธีปรับเปลี่ยนเมนู และเพิ่มหรือลดจำนวนไอคอน
สำหรับการแก้ไขลิงก์ปลายทาง และการเพิ่มหรือลดจำนวนไอคอนให้สังเกตโค้ดในขั้นตอนที่ 2 จะพบว่า
โค้ดของไอคอนรูปภาพทั้งหมดจะเขียนอยู่ระหว่าง
<!--Floating Menu Icons Start-->
ไปจนถึง
<!--Floating Menu Icons End-->

โดยสังเกตว่าได้ว่าไอคอนแต่ละอันในเมนูนั้น จะมีโครงสร้างคือ
<div>
<a href="ลิงก์ปลายทาง" target="_blank">
<img src="ที่ตั้งของไอคอนรูปภาพ" />
</a></div>

ตัวอย่างเช่น
ถ้า "ลิงก์ปลายทาง" คือ
http://www.facebook.com/maxlayout 

และ "ที่ตั้งของไอคอนรูปภาพ" คือ
https://lh5.googleusercontent.com/-aBDEiq56FTY/T2FkbL5DegI/AAAAAAAAEOg/_4erx_c_2qg/s55/web2_490to55_FaceBook.png

ดังนั้นจะเขียนได้ว่า
<div>
<a href="http://www.facebook.com/maxlayout" target="_blank">
<img src="https://lh5.googleusercontent.com/-aBDEiq56FTY/T2FkbL5DegI/AAAAAAAAEOg/_4erx_c_2qg/s55/web2_490to55_FaceBook.png" />
</a></div>

เมื่อเข้าใจแล้วละก็ ถ้าต้องการเพิ่มหรือลดไอคอนในเมนูก็สามารถทำได้ตามต้องการ


อธิบายเพิ่มเติม
ถ้าต้องการแก้ไขลักษณะต่างๆ ของเมนุนี้ เช่น ระยะห่างจากขอบด้านบน หรือสีพื้นหลัง
ให้แก้ไขที่ส่วนท้ายของโค้ดในขั้นตอนที่ 2 ซึ่งเขียนไว้ว่า
<style>
.floating-menu {
background: #ffffff;
border: 1px solid #c0c0c0;
padding: 5px;
position: fixed;
z-index: 10;
top: 100px;
left: 0;
}
</style>


นอกจากนี้สามารถอ่าน
วิธีทำเมนูแบบลิงก์ด้วยรูปภาพที่ลิงก์นี้
http://tip.maxlayout.com/2010/03/menu-five-link.html
และวิธีจัดการลิงก์รูปภาพที่ลิงก์นี้
http://tip.maxlayout.com/2010/03/blogger_27.html

Credit: http://www.southernspeakers.net/2011/01/blogger-floating-icons.html

Post Status




5 ความคิดเห็น:

kimza กล่าวว่า...

ขอบคุณ ตรับ แจ๋ว จริงๆๆ

Archware กล่าวว่า...

อยากทราบว่าพอมีวิธีให้ภาพเลื่อนแบบ smooth ไหมครับ

Max กล่าวว่า...

ลักษณะการเคลื่อนที่ของไอคอนชุดนี้จะไม่ Smooth เนื่องจากเมนูตามวิธีในบทความนี้ เป็นเพียงการกำหนดสไตล์ให้ตำแหน่งอยู่คงที่หรือ Fixed โดยไม่ใช้สคริปต์ครับ

mona lisa กล่าวว่า...

ปรับสีพื้นหลังยังไงเหรอครับ?

Max กล่าวว่า...

ให้เขียนลงไปใน Style ได้เลยครับ
เช่นให้ลองแทนที่โค้ดที่เขียนไว้ว่า
.floating-menu {

ด้วยโค้ดใหม่ข้างล่างนี้
.floating-menu {
background: #ffffff;
border: 1px solid #c0c0c0;

โดยขณะนี้ผมได้นำตัวอย่างอันนี้เขียนเพิ่มลงในบทความแล้วครับ

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