Popular Posts

Tags

工商服務


Archive for the ‘blogger’ Category:

從 Blogger 轉移到 WordPress 的技巧

本站已經由 Google 的 Blogger 轉移到 WordPress,這是轉移到 WordPress 之後的第一篇文章。 用過 WordPress 之後才知道 WordPress 的好,WordPress 相對於 Blogger 的優點如下: 像標籤雲、搜尋、繼續閱讀、最新文章、最新留言、分頁…等等基本功能,已經內建在 WordPress 裡了,不需要辛辛苦苦去改範本、研究程式碼,而 Blogger 往往因為手動加了這些功能,而變得極為擁腫。 可以上傳圖片、影片、音樂…等檔案,以往這些在 Blogger 裡,都需要再尋找額外的網頁空間存放,並且 WordPress 上傳的圖片會自製縮圖。 對於讀取權限的控管,WordPress 可以做到完全公開、公開給特用用戶、單篇密碼保護、禁止搜尋引摯、完全隱藏。 WordPress 已經內建幾個知名部落格系統的轉移工具,當然包括 Blogger。 WordPress 同時有免費線上部落格(BSP)及部落格架站程式。 WordPress 的佈景主題(Themes)更多、更漂亮。 琳瑯滿目的外掛程式,很難找不到你想要的功能。


下載本站的 Template

訪客留言要索取本站的 Template,不過他沒有留下 E-Mail,所以我就直接打包釋出給大家下載。 這是 Blogger 的 Template,而不是 WordPress 的 Template。 這個 Template 的原始版本應該是來自 Designfruit 及 Blogcrowds,我把這個 Template 改成 Blogger 可用,並且是 “不限寬度” 的版本,也加入了一些我自己寫的 Script,如果覺得改得還可以的,請直接取用。 下載位址: vixual-blogger-template.zip (裡面包含所有圖檔及其它資源) 安裝至 blogger 時須選取 “展開小裝置範本”,將 template.txt 的內容全部貼上即可,裡面很多連結至 http://citypig.googlepages.com/ 的項目,請自己上傳、更改至自己的網路空間,本站下次如有改版,可能就會全部刪除了。 另外,這個 Template 在 IE 下是有 Bug 的,如果螢幕不夠寬,內容的部份會跑到側邊欄的下面,就等待 CSS 能力比較強的人來解決了。


讓 FCKeditor 瀏覽圖檔時,可以顯示縮圖

FCKeditor 雖然有提供很多種程式語言的檔案瀏覽程式,讓你可以很方便地上傳及插入遠端伺服器上的圖檔,但在瀏覽檔案的同時,我們最需要用到的圖檔卻不能顯示縮圖,感覺很不方便 (應該是故意留了一手)。 雖然官方網站上有建議使用 CKFinder 這支外掛程式來管理伺服器上的檔案,但 CKFinder 卻不是免費的。 思考了一下,雖然我的 PHP 很爛,但只是要做個縮圖的功能應該還難不倒我,於是就花了幾個小時把縮圖的功能實做出來。原理很簡單,只是先在相同目錄下產生 “.thumb.gif” 的縮圖檔,在列示時將縮圖顯示出來。 以下的修改方式適用於 FCKeditor 2.51 及 2.6Beta 版,請參考下列步驟 (推薦使用 2.6Beta 版): 安裝 php-gd 模組 其實製作完美縮圖的程式應該是 ImageMagick,但 ImageMagick 若要與 php 整合,步驟似乎比較麻煩,以簡單為原則,我們還是使用 GD 模組,你可以用 yum 安裝: yum install php-gd 安裝完請動新啟動 apache: service httpd restart 啟用 FKCeditor 的 php 遠端資源瀏覽程式 編輯 fckeditor/editor/filemanager/connectors/php/config.php: 將 $Config['Enabled'] 的值設為 true。 將 $Config['UserFilesPath'] 的值設為使用者圖檔的相對路徑 (網址的相對路徑)。 將 $Config['UserFilesAbsolutePath'] 的值設為使用者圖檔的絕對路徑 (伺服器上的絕對路徑)。 存檔完成。 編輯 fckeditor/fckconfig.js: 將 ...


解決當 Blogger 的 "隱藏全文/繼續閱讀" 功能因為點選較新或較舊的文章而失效的狀況

在 Blogger 加入 “隱藏全文/繼續閱讀” 的功能之後,會因為點選 Blogger 下方的 "較新" 或 "較舊" 的文章連結而導致功能失效!! 會失效原因是因為你在點 "較新" 或 "較舊" 的連結時,所要切換的內容會以 AJAX 的方式載入,而大家所寫的 “隱藏全文/繼續閱讀” 都是以 JavaScript 所寫的,當 AJAX 直接切換內容時,並沒有觸發到用 JavaScript 所寫的程式,所以,我們要做的就是讓 AJAX 的這個功能失效。 修改 Blogger 範本,點選 “展開小裝置範本”,找到下列原始碼,這些原始碼就是新舊文章的連結,將 “紅色” 的字串去掉,最後再存檔即可: <b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> </span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> </span> </b:if>

Posted in blogger
Tags:

將 Blogger 中的標籤改成標籤雲(Tag Cloud)

當 Blogger 中的文章一多,標籤也跟著變多,而 Blogger 的標籤元件就會變得落落長,不好看也不好搜尋。 這時候如果改成 “標籤雲” 就會是一個不錯的作法。在標籤雲中運用字體大小及顏色的變化,就可以很快的找你要的標籤。 修改步驟 編輯 Blogger 樣板,並 “展開小裝置範本”。 在 <Style> 區塊內加入: #Label1 ul { font-family:Arial; padding:0px; text-align:justify; } #Label1 li { display:inline; } 搜尋 </head>,在上一行加入: <script> function parseTag(){ var tagA = document.getElementsByTagName('a'); for(var i=0; i<tagA.length; i++){ if(tagA[i].id == 'tag'){ var tag = tagA[i]; ...

Posted in blogger
Tags:

blogger 資料整理

RSS 相關 blogger 的 ATOM/RSS 預設是依更新時間排序,網址為: http://vixual.blogspot.com/feeds/posts/default http://vixual.blogspot.com/feeds/posts/default?alt=rss 如果要讓它依發表時間排序,網址須改為: http://vixual.blogspot.com/feeds/posts/default?orderby=published http://vixual.blogspot.com/feeds/posts/default?alt=rss&orderby=published Label(標籤)的 RSS 網址: http://vixual.blogspot.com/feeds/posts/default/-/label 將上方的”label“換成 Blogger 上的標籤名稱即可。 blogger 的留言的 ATOM/RSS 網址為: http://vixual.blogspot.com/feeds/comments/default http://vixual.blogspot.com/feeds/comments/default?alt=rss 如何讓 blogger 不自動載入 ajax 在 <body> 的下一行加上: <script type='text/freezescript'> _WidgetManager._Init=function(){}; _WidgetManager._SetPageActionUrl=function(){}; _WidgetManager._SetDataContext=function(){}; WidgetManager._SetSystemMarkup=function(){}; WidgetManager._RegisterWidget=function(){}; </script> 如何讓版面依內文或列示載入不同項目 判斷是否為內文: <b:if cond='data:blog.pageType == "item"'> 載入的項目 </b:if> 判斷是否為文章列示: <b:if cond='data:blog.pageType != "item"'> 載入的項目 </b:if>

Posted in blogger
Tags:

Blogger 的樣版下載網站

Blogger 可用的樣版 Mashable Final Sense Blogcrowds Blogger Templates Free Templates


在 Blogger 中使用 dp.SyntaxHighlighter 顯示程式碼

db.SyntaxHighlighter 是一支不錯的程式碼高亮度顯示程式,特點為: 顯示行號 支援12種程式語言 模組化載入需要的程式語言 支援 “<pre>” 及 “<textarea>” 區塊 純文字檢視 複製到剪貼簿 直接列印程式碼 缺點就是載入速度較慢。 安裝步驟 修改 blogger 樣板,搜尋 “</body>”,在 “上方” 加入(你可以選擇你要的語言載入即可): <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shCore.js'></script> <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushPhp.js'></script> <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushJScript.js'></script> <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushSql.js'></script> <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushXml.js'></script> <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushDelphi.js'></script> <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushPython.js'></script> <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushRuby.js'></script> <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushCss.js'></script> <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushCpp.js'></script> <script class='javascript'> dp.SyntaxHighlighter.ClipboardSwf = 'http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); </script> (因為 “偷吃步” 的關係,程式直接連到 dp.SyntaxHighlighter 的 SVN 上,你可以視情況下載回來放到自己的伺服器) dp.SyntaxHighlighter 原本已經有一個 CSS 檔了,但如果將這個 CSS 檔以 “Link” 的方式載入,卻無法正常顯示。所以,請自行增加下列 CSS 到 blogger ...

Posted in blogger
Tags:

在 Blogger 中使用 google-code-prettify 顯示程式碼

google-code-prettify 是一支不錯的程式碼高亮度顯示程式,特點為: 支援 15 種程式語言(但某些語言似乎還沒完成) 程式僅兩個檔案 載入速度較快 缺點為: 跟 IE 的相容性比較不佳,在 IE 內複製程式碼時無換行符號 無行號顯示 僅支援 “<pre>” 區塊 程式碼過長時不會自動顯示捲軸 (可透過修改 CSS 解決) 安裝步驟 修改 blogger 樣板,搜尋 “</head>”,在 “上方” 加入 <link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' type='text/css' rel='stylesheet' /> <script type='text/javascript' src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js'></script> (因為 “偷吃步” 的關係,程式直接連到 google-code-prettify 的 SVN 上,你可以視情況下載回來放到自己的伺服器) 繼續搜尋 “<body>”,在標籤內的 onload 事件加入: prettyPrint(); 儲存即可。 使用方法 使用 “<pre>” 區塊,需將 “&” 轉換為 “&amp;”、”<” 轉換為 “&lt;”、”>” 轉換為 “&gt;”: <pre class="prettyprint"> 程式碼 </pre> 參考網頁 使用 dp.SyntaxHighlighter 顯示程式碼

Posted in blogger
Tags:


  • 彙整

  • 分類

  • 其它

Content

我們解決了什麼問題?我們創造了什麼價值?