顯示具有 部落格經驗分享 標籤的文章。 顯示所有文章
顯示具有 部落格經驗分享 標籤的文章。 顯示所有文章

2013年5月24日 星期五

設定Blogger最新留言回應區域


由於Blogger預設的留言系統,是跟著每篇文章下方才可以留言,所以若有瀏覽者在不同篇或較早期文章裡留言,將會很難讓其他人知悉,為了營造我們的Blogger具有人氣與鼓勵瀏覽者留言,最好可以把各篇文章的留言回應,挑選出最新的幾則顯示在Blogger前台側欄裡。



在Blogger管理後台「版面配置>新增小工具」,請點選「資訊提供」。
1


請在「資訊提供網址」裡輸入 http://yourblogdomain/feeds/comments/default ,請記得將「yourblogdomain」改成您自己Blogger前台的網址,並按下「繼續」鈕。
若無法跳至下一個設定畫面,則請點選此瀏覽器視窗右上方的盾牌圖示,點選「繼續載入」,再次輸入網址後,按下「繼續」鈕。
2


「標題」欄位請輸入您想要的文字,「顯示」裡的「項目」最多只能挑選到5,建議勾選「項目日期」、「項目來源/作者」、「在新視窗中開啟連結」,設定完成請按下「儲存」鈕。
3

請到Blogger前台去觀看效果,呈現效果應該會近似下圖所示。
4


最新回應的功能,必須要該則留言為「已發佈」狀態(也就是說留言不可以還在「待審核」狀態),且由於是抓取Blogger內建的留言RSS,所以顯示出來需要一點時間(約幾十分鐘到幾個鐘頭才能看到在此區出現)。






2013年2月27日 星期三

為Blogger增加動態QR Code的功能

增加此功能後,可以很快速的將Google Blogger立即變成具備有QR Code可被掃描的功能,而且這並非只是固定圖檔式的QR Code,點選不同文章時,再去使用智慧型手機掃描相同位置,將會得到不同文章的超連結位置(是動態的變更QR Code,但您不需要費神去逐一修改),真的是十分方便。

在Blogger管理後台「版面配置>新增小工具」,請挑選「設定HTML/JavaScript」,將以下的程式碼貼上到「內容」裡,完成後請按下「儲存」鈕即可。

<span id="qrcode"></span>
<script>
var img = document.createElement('img');
img.src = 'https://chart.googleapis.com/chart?chs=90x90&cht=qr&chl=' + encodeURIComponent(document.location.href);
document.getElementById('qrcode').appendChild(img);
</script>


2012年12月22日 星期六

置入簡易型防止文章被複製的語法(Blogger可套用)

在教學時偶有遇到學員有防止文章被複製的需求,在此介紹一下如何設定,至於您的Blogger是否要使用這樣的限制,請自行決定,做了較多限制雖然可以防範被人直接複製內容盜用,但相對的也就讓瀏覽者在觀看時失去了些便利性,也會較為不利於行銷宣傳。
   1: <script type="text/javascript">

   2:  document.oncontextmenu = function(){return false;}

   3:  document.onselectstart = function(){return false;}

   4:  document.onmousedown = function(){return false;}

   5: </script>


直接複製的語法如下:
<script type="text/javascript">
document.oncontextmenu = function(){return false;}
document.onselectstart = function(){return false;}
document.onmousedown = function(){return false;}
</script>

複製了上述四行程式語法之後,請到Blogger管理後台「主題>編輯HTML」。

請找到<head>的HTML標籤,請在<head>與</head>之間按下鍵盤上的「Enter」鍵,空出任一行輸入位置後,將剛剛複製好的四行JavaScript語法貼上,接著請按下「儲存主題」鈕。

完成上述設定動作後,請您直接到Blogger前台測試,可以看到原本使用滑鼠左鍵可以反白選取文字與按滑鼠右鍵可出現複製等功能,都已將被限制住無法使用了,即達成本次的功能需求。

這僅是簡易防止網頁內容被複製的JavaScript語法(一般網頁設計也適用),當然這只是初步的做限制(防君子不防小人,懂得程式技術背景的人仍有方法可破解),這只是簡單阻礙增加複製上的難度,讓一般人放棄直接複製內容去使用的小技巧。


2011年12月23日 星期五

Blogger內容在後台直接分享到Google+個人頁面

這是Blogger與Google+整合後的新功能,可以讓您在Blogger寫完網誌後,可以選擇直接分享到到Google+個人頁面(目前不支援Google+專頁),設定方式請參考下述內容。

首先必須是進入到Blogger的新版後台管理介面,第一次進入時應該會看到如下圖的詢問,請按下「開始轉移」鈕。
1

轉移完成後,您會發現在文章管理介面裡,只要是狀態為「已發佈」的文章,滑鼠移至該文章標題時,會多出現一個「分享」的超連結,請點選下去。
2

就會出現如下圖的「透過Google+分享」的視窗功能,您就可以在上面的「新增留言」區,再輸入一些說明文字,接著按下「分享」鈕,即可進行發佈到Google+個人頁面的動作囉!
3

發佈完成後,您就可以到自己的Google+個人頁面去觀看,就會發現這筆資料確實有被分享出來了!
4

若您想要在網誌撰寫完成時,系統及會自動出現「透過Google+分享」的視窗功能來提醒您,可以在Blogger新版後台裡,選擇「設定」/「文章和留言」,將「分享至Google+」裡的選項,選擇成「是」,就可以在寫完一篇網誌時,自動出現「透過Google+分享」的視窗功能了!
5


Google官方的相關說明,可以參考 http://support.google.com/blogger/bin/answer.py?hl=zh-Hant&answer=1752748


2011年5月9日 星期一

使用Google文件設計線上表單與觀看資料及設定通知

這一篇文章是我在課堂上答應學員以及督促自己要補充的資料,一般的文件檔案可以上傳到Google文件去進行分享之外,其實還可以使用Google文件來製作任意欄位的免費線上表單,快速完成一個線上報名或線上訂購的表單系統。

請到 http://docs.google.com ,需要先申請Google帳戶後登入。
1

點選「建立新項目」,選擇表單。
2

輸入標題後,可以在第一個問題裡,先挑選決定問題類型,可以有七種格式型態可以選擇,請視您所要的格式選擇合適的問題類型,並輸入相對應的資料。
3

每個問題的右上角有三個按鈕,「編輯」鈕是之後若還要回到編輯狀態進行修改時,可以選擇此功能。
4
「複製」鈕是當您覺得要新增某個問題時,跟目前這個問題格式資料很類似時,可以挑選此功能,好複製此格式資料沿用後,快速產生成一個新問題來進行修改,可以節省一些編輯問題時間。
5

「刪除」鈕則是刪除單個問題的功能。
6

當設定好一個問題後,如果需要設定成此問題讓填表者為必填,則可以勾選「將它設為必答問題」,完成問題編輯設定後,請按下「完成」鈕。
7

如果後來產生的問題才想到要排列在前面,可以在該問題上按著滑鼠左鍵不放,以進行拖曳,移動到適當順序位置後再放開滑鼠左鍵,即可完成問題的順序位置的變更。
8

下圖是筆者產生的表單,系統會下方提供一個表單的網址,您若需要直接超連結引用,可以記下此前台網址進行其他運用。
9

若需要繼續新增其他問題,可以按下「新增項目」,選擇您要的問題類型後,即可不斷的新增問題。
10

可以按下「主題」鈕。
11

裡面有許多個表單的美編樣式範本可供挑選,例如點選某個樣式。12

若觀看後喜歡此樣式,則按下「套用」鈕,即可完成樣式的變更。
13

Google文件的表單系統,還有一項很棒的功能,就是若前台的表單開始提供資料輸入後,可以回到後台觀看這些資料的各項統計分析概況,您可以點選「查看回覆」/「摘要」的功能。
14

就會有相關圓餅圖、長條圖、折線圖等的圖表數據分析。
15
若點選「更多動作」/「嵌入」。
16

則可以產生iframe的HTML標籤語法,您若有網站或部落格(有支援貼入修改HTML語法時),則可以將此段語法複製貼到您的網站或部落格內文中,就可以把這個線上表單以內嵌的方式放到網頁上中。
17

在「更多動作」/「編輯確認訊息」裡。
18

可以輸入當前台填表者填完表單後,系統會出現的訊息(例如感謝詞等),若需要讓前台填寫者填完此表單時,也可以看到目前資料的狀況,則可以勾選「發佈回應摘要」,設定完成後請按下「儲存」鈕。
19

之後您要怎樣看到前台這些輸入的資料內容呢?一樣登入到Google文件後,可以看到剛剛建立的表單標題,請點選此表單標題。
20

即可看到資料以類似EXCEL的方式呈現出來,您可以在此複製資料或對某些儲存格進行加總函式等功能,若要回到於本編輯的表格畫面,請點選上面的「表單」/「編輯表格」。
21

即可回到原本的問題編輯畫面,以進行增減編修。
22

講到目前您應該會覺得Google文件的表單相關功能很齊全很方便,但在實務上運用時,您大概也很難每天有耐心上來查看有無新填表的資料,其實可以設定有新資料時會自動E-mail通知,設定方式為先點選此表單資料上的「工具」/「通知規則」。
1

點選「編輯」的超連結點。
2

可以勾選「有任何變更時」這個選項,並且將通知方式勾選「電子郵件-立即」,若您覺得也要每日都收到此表單的摘要資料,則可以多勾選「電子郵件-每日摘要」,最後按下「儲存」鈕,如此系統會偵測當此筆單有被做更動時(前台有人填表新增資料也視為變更),會自動發信到您的E-Mail帳號裡進行通知,這樣您就不用每天都要上來查看啦!
3

將前台表單以iframe的方式嵌入網頁上的呈現結果範例,可以參考筆者此產品網頁上的運用方式http://www.webspace.com.tw/cheapmarket/project-ez.htm


2011年4月1日 星期五

台科大推廣教育中心-Blog行銷班

站長新課程又來啦!這次是在台科大推廣教育中心的課程,會帶領您以低成本部落格開始入手開始進行網路行銷,部落格適合寫較為詳細圖文並茂的文章,輔以SEO搜尋引擎曝光技巧可以帶來人潮,並可善用工具進行訪客分析,搭配各類網路資源擴充您的部落格,達成行銷的目的!線上觀看與報名請按此
教學內容:
  • 網路行銷要知道的觀念與模式、看看成功的部落客怎麼做
  • 免費部落格基礎建置快速上手
  • 怎樣寫部落格文章比較好,撰寫工具與方法的運用
  • 部落格美化與數據分析評估
  • 部落格的進階擴充增強戰力,部落格式的商店建立
  • 部落格的SEO優化曝光行銷方法

上課資訊:
起迄時間:2011/05/07-2011/06/11
上課時數:18
上課時段:每週六9:30-12.:30
報名費:NT$200
學費:NT$3,600

適合對象:
  • 具有基本電腦操作與上網經驗者
  • 想要學習網路行銷者
  • 願意花時間以低成本達成行銷目的者
  • 網頁設計人員或行銷人員提昇進修
  • 想要建立公司或單位部落格者
  • 自行創業想以部落格為官網行銷

線上報名請洽台科大推廣教育中心,更多課程細節網址:http://cec.ntust.edu.tw/CourseInfo.aspx?id=1069


2010年12月2日 星期四

讓Blogger個別文章可以使用獨立的Facebook讚按鈕

若我們想要加強Blogger文章與Facebook的使用者關連性,讓有使用並登入Facebook的網友,來到您的Blogger後,可以對於個別欣賞的文章也像在Facebook塗鴉牆或網誌上給個「讚」,這就需要使用本次介紹的功能來達成了!


使用滑鼠左鍵選取底下程式碼後,按下滑鼠右鍵,選擇「複製」。
<script>
document.write(&#39;&lt;iframe src=&quot;https://www.facebook.com/plugins/like.php?href=<data:post.url/>&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowTransparency=&quot;true&quot; style=&quot;border:none; overflow:hidden; width:450px; height:65px&quot;&gt;&lt;/iframe&gt;&#39;);
</script>

到Blogger後台的「設計>修改HTML>修改範本」裡,勾選「展開小裝置範本」,找到下述程式

<b:include data='post' name='post'/>



在此段程式的後面,輸入<br />這個強迫斷行的HTML標籤,並按下滑鼠右鍵,選擇「貼上」剛剛複製的程式碼,完成後請按下「儲存範本」鈕。

接著就是到前台去觀看確認是否正確無誤囉!


2010年6月29日 星期二

Windows Live Writer好用的插入原始碼外掛功能

許多人在寫部落格文章時,常常會因為部落格後台內文編輯器比較陽春與不足,所以會尋求其他的部落格內文寫作編輯器,使用Windows Live Writer來編寫部落格內文,應該是許多人的首選,而Windows Live Writer本身的功能已經蠻不錯之外,重點是還可以新增外掛程式來擴充更多功能,本次來介紹一個插入原始碼外掛功能,以利您在文章內分享原始碼給予大家。

很多站長常都會感到困擾的是,當要分享一些原始碼的語法例如HTML、CSS、JavaScript時,往往還要把<與>的標籤轉換成1與2,本次要介紹的原始碼外掛功能叫做CodeSnippet,您可以到 http://wlwplugincollection.codeplex.com/ 下載,CodeSnippet除了可以自動轉換標籤之外,還可以在前面增加行號,並且可以將程式碼標示成不同的顏色讓人方便閱讀與區別。

安裝完成後開啟Windows Live Writer,在「插入」的功能表裡可以看到有新增加了一個,「CodeSnippet」的選項如下圖。
1

點選後介面出現介面如下,,在上方介面輸入或貼入原始碼後,可以在下方介面調整是否要出現左方行號等相關設定。
2

如上圖的設定後,在部落格上出現的畫面如下圖,除了自動將原始碼轉換之外,左方也出現行號,並且原始碼會以不同顏色標示出來,真的是十分便利!
3  

Windows Live Writer 的其他外掛程式可以到以下網站尋找與下載:
http://wlwplugins.com/
http://wlwplugins.codeplex.com/


2010年3月22日 星期一

WebsiteSpark 網站火花計畫部落客聯誼餐會花絮

3月13日星期六中午,我有應邀參加微軟與WIS匯智資訊舉辦的WebsiteSpark 網站火花計畫部落客聯誼餐會與會談,會後並有繼續參加網站玩樂講座活動,再此做點簡單的小記錄。

由於已經有當天參加的部落客寫了很棒的分享,我就不獻醜了,可以參考此篇鄭蛋蛋的3C部落格-台灣微軟WebsiteSpark火花計畫 部落客聯誼餐會記錄與活動官網 facebook 裡活動當天的相片,比較可惜的是當天中午天氣較為不佳(下著小雨),可能引想到一些部落客出席的意願。

其實就算平時上網宅在家,偶而能外出參加這類實體活動,對社交人脈發展還是會有幫助的,底下是當天有出席且我認識知道的部落客網址,在此做個記錄:
‧邦邦的部落格,flash的高手,之前活動中有認識。
‧Ticore's Blog,是邦邦的公司同事,也是flash的高手。
‧corAusir 程式逗設計,經營設計公司,程式設計與視覺設計都有涉獵。
‧鄭蛋蛋的3C部落格,3C電子產品類相關的資訊與評測。

WebsiteSpark 網站玩樂講座後面還有兩個場次,如果您上一場假日時間不克參加,有興趣者可以參加接下來這兩場週五晚間的場次,可到活動官網報名 http://websitespark.wis.com.tw/event.aspx


2010年2月15日 星期一

如何使用Blogger官方版的繼續閱讀功能

Google Blogger雖然修改的彈性大,但比較常被初學者抱怨的,反而是缺乏有些基本常用的功能,有些部分即使連進階使用者要修改也會稍嫌麻煩與受到限制,例如最常被抱怨的前幾名裡,應該就有在其他部落格系統預設會有的文章清單「繼續閱讀」的功能(因為Blogger本身系統內原本就沒有可以另行輸入前文導言之類的欄位設計),不過目前官方系統裡已經有內建了繼續閱讀這項功能可用了,真是一項遲來的福音…

以往在Google Blogger開立後要自行尋找外掛程式來修補這個缺點,但無論您找到那些高手那一版寫的繼續閱讀的外掛功能,其實原理幾乎不外乎是把不要顯示在文章清單裡的內容用Javascript加上CSS與HTML隱藏起來,但實際上這樣的做法都會有一項先天上的缺點,就是一般瀏覽者在瀏覽Google Blogger前台頁面時,仍是需要先把該頁清單內的所有文章內的文字與圖片載入,等到讀入後再去縮減隱藏其他不必要顯示的圖文,這樣子除了在瀏覽顯示時容易因為圖檔較大會頓一下不美觀之外,若圖檔多嚴重時可能會整個拖慢頁面讀取效率,對於SEO來說也是不利的,這些問題也只有使用官方的繼續閱讀從系統層面才能有效解決,這個改善應該是在Blogger推出新版文章編輯器時就已經有的,只是過了好幾個月筆者才注意到就是了(Google Blogger近來持續推出了不少新功能)...

要使用官方版的繼續約讀功能,建議到Blogger後台的「設定」/「基本」裡,將文章編輯器改為新版。s1

在您想要做繼續閱讀斷行的地方,按下「插入jump/break指令」按鈕。
s2

在文章編輯器內就會多出一個類似水平線的圖示,這就表示Blogger系統在前台清單頁顯示文章時,會把本篇文章此分隔水平線符號以下的內容直接不載入,由官方系統層面來處理自然前台就不會用讀取這些不必要顯示的內容,也就不會造成前台頁面載入時的緩慢與不必要的頻寬浪費,這是其他類似外掛功能所做不到的。
s3

其實您在後台新文章編輯器裡按下「插入jump/break指令」按鈕,如果您切換到HTML模式去看,就是多產了一個s4這樣的語法註記,所以若是您沒有使用舊版的文章編輯器或甚至使用其他的網頁編輯器來撰寫部落格內文時,可以手動鍵入這樣的HTML註解標籤,一樣可以達成官方版繼續閱讀的功能,但提醒您要注意的是有些網頁編輯器或其他的部落格文章編輯器,由於不認得s4這樣的語法註記,有可能會誤認或者是將此語法轉換成超連結語法(例如筆者使用WindowsLiveWriter連上Google Blogger寫文章就會發生這樣的情形),所以建議若使用其他編輯器的使用者,在撰寫完部落格文章最後時再使用Google Blogger後台的文章編輯器設定「插入jump/break指令」為宜,雖然是稍微麻煩了一點,但還是要提醒您要稍加留意就是囉~!

若是您想要修改前台原本系統預設的「閱讀更多 » 」這樣的文字,可以到Blogger後台的「版面配置」/「網頁元素」裡(非傳統範本模式才有這個選項),在「網誌文章」的區域點選「編輯」連結,可以看到「張貼頁面連結顯示文字:」的項目,將此欄位裡面文字做變更修改即可。
s5

還需注意的是,若您的部落格美編版面不是使用Blogger系統原本提供的範本,而是您自行在編修或者是使用其他第三方(非官方)提供的美編版面範本(像筆者就是),則有可能還需要對Blogger後台的「修改 HTML」裡做些調整,詳情請參考Blogger官方建立「繼續閱讀」摘要的說明,裡面有提到詳細的修改做法。

筆者最近已經把自己的Google Blogger的所有文章,由原本外掛的寫法改成官方版的繼續閱讀的功能,並花些時間把之前的舊文章打開加入s4語法標記,的確對前台文章清單頁面的讀取速度有獲得很大的改善,效能的改善在前面也有提到對於SEO搜尋引擎最佳化也有所助益(網路曝光行銷等層面),建議有在使用Google Blogger且有看到本篇文章的您,趕緊也去改成官方版繼續閱讀的功能吧~!


2008年12月28日 星期日

Google 部落格網頁取名的小技巧

在GoogleBlogger裡,其實可以用一些小技巧來控制網頁名稱,網頁名稱若是與文章內容有相關,對於SEO(Search Engine Optimization)搜尋引擎最佳化是會有幫助的(簡單來說就是在搜尋引擎裡搜尋相關字詞時比較容易排在前面),而不是顯示出一些無意義的英文數字檔名.....

像是下圖的網址最後面檔名叫做是book-web這樣要怎麼做呢?
1

其實作法很簡單,只要您登入到GoogleBlogger後台,在一開始標題先鍵入相關的英文或數字(切記不要輸入中文或其他語系或特殊符號),先存檔(儲成成草稿不會有作用,必須要發佈成正式文章),此時GoogleBlogger系統就會把您輸入的英文或數字變成此篇文章前台的檔名,如果有空白則會變成-的符號。
2
等到已經確認變更檔名成功之後,您就可以在標題換上您要的中文文字,此時GoogleBlogger還是會依您一開始命名好的檔名繼續存檔,這樣就達成了我們要文章檔名唯有意義想要的的英文或數字,但標題還是維持中文的設定了,這是很簡單但卻實用的小技巧!
3


Related Posts Plugin for WordPress, Blogger...

訂閱RSS