Blogger 語法和外掛 @ *獻給未來的記事本*

最近弄了一堆東西，來做個語法記錄好了
怕到時都忘光光自己當初改的
順便留給也有需要的人吧~
##ReadMore##
■ Blogger 讓外部連結另開視窗
將以下語法貼入 <head> </head>

<script type='text/javascript'>
function parseLink(){
var tagA = document.getElementsByTagName('a');
re=new RegExp("^(http://"+document.domain+")|(javascript:)","i");
for(var i=0; i<tagA.length; i++){
if(!tagA[i].href.match(re)){tagA[i].target='_blank'};
}
}
</script>


然後在<body> 裡面加上<body onload='parseLink()'>

■ Blogger 文章分類只顯示標題
搜尋<p><data:post.body/></p>

替換成以下語法

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
<!-- 只顯示分類文章標題 –>

■ Blogger 更改標題列的顯示方法(瀏覽器上)
將<title><data:blog.pageTitle/></title>替換成
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>;
這樣一來，部落格頁面的 Title 就會變成了：文章標題 | 部落格名稱
文章標題與部落格名稱之間的符號也可以依個人喜好作修改，『 | 』字元部分可自行更換成喜歡的符號。

■ Blogger 所有文章列表
開新網頁，把以下貼上
<div id="toc" width="100%">
</div>
<br />
<script src="https://sites.google.com/site/moonpolospace/moonpostA.js">
</script><br />
<br />
<script src="http://moonpolo.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc">
</script> <br />
<script language="javascript">
sortPosts("datenewest");
</script> <br />
<br />
<script language="javascript">
showToc();
</script>
p.s紅色為替換項目，moonpostA.js的檔案位置是放在我的google site，可以下載下來按自己所需修改裡面的js內容，然後上傳到自己的空間。
原檔js項目有文章標題、發表時間、標籤，我的js檔案把其中的標籤項目砍了，如要原檔請參照以下連結。

■ Blogger文章圖片邊框效果
尋找以下程式碼，改border的部分
.post img {
padding: 4px;
border: 1px solid #FFFFFF;}
1px是邊框的線條粗細，#FFFFFF是邊框的顏色，請自行更改

■ Blogger的繼續閱讀語法(有自動收合文章功能)
安裝步驟：
1.到Blogger的控制(後台)頁面
2.「版面配置」->「網頁元素」
3.按下「新增小工具」，出現可用的小工具清單
4.找一個名稱為「 HTML/JavaScript」，按下滑鼠左鍵，會進入設定的頁面
5.「標題」欄位，請填入 ##EasyReadMore##
6.「內容」部份，請複製以下程式碼填入

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cjh829-easy-read-more.googlecode.com/files/cjh829-easy-read-more-2.2.1.js" type="text/javascript"></script>
<script>
EasyReadMoreSettings.Enabled = true;
EasyReadMoreSettings.Read_More_Mode = 'mix';
EasyReadMoreSettings.Mode_Auto_MaxLine = 3;
EasyReadMoreSettings.Mode_Custom_Tag_Type = 'text';
EasyReadMoreSettings.Mode_Custom_Tag_Expr = '##ReadMore##';
EasyReadMoreSettings.Link_Style = 'directlink';
EasyReadMoreSettings.Link_Text = '...繼續閱讀';
EasyReadMoreSettings.Link_Text_title = '繼續閱讀';
EasyReadMoreSettings.Collapse_Link_Text = '顯示摘要...';
EasyReadMoreSettings.Collapse_Link_Text_title = '顯示摘要';
EasyReadMoreSettings.Collapse_MoveToEnd = false;
EasyReadMoreSettings.Collapse_ScrollBack_Target = 'title';
EasyReadMoreSettings.Collapse_Effect = 'none';
EasyReadMoreSettings.Collapse_Effect_Speed = 'normal';
EasyReadMoreSettings.Index_Page_Style = 'abstract';
EasyReadMoreSettings.Tag_Page_Style = 'title';
EasyReadMoreSettings.Archive_Page_Style = 'title';
EasyReadMoreSettings.Controller_Enabled = true;
EasyReadMoreSettings.Controller_Default_Position = true;
EasyReadMoreSettings.Controller_Splitter = ' | ';
EasyReadMoreSettings.Controller_Full_Text = '完整';
EasyReadMoreSettings.Controller_Abstract_Text = '摘要';
EasyReadMoreSettings.Controller_Title_Text = '標題';
EasyReadMoreSettings.ShowFullPost_Tag = '##ShowAll##';
</script>
<script>EasyReadMore.main()</script>

■ Blogger更改文章內的文字顏色或字體、字型
・改顏色：在.post-body{}裡面自行加入color: #FFFFFF;即可
#FFFFFF即為你要的文字色碼
・改字型：在.post-body{}裡面自行加入font-family:"Gulim";

紅字為字體樣式，如果該使用者電腦裡沒有這項字型就會以新細明體為主。如果你該篇文章內容不是使用預設字型，而有另外選字型，blogger會以你該篇文章所選的字型為主。
進階用法font-family:"Gulim","Lucida Grande","Lucida Sans Unicode";
意思是如果該瀏覽你網站使用者電腦沒有Gulim字型就會選Lucida Grande字型，以此類推。

■ Blogger文章標題前放小圖示
搜尋post h3，改成以下這樣
.post h3 {
padding:0 0 2px 30px;
background : url(圖示網址) no-repeat;
padding為文章標題之上、右、下、左之間隔 (順時針)

■ Blogger的其他備註
.post h3 {為文章標題的樣式
.post-body { 為文章內容樣式
.post img { 為網誌中所有圖片之設定
a:link { 為超連結在一般狀態下的樣式
a:hover { 為滑鼠移過時超連結的樣式
a:visited { 為超連結被點擊過後的樣式
#outer-wrapper { 整個版面
注意：不同模板相關項目的命名方式可能不盡相同。

■ Blogger進入單篇文章時讓側邊欄(SideBar)完全消失不見
第一種 → 只想讓側邊攔消失，文章主體版面不變
搜尋以下程式碼
<div id='sidebar-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='一些有的沒的元件' locked='false' title='' type='HTML'/>
.....
</b:section>
</div>
然後增加紅字部份，把所有側邊攔的元件都包起來
<b:if cond='data:blog.pageType != "item"'>
<div id='sidebar-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='一些有的沒的元件' locked='false' title='' type='HTML'/>
.....
</b:section>
</div>
</b:if>

第二種 → 讓側邊攔消失，側邊攔消失的空白部份，將以文章版面拓寬遞補
搜尋以下程式碼
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='blog 文章' type='Blog'/>
</b:section>
</div>
之後在上方加入紅色部分，變成
<b:if cond='data:blog.pageType != "static_page"'>
<style>#main-wrapper{width:500px;}</style>
<b:else/>
<style>#main-wrapper{width:700px;}</style>
<style>#sidebar-wrapper {height:0px;}</style>
</b:if>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='blog 文章' type='Blog'/>
</b:section>
</div>
紅字說明
<style>#main-wrapper{width:500px;}</style> 有側邊欄情況下，文章的寬度(每個模板不一樣)
<style>#main-wrapper{width:700px;}</style> 進入單篇文章後，文章區塊的寬度。
<style>#sidebar-wrapper {height:0px;}</style> 進入單篇文章後，側邊欄的高度。我把高度調成0px代表側邊欄消失。

其他進階用法
<b:if cond='data:blog.pageType != "item"'>如果不在內頁的話
<b:if cond='data:blog.pageType != "archive"'>如果不在 Archive 存檔頁面的話
<b:if cond='data:blog.pageType != "index"'>如果不在 Label 標籤分類頁面的話
<b:if cond='data:blog.url != data:blog.homepageUrl'>如果不在首頁的話
<b:if cond='data:blog.pageType != "static_page"'> 如果不在獨立頁面的話

■ Blogger意見欄下面的空格區塊調整
搜尋comment-editor-src，然後將以下紅字部份改成要你要的高度
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
大約調為250px至260px就可以了，最低限制是210px。
如果低於210px意見欄版面會跑掉，自行測試看看吧。

■ 利用jQuery來作Blogger側邊攔(sidebar)的頁籤(tab)
第一步，將以下這段放入Blogger CSS中
/* jquery-tabs格式 */
.jquery-tabs{background-color:#FAFAFA;}
.jquery-tabs p span{background-color:#EFEFEF;border:1px solid
#CCCCCC;cursor:pointer;margin-right:2px;padding:2px 3px;}
.jquery-tabs p span.current{background-color:#FAFAFA; border-bottom-color:#fafafa;}
.jquery-tabs p{border-bottom:1px solid #CCCCCC;font-weight:bold;padding:0 10px 2px;}
.jquery-tabs li{border-bottom:1px dotted #CCCCCC;padding-bottom:3px;margin:5px 0;}
.jquery-tabs .mhot,.jquery-tabs.allhot{display:none;}

第二步，將以下語法放入新增的HTML/JavaScript小工具中

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".jquery-tabs span:first").addClass("current"); //為第一個span加入 .current 的樣式，預設選取
jQuery(".jquery-tabs ul:not(:first)").hide(); //ul 不是第一個時隱藏
jQuery(".jquery-tabs span").click(function(){ //若要使滑鼠移到 span 上時觸發函數，將click改為mouseover
jQuery(".jquery-tabs span").removeClass("current"); //為第一個 span 移除 .current 樣式
jQuery(this).addClass("current"); //為觸發的 span 加入樣式
jQuery(".jquery-tabs ul").hide(); //隱藏 ul
jQuery("."+jQuery(this).attr("id")).fadeIn("slow"); //這句是核心，class(.) 和觸發 span 的ID 一致的 fadeIn(漸顯)
});});
</script>
<div class="jquery-tabs">
<p>
<span id="tab_1">第一個頁籤標題</span>
<span id="tab_2">第二個頁籤標題</span>
<span id="tab_3">第三個頁籤標題</span>
</p>
<ul class="tab_1">
第一個頁籤內容</ul>
<ul class="tab_2">
第二個頁籤內容</ul>
<ul class="tab_3">
第三個頁籤內容</ul>
</div>

■ 消除IE超連結的虛線框
在CSS中加入以下定義即可解決
a:focus {
outline:none;}

■ 右方側邊攔留言區滑鼠移過後項目背景變色
.sidebar li:hover {
background: #EBF5FF;}

■ 將文字內容包覆在框架中 (內置框架)
<div style="border-bottom: #99c9c9 2px solid; border-left: #333333 0px solid; border-right: #333333 0px solid; border-top: #99c9c9 2px solid; height: 250px; overflow-x: hidden; overflow: auto; overflow: auto; width: 480px;">
文字文字文字文字
</div>

■ 隱藏Blogger上方搜尋列、導航列(NavBar)
#navbar-iframe {
display: none !important;}

相關來源：
・蕃茄腦袋: [Blogger 教學] 將外部連結另開視窗
・Blogspot讓「連結清單」建立的「水平導覽列選單」也有反白效果
・在水平連結導覽列高亮顯示當前頁面
・[Blogger] 在blogger beta加入最新回應及最新文章
・Blogger hack：讓文章分類只顯示文章標題
・如何讓『Blogger』在瀏覽器框上的文章標題跟網頁名字換位置？
・blogger 所有文章列表
・Re: [問題] blogspot的圖片框 - 看板 Blog - 批踢踢實業坊
・繼續閱讀懶人加強版: [BLOGGER]繼續閱讀懶人加強版 - [版本2.x]安裝教學
・[BLOGGER]文章字體顏色更改 - 看板 Blog - 批踢踢實業坊
・換Banner圖片及文章標題加上圖示>>0 與 1 謎詭世界
・修改Blogger Template,給讀者一個乾淨的閱讀環境 | 單行道
・Abin's Tech Note: 讓側邊列 (Sidebar) 的元件只在首頁顯示/不顯示
・Blogger技巧！終極隱蔽法，讓元件消失於特定頁面。 [瘋玩誌]
・[Blogger] 版型有一段空白拿不掉請幫忙 - 看板 Blog - 批踢踢實業坊
・jQuery 入門 – 滑動式 go Top | 【飛肯設計學苑】教學與分享
・Use jQuery to Scroll to Bottom or Top of a Page
・微酸的咖啡: Blogger功能加強 - Navigation bar
・布丁布丁吃什麼？: Blogger側邊欄開關小工具
・如何利用捲軸讓邊欄（Sidebar）元件縮短>>0 與 1 謎詭世界
・裝上隨機文章(Random Posts)，加強部落格的黏著度>>0 與 1 謎詭世界
・如何在Blogger新增隨機文章 - 藏經閣
・Abin's Tech Note: 應用 JSON 實現「最新文章」、「最新回應」和「Blog 聯播」
・JQ | 用jQuery做tab頁籤 @ Nie's blog :: 痞客邦 PIXNET ::
・如何修改blogger底部預設的分頁文字？ @ Channel【X】
・カミラ屋: [偽春菜] JS內容(0.2 Ver) 補齊內容
・たまらなくブラック★ロックシューター。 - Re:Moto - モトダのブログ【リモート】
・Abin's Tech Note: 為 Blogger 加入整合日曆 Archive Calendar
・Lightbox / Thickbox / Menu disappears behind Flash / YouTube video [fixed], Voodish Articles.
・[jQ]滑出式問與答(Q&A)清單 | 男丁格爾's 脫殼玩
・使用 ScrollUp jQuery Plugin 在網頁與部落格中加入回到頁首（Back To Top）按鈕 | 海豹雜記

Blogger 語法和外掛

0 Comments:

コメントを投稿

▎About

▎Recent Comments

▎Random Posts

▎Tag

##EasyReadMore##