shiaminuet: 2008/01

我的blog貼紙

如果您願意使用我的blog貼紙，以下是html程式碼：

<a href="http://shiami.blogspot.com/" target="_blank"><img src="http://farm1.static.flickr.com/103/298260632_b9232a7183.jpg" title="蝦米的小步舞曲" ></img></a>

並請留下您使用貼紙的網站，我會很樂意造訪！

[Blogger] only show "Post Title" at Lable and Archive Page

在template內找到下面這段：

<b:include data='post' name='post'/>

然後換成這段即可：

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Kaie's Blog: [Blog] only show "Post Title" at Lable and Archive Page

如何讓某些元件只在首頁/內頁顯示[BLOGGER]

堯@部落格: 如何讓某些元件只在首頁/內頁顯示[BLOGGER]

LVCHEN - Recent Comment for blogger

LVCHEN - Recent Comment for blogger v1.7 安裝程式


http://lvchen.blogspot.com/

Blogger - Random Rotating Banner Hack

參考別人的程式改了一下(紅色部分改成自己的圖片網址)：


<!-- Randomize header background image -->
<script type="text/javascript">
var banner= new Array()

//background image
banner[0]="http://URL/bg1.jpg"
banner[1]="http://URL/bg2.jpg"
banner[2]="http://URL/bg3.jpg"

var random=Math.round( (banner.length-1) * Math.random());

document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left top;');
document.write(" }");
document.write("</style>");
</script>


Freeyasoul Adventure: Random Rotating Banner Hack

在blogger設置網址列專屬icon

加在<head>後面(16x16 pixels icon)：


<link href='icon網址' rel='shortcut icon'/>

Firefox和IE7皆可顯示。


Taiwan's 美食及生活: 設置網址列專屬icon

讓blogger側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling)

1. 將下面的javascript貼在</head>的前面：


<!-- Sidebar Toggle Element -->
<script type='text/javascript'>
<!-- Function used for Sidebar Element Toggling: ElementToggle()-->
function ElementToggle(id) {
 var element = document.getElementById(id).getElementsByTagName('div');
 for(i = 0; i < element.length; i++) {
   attribute = element[i].getAttribute('id');
   if(attribute == 'toggle')
   {
     if (element[i].style.display == 'none')
       element[i].style.display = '';
     else
       element[i].style.display = 'none';
   }
 }
}
function ElementToggleExpand(id) {
 var element = document.getElementById(id).getElementsByTagName('div');
 for(i = 0; i < element.length; i++) {
   attribute = element[i].getAttribute('id');
   if(attribute == 'toggle')
   {
       element[i].style.display = '';
   }
 }
}
function ElementToggleCollape(id) {
 var element = document.getElementById(id).getElementsByTagName('div');
 for(i = 0; i < element.length; i++) {
   attribute = element[i].getAttribute('id');
   if(attribute == 'toggle')
   {
       element[i].style.display = 'none';
   }
 }
}
</script>

2. 去修改每個要開合的網頁元素(page element)，在程式裡面叫做widget(元件)，
下面是以一個HTML/Javascript的網頁元素當例子，紅色部分為加入的內容(其中style的float和margin請依自己版面調整位置)：


<b:widget id='HTML1' locked='false' title='HTML/Javascript' type='HTML'>
<b:includable id='main'>
       <!-- only display title if it's non-empty -->
       <b:if cond='data:title != ""'>
        <h2 class='title'><data:title/> <a href='javascript:void(0);' onclick='javascript:ElementToggle("HTML1");' style='float:right;margin:-17px 0px;'>[+/-]</a> </h2>
       </b:if>
       <div class='widget-content' id='toggle' style='display:none;'>
        <data:content/>
       </div>
       <b:include name='quickedit'/>
      </b:includable>
</b:widget>

其中這段style='display:none;'就是控制元件預設展開或收合的地方，如果預設想要收合就加上這段語法，若想顯示則把這段語法拿掉。

3. 最後是加上一個可以同時展開或合上全部元件的功能，
在樣本中適當的位置加入以下程式碼(紅色部分是元件的id，請改為你所要開合的元件id，另外style部分也請自己改為適合自己的樣版位置)：


<!-- Toggle ALL sidebar elements -->
<div style='float:left; margin:-20px 0px 0px 0px;'>
⊕開合下方全部欄位
<a href='javascript:void(0);' onclick='javascript: ElementToggleExpand("HTML8"); ElementToggleExpand("BlogArchive2"); ElementToggleExpand("LinkList1"); '>[＋]</a>

<a href='javascript:void(0);' onclick='javascript: ElementToggleCollape("HTML8"); ElementToggleCollape("BlogArchive2"); ElementToggleCollape("LinkList1"); '>[－]</a>
</div>


Abin's Tech Note: 讓側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling)

隱藏 blogger Navbar

不想完全隱藏，想變成平常隱藏、游標移過去就會出現的效果(CSS)：


#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

PS: 此種方法firefox才有效，IE會完全隱藏不出現(mouse hover沒反應)。


Abin's Tech Note: 隱藏 Navbar

我的部落格串連貼紙