ต่อจากบันทึกที่แล้ว ที่แนะนำให้ใส่ Javascript Badge ลงใน sidebar ด้านข้างของบล็อกตนเอง  

Javascript Badge สามารถนำไปใส่ยังเว็บอื่นๆได้ เช่น เว็บส่วนตัว หรือ เว็บขององค์กร ที่ตนเองสามารถเข้าไปแก้ไขในส่วนของการแสดงผลของเว็บไซต์นั้นได้ โดย การนำโค๊ด Javascript Badge ไปใส่ยังส่วนของเพจที่ต้องการครับ

ตัวอย่าง การใส่ Javascript badge ในเว็บส่วนตัว  คลิกที่นี่!

 

ตัวอย่าง การตกแต่ง Javascript badge โดยใช้ CSS

 

  1. เลือก JavaScript badge แบบ WithStylesheet
  2. ใส่โค๊ด CSS ดังต่อไปนี้

* {margin:0; padding:0;}

div.badge {
    width:400px; /*ตั้งความกว้างให้เหมาะสมกับหน้าเว็บตนเอง*/
    background-color:#66CCFF;} 

div.badge h1 {
    margin:5px;
    font-size:14px;}

div.badge ul li{
    border-top: 1px solid #ffcc66;
    background: #ffffff;}

div.badge ul li:Hover {
    background:#ffffcc;}

div.badge #announcement{
    overflow:auto;
    height:250px; /*ตั้งความสูงให้เหมาะสมกับหน้าเว็บของตนเอง*/
    width:auto;}   

div.badge ul li a:link{
    color:#993300;}

div.badge ul li a:visited{
    color:#993366;}

div.badge ul li a:hover{
    text-decoration:none;
    color:#FF6600;}

    3.  ส่วนของ html ให้ใส่

<head><meta HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=UTF-8" /></head>  

<body>
<div class=”badge”><h1>ข่าวประกาศและการใช้งานระบบ</h1><script src=”http://learners.in.th/planet/announcement.js” type=”text/javascript”></script></div>
</body>