Tuesday, April 14, 2015

เพิ่ม Sticky notofication bar ใน Blogger แถบแจ้งเตือนด้านบน

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

วิธีเพิ่มแถบแจ้งเตือน ในบล็อกเกอร์
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 ใส่ชื่อหัวข้อ อะไรก็ได้ หรือจะตั้งตามชื่อบทความที่เราต้องการโชว์
Previous Post
Next Post
Related Posts