สอนติด Facebook Pop Out Like Box



   การแต่งบล็อกต้องอาศัยทักษะทางการใช้ภาษา Html หรือ JavaScrip พอสมควร หากไม่ค่อยมีทักษะก็ไม่ต้องกังวล เพราะบล็อกเซอร์ จะสอนให้อย่างละเอียดยิบๆ เลยทีเดียว บทความนี้จะพูดถึง Plugin Facebook ที่เอาไว้ให้ดูกันว่า เพจใน Facebook ของเรามีใครมากด Like บ้าง วิธีการติดกล่องนี้ ก็ยุ่งยากนิดหน่อย ตั้งสมาธิให้ดี แล้วค่อยๆ ทำตาม บล็อกเซอร์ไปนะ

1. ก่อนอื่น เป็นการสำรองข้อมูลแม่แบบของเราไว้ก่อน เพื่อกันพลาดถ้าหากเราไปแก้ไข Html แล้วมัน Error ดูการสำรองข้อมูลแม่แบบที่นี่

2. ก่อนที่จะนำป้าย Facebook มาใส่ในบล็อคได้ เราต้องมี Code ติดตั้ง Plugin ก่อน ถ้าไม่ทำ ป้าย Facebook ก็จะไม่ทำงาน วิธีการคือ ไปที่เมนู แม่แบบ แล้ว Click ที่ แก้ไข HTML

3. จะมีหน้าต่างขึ้นมาเตือน ก็ให้ Click ที่ ดำเนินการ

4. Click ให้มีเครื่องหมายถูกหน้าข้อความขยายเทมเพลตวิดเจ็ต

5. ให้ทำการ หาโค้ดคำนี้ </head> ถ้าให้หาด้วยตาเปล่าจะตาลายมากก่อนจะเจอ วิธีการหาได้อย่างรวดเร็วคือการ กด Control และ F (เครื่อง Mac Command+F) พร้อมๆ กัน จะขึ้นหน้าต่างให้พิมพ์อยู่ข้างบน ก็พิมพ์คำว่า </head> ลงไปในช่อง เมื่อเจอแล้วจะมีแถบสีเหลืองขึ้นมาบอกตำแหน่ง

6. เมื่อเจอแล้ว ให้นำ Code นี้

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

มาใส่ไว้หน้า  </head> วางเสร็จแล้ว ก็ Click บันทึกเทมเพลต

7. ให้ไปที่เมนู รูปแบบ และ Click ที่ เพิ่ม Gadget

8. Click ที่เครื่องหมายบวก ที่ HTML/จาวาสคริปต์ เพื่อเพิ่มกล่อง ใส่ Code

9. นำโค้ดนี้ใส่ไปในช่อง เนื้อหา

<script type="text/javascript">//<!--$(document).ready(function() {$(".jnslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});//--></script><style type="text/css">.jnslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh4UfpEJypA8UrbqA75WwnFHxMIHwZjZxKjFQ9cWqTVXB1ZM4_PZ3JIFqqaBBRU1GK9FqErtDeiuPLAYGTQ12laOwnk5EZCzd9C1hOLgFHt1eiefLoV8AGkBt2hRyVp8aNwiY1ngmy3g/s1600/%255Bwww.justnaira.com%255Dfacebookbadge.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}.jnslikebox div{border:none;position:relative;display:block;}.jnslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}.jnslikebox span a{color: #808080;text-decoration:none;}.jnslikebox span a:hover{text-decoration:underline;}</style><div class="jnslikebox" style=""><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=https://URL Facebook&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>By <a href="http://boxbeautys.blogspot.com">Box Beautys</a></span></div></div>

วางเสร็จแล้วต้องนำ URL ของ Facebook มาใส่แทนตัวหนังสือสีแดง เป็นอันเรียบร้อย

 

3 thoughts on “สอนติด Facebook Pop Out Like Box

  1. พี่ครับ ทำไมของผมมันไม่เลื่อนซ้ายเลื่อนขวาอะครับ

    ReplyDelete
  2. ผมมันไม่เลื่อนซ้ายเลื่อนขวา ไม่เป็นไรหาให้ครับ
    http://helplogger.blogspot.com/2012/04/add-static-facebook-pop-out-like-box.html
    <<>>

    ReplyDelete
    Replies
    1. ช่วยกดปุ่มถูกใจหน่อย คลิก https://www.facebook.com/wassaponcartoon นะขอบคุณครับ

      Delete