WOW派

新增Blogger Header及Post的網頁元素

新增Blogger Header及Post的網頁元素,可加入圖片或Adsense

Blogger 雖然提供的template 很少, 介面看起來簡單,但操作有些複雜, 加上一些名詞從字面上不太明白意思, 有時候常不知道從何下手.不過Blogger 有一個好處是彈性很大, 透過網路上的資源, 學習一下別人的經驗, 熟悉及懂了blogger之後, 其實修改CSS或版面還是可行的.
這陣子的版面在千修萬改之下, 有點心得, 整理自己用過的部分, 分享一下.
首先就是如果想在 Header 放圖片, 或是文章上方放adsense, 最容易的方式就是用網頁元素(page element), 直接選擇 "HTML/JavaScript", 把程式碼或圖片引入就可以了. 但是預設的template, 其實這兩塊都是沒有新增網頁元素(page element).
所以我們可以自己新增一下.
如果google帳戶的語言設定,使用的是中文的話, 有些名詞真的蠻難意會的.
先介紹一下中文介面的修改步驟.
首先選擇範本--> 修改 html 就會看到下面這個畫面. 要注意的是, 每次修改之前, 最好先備份一下模板.
按一下 "下載完整模版", 把目前的template 另存到電腦就行了.
附帶說明 "展開小裝置範本" , 其實就是 "展開widget template", 如果這個選項沒有勾取, 那麼目前所看到的html並非完整的, 一些widget的 html code 是被隱藏起來了... 有時候修改模板時, 會異動到widget內的程式碼, 這時候必須要勾取這個選項.
這次先不用.

先看一下原始的template, 只有在side bar 及 footer 處,可以新增網頁元素(page element).

1. 先改header的部分, 找到這段程式碼
<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
把紅字部分改成以下.
<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
2. 再修改post的部分, 找到以下程式碼.
<div id='main-wrapper'><b:section class='main' id='main' showaddelement='no'>
把紅字部分改成以下.
<div id='main-wrapper'><b:section class='main' id='main' showaddelement='yes'>
儲存之後, 回到網頁元素, 應該可以看到以下的樣式了.

再自行新增網頁元素, 選"HTML/JavaScript", 把圖片或adsense加入,就大功告成了.

阅读全文...

如何在blogger 加入FunP推推王按鈕?

FunP推推王推出"推文按鈕", 可以在部落格文章中, 顯示這篇文章目前已有多少人推薦, 而且如果有推推王的帳號, 還可以直接推文, 這個功能很類似digg.
要如何在blogger加入這個按鈕呢?
兩個步驟搞定!
加入程式碼之前,先記得備分一下template.
然後,選範本-->選修改HTML-->勾取展開小裝置範本(一定要勾取,否則無法加入在每篇文章內)
1.在<head> </head>之間, 加入以下程式碼.
<script language='JavaScript' src='http://funp.com/js/funp_button.js'/>

2.找到 <h3 class='post-title'> 這一行
在之後,加入以下的程式碼
<script>funp_genButton("<data:post.url/>");</script>
預覽就可以看到效果了....

阅读全文...

部落格常用的小玩意整理

有朋友開始重建部落格, 突然覺得在blogger一路走來, 也花不少時間在找東西,試玩意.
所以乾脆把這些試過的東西稍微整理一下, 也許可以給開始建部落格的朋友們一個參考.
有些有寫試用文章,就順帶附上文章網址囉!
所列出的順序與重要性無關, 提到的網站只是個人經驗哦!
1. 分析 RSS 訂閱人數
有一個永久的 feed 網址是比較方便的, 萬一將來要把部落格搬家, 就不用擔心流失原來的讀者.
另外還可以分析訂閱人數一些數據, 可以提供很好的參考價值.
所以, 先找出你的部落格 feed 網址, 然後到Feedburner申請一個帳號.
以blogger為例, feed的網址格式如下
文章feed : http: //XXXXX.blogspot.com/feeds/posts/default
意見feed : http: //xxxxx.blogspot.com/feeds/comments/default
其中,xxxxx.blogspot.com 是部落格網址.
★ Feedburner : 目前已被證實由google收購了.

2. 統計瀏覽及線上人數
★ Google Analytics : 新介面的設計比以前優很多(應該的吧!:P)
★ Histats : 有許多樣版可選, 提供線上人數的選項.

★amung : 即時線上人數, 很簡單的功能, 但不用註冊
3. 提供rss reader 訂閱工具
現在使用reader訂閱文章的人很多, 而reader的種類也很多, 如果要一一加上去, 方便讀者訂閱的話, 版面就會有點眼花瞭亂, 因此, 用個小工具, 只放一個小圖示, 就可以符合大部份人的需求, 也不錯!
★ addthis : 可以製做一個訂閱多種書籤或rss reader的按鈕.
★ rss buttons : 動態顯現rss reader
教學文章: RSS button maker - 輕鬆為部落格加入30個 rss reader 按鈕
4. Email 訂閱文章
有些人習慣收email看文章, 而不使用reader, 所以可以加入這個方式.
★ Rmail
教學文章: 用 Email 訂閱 RSS Feed - Rmail
5. 熱門文章列表
在部落格中加入最常被點閱的文章, 也可以知道目前文章瀏覽數的變化情形.
★ spotplex
教學文章: Spotplex--為部落格加入熱門文章列表
其他當然還有許多小玩意囉! 有興趣的話, 可以參考這裡.

阅读全文...

在blogger首頁每篇文章加入(HEMiDEMi)按鈕

繼介紹過加入digg,推推王(FunP)"推文按鈕"到blogger後,黑米也有"推文按鈕", 同樣可以加在部落格文章中, 顯示這篇文章目前已有多少人推薦, 而且如果有黑米的帳號, 還可以直接推文.
要如何在blogger加入這個按鈕呢?
只要貼上一段程式碼就可搞定!除了可以在首頁每篇文章都顯示各推文數外, 也可以顯示在單篇文章.
加入程式碼之前,先記得備分一下template.
然後,選範本-->選修改HTML-->勾取展開小裝置範本(一定要勾取,否則無法加入在每篇文章內)
1.找到這段code
<p><data:post.body/></p>
這行程式碼代表文章內文.
2.如果想放在文章右側,在<p><data:post.body/></p> 之前, 加入以下程式碼.(注意: 如果不只一處, 就都要放在這行程式碼之前)
<div style='float:right;margin-left:10px;'> <script type='text/javascript'> HEMiDEMi_Bookmark_Button_URL = '<data:post.url/>'; HEMiDEMi_Bookmark_Button_Title = '<data:post.title/>'; </script> <script src='http://js.hemidemi.com/javascripts/hemidemi_bookmark_button.js' type='text/javascript'/> </div>
3.如果想放在文章左側,在<p><data:post.body/></p> 之前, 加入以下程式碼.
<div style='float:left;margin-right:10px;'> <script type='text/javascript'> HEMiDEMi_Bookmark_Button_URL = '<data:post.url/>'; HEMiDEMi_Bookmark_Button_Title = '<data:post.title/>'; </script> <script src='http://js.hemidemi.com/javascripts/hemidemi_bookmark_button.js' type='text/javascript'/> </div>
效果如下,

4. 如果要橫式按鈕, 就在HEMiDEMi_Bookmark_Button_Title = '<data:post.title/>';之後, 加入下述這行程式.
HEMiDEMi_Bookmark_Button_Style = 'button1';
效果如下,

阅读全文...

一個步驟在blogger加入digg 按鈕

digg 是個很具代表性的web 2.0網站, 除了可以上傳自己收藏的文章, 也可以與別人一起分享及評論.
如同之前那篇如何在blogger 加入FunP推推王按鈕? , 這個digg按鈕除了可以直接推文到digg網站, 同樣也可以顯示目前推的次數.
這是要修改到html的部分.
首先要注意的是, 每次修改之前, 最好先備份一下模板.
備份說明: 按一下 "下載完整模版", 把目前的template 另存到電腦就行了.
1. 選擇範本--> 修改 html --> 打勾展開小裝置範本
2. 找出這一行程式碼
<p><data:post.body/></p>
3. 如果想把 digg 按鈕放在文章內文的左邊, 如下圖.

將以下程式碼, 取代上述第2點那一列程式碼.
<div style="float:left; margin-right:10px;"> <script type="text/javascript"> digg_url = "<data:post.url/>"; </script> <script src="http://digg.com/tools/diggthis.js" type="text/javascript"/> </div> <p><data:post.body/></p>
4. 如果想把 digg 按鈕放在文章內文的右邊, 如下圖.

將以下程式碼, 取代上述第2點那一列程式碼.
<div style="float:right; margin-left:10px;"> <script type="text/javascript"> digg_url = "<data:post.url/>"; </script> <script src="http://digg.com/tools/diggthis.js" type="text/javascript"/> </div> <p><data:post.body/></p>
5. 如果想把 digg 按鈕放在文章內文的右下角, 如下圖.

將以下程式碼, 取代上述第2點那一列程式碼.
<data:post.body/> <div style="float:right; margin-left:10px;"> <script type="text/javascript"> digg_url = "<data:post.url/>"; </script> <script src="http://digg.com/tools/diggthis.js" type="text/javascript"/> </div>

阅读全文...

在blogger首頁隱藏全文的做法- hide fullpost

在blogger(blogspot)只顯示摘要這個功能, 應該是很多使用blogspot的人覺得需要的. 可以讓首頁呈現較多篇文章的摘要, 讓首頁載入時間快一點, 版面也可以較整齊.
在上次改版時, 參考了一些template, 也加入了一些功能, 包含閱讀全文的部分.
利用這次長假,把這個部分整理出來, 提供有需要的人參考一下.
首先要注意的是, 每次修改之前, 最好先備份一下模板.
備份說明: 按一下 "下載完整模版", 把目前的template 另存到電腦.
先選擇範本--> 修改 html --> 打勾展開小裝置範本
1.在 <head> 後面加入這行程式

<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' />

2.再來就是找到下列這段程式碼, 把紅字加上去

<b:includable id='post' var='post'> <div class='post' expr:id='"post-" + data:post.id'> <a expr:name='data:post.id'/>

3.再找到下列這段程式碼, 加入下述紅色程式碼.

<div class='post-header-line-1'/> <div class='post-body'> <b:if cond='data:blog.pageType == "item"'> <p><data:post.body/></p> <b:else/> <style>#fullpost {display:none;}</style> <p><data:post.body/></p> <span id='showlink'> <p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] 繼續閱讀...</a></p> </span> <span id='hidelink' style='display:none'> <p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] 只顯示摘要...</a></p> </span> <script type='text/javascript'> checkFull("post-" + "<data:post.id/>"); </script> </b:if> <div style='clear: both;'/> </div>