http://ggpi.blogspot.com/2006/12/blogger-30_15.html 呵呵~刚刚学会呢~这位GG朋友写得不错~大家去看看吧~
http://ggpi.blogspot.com/2006/12/blogger-30_15.html
2007年10月7日星期日
blogger 3.0:让你的博客文章页显示的评论出现头像
http://ggpi.blogspot.com/2006/12/blogger-30_15.html 呵呵~刚刚学会呢~这位GG朋友写得不错~大家去看看吧~
http://ggpi.blogspot.com/2006/12/blogger-30_15.html
blogger hack ajax 标签升级版功能
sample of this hack:http://hardwareonthespot.blogspot.com/
- 简单支持了中文
- 更快的速度
- 支持了导航翻页功能（即在标签栏上方有了"1，2，3，4..."的翻页功能）
- 更简单的安装方法
下面是install方法：
第一步：首先把下面的code加入你的xml模板里的</head>上边，]]<>/b:skin>下边：
<style type='text/css'>
#indicator {position:fixed;z-index:1000;padding:15px 0;top:40%;background-color:#FFFFFF;border:1px solid #AAAAAA;width:176px;left:50%;margin-left:-88px;text-align:center;}
#search-result {border:1px solid #AAAAAA;padding:10px;padding-bottom:30px;font-size:85%;}
.search-result-meta {background:#EFEFEF;padding:2px;}
.search-result-meta img {border-width:0;vertical-align:text-bottom;}
.search-title {font-size:1em;padding-bottom:3px;font-weight:bold;text-align:left;text-decoration:underline;}
.search-cat {display:block;padding:3px;font-size:1em;margin-top:5px;margin-bottom:5px;border-bottom:1px solid #C0C0C0;font-weight:bold;}
.search-close {color:silver;float:right;border:1px solid #F5F5F5;margin-top:10px;cursor:pointer;}
.search-result-nav {font-size:1.4em;font-weight:bold;padding:5px 0pt;text-align:center;}
</style>
<script type='text/javascript' src='http://ggpi.googlecode.com/files/prototype.js' />
<script type='text/javascript'>
//<![CDATA[
// User customisable parameters
// ----------------------------
//maxresults - 设置一页标签做多显示的文章数
// navFlag - 是否打开标签翻页功能.
// feedLabel - 描述你的标签RSS的文字.
// catLabel - 描述你的标签的文字.
// closeLabel - 描述关闭按钮的文字.
var maxresults = 5;
var navFlag = 1; //ON by default
var feedLabel = "Subscribe to" ;
var catLabel = "Sorted into:";
var closeLabel = "Click to close";
//]]>
</script>
<script type='text/javascript' src='http://ggpi.googlecode.com/files/ajaxlabels.js' />
文章翻页功能是根据你设置的标签最大文章数来的，你标签下有19篇文章，你设置一页最多显示5篇，则你的翻页数为4页"1 2 3 4"，以此类推。
第二步：找到下面的code，
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
替换成：
<b:loop values='data:post.labels' var='label'>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' rel='tag'><data:label.name/></a>
如果你希望每次点击文章下的标签能自动跳转到页首，要把脚本改换成：
<b:loop values='data:post.labels' var='label'>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null),scroll(0,0)"' rel='tag'><data:label.name/></a>
若你增加了标签页面元素，那么找到标签页面元素的类似下面的code：
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='data:label.url'><data:label.name/></a>
</b:if>
替换成：
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data: label.name + "\",null)"' ><data:label.name/></a>
</b:if>
第三步，给你的博客增加一个新的页面元素用来显示使用本hack以后会瞬间出现的标签内容...
页面元素内部添加code如下：
<div id="indicator" style="display:none"><img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif"/> Loading...</div><div id="search-result" style="display:none"><a name="sres"></a><div class="search-close" onclick="javascript:Element.hide('search-result')"><script type="text/javascript">document.write(closeLabel);</script></div><div id="show-result"></div><div class="search-close" onclick="javascript:Element.hide('search-result')"><script type="text/javascript">document.write(closeLabel);</script></div></div>
done!：）
想标签内容出现的同时隐藏正文?
首先把第三步的页面元素code替换为：
<div id="indicator" style="display:none"><img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif"/> Loading...</div><div id="search-result" style="display:none"><a name="sres"></a><div class="search-close" onclick="javascript:Element.hide('search-result');Element.show('Blog1');"><script type="text/javascript">document.write(closeLabel);</script></div><div id="show-result"></div><div class="search-close" onclick="javascript:Element.hide('search-result');Element.show('Blog1');"><script type="text/javascript">document.write(closeLabel);</script></div></div>
然后把第一步的最后一个脚本
http://ggpi.googlecode.com/files/ajaxlabels.js
替换为：
http://gggpie.googlepages.com/ajaxla.js
即可~~
完：）
credit goes to: http://ggpi.blogspot.com/2007/02/blogger-30ajax.html
sample of this hack:http://hardwareonthespot.blogspot.com/
sample of this hack:http://hardwareonthespot.blogspot.com/
- 简单支持了中文
- 更快的速度
- 支持了导航翻页功能（即在标签栏上方有了"1，2，3，4..."的翻页功能）
- 更简单的安装方法
下面是install方法：
第一步：首先把下面的code加入你的xml模板里的</head>上边，]]<>/b:skin>下边：
<style type='text/css'>
#indicator {position:fixed;z-index:1000;padding:15px 0;top:40%;background-color:#FFFFFF;border:1px solid #AAAAAA;width:176px;left:50%;margin-left:-88px;text-align:center;}
#search-result {border:1px solid #AAAAAA;padding:10px;padding-bottom:30px;font-size:85%;}
.search-result-meta {background:#EFEFEF;padding:2px;}
.search-result-meta img {border-width:0;vertical-align:text-bottom;}
.search-title {font-size:1em;padding-bottom:3px;font-weight:bold;text-align:left;text-decoration:underline;}
.search-cat {display:block;padding:3px;font-size:1em;margin-top:5px;margin-bottom:5px;border-bottom:1px solid #C0C0C0;font-weight:bold;}
.search-close {color:silver;float:right;border:1px solid #F5F5F5;margin-top:10px;cursor:pointer;}
.search-result-nav {font-size:1.4em;font-weight:bold;padding:5px 0pt;text-align:center;}
</style>
<script type='text/javascript' src='http://ggpi.googlecode.com/files/prototype.js' />
<script type='text/javascript'>
//<![CDATA[
// User customisable parameters
// ----------------------------
//maxresults - 设置一页标签做多显示的文章数
// navFlag - 是否打开标签翻页功能.
// feedLabel - 描述你的标签RSS的文字.
// catLabel - 描述你的标签的文字.
// closeLabel - 描述关闭按钮的文字.
var maxresults = 5;
var navFlag = 1; //ON by default
var feedLabel = "Subscribe to" ;
var catLabel = "Sorted into:";
var closeLabel = "Click to close";
//]]>
</script>
<script type='text/javascript' src='http://ggpi.googlecode.com/files/ajaxlabels.js' />
文章翻页功能是根据你设置的标签最大文章数来的，你标签下有19篇文章，你设置一页最多显示5篇，则你的翻页数为4页"1 2 3 4"，以此类推。
第二步：找到下面的code，
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
替换成：
<b:loop values='data:post.labels' var='label'>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' rel='tag'><data:label.name/></a>
如果你希望每次点击文章下的标签能自动跳转到页首，要把脚本改换成：
<b:loop values='data:post.labels' var='label'>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null),scroll(0,0)"' rel='tag'><data:label.name/></a>
若你增加了标签页面元素，那么找到标签页面元素的类似下面的code：
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='data:label.url'><data:label.name/></a>
</b:if>
替换成：
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data: label.name + "\",null)"' ><data:label.name/></a>
</b:if>
第三步，给你的博客增加一个新的页面元素用来显示使用本hack以后会瞬间出现的标签内容...
页面元素内部添加code如下：
<div id="indicator" style="display:none"><img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif"/> Loading...</div><div id="search-result" style="display:none"><a name="sres"></a><div class="search-close" onclick="javascript:Element.hide('search-result')"><script type="text/javascript">document.write(closeLabel);</script></div><div id="show-result"></div><div class="search-close" onclick="javascript:Element.hide('search-result')"><script type="text/javascript">document.write(closeLabel);</script></div></div>
done!：）
想标签内容出现的同时隐藏正文?
首先把第三步的页面元素code替换为：
<div id="indicator" style="display:none"><img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif"/> Loading...</div><div id="search-result" style="display:none"><a name="sres"></a><div class="search-close" onclick="javascript:Element.hide('search-result');Element.show('Blog1');"><script type="text/javascript">document.write(closeLabel);</script></div><div id="show-result"></div><div class="search-close" onclick="javascript:Element.hide('search-result');Element.show('Blog1');"><script type="text/javascript">document.write(closeLabel);</script></div></div>
然后把第一步的最后一个脚本
http://ggpi.googlecode.com/files/ajaxlabels.js
替换为：
http://gggpie.googlepages.com/ajaxla.js
即可~~
完：）
credit goes to: http://ggpi.blogspot.com/2007/02/blogger-30ajax.html
sample of this hack:http://hardwareonthespot.blogspot.com/
Blogger:改良詳見全文(繼續閱讀)使用方法
很久之前，在別人的Blog看到了詳見全文(繼續閱讀)的方法，很實用。
不過卻有小缺點，就是無法控制要不要出現繼續閱讀的設定，例如文章內容不夠多，短短幾行，就不需要出現。忘了是在哪邊取的的程式碼，在此說明我不是原創，我是加以改良(紅色字體部份，是我自己寫的)，如果有誰知道原創者，可以跟我，我再補充上出處來源及連結。
Step1: 首先，將 程式1，程式2 放在
</head>
程式1: 用來設定CSS
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
span.fullpost {display:inline;}
</style>
<b:else/>
<style type='text/css'>
span.fullpost {display:none;}
</style>
</b:if>
程式2: 用來判斷是否要出現 詳見全文 的連結
<script type='text/javascript'>
function hidePost(PostId,PostUrl) {
var Post = document.getElementById("hidePost-"+PostId);
var PostContent = Post.innerHTML ;
if(PostContent.indexOf("class=\"fullpost\"")!=-1){
Post.innerHTML="<br/><div><a href='"+PostUrl+"'> 詳見全文... </a></div>";
}else{
Post.innerHTML="";
}
}
</script>
Step2: 找到
<div class='post-header-line-1'/>
和
<div style='clear: both;'/> <!-- clear for photos floats --></div>
把這兩行之間程式內容(包括這兩行)替換成 程式3
程式3: blogger中，顯示文章內容的程式碼
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<data:post.body/>
<span expr:id='"hidePost-" + data:post.id'><data:post.body/></span>
<script type='text/javascript'>
hidePost('<data:post.id/>','<data:post.url/>');
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats --></div>
Step3: 避免點選較舊文章 可能會失效的情況。
找到以下程式碼，將以下刪除線的部份，從程式裡移除掉。
移除前後得差別在於，點選較 新的文章/較舊的文章 ，瀏覽器顯示的網址，不再是 http://yorblogname .blogspot.com，而是網址加上一大串的參數。
yorblogname:你的部落格名稱
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
Step4: 可以在 blogger的 設定/格式 中，填入以下內容，當每次要寫新文章時候，就會預設出現，不用自己再key 一遍。
文章摘要的部分
<span class="fullpost">這裡是要隱藏的部分</span>
我改寫的部份，其實就是判斷文章內容是否有出現 fullpost這個字，如果有的話，表示有使用到 <span class="fullpost">，則就應該要出現改良詳見全文的連結。
装载自:Mr.J 雜學
很久之前，在別人的Blog看到了詳見全文(繼續閱讀)的方法，很實用。
不過卻有小缺點，就是無法控制要不要出現繼續閱讀的設定，例如文章內容不夠多，短短幾行，就不需要出現。忘了是在哪邊取的的程式碼，在此說明我不是原創，我是加以改良(紅色字體部份，是我自己寫的)，如果有誰知道原創者，可以跟我，我再補充上出處來源及連結。
Step1: 首先，將 程式1，程式2 放在
</head>
程式1: 用來設定CSS
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
span.fullpost {display:inline;}
</style>
<b:else/>
<style type='text/css'>
span.fullpost {display:none;}
</style>
</b:if>
程式2: 用來判斷是否要出現 詳見全文 的連結
<script type='text/javascript'>
function hidePost(PostId,PostUrl) {
var Post = document.getElementById("hidePost-"+PostId);
var PostContent = Post.innerHTML ;
if(PostContent.indexOf("class=\"fullpost\"")!=-1){
Post.innerHTML="<br/><div><a href='"+PostUrl+"'> 詳見全文... </a></div>";
}else{
Post.innerHTML="";
}
}
</script>
Step2: 找到
<div class='post-header-line-1'/>
和
<div style='clear: both;'/> <!-- clear for photos floats --></div>
把這兩行之間程式內容(包括這兩行)替換成 程式3
程式3: blogger中，顯示文章內容的程式碼
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<data:post.body/>
<span expr:id='"hidePost-" + data:post.id'><data:post.body/></span>
<script type='text/javascript'>
hidePost('<data:post.id/>','<data:post.url/>');
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats --></div>
Step3: 避免點選較舊文章 可能會失效的情況。
找到以下程式碼，將以下刪除線的部份，從程式裡移除掉。
移除前後得差別在於，點選較 新的文章/較舊的文章 ，瀏覽器顯示的網址，不再是 http://yorblogname .blogspot.com，而是網址加上一大串的參數。
yorblogname:你的部落格名稱
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
Step4: 可以在 blogger的 設定/格式 中，填入以下內容，當每次要寫新文章時候，就會預設出現，不用自己再key 一遍。
文章摘要的部分
<span class="fullpost">這裡是要隱藏的部分</span>
我改寫的部份，其實就是判斷文章內容是否有出現 fullpost這個字，如果有的話，表示有使用到 <span class="fullpost">，則就應該要出現改良詳見全文的連結。
装载自:Mr.J 雜學
订阅：
博文 (Atom)
