2008/08/31

弄了半天的繼續閱讀功能

 

 

因為google bolgger沒有顯示摘要讓觀看者自行點開有興趣的文章,繼續閱讀的功能。

所以一開始在po文時,文章都會很長...非常傷眼...

原以為這個功能是非常簡單,網路上隨便找都會有的,

的確,google一搜,有一堆....其中最吸引我的是下面的懶人包

http://cjhtech.blogspot.com/2007/02/blogger-3-htmlfor-blogger.html

不過,我試了半天,還是不行...@@...而且他好像有很多模版是不支援的,

考慮到將來可能會換模版,只好放棄了。

接下來是涼鳥大的WLW外掛,在PTT有看到涼鳥大說可以用"給我範本"中的span達到繼續閱讀的功能。

http://coolbirdsss.blogspot.com/

不過...還是失敗,可能我抓到的是1.0版的,不過我點1.1版的連結,抓下來的還是1.0版,奇怪...

另外,他的給我範本的功能似乎只是幫忙將在要隱藏的文章前後各加個<span class='fullpost'> </span>

遜腳如我還以為這樣就可以隱藏文章了,直到我看了PTT tk1211大分享的方法,才知道,

原來要使用涼鳥大的外掛,前提是要自己已在blogger模版中加入文章隱藏的功能才行(我猜想的)。

下面就是PTT tk1211大分享的方法。

作者  tk1211 (THE FRUSTRATED)                                     看板  Blog
標題  [分享] Blogger繼續閱讀 (適用精華區懶人包無法安裝的template)
時間  Tue Mar 25 10:05:37 2008
───────────────────────────────────────

試了一下發現精華區提供的兩個繼續閱讀語法..
結果都沒有辦法用在一些特定的template上面
特別是Blogcrowds http://0rz.tw/2b3ME這邊抓的template很多不能用

似乎是因為它們跟blogger的預設格式差異太大的關係
所以google了一下找到這篇教學 http://0rz.tw/653OV

當然它不像懶人包按一下就自動幫你安裝好
需要自己去改一些html語法, 但也不是太難而且彈性比較大
可以自訂每篇文章摘要要顯示幾行或是顯示全文

1. 先到版面配置 -> 修改HTML
   找到]]></b:skin>這行, 並在它跟</head>之間加上下面這段

   <!-- Style to implement "Read more on this Article" link in all the posts
(Start) -->
<style>
    <b:if cond='data:blog.pageType == "item"'>

        span.fullpost {display:inline;}
    <b:else/>
        span.fullpost {display:none;}
    </b:if>
</style>
<!-- Style to implement "Read more on this Article" link in all the posts
(End) -->

2. 儲存 -> 點一下展開小裝置範本
   在<data:post.body/>後面加上下面這段

<!-- Code to show "Read more on this article..." Link (Begin) -->
          <b:if cond='data:blog.pageType != "item"'>
              <span>
                <a expr:href='data:post.url' style='color:#0000FF;
text-align:right; font-weight:bold; text-decoration:none' >Read more on this
article...</a>
             </span>
          </b:if>
          <!-- Code to show "Read more on this article..." Link (End) -->

    前製作業到這邊就完成了

    因為預設是英文, 所以可以自己把上面的"Read more on this article..."
    改成"繼續閱讀"  對字型顏色不滿意也是改上面<a expr:那串就可以了

3. 以後每次發文的時候如果只想要顯示前面五行字
   就在第六行開始之前加上<span class="fullpost">並在文章結尾加上</span>

這是完成的效果, 我自己的blog
http://highcommu.blogspot.com

--
※ 發信站: 批踢踢實業坊(ptt.cc)

6 則留言:

匿名 提到...
網誌管理員已經移除這則留言。
涼鳥 提到...

你好,我是涼鳥
我們的工具只是輔助你在wlw插入fullpost這個標籤,
所以還是要照你說得先做好設定喔,
另外之前發佈的v1.1有問題現在已經修正,麻煩你到以下網址重新下載
http://0rz.tw/0e4Gs

下載後把你要插入fullpost的文字開頭反白到最後,這樣就能幫你插入了,你會使用繼續閱讀應該懂我在說什麼,如果有問題歡迎到我們部落格來問喔: http://coolbirdsss.blogspot.com/

好像打的有點長@@

涼鳥 提到...

另外,如果你要消除洋蔥頭圖片的框框的話
.post img {
padding:4px;
border:1px solid #cde;
}
把border這行拿掉就可以摟~

笑哈哈 提到...

非常感謝涼鳥大的幫忙哦,我有空會試看看的,不過洋蔥頭圖片的框框把border拿掉,還是一樣有框說...
而且我的HTML碼看到的是
src="http://coolbirdss.myweb.hinet.net/onion/onion002.gif" border="0
不是您所說的
.post img {
padding:4px;
border:1px solid #cde;
}
我將我的HTML碼中border="0"拿掉,還是有框框說...

涼鳥 提到...

到版面配置的修改html那邊,
是範本的css影響的,不是html造成的,
有問題再問我吧^^

笑哈哈 提到...

成功了,涼鳥大真是大好人~~大感謝!!