Home Blogger เพิ่ม Sticky notofication bar ใน Blogger แถบแจ้งเตือนด้านบน
เพิ่ม Sticky notofication bar ใน Blogger แถบแจ้งเตือนด้านบน
ไม่ระบุชื่อ เมษายน 15, 2558 0
ช่วงนี้ไปเจอแกดเจ็ตที่มีประโยชน์อิกอันหนึ่งครับ เป็นNotification bar เป็นแถบแจ้งเตือน ที่เขาไว้โชว์บทความหรืออะไรก็ได้ที่น่าสนใจ หรือจะเน้นบทความล่าสุดกก็ได้ เป็นแกดเจ็ตที่จะอยู่ด้านบนสุดของบล็อกเราครับ เหมาะกับคนที่อยากมีแถบแจ้งเตือนอะไรที่น่าสนใจ เพราะมันจะดูโดดเด่นที่เดียว
วิธีเพิ่มแถบแจ้งเตือน ในบล็อกเกอร์
1.ไปที่แม่แบบ
2.แก้ไขHTML
3.กด Ctrl+F แล้วค้นหา </body>
4.นำโค้ดด้านล่างนี้วางไว้บน </body>
Code
Notification 1 ใส่ชื่อหัวข้อ อะไรก็ได้ หรือจะตั้งตามชื่อบทความที่เราต้องการโชว์
paste Notification 2 link here ใส่ลิ้งบทความที่เราต้องการ
Notification 2 ใส่ชื่อหัวข้อ อะไรก็ได้ หรือจะตั้งตามชื่อบทความที่เราต้องการโชว์
1.ไปที่แม่แบบ
2.แก้ไขHTML
3.กด Ctrl+F แล้วค้นหา </body>
4.นำโค้ดด้านล่างนี้วางไว้บน </body>
Code
<style> #wcsticky-container { height:46px; width:100%; position:fixed; z-index:9999999; top: 0px; left:0px; background:#222222; -moz-border-radius:5px; -webkit-border-radius:5px; color:#ffffff; border-bottom:solid 2px green; -moz-box-shadow:5px 5px 5px #333333; -web-kit-box-shadow: 5px 5px 5px #333333; -goog-ms-box-shadow: 5px 5px 5px #333333; box-shadow:3px 2px 4px green; } #wc-stickylinks { color:orange; font:14px verdana; margin-top:12px; margin-left:20px; text-decoration:none; } #wc-stickylinks a { font:14px georgia, verdana; color:#ffffff; text-decoration:none; } #wcstickyclose { float:right; margin-top:15px; margin-right:20px; } #wcstickyclose a { color:#ffffff; text-decoration:none; font:14px verdana; padding:3px; background:red; border-radius:10px; } #wcsticky-main {float:left; } </style> <script language='JavaScript'> function closesticky() { document.getElementById("wcsticky-container").style.visibility = "hidden"; } </script> <div id='wcsticky-container'> <div id="wcsticky-main"> <p id='wc-stickylinks'> Popular Topics:<a href='paste Notification 1 link here'> Notification 1</a> | <a href='paste Notification 2 link here'>Notification 2</a></p> </div> <div id="wcstickyclose"> <a href="javascript:closesticky();" >X</a> </div> </div>*** paste Notification 1 link here ใส่ลิ้งบทความที่เราต้องการ
Notification 1 ใส่ชื่อหัวข้อ อะไรก็ได้ หรือจะตั้งตามชื่อบทความที่เราต้องการโชว์
paste Notification 2 link here ใส่ลิ้งบทความที่เราต้องการ
Notification 2 ใส่ชื่อหัวข้อ อะไรก็ได้ หรือจะตั้งตามชื่อบทความที่เราต้องการโชว์