Blogger: เมนูปุ่มถูกใจหรือแนะนำที่วิ่งตามเนื้อหา

แถบเมนูปุ่ม Facebook Like และ Google Plus One ที่เลื่อนตามเนื้อหาได้เองนั้นทำได้ด้วยวิธีดังนี้

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

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

---

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

<!--FMI_Facebook Start-->
<div>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=
http://www.facebook.com/maxlayout
&amp;send=false&amp;layout=box_count&amp;width=55&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=65' style='border:none; overflow:hidden; width:55px; height:65px;'/>
</div>
<!--FMI_Facebook Stop-->

<!--FMI_Googleplus Start-->
<div style='padding: 2px 0 4px 3px'>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone count='true' href='
https://plus.google.com/108378280786875080944
' size='tall'/>
</div>
<!--FMI_Googleplus Stop-->

<!--FMI_Twitter Start-->
<div>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="maxlayout">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<!--FMI_Twitter Stop-->

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

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

---

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

---

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

ปุ่ม Facebook Box Count
จะขึ้นต้นด้วย <!--FMI_Facebook Start-->
และสิ้นสุดที่ <!--FMI_Facebook Count Stop-->

ปุ่ม Google Plus One
จะขึ้นต้นด้วย <!--FMI_Googleplus Start-->
และสิ้นสุดที่ <!--FMI_Googleplus Stop-->

ปุ่ม Twitter Share
จะขึ้นต้นด้วย <!--FMI_Twitter Start-->
และสิ้นสุดที่ <!--FMI_Twitter Stop-->

ซึ่งสามารถแทนที่ได้เองตามต้องการด้วยวิธีดังข้างล่างนี้

---

อธิบายวิธีแก้ไขและแทนที่ปุ่ม Facebook Like Button

โค้ดของปุ่ม Facebook มีสามแบบให้เลือกใช้ได้โดยนำไปแทนที่โค้ดอันเดิมตั้งแต่
<!--FMI_Facebook Start--> ไปจนถึง <!--FMI_Facebook Stop--> โดยเลือกได้ดังนี้

แบบที่ 1 ปุ่มสำหรับกด Like เนื้อหาที่กำลังถูกเปิดอยู่ในขณะนั้น
<!--FMI_Facebook Start-->
<div>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:blog.url + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=65&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:65px;'/>
</div>
<!--FMI_Facebook Stop-->

แบบที่ 2 ปุ่มสำหรับกด Like ไปยังเป้าหมายสู่หน้าเว็บหรือ URL ที่เราต้องการ
<!--FMI_Facebook Start-->
<div>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=
http://www.facebook.com/maxlayout
&amp;send=false&amp;layout=box_count&amp;width=55&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=65' style='border:none; overflow:hidden; width:55px; height:65px;'/>
</div>
<!--FMI_Facebook Stop-->
โดยสำหรับปุ่ม Facebook Like ในแบบที่ 2 นี้ถ้าต้องการให้เป้าหมายของการ Like นั้นชี้ไปที่ URL ของเว็บใดก็ให้แก้โค้ดบรรทัดที่ 5 ที่เขียนไว้ว่า
http://www.facebook.com/maxlayout
ให้กลายเป็น URL ที่ต้องการได้เลย

แบบที่ 3 ปุ่ม Share เนื้อหาที่กำลังถูกเปิดอยู่
ซุึ่งปุ่มแชร์ที่ใส่ลงใน Floating Menu นี้จะมีการกำหนด URL ต่างไปจากชนิดที่ใส่ลงในส่วนบทความโดยเขียนได้ดังนี้
<!--FMI_Facebook Start-->
<div style='float:left;padding:0 0 8px;width:55px;height:65px;overflow:hidden;'>
<a expr:share_url='data:blog.url' href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<!--FMI_Facebook Stop-->

---

อธิบายวิธีแก้ไขและแทนที่ปุ่ม Google Plus One

โค้ดของปุ่ม Google Plus One มีสองแบบให้เลือกใช้ได้โดยนำไปแทนที่โค้ดอันเดิมตั้งแต่
<!--FMI_Googleplus Start--> ไปจนถึง <!--FMI_Googleplus Stop--> โดยเลือกได้ดังนี้

แบบที่ 1 ปุ่มสำหรับกด +1 ให้เนื้อหาที่กำลังถูกเปิดอยู่ในขณะนั้น
<!--FMI_Googleplus Start-->
<div style='padding: 2px 0 4px 3px'>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone count='true' size='tall'/>
</div>
<!--FMI_Googleplus Stop -->

แบบที่ 2 ปุ่มสำหรับกด +1 ไปยังเป้าหมายสู่หน้าเว็บหรือ URL ที่ต้องการ
<!--FMI_Googleplus Start-->
<div style='padding: 2px 0 4px 3px'>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone count='true' href='
https://plus.google.com/108378280786875080944
' size='tall'/>
</div>
<!--FMI_Googleplus Stop-->
โดยสำหรับปุ่ม Google Plus One ในแบบที่ 2 นี้ถ้าต้องการให้เป้าหมายของการ +1 นั้นชี้ไปที่ URL ของเว็บใดก็ให้แก้โค้ดบรรทัดที่ 5 ที่เขียนว่า
https://plus.google.com/108378280786875080944
ให้กลายเป็น URL ที่ต้องการได้เลย

---

อธิบายวิธีแก้ไขและแทนที่ปุ่ม Twitter Share

โค้ดของปุ่ม Twitter Share มีเริ่มอยู่ตั้งแต่
<!--FMI_Twitter Start--> ไปจนถึง <!--FMI_Twitter Stop--> โดยเลือกได้ดังนี้

สำหรับปุ่ม Twitter Share นั้นควรกำหนดค่าผู้ใช้ทวิตเตอร์เพื่อให้แสดงลิงก์แนะนำไปสู่หน้าที่คุณต้องการ
โดยแก้คำว่า
maxlayout
ที่อยู่ภายใน
data-via="maxlayout"
ซึ่งอยู่ในตำแหน่งถัดลงมา 2 บรรทัดนับจาก
<!--FMI_Twitter Start-->
ให้กลายเป็นชื่อผู้ใช้ทวิตเตอร์ที่ต้องการได้เลย

โดยตัวอย่างการแก้ไขเช่น
ถ้าหากที่ตั้งของหน้าทวิตเตอร์ของคุณคือ
https://twitter.com/maxlayout
ดังนั้นชื่อผู้ใช้ทวิตเตอร์ที่ต้องใส่ลงก็ไปคือ
maxlayout

ตัวอย่างผลของการตั้งค่า data-via ก่อนผู้ใช้ล็อคอินสู่ทวิตเตอร์

ตัวอย่างผลของการตั้งค่า data-via หลังจากทวีตเสร็จแล้ว

---

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