almost 5 years ago

最近Blogger的文章越來越多,開始做一些調校。

把從剛開始套用template到目前修改/新增的功能

記錄一下參考資料及改過的地方:

DarkRed Template

最吸引人的是 Related Post 功能,

但他的缺點是不能吃有 / 的標籤

所以用比較暴力的作法,就是將每篇文章分成兩種標籤

一種是 多層樹狀標籤AAA-BBB-CCC 格式

另一種是給 Related Post 的 標籤

兩種分類是分開的

把Template的xml稍微修改一些色碼 (範本>編輯HTML):

依照自己的需求,刪掉以下部分:

<nav id='navtopx'>
<div id='navtop'>
<ul id='navtopnya'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Archive</a></li>
<li><a href='#'>Comments</a></li>
</ul>
</div>
<div id='mobinavtop'>
<a class='gtonavtop'>Go to...</a>
</div>
<div id='search-form-feed'>
<form action='/search' onsubmit='return updateScript();'>
<input id='feed-q-input' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}' onkeyup='resetField();' type='text' value='Search...'/>
<input class='search-button' type='submit' value='Search'/>
</form>
<div id='search-result-container'/>
<div id='search-result-loader'>Searching...</div>
</div>
</nav>

<b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
<b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>

</b:widget>
</b:section>
</div>
<div id='socialme'>
<ul>
<li><a class='fb' href='#'><span>Facebook</span></a></li>
<li><a class='tw' href='#'><span>Twitter</span></a></li>
<li><a class='go' href='#'><span>Google+</span></a></li>
</ul>

<div id='navixnya'>
<ul id='navnya'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li class='dgnsub'><a href='#'>Archive</a>
<ul class='subnya hidden'>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
</ul>
</li>
<li><a href='#'>Comments</a></li>
</ul>
</div>
<div id='mobinav'>
<a class='gtonav'>Go to...</a>
</div>

<ul>
<li><a class='rpost'><span>Recent Posts</span></a>
<ul class='rpostx hidden'>
<script src='/feeds/posts/default/?alt=json-in-script&amp;callback=dropdownposts'>
</script></ul>
</li>
<li><a class='rkmtr'><span>Recent Comments</span></a>
<ul class='rcommentsx hidden'>
<script src='/feeds/comments/default?alt=json-in-script&amp;callback=dropdowncomment'>
</script></ul>
</li>


</ul>
</div>
<div class='rss'>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Post RSS'>Posts RSS</a>
</div>

同時發覺Blogger的限制:單頁網頁只能呈現1MB,

所以有時候明明在 最多顯示 那邊修改了文章數量,

但Blogger文章總是會少於該數量,而且每頁還不同數量@@

最好的解決辦法是在文章裡面加入 繼續閱讀標示

但因為本身Template就有呈現將文章摘要的功能(但實際上文章size未改),

插入閱讀標示後,就會出現 閱讀更多 的按鈕
所以把Template的以下部分拿掉

<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>

多層樹狀標籤

參考 Wayne Fu 的 Blog 來實做

裡面有每個工具非常詳細的說明,站長也很熱心回覆

新增自訂功能

最後就是利用

版面配置>新增小工具>HTML/JavaScript將第三方功能或其他程式

來增加各種Widget

當然如果熟悉一點html語法(google有很多參考資料),

在網路上看到不錯的設計樣式,配合瀏覽器(Chrome)的檢查元素的功能

就可以設定成自己想要的樣子

  • ex:社群連結

今天在某個網站上看到不錯的社群連結樣式


在社群連結的位置,按滑鼠右鍵>檢查元素


就可以看到該社團連結的程式碼


在對著該行程式碼按滑鼠右鍵>Edit as HTML


就利用Ctrl系列將程式碼複製下來,修改成自己想要的樣子

<div class="widget-content">
<a href="https://facebook.com/DapperLoucom" target="_blank"><img src="http://i49.tinypic.com/169n7ns.png" border="0" alt="Dapper Lou Fan Page"></a>

<a href="https://twitter.com/DapperLou" target="_blank"><img src="http://i47.tinypic.com/1zx5xer.png" border="0" alt="Dapper Lou Twitter"></a>

<a href="http://pinterest.com/DapperLou" target="_blank"><img src="http://i50.tinypic.com/2niba79.png" border="0" alt="Dapper Lou Pintrest"></a>

<a href="http://instagram.com/dapperlou" target="_blank"><img src="http://i48.tinypic.com/2n14xvc.png" border="0" alt="Dapper Loi Instagram"></a>
</div>

每一個 href後面跟的就是 "各種服務網址"

而每一個 xxx.png就是icon圖案的網址,

可以到IconArchive找自己喜歡的圖案

把這些服務網址、圖片網址替換掉

就可以是自己想要的社群連結了

當然如果不希望某個社群連結出現

就把 整段 <a ...... 到 </a> 的地方刪掉

同理如果想要新增新的連結圖案,

就把整段 <a ...... 到 </a> 的地方複製貼上

改成自己想要的圖案、社群連結

← 協同合作服務 Google、Mural.ly、Trello 搬家囉!!! 搬到Logdown的首發文 →
 
comments powered by Disqus