2014年1月21日

〔筆記〕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;
}
部落格設定-2

----------------------
【設定目的】── 將文章內容預設的字體,改成「微軟正黑體」
-----------------------

文章標題字體,以微軟正黑體優先;
h3 子標題的字體大小,為預設自己的 1.6 倍;
文章內文字體,以微軟正黑體優先;
文章中的照片寬度,為內文寬度的 100 分之 85 ;
部落格標題,離最上面頂端有 40px 的距離;
不要顯示 「訂閱:Atom」;
文章內文字體,放大為 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;
}

部落格設定-1


----------------------
【設定目的】

照片,最大寬度 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】,在與之間,找到以下語法:
    <data:blog.pagetitle/>

    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 篇文章)




    ▲搜尋部落格文章 (=自訂搜尋引擎)



    → 此舉的目的:因為 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}

    部落格文章介紹:圖片太大或圖片右邊被截斷如何處理?為圖片加上最大寬度的CSS
    http://www.pilipress.com/2013/11/max-width-css.html



    [CSS] 部落格文字:微軟正黑體



    入徑:設定 / 範本 / 自訂 / 進階 / 新增CSS


    .post-body img { max-width:720px; }
    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



    ▲網誌標題.增加左邊距離(往右邊靠)



    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



    ▲導覽列(頁籤).相關設定






    關於我 (自我介紹) 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
      部落格文章介紹:http://www.pimir.net/2013/11/blogger-quick-installation-disqus-message-board.html



      ▲ 加強 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/





      Related Posts Plugin for WordPress, Blogger...