弱格吉米言

發表文章

目前顯示的是有「Blogger」標籤的文章

[Blogger] 再來試試另一套燈箱．Zoombox on Blogger

嗯，去年底其實 Blogger 開始提供內建的燈箱效果，但好像有一些問題，有人在官方還沒提供設定開啟關閉的功能之前就寫了一篇：如何關閉燈箱效果的教學文章，後來 Blogger 後台也提供了設定關閉的選項：在設定-->文章和留言裡，在燈箱中展示圖片，可以選擇是否啟用。一般如果是使用 Picasa 做為圖床的話，用 Blogger 內建的燈箱也就可以了，只要你看習慣 Google Plus 的燈箱，那個效果是相同的，當這篇文章有多張圖片時，燈箱底下會有一排縮圖可以點選。但如果不是用 Picasa 做為圖床的話，像我是用 Flickr，實際測試的結果，用來貼在文章裡的小圖必需至少是大尺寸，中型尺寸燈箱就跑不出來，後來我就關掉內建的燈箱效果，還是繼續使用 Colorbox。最近在找燈箱效果的時候，有找到一套 Zoombox，也是使用 jQuery 的燈箱，這套跟 Blogger 內建的燈箱效果一樣，多圖群組時可以在底下顯示一排縮圖可以讓你點選。寫一下怎麼裝：一、首先你也是得先下載 Zoombox，解壓放置到你的網路空間上。請至官網下載： http://www.grafikart.fr/zoombox ，目前最新版本是 2.0.16。二、在 <head></head> 之間，先 include jQuery 和 zoombox 的 js 與 css <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript" src=" http://your.url /zoombox/zoombox.js"></script> <link href=" http://your.url /zoombox/zoombox.css" rel="stylesheet" type="text/css" media="...

閱讀完整內容

突然發現 PageRank 居然升到 5 了

我很久沒查這東西了，當很多友站部落格都達到 PageRank 5 的時候，印象中我停在 PageRank 4 已經好久了，不過我去年開始應該都有穩住 PageRank 4，很少往下降回 PageRank 3。公司的網站也在今年五月改版之後，從原來的 PageRank 6 升到了 PageRank 7。其實我沒做什麼耶，如果您有興趣的話可以看我以前寫的這篇： [Blogger] 淺談 Blogger SEO (Search Engine Optimization) ，其實最後的關鍵還是要有持續優質的內容，當然也要感謝網友們的支持與收看，幫忙把文章分享出去，當然這也鞭策著我繼續努力寫更多的文章。老爸網路觀察室有一篇新文章提到「 Google更新搜尋演算法，大幅度影響網頁排名」，或許就是這次敝站 PageRank 會增加的原因吧。以新的搜尋演算法的設計，未來保持新資訊的提供變得更為重要，有能力閱讀新知識並分享的人將變得更有價值，Web 3.0 精神。 PageRank 是什麼？ PageRank ，網頁排名，又稱網頁級別、 Google左側排名或佩奇排名，是一種由搜索引擎根據網頁之間相互的超連結計算的技術，而作為網頁排名的要素之一，以Google公司創辦人拉里·佩奇（Larry Page）之姓來命名。此技術通常和搜索引擎優化有關，Google用它來體現網頁的相關性和重要性。Google的創始人拉里·佩奇和謝爾蓋·布林於1998年在史丹福大學發明了這項技術。 PageRank通過網路浩瀚的超連結關係來確定一個頁面的等級。Google把從A頁面到B頁面的連結解釋為A頁面給B頁面投票，Google根據投票來源（甚至來源的來源，即連結到A頁面的頁面）和投票目標的等級來決定新的等級。簡單的說，一個高等級的頁面可以使其他低等級頁面的等級提升。 (From: wiki ) PageRank 查詢工具 http://pagerank.easylife.tw/ http://www.prchecker.info/

閱讀完整內容

[Blogger Draft] Blogger 後台可以自訂選擇行動範本的版型囉！

在後台的「範本」項目中，多了一個行動服務的設定，點選行動服務旁邊那個 ICON，就會跑出底下的畫面，可以讓你選擇不同的行動版的版型唷！

閱讀完整內容

[Blogger Draft] Blogger 後台管理介面改版囉

主功能選單移到了左手邊，速度變快了，編輯文章的列表裡，每篇文章右邊的欄位多了文章瀏覽次數的數據。搶先用： http://draft.blogger.com/home 說實在的，很期待 Blogger 之後會推出跟 Google + 整合的一些功能。

閱讀完整內容

[Blogger] Blogger Draft 總算提供了更改網站圖示的介面

Blogger Draft 總算提供讓你從版型工具更改網站圖示的介面功能了。(Wed. June 8, 2011) 說真的，不懂為什麼這個功能一直沒提供耶。以前通常的做法就是加底下那一行在 </head> 結尾之前 <link href=' url of ico ' rel='shortcut icon' type='image/vnd.microsoft.icon'/> 去蓋掉原來 Blogger 的圖示設定，但其實原始碼裡是有兩個的 ico 設定的，有了新的功能，你可以拿掉上面那一行了。現在，就用 Blogger Draft 提供的功能改掉你的網站圖示吧。上傳你的網站小圖示之後，原本你的網站圖示 http://yourblog.blogspot.com/favicon.ico 就會替換成你上傳的 .ico 檔了。另外介紹一個可以線上設計自己網站圖示的網站： Favicon.ico Generator ，該網站除了自己動手畫 ICO 以外，也可以匯入圖檔 (jpg, jpeg, gif, png, bmp, ico, cur) 裁切或縮小產生 .ICO 檔，超好用的！

閱讀完整內容

[Blogger] 舊版型在官方 ShareButton 後面加入 +1 Button

Blogger 系統要加入 +1 Button 如果你不是使用 2010 年新版的可以使用範本設計工具的版型，那麼你需要加入一些小東西以及一些小修改即可使用。一、勾選展開小裝置範本，記得備份你的版型先二、找到 <b:includable id='shareButtons' var='post'> 和 </b:includable> 包的那一堆 code，其實 Google 官方已經幫你加了一個 DummyTag，那就是 +1 Button，會長得像這樣： <b:if cond='data:top.showDummy'> <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div> </b:if> 三、雖然已經幫你加了那一個 Tag，但並沒有引入 <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> 你可以把上面那一行加到 </head> 之前的位置，我看了一下用 Blogger 新版版型的裡面，是放在另一個位置，且有 Blogger 內建的語法。首先找到 <b:if cond='data:top.showStars'>….</b:if>，然後在 </b:if> 後面加入： <b:if cond='data:top.showDummy'> <data:top.dummyBootstrap/> </b:if> 然後你應該就會看到在官方的 Sharebutton 後面多了一個 +1 Button 了。關於 Sharebutton 可參考之前寫的跟 Blogger Sharebutton 有關的文章： [Blogger] 改用 Offical Share Button 官方分享按鈕 ...

閱讀完整內容

[Blogger] 如何建立自動選取單一文章分類的文章輪播區，以 nivoSlider 為例

之前所寫的 [Blogger][側邊欄工具] 簡易安裝的分類文章縮圖 Widget ，利用該篇文章的同一支 script 改成 nivoslider 的格式之後，就可以建立一個自動選取單一文章分類的文章輪播區。先介紹一下 nivoSlider 的基本語法》建議要輪播的圖片最好都使用相同的圖片大小，如果要查更詳細語法請前往 http://nivo.dev7studios.com/#usage 。  <link rel="stylesheet" href="http://your.url/nivo-slider.css" type="text/css" media="screen" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="http://your.url/jquery.nivo.slider.pack.js" type="text/javascript"></script>  <div id="slider"> <img src="images/slide1.jpg" alt="" /> <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a> ...

閱讀完整內容

[Blogger] 回應區分部落格作者及訪客的簡單作法

就目前查到的可以做出在 Blogger 系統下回覆別人的回應功能的，是 Sean 所寫的這篇： Sean's Blog: 讓Blogger 的「意見回應」可以有「作者回覆」 (最終版) ，很久之前有試過，但就是弄不出來，後來我大概想了一下我自己需要的東西，大概是讓我回應的區塊可以跟訪客分別出來就可以，加上我訪客留言的人不算多，我只要能即時回覆看起來其實就蠻像回覆在底下的感覺。所以我就用 CSS 和判斷式土法鍊鋼了一下，以後有時間再來研究 Sean 大所實現的功能。剛好 Steven 大有問到，所以我就在這裡分享一下我的爛招，大家還是應該要去看 Sean 大那一篇才是王道。一、勾選展開小裝置範本，記得備份你的版型先二、加一個作者回應的 DIV CSS：因為我想要我回應的框框內縮一點，不然其實不加也沒關係 #comment-header-me{width:525px;border:1px solid #cccccc;padding:5px 10px 5px 10px;margin:5px 0px 5px 30px;background-color:#eeeeee;-moz-border-radius:8px;-khtml-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;} 三、找到 <b:loop values='data:post.comments' var='comment'>，我是加了一個判斷式 <b:if cond='data:comment.author == data:post.author'>，然後把作者回應要顯示的東西所需要的語法放在那裡面，你可以從原來的語法裡面先複製一份在判斷式裡頭再慢慢改，原來的語法就是接在 <b:else/> 後面。(紅字是加上去的判斷式，粗字是作者回應的區塊。) <b:loop values='data:post.comments' var='comment'> <b:if cond='data:comment.author == data:post.author'> ...

閱讀完整內容

[Blogger] 使用 Blogger 內建的 data:post.thumbnailUrl 以及 data:post.snippet 製作首頁縮圖文章版面，不需要 javascript 的做法

之前寫的這篇： [Blogger Addon and Fix] PremiumBloggerTemplates 版型縮圖功能小修正，那是用 javascript 產生的首頁縮圖文章版面，最近發現 Blogger 好像多了 data:post.snippet (摘要) 和 data:post.thumbnailUrl (縮圖) 的參數，於是拿來改了一下器材控首頁的版面，成果見上圖。實做》一、Blogger 管理後台，設計-->修改 HTML，勾選展開小裝置範本，別忘了先備份版型，以免改爛掉二、找到 <data:post.body />，替換成底下的 code <b:if cond='data:blog.pageType == "index"'> <b:if cond='data:post.snippet'> <b:if cond='data:post.thumbnailUrl'> <div class='Image thumb' style='float:left;margin-right:5px;'> <img expr:src='data:post.thumbnailUrl'/> </div> </b:if> ...

閱讀完整內容

[Blogger Addon and Fix] PremiumBloggerTemplates 版型縮圖功能小修正

近期我使用了很多從 PremiumBloggerTemplates 網站分享的 Blogger 版型，該網站分享的版型有幾個特點：輪播的特色文章、首頁文章縮圖、DropDown menu，其中首頁文章縮圖原來的程式是設定固定的縮圖大小，除了長形的圖比例會改變以外，有些時候文章裡的圖還比設定的縮圖大小還小時，就會變成放大模糊的圖，最近用 jQuery 加了一段小程式在底下去做判斷，當文章的圖比較小時，那就維持原來的圖的大小顯示。做法：首先，PBTemplates 用來產生首頁文章版面的程式：這裡改的地方，除了只依照設定的寬去改變縮圖的大小 (拿掉了 height=”’+img_thumb_height+’px”) 以外，粉紅字的部份是我加進去的，用來給我寫的小程式處理用的 function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img id="tnimg" src="'+img[0].src+'" width="'+img_thumb_width+'px"/></span>'; summ = summary_i...

閱讀完整內容

突然發現弱格其實也是有人在看的

最近連寫文章都沒時間，也沒時間去洗照片，有點小忙啦。一直以為這裡反正就是冷門的個人小弱格，剛剛無聊看了一下 Blogger 後台的統計功能，從去年 (2010) 的七月 Blogger 開始提供統計功能至今，居然也小小的破了 40 萬瀏覽數。上個月有九萬瀏覽數耶，這些數字還真是意想不到呀！不過如果去比對 Google Analytics 上個月的瀏覽量卻少了一半以上，我想應該是我忘了在 Blogger 後台排除自己的瀏覽量所致？還是什麼原因呀？這麼少的數字真是獻醜了。會有客人想聊一下到底都上來看些什麼嗎？

閱讀完整內容

[Blogger][Addon] FB Comment System on Blogger，在 Blogger 上改用新版 Facebook Comment 系統吧！

新版的 Facebook Comment Plugin 發佈之後 (2011.03)，增加了不少功能，包括一個可以管理網站留言的後台 (需申請 FB APP)，以及可以回覆每一則意見的樹狀設計，每一則意見也都可以按讚，就如同你在 Facebook 上使用的情況，於是個人最近在另一個實驗站台把 FB Comment Plugin 拿來換掉 Blogger 的回應系統，因為 Blogger 的回應系統實在是有夠陽春的說。首先，申請一個 Facebook APP，取得應用程式 ID 1. 至 Facebook 應用程式申請頁面，按下建立新的應用程式 2. 填應用程式名稱，同意條款，按下 Create App 3. 進入應用程式的設定介面，就可以看到 App ID，在這個底下的 Site URL 設定你的網址設定 fb:admins (單一管理者) 或 fb:app_id (多重管理者) 在 </head> 之前，app_id 就填入剛剛申請到的 app id <meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}"/> <meta property="fb:app_id" content="{YOUR_APPLICATION_ID}"> 開始把 FB Comment Plugin 裝進你的 Blogger 1. 進 blogger 管理後台，設計-->修改 HTML，勾選展開小裝置範本 (保險起見請先備份版型) 2. 找到 <b:includable id='comment-form' var='post'> 在該行之前加入底下文字，，詳細語法說明可至 Facebook Social Plugin – Comments 的頁面。簡要說明：num_posts='3' 是指一頁顯示三則回應，width='640' 改成你版面適合的寬度 <b:includable id='fb-comment' var='post'> <div i...

閱讀完整內容

[Blogger][Fix] Change Blogger ShareButton！一個步驟換掉你的 Blogger 官方分享按鈕！

想來點變化嗎？官方公版的 ShareButton 雖然乾淨好用，但有時候稍嫌小了點，偶爾也會想換個樣子對吧？只需要一個步驟，利用 CSS 和一張圖，就可以搞定囉！前話先從啟用 ShareButton 談起，如果你的版型沒有官方的 ShareButton 的話，先找找看有沒有這一段 <b:includable id='shareButtons' var='post'> <a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'> <span class='share-button-link-text'><data:top.emailThisMsg/></span></a> <a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'> <span class='share-button-link-text'>...

閱讀完整內容

[Blogger][側邊欄工具] 簡易安裝的分類文章縮圖 Widget

最近研究了一下 Blogger 的 JSON，參考了一個抓最新文章縮圖的寫法，將之改寫為抓取某分類文章縮圖的工具，順便想了一下怎麼讓大家安裝最方便。稍微了解 Blogger 的 JSON 怎麼抓之後，發現其實蠻多事可以做的，比如這個版型上方的推薦文章輪播區，就可以配合這個抓分類文章縮圖的工具，再搭配像是 jQuery Cycle Plugin 或者 jQuery Nivo Slider Plugin 就可以抓某個要放在上方輪播區的文章分類，不用像之前必須要手動進版型複製貼上了，所以已經順手把上方的輪播區改好了，順利愉快。不過為了方便介紹，我想把題目先訂為安裝一個側邊欄的小工具，並且兩個步驟就完成安裝，以我的弱格影音部落格，右側側邊欄的寬度是 300px，底下的範例就是以這個寬度來設定，您可以自行調整 CSS 來符合您的版型邊欄。工具安裝》 #1 進到版型設計的頁面，新增一個 HTML/Javascript 的小工具。 #2 填入以下的代碼，儲存，搞定。 <style> .widget-wrapper {margin:0 auto;width:300px;text-align:center;} .tn-post {float:left;width:72px;height:110px;overflow:hidden;margin:1px;} .tn-thumbnail {text-align:center;top: 0px; left: 0px; width: 70px; height: 70px; background: #E6E6E6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu-GAQ4awCGSGWMLNv7Hor7ZOlGd2PIqa-B-m1USdEpOoO552kifwilmKbKjmq88425bXihXgBjnOWBIFdxKwb0XKSI7joIJtYM2v6o-uAy-JyDs8dOqx-0JQOIZneJEN9RYCX/s800/background.png); overflow:hidden;border:1px solid #999;} .tn-post h3.fp-title {f...

閱讀完整內容

Blogger 提供五種新的動態瀏覽介面 (Dynamic Views for Readers)

Google 提供了五種動態瀏覽的介面，使用了 Ajax、HTML5、CSS3 等技術。 Flipcard: http://jimmyyen.blogspot.com/view/flipcard Mosaic: http://jimmyyen.blogspot.com/view/mosaic Sidebar: http://jimmyyen.blogspot.com/view/sidebar Snapshot: http://jimmyyen.blogspot.com/view/snapshot Timeslide: http://jimmyyen.blogspot.com/view/timeslide 影片介紹：

閱讀完整內容

[Blogger] 分享到 Facebook 卻發現文字抓錯？

因為最近發現 Facebook 按讚之後分享到您的 Profile 上的畫面，會像上圖那樣，會抓標題和摘要內文及圖片，就像按分享的效果一樣，所以，所抓的文字正不正確，大概也會影響朋友去點這篇文章的興趣吧。(以前是只顯示一條文字，內容是誰誰誰說那一個連結讚) Facebook 的 URL Linter 工具先介紹 Facebook 的 URL Linter 工具，可以用來 Debug 你分享到 Facebook 上的網址，Facebook 會抓取的內容。先輸入您文章的網址，按下 Lint 鈕：這支工具就會依照您的 OpenGraph 設定和網頁上的 META 去擷取資料，讓你檢測抓到的資料對不對。解決文字抓錯的問題這篇要談的是抓摘要文字的部份，Facebook 會抓的是第一個 <p></p> 符號之間所置放的文字或者 <description></description> 之間所置放的文字 (實測結果應該是優先抓 <description>)，由於，大家很可能都是抓現成的版型，有些版型會用到 <p> 符號在文章內文之前，那就很有可能抓到夾在該 <p></p> 之間的文字，而不是所想分享的文章的文字，因此最簡單的方法，大概是像底下這樣：找到 <data:post.body/>，在前後加上 <description></description>，如下： <description><data:post.body /></description> 然後，這篇所要的抓到正確文字就可以解決了，您可以用 URL Linter 去測試看看就知道。

閱讀完整內容

天源廚房．傳統美食，在家享受！

友情幫朋友宣傳一下自家的小館子，用 Blogger 幫他做了一個店的網站：天源廚房。天源廚房從今年開始，讓平民傳統美食可以讓你透過網路下訂，低溫宅配送到你家，享受自己下廚的樂趣及方便性！天源廚房創立於 90 年間，位於新莊，負責人秉持著真材實料，不偷工減料，承襲家傳的製作手法，再加以研發。口感獨特，不添加防腐劑及人工香料，嚴選天然材料所製作的雞捲、芋丸、醃肉、獅子頭、豬肚酸菜等，皆獲得客戶的好評，一再建議上網銷售，期待締造更好的佳績。跟大家分享，好吃一定要介紹滴！

閱讀完整內容

拍板！弱格 2011

好啦，就決定用這個版型吧！過程中，Fancybox 的問題一直搞不定，就算是只使用 jQuery 不用 mootools 也是一樣，看來似乎還是跟其他的 jQuery Plugin 沖了 (可能是 cycle 或 superfish menu)，所以改用 colorbox 這個輕量化的燈箱。一些會拖慢速度的統計小貼紙都拿掉了， Webwait.com 測出了讓人很滿意的數字：2.14s，至少希望進入首頁能壓在 5 秒以內的目標達成。另外要介紹的是一個新發現的 Blogger 版型站台： Premium Blogger Themes ，有需要的可以自行上去挖寶。

閱讀完整內容

弱格改版型計劃．兼聊 mootools 及 jquery 並存之道

計劃過完年後換新的版型，目前暫時將新的版型架在弱格貝塔，請大家給點意見。可能會把分類整理一下，一些雜亂的小東西能不裝的可能就不裝了，新年總要有個新氣象的，換新換新嘛。因為新的版型有用到 mootools，稍微搜尋了一下 mootools 和 jQuery 共存的方法： <script src="Mootools.js"></script> <script src="jquery.js"></script> <script> jQuery.noConflict(); jQuery(document).ready(function($){ ...... }); // Use Prototype with $(...) $('someid').style.display = 'none'; </script> 總之就是用 jQuery.noConflict() ，然後使用標準語法去寫 jQuery 的 Code，以區別 mootools 的 Code，這樣就可以和平共存了！後記：事實上也只能解決一半，猜是 Smoothgallery 和 Fancybox 的 Code 還是有衝，只能讓 Fancybox 的單張圖片做燈箱特效，但 Gallery 顯示就沒輒了，努力研究當中。再後記：後來燈箱是改用 colorbox，輪播改用了 nivoSlider 。

閱讀完整內容

我冷壞了，所以又開了一個部落格：教育邊緣

昨天半夜被冷醒，肚子痛痛上完大號之後，上網看了上面那一段影片，我突然一陣悲從中來，曾幾何時，姑且不論尊師重道的必要或非必要，但至少，人與人之間應該存在的基本尊重都不復存在了。我不知道以我一個教育邊緣人的身份能夠做什麼、說什麼，因此希望以一個多作者型態的部落格，邀集教育現場的老師或任何關心教育議題的人來加入。我也計劃，能做一系列專訪，對象是曾經就讀師資培訓體系的大學生，後來並沒有從事教職的所謂教育邊緣人，會想這麼做是因為這些人曾經距離進入教育場域十分接近，卻選擇遠離，但我設想他們心中應該對於所謂「教育」，內心裡還是充斥著一點想法和熱情。當然，專訪的部份不僅限於此，日後希望能夠拓展至各類教育領域，包括另類教育思潮、流浪教師等等的議題，也希望大家多給我們意見。不確定能夠走得多遠，但就從這裡開始，教育邊緣。

閱讀完整內容