教学 ♥ Blog archive 小工具
21 July 2012 @ 12:10 PM



Huepeng 的教程

转帖请留言和附上链接 ♥






步骤一

Blogger template : Design - Edit Layout -
Add a gadget - Html/Javascript 

Blogskin : Template - Edit Html

放在小工具的代码里 .


步骤二

第一款 // Drop down archive menu




代码 :
<select style="width:230px; background-color:#ffc0cb;border:1px solid #000000; color:#ccc;padding:2px;" name="ArchiveMenu" onChange="location.href=this.options[this.selectedIndex].value;">
<option value="/">Time Machine</option>
<BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives></select>


红色的 是 drop down Archie menu 的背景颜色 .

如果要用背景图片 , 就把 background-color:颜色代码; 换去 :
background-image:url(背景图片URL);


蓝色的 是 drop down archive menu 框框的粗细度 .

紫色的 是 drop down archive menu 框框的种类 .

黄色的 是 drop down archive menu 框框的颜色 .

橙色的 是 drop down archive menu 的字体颜色 .

粉色的 是 drop down archive menu 的标题 .


第二款 // 有小图片的 archive list


<$BlogArchiveName$>



代码 ( 小图片在前面 ) :
<BloggerArchives>
<img src="小图片的网址"/> <a class="month" href="<$BlogArchiveURL$>"><$BlogArchiveName$></a>
</BloggerArchives>


代码 ( 小图片在后面 ) :
<BloggerArchives>
<a class="month" href="<$BlogArchiveURL$>"><$BlogArchiveName$></a>
</BloggerArchives>  <img src="小图片的网址"/>


红色的 是小图片的 URL .


步骤三

保存 Save .







任何疑问请在 tagboard 留言 .

在评论箱留言请告诉我 (:




版权所有 翻印必究. ♥