Ed32: blogger

顯示具有 blogger 標籤的文章。顯示所有文章

【Blog】版面修改(官方方式)

標籤： blogger

【目的】

修改 blogspot 版面(template)。

【方法】

早期 blogspot 並無提供太多的細部修改方式，所以必須

去網路上找一些3rd party 的樣板。
或細部了解 blogspot 模板的語法，調整出自己所需要的樣子。
[如] Blogger template模板教學課程---CSS外觀解說
http://01mistery.blogspot.com/2008/08/blogger-template-css.html

目前 blogspot 本身已提供了方便的細部修改方式。

【步驟】

以下以官方所提供方式為例。

範本調整
- 進入 範本設計工具
- 範本頁面會出現許多範本提供挑選
- 版面配置可提供版面配置方式。裡面的 調整寬度 可以調整版面配置寬度。
- 進階頁面提供字型與顏色的調整。
設計調整
- 若要調整網誌內容，要從設計頁面調整。
- 進入就能選擇 張貼選項。
- 如果需要移除不需要的小工具，先選擇編輯符號（紅色框框）
  
  進入編輯頁面後再點選移除按鈕即可移除不需要的小工具。
- 其它不再贅述。

【一些小工具】

訪客觀察與流量分析
- Google Page Rank
- Flag Counter
- Clustmap
- IPutilities
- Google Analytics (官方目前已提供 統計資料 這功能，還蠻詳細的)
其他
- 美人時計
- 語言學習 http://www.internetpolyglot.com/
- Public location
- Tag
- Archives
Link
- Linux mobile development http://blog.csdn.net/absurd
- 鉅亨網
- 北市圖
- 北科圖
- 紫之工坊
- 小元的記憶部屋
- 風秀小牛的花園
- 旅俄台商聯誼會
- Bike to Protect Our Plant
- Google Analytis
- Mike風景攝影全紀錄
- 486的大丈夫日記
- ERA English News
- Formosa English News
- 中原張靜愚 http://engsite.ncu.edu.tw/database/
- 語言指導 http://www.languageguide.org/

【參考】

5款適用Blogger平台的Revolution Templates
http://jinnsblog.blogspot.com/2009/02/revolution-templates-for-blogger.html
Blogspot 範本說明
http://blogspotpush.blogspot.com/2009/03/blogspot_2635.html

【Google】Analytics

標籤： blogger

Google Analytics http://www.google.com/analytics/ 提供完整的流量分析。

【安裝】

申請成功之後，會給一組 UA開頭的 Key。

讓我們先複習一下基本網頁的組成元素。看看要把 Analytics 提供的程式碼放在何處。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 [方法二: 官方建議放在這邊]
 </HEAD>
 <BODY>
 [方法一:個人建議放在這邊] 
 </BODY>
</HTML>

使用方式之一:
要加入網頁的基本JavaScript，我把它放在</body>的前面(亦即整個網頁的最後面，才比較不會拖累原本要顯示網頁的內容)。其中UA-XXXXX-X要填入 Google Analytics 給你的Key。
```
<pre class="brush: js;"><script src='http://www.google-analytics.com/urchin.js' type='text/javascript'>
</script>
<script type='text/javascript'>
_uacct = "UA-XXXXX-X";
urchinTracker();
</script></pre>
```

使用方式之二:
(這部分是Google所提供的官方用法，申請完 Google Analytics後會提示，摘錄部分內容如下)

把Google Analytics 給你的程式碼放在</head>之前(本身不建議，因為會影響原本網頁要載入的速度)

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

使用方式之三:
這是比較方便的方式，找看看如果所申請的服務(如 Google Code)已經有提供設定 Google Analytics ID的地方，就可以比較不用再費工夫，直接填入 ID 即可。
如果需要更加詳細了解Google Analytics，請參考JavaScrip說明
http://www.google.com.tw/support/googleanalytics/bin/answer.py?hl=b5&answer=76305
安裝後30分鐘走右，就會產生報告。Status的欄位也會打勾(如#1下方)。
不過比較完整的報告可能需要24H才會產生。

【操作】

將語系設成中文
- 點選右上方設定
- 將語言改成 中文(繁體)

【分析】

我們有些東西會比較在意的

關鍵字
知道訪客所使用的關鍵字，來增加該部分的文章/功能，增加點選率。(請點選 流量來源 | 關鍵字)。
瀏覽器
訪客始使用的瀏覽器，用來加強對該瀏覽器的支援。
搜尋引擎
該向那個入口網站增加廣告量，是Google還是Yahoo呢。
訪客分佈圖
於城市、國家/領域、洲別次地區、洲別來作客戶分析。
自訂報表
用自己定義的報表來將自己要的資料列出(假設要了解訪客區域，淡藍色是指標，而綠色是緯度)。

總而言之，功能蠻多的，要深入了解的話，還是要花時間去看。

【參考】

分析自己的blog- Google Analytics http://vkyoung.pixnet.net/blog/post/3445396

【問題】

如何搭配 Google 網站管理員使用?
如何申請Google網站管理員工具 http://gordon168.tw/?p=88

【Blog】tree Menu

標籤： blogger

Make a D'tree Menu at Blog http://www.blogspottutorial.com/2008/05/maka-d-menu-at-blog.html

【WLW】plugin development

標籤： blogger

【目的】

創建自己的Windows Live Writer Plugins

【環境】

Windos Vista
Visual studio 2008

【準備】

icon.gif(20x18)
system.windows.forms.dll
WindowsLive.Writer.Api.dll
GUID產生器 http://www.guidgen.com/Index.aspx

【步驟】

打開 Visual studio 2008，開一個 C# 的案子。
把class1.cs 改成 plugin.cs。
由於我WLW是Portable的，進入步驟#4加入參考。
加入參考，加入system.windows.forms.dll/WindowsLive.Writer.Api.dll。
加入 icon,gif，並定義 命名空間 與 建置動作。

ps.此部分上有問題，所以目前打開WLW會跑出下面警告，這問題還需解決。
參考 http://coolbirdsss.blogspot.com/2008/05/wlw-pluginicon.html

貼上程式碼

using System;
using System.Collections.Generic;
using System.Text;
using WindowsLive.Writer.Api;
using System.Windows.Forms;

namespace LiveWriterExample
{
    [WriterPlugin("d2c99304-8648-4696-9ef1-6a82a2d070c9",
        "LiveWriterExamplePlugin",
        Description = "Makes highlighted text bold.",
        HasEditableOptions = true,
        ImagePath = "icon.gif",
        Name = "Bold Text Plugin",
        PublisherUrl = "http://www.liveside.net")]
    [InsertableContentSource("Bold Text")]

    public class LiveWriterExamplePlugin : ContentSource
    {
        public override DialogResult CreateContent
            (IWin32Window dialogOwner, ref string content)
        {
            // If nothing is highlighted, content will be empty.
            // If this is the case, the plugin does nothing.
            if (!string.IsNullOrEmpty(content))
                content = string.Format("<b>{0}</b>", content);

            return DialogResult.OK;
        }

    }
}

點選建置 | 建置方案
產生Bin/Debug/ClassLibrary1.dll，把這個dll放到WLW Plugin的路徑。
打開wlw，右邊會出現plugin的選項。
承 #8 / #9，如果不想每次都這麼麻煩的話，可以在 專案屬性 定義 建置事件 與偵錯屬性
其它請參考下列文件。

【結果】

插入視窗的 Bold Text 選項就是剛剛跑出來的結果。

【參考】

Developing Plugins for Windows Live Writer
http://www.code-magazine.com/article.aspx?quickid=0804092&page=1

【Blog】LightBox 2

標籤： blogger, lightbox

在Blogspot上面使用LightBox2。

【安裝】

下載 LightBox source code from
http://www.huddletogether.com/projects/lightbox2/
由於部落格是使用blogspot，而LightBox2是放在另一個網站，所以要更改下面檔案內容，將裡面的放gif圖的檔名路徑改成絕對路徑。指到放到LightBox2的網站。
1. js/lightbox.js
2. css/lightbox.css
將LightBox2放到網站上。

【設定】

在Blogspot的<html>和<title>中加入，當然也要加上絕對路徑。目前是以還沒加上絕對路徑的為範例。

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

【使用】
直接由LightBox2那邊借圖作Demo。

單獨，點小圖會出現大圖。
群組，點第一張之後，可以接著換到下一張。

【參考】

jQuery lightBox plugin，看起來很類似。
http://leandrovieira.com/projects/jquery/lightbox/
Lightbox 收集
http://blog.linym.net/archives/106

【問題】

群組方式，有類似幻燈片撥放的功能嗎?

【Zoundry Raven】Blog writter

標籤： blogger, raven

除了WLW以外，另外又找了一套 Zoundry Raven來作Blog的離線備份。目前這篇文章就是使用Raven發佈。

所以目前知道大概有幾個方式可以用來撰寫Blogspot

直接登入Blogspot撰寫
利用發信的功能撰寫
利用Google Doc撰寫
使用WLW(Windows Live writer)，裡面有許多豐富的Plugin
利用Zoundry Raven，除了可以撰寫以外，還支援Portable mode拿來備份。如果要設成Portable mode，記的將Raven2Go打勾。

如果剛開始的設定是由WLW匯入的，記得將你的圖片來源指到Picasa(如果你是用Picasa的話)

這套軟體可以一次將一篇文章發佈到多個Blog，也可以拿來當線上備份使用。

【Blog】SyntaxHighlighter 2.x

標籤： blogger

這個就是部落格常用來顯示code highlight的套件。目前已經更新到2.x。以下重點摘錄如何配合WLW使用。

【下載】

SyntaxHighlighter
http://alexgorbatchev.com/wiki/SyntaxHighlighter
code snippet plugin for Windows Live Writer
http://precode.codeplex.com/

【安裝】

先裝/設定好SyntaxHighlighter
再裝PreCode Code Manager(code snippet plugin for Windows Live Writer)。
打開WLW就會發現多了PreCode Snippet這個plugin。
點兩下打開會出現PreCode Code Snippet Manager，打入你要顯示的code，
記得Surround with要選PRE，而Highlighter Class則針對你的語言選定。最後按OK。
上傳到你的文章到Blog。