〔筆記〕Blogger設定.部落格設定.修改部落格.後台設定 篇 (未完... 待續 ...)
#修改部落格 #後台設定 #備份 #blogger 網頁備份 #部落格小工具 # 部落格設定 #
@@ 前言
Blogger 部落格 設定,都是上網搜尋文章、邊看邊操作,
以下記錄自己曾經搜尋過、覺得值得一試的小技巧、Hack 小工具、、、等相關設定,
一方面當作是自己的備份筆記,
另一方面當有部落客新手遇到問題時,就能將這篇文章與他分享。
Blogger 後台:https://www.blogger.com/home
〔CSS〕 將預設字體變成「微軟正黑體」
入徑:設定 / 範本 / 自訂 / 進階 / 新增CSS
h3.post-title, h3.entry-title {
font-family: '微軟正黑體', 'Microsoft JhengHei', Georgia;
}
h3 {
font-size: 1.6em
}
.post-body, .entry-content {
font-family: '微軟正黑體', 'Microsoft JhengHei', Arial;
}
.post-body img {max-width: 85%; height: auto}
.titlewrapper {padding-top: 40px !important;}
.blog-feeds, .post-feeds {display :none;}
.post-body {
font-size:110%;
color:#222222;
line-height: 1.7em;
letter-spacing: 1.4px;
}

【設定目的】── 將文章內容預設的字體,改成「微軟正黑體」
文章標題字體,以微軟正黑體優先;
h3 子標題的字體大小,為預設自己的 1.6 倍;
文章內文字體,以微軟正黑體優先;
文章中的照片寬度,為內文寬度的 100 分之 85 ;
部落格標題,離最上面頂端有 40px 的距離;
不要顯示 「訂閱:Atom」;文章中的照片寬度,為內文寬度的 100 分之 85 ;
部落格標題,離最上面頂端有 40px 的距離;
文章內文字體,放大為 1.1 倍,行距 1.7 倍,字元間距 1.4 px。
〔CSS〕調整照片寬度、內文文字大小、行距、間距
入徑:設定 / 範本 / 自訂 / 進階 / 新增CSS
h3.post-title, h3.entry-title {
font-family: '微軟正黑體', 'Microsoft JhengHei', Georgia;
}
h3 {
font-size: 1.6em
}
.post-body, .entry-content {
font-family: '微軟正黑體', 'Microsoft JhengHei', Arial;
}
.post-body img {max-width: 720px; height: auto}
.titlewrapper {padding-top: 40px !important;}
.blog-feeds, .post-feeds {display :none;}
.post-body {
font-size:110%;
color:#222222;
line-height: 1.7em;
letter-spacing: 1.4px;
}

【設定目的】
照片,最大寬度 720 px
部落格標題,離最上面頂端 40 px
不要顯示 「訂閱:Atom」
內文文字,放大為 1.1 倍、行距 1.7倍、字元間距 1.4 px
[HTML] 引用. Quote (灰底框框)
在第一個</title> 之後,貼上以下語法
<style>
blockquote {
background: #eeeeee;
border-left: 10px solid #cccccc;
margin: 2em 10px;
padding: 10px 20px 10px 20px;
}
</style>
封面圖片 • 封面照片
《目前.這個部落格無使用》
Blogger 控制台 / 版面配置 / 標頭 / 編輯 / 圖片
→ 若是部落格寬度是 1080 畫素,則 「封面圖片」檔案 的寬度 應該是 1000 畫素。
調整 部落格 寬度
Blogger 控制台 / 範本 / 網誌即時狀態 / 自訂 / 調整寬度
(目前單欄,寬度 980)
〔CSS〕 調整字體大小
入徑:設定 / 範本 / 自訂 / 進階 / 新增CSS
文章標題:字體大小 30
小工具:字體大小26
.post-body {
font-size:110%;
color:#222222;
line-height: 1.8em;
letter-spacing: 1.2px;
}
@@ 調整《網誌標題》字體大小
.post-header {
margin: 0 0 1.5em;
line-height: 1.6;
font-size: 240%;
@@ 修改 Blogger 的字型、行距、字距
修改 Blogger 的字型、行距、字距 - 櫻桃椒的網誌
http://licoriceguava.blogspot.tw/2014/02/blogger.html
要改 Blogger的行距、字距
到【範本】→【自訂】→【進階】→【新增CSS】中新增以下字串
.post-body {
font-size:100%;
color:#222222;
line-height: 1.8em;
letter-spacing: 0.8px;
}
font-size:文字大小
color:文字顏色
line-height:行距
letter-spacing:字距
以上數值皆可依您需要做更改,改好後,按【套用至網誌】即可。
若只要改行距、字距,新增以下字串即可
.post-body {
font-size:110%;
line-height: 1.8em;
letter-spacing: 0.8px;
}
line-height:行距
letter-spacing:字距
以上數值皆可依您需要做更改
@@ 調整《網誌標題》文字 and 圖片的位置
改變 Blogger 標頭的網誌標題文字及圖片位置─置中、置右、垂直對齊、左右並列 - 櫻桃椒的網誌
http://licoriceguava.blogspot.tw/2014/02/bloggerheader.html
@@ 調整文章標題的位置.文章字體大小、字距、行距
在 Blogger 範本中調整文章標題的位置,及文章的位置、字體大小、字距、行距 - 櫻桃椒的網誌
http://licoriceguava.blogspot.tw/2014/06/blogger.html
@@ 文章標題在前.網誌標題在後
Blogger對文章的標題title做SEO優化 - 櫻桃椒的網誌
http://licoriceguava.blogspot.tw/2014/01/title.html
作法:
因為閱讀文章時,文章標題才是重點,因此我們必須換一下排列方式,改成文章標題在前,網誌名稱在後。
1.到【範本】→【編輯HTML】,在與之間,找到以下語法:
2.將此語法換成以下語法,【儲存範本】即可。
@@ 將《部落格》.登錄.搜尋引擎
在兩大搜尋引擎登錄部落格、網站 - 櫻桃椒的網誌
http://licoriceguava.blogspot.tw/2014/01/blog-post_12.html
@@ 網站目錄(文章列表)
幫部落格做個網站目錄(文章列表)吧 >> 0 與 1 謎詭世界
http://01mistery.blogspot.com/2009/09/contents-list.html
@@ 圖片自動空間調整
FreeTong DIY: Blogspot 圖片自動空間調整
http://freetongdiy.blogspot.tw/2014/10/blogspot.html
方法:
只需加入一句 CSS 語法, img 便會完全的自動調整, 不會過大的超越範圍.
[設計]> [範本]> [自訂]> [進階]> [新增 CSS]>
.post-body img {max-width: 85%; height: auto}
@@ 延伸閱讀 (由 筆記人生.李醫師 提供)
html
<span style="font-size: small;">
<!--~~~~~~~~~~~~~~~~~ Include these JS files once: jQuery then plugin -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js" type="text/javascript"></script>
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~ required HTML -->
</span><br />
<div class="related-posts-widget">
<!-- {
blog_url:'(自己部落格網址)/'
,related_title:' '
,thumbs:0
} --><span style="font-size: small;">
loading..
</span></div>
<span style="font-size: small;">
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--></span>
<span style="font-size: 120%;" font-family: '微軟正黑體', 'Microsoft JhengHei', Georgia;>
<!--~~~~~~~~~~~~~~~~~ Include these JS files once: jQuery then plugin -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js" type="text/javascript"></script>
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~ required HTML -->
</span><br />
<div class="related-posts-widget">
<!-- {
blog_url:'http://u7804156baby.blogspot.tw/'
,related_title:'延伸閱讀'
,thumbs:0
} --><span style="font-size: 120%;" font-family: '微軟正黑體', 'Microsoft JhengHei', Georgia;>
loading..
</span></div>
<span style="font-size: 120%;">
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--></span>
@@ 隨機文章(Random Posts)
後台 → 版面配置 → 新增小工具 → HTML/JavaScript 新增 → 複製貼上 以下「程式碼」
-------------------------------------------
-------------------------------------------
var numofpost=10
(顯示 10 篇文章)
-------------------------------------------
-------------------------------------------
var numofpost=10
(顯示 10 篇文章)
@@ 搜尋部落格文章 (=自訂搜尋引擎)
→ 此舉的目的:因為 google 搜尋功能 太強大了、也太方便了,再加上 都是免費的服務,怎能錯過呢?
→ 自訂一個「搜尋引擎」,只搜尋自己部落格內的文章,搜尋的時間 相當的短,符合個人追求的效率 (快、狠、準)。
→ 設定好搜尋引擎後,取得程式碼,然後加進「部落格小工具」,一切搞定。
Google 自訂搜尋引擎:https://www.google.com/cse/all
部落格文章介紹:http://www.playpcesor.com/2008/05/google.html
部落格文章介紹:http://wayne-fu.blogspot.tw/2013/03/blogger-google-custom-search.html#more
〔CSS〕為圖片加上最大寬度
入徑:設定 / 範本 / 自訂 / 進階 / 新增CSS
.post-body img { max-width:720px; }
或是
.post-body img { max-width:80%;height: auto}
http://www.pilipress.com/2013/11/max-width-css.html
〔CSS〕部落格文字:微軟正黑體
入徑:設定 / 範本 / 自訂 / 進階 / 新增CSS
h3.post-title, h3.entry-title {
font-family: '微軟正黑體', 'Microsoft JhengHei', Georgia;}
.post-body, .entry-content {
font-family: '微軟正黑體', 'Microsoft JhengHei', Arial;
}
部落格文章教學:http://orsino520.blogspot.com/2014/01/blogger.html
@@ 如何在blogger留言框裡置入網址超連結、圖片及影片?
blogger祕技--如何在blogger留言框裡置入網址超連結、圖片及影片?
部落格文章教學:http://www.bigsishead.com/2014/01/google-hyperlink14.html
@@ 部落格範本.template
《我.目前使用的範本》
部落格文章:Blogger範本製作–White Clean 範本釋出,走乾淨俐落風!
部落格網址:http://3cschool.blogspot.tw/2013/06/bloggerwhite-clean.html
@@ 避免臉書抓錯圖片
★搜尋
再把藍色的部分加進去
xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:mixi='http://mixi-platform.com/ns#' xmlns:og='http://ogp.me/ns#'
>
★在
上面改為加入以下程式碼
參考文章:
鍵盤美食家Roa: 如何解決Blogger文章貼到FB縮圖錯誤(抓不到封面圖)問題?
http://roa42314.blogspot.tw/2013/12/fb-cannot-find-Thumbnail.html
每次轉貼圖文都抓錯?教你讓 Facebook、Google+、Twitter 正確顯示部落格文章、首頁與網頁的名稱、圖片和摘要! | 社技哲學
http://philotech1982.blogspot.tw/2014/12/metatagsforbloggersharing.html
@@ 網誌標題.增加左邊距離(往右邊靠)
html 搜尋
----------------
.Header h1 {
font: $(header.font);
color: $(header.text.color);
增加
padding-left:20px;
@@ 網誌說明.增加左邊距離(往右邊靠)
html 搜尋
----------------
.Header .description{font-size: $(description.text.size);
color: $(description.text.color);
增加
padding-left:20px;
padding-right:20px;
變成
.Header .description{
font-size: $(description.text.size);
color: $(description.text.color);
padding-left:20px;
padding-right:20px;
@@ 發佈日期的位置.往左移
html 搜尋
----------------
.date-header span {
background-color: $(date.header.background.color);color: $(date.header.color);
padding: $(date.header.padding);
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);
改成
.date-header span {
background-color: $(date.header.background.color);
color: $(date.header.color);
padding-left:0px;
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);
@@ 移除「訂閱:文章(Atom)」
進入 Blogger 後台 → 範本 → 自訂 → 進階 → 新增 CSS
如果想要刪除/隱藏首頁下方的「訂閱:文章(Atom)」,請輸入:
.blog-feeds {display :none;}
如果想要刪除/隱藏文章留言的「訂閱:張貼留言(Atom)」,請輸入:
.post-feeds {display :none;}
如果兩個想刪除怎麼辦?把前面兩個語法合併就好啦:
.blog-feeds, .post-feeds {display :none;}
教學文章:
如何移除 Blogger 討人厭的「訂閱:文章(Atom)」?超簡單教學! | 社技哲學
http://philotech1982.blogspot.tw/2014/11/blogger-atom-rss-delete.html
@@導覽列(頁籤).相關設定
- Blogspot三種建立「水平導覽列選單」的方法 : Blog語法研究室
- http://blogger-script-study.blogspot.tw/2013/07/blogspot-menu.html
- 用Blogger的「網頁」清單建立「導覽列」 : Blog語法研究室
- http://blogger-script-study.blogspot.tw/2010/05/blogger-pages-create-browse-menu.html
- 用Blogger的「連結清單」建立「水平導覽列選單」 : Blog語法研究室
- http://blogger-script-study.blogspot.tw/2010/09/blogger-linklist-menu.html
- 用Blogger的「清單」小工具建立「水平導覽列選單」 : Blog語法研究室
- http://blogger-script-study.blogspot.tw/2010/09/blogspot-list-menu.html
- 再次做頁籤也上手 @ C.W.Wang, MD | 王姿文醫師的個人部落格
- http://c-w-wang.blogspot.tw/2015/12/Tabs.html
關於我 (自我介紹) about.me 電子名片
About.me 官方網站:https://about.me/
部落格文章介紹:http://julia00.blogspot.tw/2012/08/aboutme.html
@@ 相關文章 LinkWithin
LinkWithin 網站:http://www.linkwithin.com/
部落格文章介紹:http://briian.com/6261/linkwithin.html
【進階教學】利用Linkwithin秀出部落格的其他文章,延長訪客停留時間 - 小資雲端創業攻略
http://myeasycloud.blogspot.tw/2015/01/linkwithin.html
參考文章:
如何讓Linkwithin相關文章只出現在單篇文章,不出現首頁 : Blog語法研究室
http://blogger-script-study.blogspot.tw/2013/06/linkwithin.html
參考文章:
Blogger優化首頁LinkWithin縮圖顯示相關文章 - Blog透視鏡
http://blog.openyu.org/2014/04/blogger-linkwithin-home.html
@@ 分隔線
<hr/>
@@ 移除部落格範本內容出處
【進階教學】一個小技巧,輕鬆移除部落格範本內容出處 - 小資雲端創業攻略
http://myeasycloud.blogspot.tw/2014/09/blog-post_18.html
留言板.Disqus
《目前.這個部落格無使用》
→ 目的:臉書的留言板、Google+ 的留言板,好像都是要登入帳號後才可以留言,當然,Disqus 也是需要登入帳號。
→ 只不過,有些人會想留言、但不想讓別人知道自己的臉書帳號、自己的 Google 帳號,所以,透過 Disqus 服務,管理自己以後在 別人部落格 的留言,也蠻不錯的。
DISQUS 官方網站:http://disqus.com
@@ 加強 SEO
在網頁原始碼標頭(head)內增加關鍵字
在<head>正下方加入這兩行
<meta content='DESCRIPTION HERE' name=''description/>
<meta content='KEYWORDS HERE' name=''keywords/>
DESCRIPTION HERE
→ 部落格的描述.想要被搜尋到的描述
KEYWORDS HERE
→ 部落格想要出現的關鍵字.想要被搜尋到的關鍵字
此外
增加圖片的說明文字及連結到目標網頁
此外
《網站管理員》
網址:https://www.google.com/intl/zh-TW/webmasters/
★ 部落格經營心法.應有的態度 ★
★★★ 部落格寫作 | 跟著工作熊玩賺部落格
http://www.blogfuntw.com/blogwriting/
@@ 好網站.Blogger 設定.應有盡有
★★★ 修改 Blogger 各處 CSS(文章標題+內文+其他),以字型大小顏色舉例
http://www.wfublog.com/2015/11/blogger-css-post-title-font.html
★★★ Blogger 各種 Hack 及工具教學大全 (2015 為止)@WFU BLOG
http://www.wfublog.com/2012/09/wfu-blog-hacks-and-tools.html
★★★ Blogger 部落格技巧總整理 : Blog語法研究室
http://blogger-script-study.blogspot.tw/2009/07/blogger-script-study-summary.html
Blog Plugins:部落格外掛大全整理,什麼都有、什麼都不奇怪 @ 符碼記憶
http://www.ewdna.com/2011/12/blog-plugins.html
【指標人物-03】Wayne Fu-Blogger首席顧問,我的網站全靠他 │ 小說界的李洛克|最專業的小說創作技巧教學
http://www.rocknovels.com/2015/04/003wayne-fublogger.html
Fun New Run High.放形浪High.顯示具有 blogger tips 標籤的文章
http://www.skyvee.net/search/label/blogger%20tips
@@ 好文.值得一看再看
打造部落格(一):讓版面更容易閱讀的幾個調整方案 | 社技哲學
http://philotech1982.blogspot.tw/2014/06/build-blog-1.html
(調整網誌標題+內文.字體.大小.行距)
筆記人生: 年輕人,為什麼你該寫部落格(上)
http://blog.twdrli.com/2015/07/whyshouldyoublog1.html
【部落格經營】為什麼寫部落格-寫部落格的11個好處 │ 小說界的李洛克|最專業的小說創作技巧教學
http://www.rocknovels.com/2015/08/blog-why.html
也來寫部落格好了: 寫作教室 — 部落格
http://inkwalk.blogspot.tw/2015/08/blog-post.html
@@ 顏色色碼 HEX 值
Google 四原色.當顏色各自分開時……
藍 HTML #4285F4
綠 HTML #0F9D58
黃 HTML #F4B400
紅 HTML #DB4437
Google 四原色.當顏色靠在一起時……
藍 HTML #4285F4
綠 HTML #34A853
黃 HTML #FBBC05
紅 HTML #EA4335
參考文章:邱建勳 醫師 | 醫學簡報 簡報設計 網站設計 醫學統計: Google 四原色:沒有靈感時的最佳組合!
文章網址:http://jschiu-tw.blogspot.tw/2015/09/google-logo-color.html
7ac142 (Evernote 使用的綠色)
ff4a00 (小米 使用的橘色)
400191 (Yahoo 使用的紫色)
f03 (ESPN 使用的紅色)
6cc655 (Feedly 使用的綠色)
dd4b39 (Google+ 使用的橘紅色)
094ab2 (OneDrive 使用的深藍色)
Google藍色:#4285f4
Dropbox藍色:#007ee5
eBay藍色:#0064d2
Flickr藍色:#0063dc
PHILIPS:#0e5fd8
Skype藍色:#00aff0
TED紅色:#e62b1e
ESPN紅色:#ff0033
淺灰色:#eeeeee
白色:#ffffff
橘色 #ff6600
紅色 #cc0000
參考網頁:BrandColors( http://brandcolors.net/ )
@@ 其他.用的到的.先記下來
目的:看看別人網頁字體的顏色
文章介紹:Stylify Me 快速獲取網站配色、字型等風格資訊
文章網址:https://free.com.tw/stylify-me/
目的:看看別人網頁文字字體、文字大小、行距
文章介紹:Fontface Ninja 一鍵查看網頁使用的字型名稱、大小和行高,快速下載字體檔案
文章網址:https://free.com.tw/fontface-ninja/