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 ใส่ชื่อหัวข้อ อะไรก็ได้ หรือจะตั้งตามชื่อบทความที่เราต้องการโชว์
