照慣例前言
換用blogger幾個月了剛開始還滿不習慣他空空如也的功能
不過對於無X的種種限制搞到快發瘋的我當然還是選用自由度高點的這個啦
以下紀錄一下目前使用的javescript一方面方便我在不小心破壞後重建
一方面等我摸到有一點心得後再回過頭來好好了解網路上大大們的技術
________________________________________________________________
首先
繼續閱讀懶人加強版
能夠在blogger上實現繼續閱讀的懶人方法
不過由於他還是會先把資料全讀取完才隱藏所以速度還是一樣慢
使用方法很簡單
(原文來至繼續閱讀懶人加強版)安裝步驟：
1.到Blogger的控制(後台)頁面
2.範本->網頁元素
3.按下「加入網頁元素」，出現可用的網頁元素清單
4.找一個名稱為「 HTML/JavaScript」，按下「加入BLOG」，會進入設定的頁面
5.「標題」欄位，請填入 ##EasyReadMore##
6.「內容」部份，請複製以下程式碼填入(由於不知為啥貼出原始碼會導致錯誤所以請連過去看)
延伸技(原文出處 4月17聯絡簿:菜鳥ID保護區)
blogger「繼續閱讀plus！
能夠實現在blog首頁不會載入任何文章圖片，可以大幅加快頁面載入速度！這個比較複雜而且看在作者這麼辛苦的份上請連過去看說明吧^^
在此只紀錄更改後的圖片語法
請注意！下面語法不能斷行，blogger平台會很自以為是的幫你斷行，因此需特別留意）：
<script>Link2Picasa1('1', '2', '3', 4);</script>
上面每個參數的意義如下：
參數1: 圖片檔的 url;
參數2: 點選圖片的外連的 url, 如果沒有外連, 請給 '' 空字串;
參數3: 圖片對齊 c/l/r : 中間/左邊/右邊, 都小寫;
參數4: 也可文繞圖, true/false . 但對齊中間不可文繞圖;
配合:
使用了此語法會發現不知道怎麼利用語法改大小不過沒關係
如果是直接上傳到blogger的話有祕招:Blogger內建圖片語法改變
再來(原文出處Abin's Tech Note )
讓側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling)
顯示的元件透過一些技巧可以動態展開和摺疊起來要做的工作就是：第一，把想展開摺疊的區塊找出來，第二，做一個按鈕或連結，當按下去的時候，去切換該區塊的狀態（display inline or none）。打開完整範本原始碼，首先貼入處理這個動作的 Javascript (貼在 標籤內)：
<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 = 'inline';
else
element[i].style.display = 'none';
}
}
}
</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>
總之做法如下
在 body { 前面加上以下程式碼
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100,
FinishedOpacity=100)}
再來是我想加入的新功能^^
原文出處(山頂秘密基地)
部落格小工具: 隱藏文章部分內容
功能: 使部落格文章的部份內容可隨意打開/關閉.
這個功能還滿特別的
我目前只看過這一個別無分號
安裝方式:
1.在 範本 - 修改 HTML: 找到 ... 段落載入公用程式碼.
<head>
...
<script type='text/javascript' src='http://blogspot0.googlecode.com/files/common0v004.js' charset='big5' />
...
</head>
2.在 範本 - 修改 HTML: 找到 ... 段落, 在裡面新增參數傳遞程式碼.
<head>
...
<script language="javascript">
_open86874988="http://lh3.google.com/chihkangwang/R7rqXBBgTXI/AAAAAAAAEDY/fdAmB82HFcM/s144/more1.png";
_close86874988="http://lh5.google.com/chihkangwang/R7rrNhBgTaI/AAAAAAAAEDw/ew5TWTYX0EQ/s144/less1.png";
</script>
...
</head>
註1: 參數 _open86874988 可設定'打開'的引導圖片.
註2: 參數 _close86874988 可設定'關閉'的引導圖片.
使用方式:
boy39好神<script>beginopensesame1("");</script>只可惜是外星人XDD<script>endbeginopensesame1();</script>.
註1: 把想隱藏的部份內容 用紅字的 javascript function 包起來就對啦!
註2: beginopensesame1(""); 裡面請記得放"". (空字串)
測試:
boy39好神只可惜是外星人XDD
___________________________________________________
再來無關
幫你把程式碼轉換能貼在部落格分享的網站
postable
只要輸入後make it friendly就轉好了簡單吧^^
沒有留言:
張貼留言