iHearBand Badge for Blog Happens Theme

วงดนตรี iHearBand

เมื่อกลุ่ม iHearBand เริ่มขยับขยาย จึงเริ่มมีการพูดคุยเรื่องการติด Badge ใน blog ของเพื่อนๆ ชาว iHearBand กันครับ ซึ่งหลายคนใช้ Blog Happens Theme โดย @imenn รวมถึงผมด้วย

ผมเลยทำ Badge มาตรฐานขนาด 237×80 pixel มาให้ใช้กันครับ มีทั้งหมด 3 Badge คือ

• iHearBand – Open Source Music
• iPattt Wedding Band
• PlaJazz – Platong Jazz Band

การใช้งานมีสองแบบครับ คือแบบ image หรือแบบ list + css ครับ

Image

สร้าง text widget ขึ้นมาที่ sidebar โดยการไปที่หน้า Appearance >Widgets แล้วลาก text widget จากกล่อง Available Widgets ด้านซ้าย มาใส่ในกล่อง Sidebar ด้านขวา

นำ code ด้านล่างไปแปะไว้ใน text widget แล้วกด Save เท่านี้ก็เรียบร้อยแล้วครับ

<a href="http://www.ihearband.com" target="_blank" style="margin-bottom: 4px;"><img src="http://img.meedee.net/banners/banner-237x80-ihearband.png" title="iHearBand - Open Source Music" alt="iHearBand - Open Source Music"></a>
<a href="http://www.plajazz.com" target="_blank" style="margin-bottom: 4px;"><img src="http://img.meedee.net/banners/banner-237x80-plajazz.png" title="PlaJazz - Platong Jazz Band" alt="PlaJazz - Platong Jazz Band"></a>
<a href="http://www.ipattt.com/2009/วงดนตรี-งานแต่งงาน/" target="_blank" style="margin-bottom: 4px;"><img src="http://img.meedee.net/banners/banner-237x80-wedding-band.png" title="iPattt Wedding Band" alt="iPattt Wedding Band"></a>

Result

xHtml + CSS

สำหรับคนที่อยากทำให้ชีวิตยากกว่านั้น สามารถใช้วิธีนี้ได้ครับ

Text Widget Code

นำ code ด้านล่างไปแปะไว้ใน text widget แล้วกด Save

<ul id="sexdrum-banner">
<li id="ihearband"><a href="http://www.ihearband.com" target="_blank"><span>iHearBand - Open Source Music</span></a></li>
<li id="plajazz"><a href="http://www.plajazz.com" target="_blank"><span>PlaJazz - Platong Jazz Band</span></a></li>
<li id="wedding-band"><a href="http://www.ipattt.com/2009/วงดนตรี-งานแต่งงาน/" target="_blank"><span>iPattt Wedding Band</span></a></li>
</ul>
<div style="clear: both;"></div>

CSS Code

นำ code ด้านล่างไปแปะใน custom CSS ในหน้า Appearance > Theme Options ครับ

#sidebar #sexdrum-banner li {
display: block;
float: left;
width: 237px;
height: 80px;
padding: 0;
margin-bottom: 4px;
}
#sidebar #sexdrum-banner li a{
display: block;
width: 237px;
height: 80px;
opacity: 0.9;
}
#sidebar #sexdrum-banner li a:hover{
opacity: 1;
}
#sidebar #sexdrum-banner li a span{
display: none;
}
#sexdrum-banner li#ihearband a {background: url(http://img.meedee.net/banners/banner-237x80-ihearband.png);}
#sexdrum-banner li#plajazz a {background: url(http://img.meedee.net/banners/banner-237x80-plajazz.png);}
#sexdrum-banner li#wedding-band a {background: url(http://img.meedee.net/banners/banner-237x80-wedding-band.png);}