首頁
相簿
論壇
訂閱最新文章
顯示具有 blogger hack 標籤的文章。 顯示所有文章
顯示具有 blogger hack 標籤的文章。 顯示所有文章

星期二, 3月 24, 2009

blogger站內搜尋

再版面配置新增一個HTML/JavaScript小工具,把下面代碼複製貼上儲存,收工

<!-- SiteSearch Google -->
<form id="searchform" action="/search" method="get">
請輸入關鍵字<br/>
<input id="searchbox" value="" name="q" type="text"/>
<input id="searchbutton" value="確定" type="submit"/></form>


很簡單吧

張貼者:甄咖郎 於 上午11:03:00 0  

星期二, 7月 29, 2008

移除blogger頁首的導覽列

相當容易只要到範本-修改html

</head>前,加入以下程式碼

<style type='text/css'>.Navbar {visibility:hidden;display:none;}</style>

張貼者:甄咖郎 於 上午9:54:00 0  

星期四, 7月 24, 2008

讓blogger側邊欄折合

參考Abin's Tech Note小弟這邊只是給自己做備忘,如有問題或需要更詳細解說請至原作者網站發問,順便鼓勵他一下

第一,把想展開摺疊的區塊找出來,第二,做一個按鈕或連結,當按下去的時候,去切換該區塊的狀態(display inline or none)。打開完整範本原始碼,首先貼入處理這個動作的 Javascript (貼在 <head> </head> 標籤內):

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


接下來,要去修改元件 (Widget) 的程式碼。同樣以個人資料 (Profile) 元件為例,找 開頭 結尾的區段,應該是類似下面這樣:

<b:widget id='Profile1' locked='false' title='AUTHOR PROFILE' type='Profile'>
  <b:includable id='main'>
     <b:if cond='data:title != ""'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>    
     ............. (程式內文略過不表)
  </b:includable>
</b:widget>


這個元件的 ID = Profile1,是範本裡用來識別該元件的方法,接下來要插入動態切換的連結,為求簡單我先不顧美觀,直接插入像下面的原始碼:

<b:widget id='Profile1' locked='false' title='AUTHOR PROFILE' type='Profile'>
<b:includable id='main'>
     <b:if cond='data:title != ""'>
      <h2><a href='javascript:void(0);' onclick='javascript:ElementToggle("Profile1");'>[+/-]</a>
      <data:title/></h2>
    </b:if>
    <div class='widget-content' id='toggle' style='display:none;'>
     ............. (程式內文略過不表)
  </b:includable>
</b:widget>


有兩個部分要解釋一下。第一,塞入元件標題 data:title 前面的那行,就是呼叫 Javascript 的連結,其中有一個變數:Profile1,就是告訴 Javascript 你要動態切換哪一個元件,所以如果你有多個不同元件要摺疊,記得除了呼叫切換的這一行要塞入該元件原始碼中,還要更改 ID 名稱。第二個部分,<div class='widget-content'> 這行標籤開始就是元件的內容,也是要被折疊或展開的區塊,如果你希望該文件「預設」就被折疊起來,那就要在後面加入 CSS Style 去起始隱藏它,如果預設是被展開的,就把後面紅色的 style='display:none;' 部分拿掉就行了。最後,如果對以上樣式不滿意,或是想貼用圖片當切換按鈕,記得調整 <a> 連結那行的內容和位置就可以了!

張貼者:甄咖郎 於 中午12:34:00 0  

星期三, 7月 23, 2008

blogger的重要功能繼續閱讀

關於繼續閱讀這部分可以說是我搞blogger搞的最久的一樣東西,之前用過很多方法但是都是java的用起來種有那麼一點問題,最後我採用這篇教學以下是我個人修改的簡易說明

修改html-記得打開小裝置-尋找 ]]></b:skin> 在這後面插入以下代碼 &ltb:if cond='data:blog.pageType == "item"'> &ltstyle type='text/css'> span.fullpost {display:inline;} </style> &ltb:else/> &ltstyle type='text/css'> span.fullpost {display:none;} </style> </b:if> 然後在尋找這段 <data:post.body/> 在這後面插入下面程式碼,其中程式碼內被小括號圍起來的中文字部分可以替換成自己想要的文字 &ltb:if cond='data:blog.pageType != "item"'> &lta expr:href='data:post.url'>(繼續閱讀...)</a> </b:if> 這樣基本上完成想隱藏的文章用這段包起來就好 <span class="fullpost">(本文要隱藏的部分)</span> 圖文教學請點我

張貼者:甄咖郎 於 上午11:27:00 0