顯示具有 Blogger template/版型修改 標籤的文章。 顯示所有文章
顯示具有 Blogger template/版型修改 標籤的文章。 顯示所有文章

2013年10月25日 星期五

如何備份Blogspot新版範本

https://blogger-script-study.blogspot.com/2013/10/blogspot.html?m=0

發現很多格友把部落格轉到了 Google的Blogger後,不會使用其範本/版型的【備份/還原】功能,所以在這裡稍加說明。

建議你不論修改Google的Blogger範本/版型或是上傳新的範本/版型前一定要先備份,否則一旦版型修改有問題,可能就徒呼負負了!另外要提醒您的,如果在Blogger原來的版型中有選擇變更到不同的範本,那麼之前所做的版型修改都會跟著消失,如果想要保留這些變更以備不時之需,建議一定要備份範本。

備份及還原Blogger範本的方法如下:

1. 進入Blogspot後台,點選側邊欄【範本】功能,然後點擊畫面右上角的【備份/還原】。
 進入Blogspot後台,點選側邊欄【範本】功能,然後點擊畫面右上角的【備份/還原】。

2. 點擊【下載完整範本】,儲存範本,最好可以重新名命名並存成自己日後可以理解的檔名,後續如果想要恢復原來的範本,一樣要用這個功能,然後點擊下面的【瀏覽】按鈕,從電腦中找到之前存檔的範本檔案,按【上傳】就可以恢復原來的範本了,完成後按【關閉】按鈕結束。
點擊【下載完整範本】,儲存範本,最好可以重新名命名並存成自己日後可以理解的檔名,後續如果想要恢復原來的範本,一樣要用這個功能,然後點擊下面的【瀏覽】按鈕,從電腦中找到之前存檔的範本檔案,按【上傳】就可以恢復原來的範本了,完成後按【關閉】按鈕結束。


2013年8月30日 星期五

如何整合Google部落格帳號

https://blogger-script-study.blogspot.com/2013/08/google.html?m=0

相信許多重度的Blogspot(Google部落格)使用者可能會有多個以上的部落格同時在經營,我不算重度,但因為想要研究部落格究竟是怎麼一回事,所以確實也申請了幾個不同帳號的Blogspot,再加上我又很鼓勵甚至半強迫身邊的老婆及小孩也一起寫部落格,理所當然的我就變成了他們的網站維護者,再加上最近Google帳號的安全等級提昇,有些帳號一段時間沒有登入就受到關切,甚至被強迫暫時停用,所以就想要整合Google帳號。

不過查詢了一下Google帳號整合的服務,結果是現在還未提供,所幸還是有變通方法可以讓別的帳號也可以使用Blogspot部落格來發表文章,也可以管理並設定部落格,就像是所有者一樣,這個功能就是【增加Blogspot部落格作者】,利用這個功能,甚至也可以取代部落格的原來的所有者帳號。

現在就來看看如何整合Google部落格(Blogspot)帳號吧!

2013年7月5日 星期五

Blogspot三種建立「水平導覽列選單」的方法

https://blogger-script-study.blogspot.com/2013/07/blogspot-menu.html?m=0

Blogspot三種建立「水平導覽列選單」的方法

Google的部落格平台(Blogspot)的版面雖然很陽春,比不上其他市面上的部落格平台,但只要你懂得如利用它所提供的功能,Blogspot也是可以打造出比其他平台更豐富及漂亮版型的,就像今天要介紹給大家的【水平導覽列選單】功能,在其他部落格平台這可是要付費才可以使用的功能,而Blogspot通通免費啦!

其實我在以前的文章已經有介紹過如何在Blogspot建立【水平導覽列選單】了,不過現在似乎已有了些許的不同,所以重新再來整理一下,也算是更新吧!請注意,建立【水平導覽列選單】時必須將小工具放到「網誌文章」上方以及【標頭】下方的全版位置才會有選單的效果

Blogspot在其小工具清單內有三種方法可以建立【水平導覽列選單】,也各有其優點,這三種方法分別是:網頁清單連結清單,下面我把它們的功能及優缺點大致整理出來,方便大家參考與選擇。

2013年4月24日 星期三

Google部落格範本進階設定

https://blogger-script-study.blogspot.com/2013/04/blogspot-template_24.html?m=0

Blogspot自定範本修改完成前面的篇幅中我們雖然完成了【水平導覽選單】的建立,但其顏色及字體的大小似乎不太合乎我們的需求。Blogspot本身其實有提供功能強大的版型修改工具,可以讓我們修改範本版型中的字體大小、顏色及背景顏色,甚至還可以變更範本版型的寬度以及改變側邊欄靠左靠右的位置,更可以改變側邊欄單欄’雙欄或是混和側邊欄,比起目前市面上的其他部落格平台都還要好用。

本文我們將介紹如何使用Blogspot的進階版型設定功能,教大家如何修改範本的字體大小、字體的顏色及其背景顏色,讓水平導覽選單的色彩及字體更符合我們的需求,也會順便修改側邊欄上小工具的標題字型大小,讓它看起來更順眼。

2013年4月21日 星期日

用「網頁」功能製作水平導覽選單

https://blogger-script-study.blogspot.com/2013/04/menu.html?m=0

Blogspot的水平導覽選單

可以輕鬆製作【水平導覽選單】是Blogspot的優點之一,因為一個好得「水平導覽選單」可以讓使用者更方便的瀏覽我們的網站,增加其停留在我們網站的時間,並減少網頁的跳出率。參考最上面的圖片,這個導覽列是不是把我們餐廳設立官網的重點都給強調出來了。

Blogspot製作【水平導覽選單】的方法共有三種方法,分別是使用【網頁】、【清單】、【連結清單】,這三種方法各有其優缺點,有興趣的可以參考部落格中的其他相關文章。這裡我們要示範使用【網頁】來製作網站的水平導覽選單,其優點是作動的網頁會有反白的效果出現,可以讓瀏覽者清楚的知道目前正在瀏覽的網頁,而且以網頁作成的選單也已經連結到網站外的網址了,以前只能連結內部的網頁。

使用【網頁】的另外一個優點是可以單獨設定是否允許留言,而且網頁不會跟部落格的文章混在一起,也就是使用部落格工具瀏覽時,網頁是單獨存在的,所以我們可以把一些重點的資訊用網頁來呈現。

2013年4月17日 星期三

如何更換Google部落格封面圖片

https://blogger-script-study.blogspot.com/2013/04/banner-change.html?m=0

如何更換Google部落格封面圖片
部落格的封面幾乎佔了網站的一半靈魂,有美工天份的可以製作自己的部落格封面圖片,沒辦法的就花點錢找人加幫忙吧!

要設定Google部落格封面圖片其實很簡單,麻煩的是要先準備好一張封面圖片,這張圖片最好要可以代表餐廳的圖騰,因為這是門面,訪客到訪我們的餐廳官網時,第一眼看到的就是這張圖片,它可以讓訪客知道自己來對了地方,也可以在上面做些活動或是標語的註解。

封面圖片的大小最好可以設定成900像素左右的寬度,高度則可以隨意,但建議在200~400像素之間就好。

2011年9月1日 星期四

使用Blogger水平導覽列顯示標籤搜尋結果

https://blogger-script-study.blogspot.com/2011/09/blogger-navigation.html?m=0

水平清單標籤顯示05有網友對於如何在Blogger上使用「水平導覽清單」還是一直有疑問,就我的瞭解,目前總共有四種方法可以在 Blogger上製作出「水平導覽清單」的功能,分別是使用CSS自製使用「連結清單」小工具、使用「網頁」小工具、使用「清單」小工具,但每一種方法都各有其限制。

目前網友詢問最多的問題,如何使用水平導覽清單的功能,作出像部落格首頁一樣的功能,讓多篇文章同時顯示在同一個頁面下?

2011年8月11日 星期四

如何隱藏Blogger小工具的標題

https://blogger-script-study.blogspot.com/2011/08/hide-blogger-widget-title.html?m=0

Blogger_hide_widget_title02

有時候我們會想要在Blogger的後台放上一些不想要有標題的小工具,這些小工具往往只需要在後台執行,而不需要出現在版面上,可是偏偏Blogger有時候又要求一定得放標題,或是我們希望有標題可以提醒我們每個小工具的內容,但又不希望標題出現在版面上。

這裡教你一個的方法可以讓你標示這些小工具的標題,但在部落格的面板上又可以隱藏這些小工具的標題。

2011年6月22日 星期三

如何製作相同網頁的順暢超連結

https://blogger-script-study.blogspot.com/2011/06/page-link.html?m=0

相同網頁超聯結在我們的部落格裡經常會用到一些超聯結,尤其是教學文,可是這些連結一般都只能連結到外面的網站,或是不同的網頁。可是我們卻經常看到一些Q&A(問答)的網頁可以點擊問題超連結,然後跳到同一個網頁上回答問題的位置,而不是跳到別的網頁,究竟這樣的效果是如何做到的呢?

本篇文章就來介紹一下這種相同網頁超連結的 Html 語法吧!其實這種語法叫做「書籤」,早期網路剛發達的時候,這樣的語法很流行,想要作到這樣效果其實一點都不困難,但你可能需要稍稍有點「Html程式碼」的心裡準備。

2011年3月10日 星期四

Blogspot如何前置部落格文章標題?

https://blogger-script-study.blogspot.com/2011/03/blogspot-pre-title.html?m=0

一般我們使用搜尋引擎搜尋我們部落格的文章時,通常都會先出現「部落格名稱」然後才接著「文章標題」,就像下面搜尋我的另一個部落格的結果一樣,可是有時候我們也會看到有些人的部落格卻是先出現「文章標題」,然後才接著「部落格名稱」。

  • 部落格名稱:文章標題
  • 文章標題:部落格名稱

blogger_title10Blog_sub_title

2010年10月6日 星期三

讓舊版Blogspot也有「繼續閱讀」連結

https://blogger-script-study.blogspot.com/2010/10/old-blogspot-read-more.html?m=0

前一篇文章曾提到說Blogspot的新版範本已經可以支援「繼續閱讀」功能,但舊版的範本卻只支援一半的繼續閱讀功能。也就是說舊版的範本雖然也可以在瀏覽首頁時設定只出現文摘,但卻無法出現【閱讀更多 »】的繼續閱讀連結,等於只有半套的繼續閱讀功能,我花了一些時間研究了新舊版範本之間的差異後發現這是有辦法可以解決的。

比較了新舊版的Blogspot範本之後,我發現在新版範本的顯示文章本體(post-body)及頁腳(footer)之間多了一些程式碼,試著把這段程式碼從新範本複製到舊範本的相同地方,結果真的可行,現在連舊範本都可以享受到完整的「繼續閱讀」功能了。

2010年9月21日 星期二

讓Blogspot 也有數字分頁功能

https://blogger-script-study.blogspot.com/2010/09/blogspot-pagenavi.html?m=0

Blogspot 數字分頁功能

經常看到別人的部落格裡有【數字分頁功能表】,看起來又酷又炫,而且又好用,比起 Blogger/Blogspot 內建的分頁實在好用太多了,不過找來找去都只有 Wordpress 的外掛版本,讓使用 Blogspot 的網友望之興歎!這裡幫大家找到了一個 Blogspot 專用的【數字分頁】功能程式,它不是用外掛的方式達成,而是提供完整的程式碼讓你放在自己的 Blogspot 裡,可惜好像只能放在頁尾的地方,放頁首沒有反應。

▼Blogspot原來的分頁功能,超陽春的。
Blogspot 原本的分頁功能

使用時必須先至 Blogspot 的管理後台開啟一個「HTML/JavaScript」的小工具,然後把下面這段程式碼整個貼上去。目前你只能將「HTML/JavaScript」小工具放置在網誌文章的下面,這樣【數字分頁】功能就會正常運作。 

2010年9月8日 星期三

用Blogger的「清單」小工具建立「水平導覽列選單」

https://blogger-script-study.blogspot.com/2010/09/blogspot-list-menu.html?m=0

前面的兩個篇幅分別介紹了使用Blogger的【網頁】功能與【連結清單】來建立「水平導覽列選單」,其實還有一種Blogger的小工具裡還有一個方法可以建立「水平導覽列選單」,那就是【清單】小工具。

2010年9月6日 星期一

Blogspot讓「連結清單」建立的「水平導覽列選單」也有反白效果

https://blogger-script-study.blogspot.com/2010/09/blogspot-active-menu-reverse.html?m=0

連結清單作成水平導覽列選單

這個方法僅適用Blogspot的新模板。提醒你修改模板前最好先下載完整範本備份,以備不時之需。

注意事項:

  1. 記得要把【展開小裝置範本】前面的框框打勾。
  2. 下面的程式碼先按照【用Blogger的「連結清單」建立「水平導覽列選單」】一文把水平選單建立後才可執行。

2010年9月4日 星期六

用Blogger的「連結清單」建立「水平導覽列選單」

https://blogger-script-study.blogspot.com/2010/09/blogger-linklist-menu.html?m=0

之前曾經介紹過【用Blogger的「網頁」清單建立「導覽列」】的方法,但這個方法有個缺點,就是無法使用自訂網址,所以其所連結的網頁都必須指向在其部落格的根目錄下面,無法指向部落格的其他文章或是其他部落格的網頁。這裡邊我們要介紹另外一個方法,使用 Blogger 的「連結清單」來建立「水平導覽列選單」

2010年9月3日 星期五

擁抱Blogspot的新範本板型

https://blogger-script-study.blogspot.com/2010/09/new-blogspot-template.html?m=0

Blogspot推出新的網頁範本已經有一段時間了,可是我一直遲遲不願意轉換,原因是我原先已經弄好的一些網頁設計會隨著範本的轉換而不見,比如說水平導覽列的自設網址功能,轉版有得重新學習新的範本規則…等問題;可是新的範本又有很多我想要的新功能,如「繼續閱讀…」、更多的板型範例、新增了三欄式範本、還有側邊欄單欄加兩欄的範本、書籤分享按鈕,更有選單式的的版面文字、顏色配置功能…。

2010年6月5日 星期六

為部落格文章加上色彩繽紛的重點底線

https://blogger-script-study.blogspot.com/2010/06/put-underline-on-your-blog.html?m=0
瀏覽別人的部落格時,有時會看到有些部落格主會在某些文字底下劃上色彩繽紛的畫筆底線,讓人知道格主想要強調的重點在這裡,可是我的部落格怎麼沒有這些特效,到底這是怎麼做到的呢?

其實這一點都不難,只要你擁有下面幾項技能,那你也可以擁有這些特效,但也不是那麼容易啦,下面我們就來介紹一下如何擁有這些「色彩繽紛的重點底線」。

1) 取得底線的圖檔,也可以自己畫。
要 gif 格式喔,而且要設定底色為透明。這裡先提供一個粉紅色底線的圖檔,有需要的可以在這個圖示上面pink1_underline按滑鼠右鍵另存圖檔,也希望你可以自己畫出你自己的底線。

2010年5月30日 星期日

試用Blogger提供的新模板範本修改工具

https://blogger-script-study.blogspot.com/2010/05/blogger-templates-setting.html?m=0

Google 的 Blogger 雖然很自由化,功力好的人可以任意發揮,但最為人詬病的缺點就是「不友善」、畫面太陽春,雖然網路上有很多的範本/板型可以下載,但沒有一點點程式語言基礎的人,尤其初摸電腦的人簡直就是無字天書,最近 Blogger 出了「測試區」(翻譯得有點奇怪),我覺得「試驗區」還比較恰當,讓格有可以簡單的設定兩欄、三欄的板型,字型的顏色及大小,真的是嘉惠使用 Blogger 的使用者了。

實際用過之後,真的覺得進步很多,可以比擬 YAM天空部落的設定,下面我們就來稍微介紹一下如何使用吧!

1. 進入Blogger的後台,在【資訊主頁】的畫面,下拉網頁到最下方,可以看到一個【其他專區】區域,在【工具和資源】的欄位下點選【Blogger測試區】。
Blogger_new_template01

2. 畫面會在回到【資訊主頁】,但是左上角的Blogger圖示變成藍底白字了Blogger_new_template02,本來是橘底白字。  原來有個【版面設計】的功能選項也變成了【設計】,點這個【設計】進入。
Blogger_new_template03

3. 會看到多出了一個【範本設計工具】,點擊它進入。
Blogger_new_template04

4. 這就是新的設計頁面,上面的欄位可以讓你視覺化的設計新的頁面,我們必須挑選一個小的範本,才可已有套用新的設計,比如說把兩欄式變成三欄式。我們還是維持我們一貫的橘色系,從【範本】中選擇【Simple】橘色範本。
 Blogger_new_template05

5. 點選【版面配置】,可以設定【主體版面配置】、【首尾版區配置】、及【調整寬度】,我們先來設定【主體版面配置】,我還蠻喜歡側邊欄有全欄及兩欄混和式的,所以就先這個囉。
Blogger_new_template06

6. 接著設定【首尾版區配置】,我選了下面有三欄頁尾的設計。
Blogger_new_template07

7. 再來是【調整寬度】,這裡可以調整整個網誌的寬度及側邊欄的寬度。如果是三欄式的範本就會有兩個側邊欄的寬度設定可以選擇。
Blogger_new_template08

8. 點【進階】可以設定網頁的字型、大小及顏色,也可以設定一些標題的文字,還不錯用的,但還不能設定側邊欄標題為整條反白。
Blogger_new_template11

9. 都設定完成後記得按下右上角的【套用至網誌】,這樣設定才會被套用喔!
Blogger_new_template12

10.這就是 設定完成的版面的配置圖。
Blogger_new_template09

11.這就是實際網誌的面貌了,由於資料量不多,所以好像看不太出來有什麼多樣化,也許來放個部落格廣告會比較不一樣?XD!想賺錢想瘋了!
Blogger_new_template10


回到 Blogger 部落格技巧總整理


延伸閱讀:
BTemplates-設計給Blogger的板型/範本網站

2010年5月26日 星期三

用Blogger的「網頁」清單建立「導覽列」

https://blogger-script-study.blogspot.com/2010/05/blogger-pages-create-browse-menu.html?m=0

現在起使用 Blogger 也可以輕鬆製作「導覽列」選單了。以前都只能下載別人製作好的範本或自己修改模板語法 (template Html),否則很難製作出導覽列。

導覽列的好處可以讓網友在瀏覽我們的部落格時,快速連結到部落格內的特定網頁,比如說連結到「相簿」、「留言板」、「關於我」…等,我較常用的是連結到一些我已經針對某一主題寫過很多文章的整理文,這樣可以方便讀者找到一個有主題的導覽文,也增加了訪客的停留時間並降低網頁的跳出率。

很多人一開始看到這個「網頁」清單的新功能都搞不清楚是什麼,就算知道了也不會用,我也不例外,後來找了一些資料才知道如何使用。

1. 首先進入 Blogger 的後台的【版面配置】,隨便點選一個可以【新增小工具】的地方。
Blogger_Pages02

2. 開啟「新增小工具」視窗,點選【網頁】。
Blogger_Pages03

3. 會切換到「設定網頁清單」視窗。建議你把「標題(可省略)」】的地方變成空白。一開始只有一個「首頁」指到你的部落格的根部網址你,也可以變更其命名,比如說改成英文【Home】,先按【儲存】。
Blogger_Pages04

4. 回到【版面配置】畫面,如果你的「網頁」小工具不是出現在整頁的最上方,就用拖曳的方式把它拉到整頁的最上方。
Blogger_Pages06

Blogger_Pages05

5. 先按【儲存】,然後按【檢視網頁】,你會發現網頁標題的下方出現一個新的導覽列,也有一個新的導覽選項【首頁】,就是剛剛新增的那個,如果你剛剛把它改名為【Home】,它就會現出【Home】。
Blogger_Pages07

6. 接下來,我們來多增加一個新的導覽選項【關於我】。再進入Blogger後台 (不是編輯小工具喔!),點選【文章】→【編輯網頁】→【新網頁】。
Blogger_pages01  

7. 「網頁標題:」寫【關於我】,內容就自己寫囉!寫好之後按【發佈網頁】。
Blogger_Pages09

8. 點選【檢視網誌】會到部落格首頁,點選【檢視網頁】會到剛剛新增的「關於我」網頁。先點【檢視網誌】。
Blogger_Pages10

9. 【關於我】的導覽列選項已經加上來了。點選看看有什麼變化?可以試看看在【首頁】與【關於我】之間切換看看。請注意其網址沒有加上年月耶,也就是說直接放在部落格的根目錄,一般的部落格發表的文章都會再跟目錄底下在加上年月,自己觀察看看吧。其實如果剛剛編輯網頁的時候先用純英文的標題,如 【About Me】,那麼網址名稱就會是英文的 blog-root/about-me.html 喔參考這一篇主動操控Blogger的網頁檔名有意義化,提昇PageRank

10. 至於導覽列選項的文字字型大小、顏色及背景,就要使用 Blogger 的新【測試區】功能,有機會再說明吧。

回到 Blogger 部落格技巧總整理

2010年5月23日 星期日

BTemplates-設計給Blogger的板型/範本網站

https://blogger-script-study.blogspot.com/2010/05/blogger-template.html?m=0

介紹一個專門給 Blogger 的使用者下載範本的網站-BTemplates,這個網站收集了各式各樣 Blogger 的範本(template),讓 Blogger 的玩家有個多采多姿的網頁。它還很細心的把範本都分門別類好了,可以按照欄數來選擇(單欄、二欄、三欄、四欄),也可以按照樣式來選擇(從Wordpress轉過來的、給喜歡精緻的你用的部落格(Elegant)、給雜誌部落格用的(Magzine)、給相片部落格用的(Photolog)…),也可以用顏色來區分,還可以用側邊欄在左邊或右邊來區分...等。

  • 名稱:BTemplates
  • 網址:http://btemplates.com/
  • 適用部落格平台(BSP):Google Blogger
  • 使用語言:英文

操作步驟:

1. 進到 Btemplates 首頁,左手邊的主欄位就是可以下載的範本,中間有個分類欄位(Cloumns, Styles)可以讓你根據自己的喜好來篩選範本,右邊的應該是廣告吧!

2. 假設我們先選擇這個【Green City】的範本(template)來當作示範好了。建議先點擊它的圖示進入下一個畫面。
blogger_templates01s

3. 這裡可以有比較大的圖示可以讓你瞭解這個範本的樣子,如果還是覺得不夠真實,可以點選【Live demo】 實際查看套用範本後的網頁樣子。如果滿意的話,就可以點選【Download】。基本上下載回來檔案為壓檔,你必須先解壓縮,解完壓縮後會看到一個【Green-city】的資料夾,範本就在其資料夾下面,會有一個 .XML 附檔名的檔案。
blogger_templates02

4. 打開 Blogger 的後台(要先登入喔!),點選【版面配置】→【修改HTML】→【下載完整範本】,先備份原來的範本。然後點選【瀏覽...】找到剛剛解壓縮的 Green-city.xml 檔案,然後點選【上載】。 不會進入Blogger後台?先參考一下這一篇 Blogger template (板型)修改注意事項
blogger_templates03

5. 上載完成後,有時候會出現一些小問題,可以選擇【保留小工具】,就可以完成上載了。也可以選擇【刪除小工具】那麼這編列出來的小工具就會消失。點【取消】就是取消範本的上載,也就是不變。
blogger_templates04

6. 上載完成後就會出現這個畫面,點【檢視網誌】就可以看到新的範本已經套用了。
 blogger_templates05

7. 完成了。這就是新範本套用後的樣子,跟你預期的一樣嗎?不滿意的話還可以依照前面的步驟把舊的範本換回來。 不過要小心,有一些後來加上去的【小工具】可能會不見,建議在 Blogger 開設之初就把板型設定好,免得以後麻煩。
blogger_templates06


回到 Blogger 部落格技巧總整理