2022年4月11日

Blogger 相關文章推薦工具

如何在文章底部顯示相關文章推薦呢？

偶然閒晃 WFU Blog 的時候，發現了這個驚人的工具，他不但可以幫你自動列出跟原文章具有關連的相關文章，更能夠利用縮圖的方式去抓取文章內的圖片，形成好看的縮圖排列，不但實用又美觀，我跟本沒有辦法在其他地方找到更精彩的相關文章推薦工具！ WFU Blog 萬歲！
[小工具]Blogger 相關文章 V2__安裝懶人包

Blogger 特殊文字區塊設定實作心得

如何在撰寫網誌文章時，讓某些特定文字擁有不同背景呢？

這需要使用到與上一篇底線教學相似的功能，直接呼叫不同的CSS設定，使得整段文字的區域，不管是背景，字型，大小，框線等等，與其他文章文字不同而產生區別，在文章撰寫時是非常實用的工具，尤其像是提供code與長串編碼時，真的是幫大忙了！

這次的實作一樣是參考了 WFU Blog 的以下文章進行安裝和微調：
[教學]讓網頁使用各種特殊文字區塊__(1) 安裝與使用 (CSS 技巧)

Blogger 內文加上漂亮底線實作紀錄

如何讓文章的某些重點內容底下加上彩色底線標示？

有時候寫文章，需要某段文字或某幾個詞被特別標示，做為強調或是分隔用途。依舊在 WFU Blog 這邊，找到下列文章的解決方法：
[教學]讓網頁文字使用各種底線圖案__(1) 安裝與使用 (CSS 技巧)

Blogger 圖片輪播外掛 Camera 實作心得 (pCloud圖片外連)

jQuery圖片輪播外掛 Camera實作心得 (pCloud圖片外連)

Blogger網誌使用到現在，覺得最不方便的地方，就是文章撰寫時的圖片編輯。你只要一設定圖片靠左，Float的語法就自然幫你產生，圖片下方後續撰寫的文字就會開始文繞圖，排版整個成悲劇，如果想要一次貼很多張圖片，就得各種調整非常累人。

於是只好開始尋找有沒有更方便的貼圖效果，果不其然，在 WFU Blog 上挖到了 Camera 的這個外掛，各種試誤之後終於搞定，我的步驟大概如下：

修改H1,2,3 標籤/去除超連結底線/修改行動版標題

修改H1 H2 H3 標籤實用技巧 / 去除超連結底線 / 修改行動版標題

在逛FWU的網誌時，無意間瞭解到Google搜尋引擎如何利用HTML的H1,2,3,4...標籤，去抓取關鍵字的原理。雖然這個網誌也只是我自己的生活記錄而已，對於在搜尋引擎上的表現，我其實沒有太在意，但還是想嘗試照著修改看看，反正當作練習也無妨。

更何況 FWU Blog 已經事先做好邏輯推演，把整個步驟幾乎整理到最精簡了，所以真正操作起來也不難，請參考以下他的文章教學：

符合 SEO 的 H1 H2 H3 標籤配置研究
修改範本 H1 H2 H3 標籤實用技巧

Blogger文章內容收合設定

文章內容收合設定：

此篇教學內容出自於 WFU Blog 之會員文章：
[小工具]jQuery 展開收合效果安裝懶人包

需要加入會員才能取得的內文編輯部分(直接嵌入在HTML之</body>前)，我這邊就不提供了，請直接去申請WFU的會員資格，利用臉書登入就好了，加入很簡單，但非常值得，最近許多修改Blogger的技巧都是在他的部落格上面學到的，極度推薦給Blogger的使用者。

在編輯文章時，如果想要呼叫內容收合功能時，只要在HTML編輯模式下，採用這個語法就可以設定了：

<div class="slide_toggle">填入收合提示文字</div>

<div>填入隱藏的說明內容</div>

我這邊修改的只有嵌入</head>前的程式碼中，收合鍵與收合內容的背景顏色，因此在下方作個記錄：

按此取得程式碼


  
<style>

  /* 展開收合效果 */

  .slide_toggle {

  text-align: center;

  cursor: pointer;

  font-weight: bold;

  /* 收合提示字串區塊, 還可加入自訂 CSS 效果 */

  line-height: 170%;

  background-color: #4a4a4a;

  border-radius: 7px;

  }

  .slide_toggle + div {

  display: none;

  margin-top: 10px;

  background-color: #1C1C1C;

  /* 隱藏註解文字區塊, 請加入自訂 CSS 效果 */

  }

  </style>

將Blogger文章設定密碼鎖

私密文章設定 (2022/4/8)

參考自Tomy部落格的方式：

為你的Blogger文章加上密碼鎖

採用Javascript的方法，用最簡單的方式於HTML編輯頁上加上以下程式碼即可達成

按此取得程式碼


  

  <script type="text/javascript"> 
  /* Password Protection */
  var password = 'password'
  
    password=prompt('Please enter the password to enter this page:','');
  
  if (password != 'password') {
  
    location.href='http://zilchide.blogspot.com/';
  
  }
  </script>