2 美化網誌教學 - 推介文章小工具

大家有無發覺我版面上面多咗幾張圖同連結呢？就係我搵咗好耐，想要自己推介特定文章俾各位讀者嘅Widget 啦！

用法好簡單

１）設計 -> 範本 -> 修改HTML


２）尋找　]]></b:Skin>

３）在]]></b:Skin>上加入呢段 

/*----------- Ravi Saive -----------------*/

#rsposts{height:210px;overflow:hidden;margin:0px;position:relative;width:948px;background:; border:0px solid #333; padding:5px 5px;}
#rsposts ul{ margin-left: 10px; padding: 0pt; position: relative; list-style-type: none; z-index: 1;  width: 100%; }
#rsposts ul li{ overflow: hidden; float: left; width: 180px; height: 180px; border-top:0px solid #333; margin-right:6px; padding:2px 0px 4px 0px; }
#rsposts img{width:150px;height:100px; padding:2px; border: 1px solid #A3A3A3; border-radius:10px; -moz-border-radius:10px;  margin-top:0px;}
#rsposts img:hover{border: 1px solid #c5c5c5; }
.rsbody img{float:left}
.rsbody {position:relative;margin:0 5px 0 5px;width:170px;height:210px;display:inline;float:left;color:#c4c4c4}
.rsbody h3 {font-family: arial,sans-serif,arial;font-size: 12px;font-weight: bold;margin-bottom: 1px;margin-right: 18px;margin-top: 10px;padding: 5px 0;text-align: center;}
.rsbody h3 a:link,.rsbody h3 a:visited{color:#004B80;text-decoration:none;}
.rsbody h3 a:hover{color:#434340; text-decoration:underline;}
.rsimg img {filter:alpha(opacity=80);opacity: 0.8;border:0;}
.rsimg:hover img {filter:alpha(opacity=100);opacity: 1.0;border:0;}

４）設計 -> 版面配置 ->新增小工具　-> HTML/JavaScript

５）加入以下Code，自己改相片Link, 文字

<div id="rsposts">
<div style="visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 100%; ">
<ul>
<li>
<div class="rsbody">
<a class="rsimg" href="打LINK">
<img src="相" imgmax="800" width="170" height="100" />
</a><a href="打LINK">描述</a>
</div>
</li>
<li>
<div class="rsbody">
<a class="rsimg" href="打LINK">
<img src="相" imgmax="800" width="170" height="100" />
</a><a href="打LINK">描述</a>
</div>
</li>
<li>
<div class="rsbody">
<a class="rsimg" href="打LINK">
<img src="相" imgmax="800" width="170" height="100" />
</a><a href="打LINK">描述</a>
</h3></div>
</li>
<li>
<div class="rsbody">
<a class="rsimg" href="打LINK">
<img src="相" imgmax="800" width="170" height="100" />
</a><a href="打LINK">描述
</a><h3></h3></div>
</li>
<li>
<div class="rsbody">
<a class="rsimg" href="打LINK">
<img src="相" imgmax="800" width="170" height="100" />
</a><a href="打LINK">描述
</a><h3>
</h3></div>
</li>
</ul>
</div>
</div>