[unboxing][hrads]

熱門標籤

☆重要訊息:Blogger 官方近期推出的「RWD 自適應範本主題」沒有『行動服務』的設定選項,如果您是觀察「技研可樂」裡的文章做自己網站的設計,使用「自適應範本主題」的使用者可以直接依「技研可樂」文章裡的『電腦版』方式做設定即可完成佈置,不需要開啟『行動服務』。☆

  Blogger 自訂網址應用 CloudFlare HTTPS 系列文章:「CloudFlare

  Blogger HTTPS 相關文章列表:「HTTPS

  Blogger AdSense 廣告放置與相關自適應廣告佈屬文章列表:「AdSense

  Blogger 常用頁面判斷式用法一列表:「Blogger 常用頁面判斷式用法一覽表

挑選特定標籤製作 Blogger 文章置頂功能

本篇我們使用 Blogger「HTML/JavaScript」小工具,安裝導引特定標籤中的文章標題、作者、日期、描述內容的 jQuery 程式,再配合 Blogger 的頁面判斷式,將「小工具」置於首頁或特定網址頁面的網誌文章上方,即可製作出 Blogger文章置頂功能。

小工具在安裝 Blogger ( Blogspot ) 文章置頂程式後,較為麻煩的是 CSS 語法的調整。由於 Blogger 網誌版面設計寬度與高度都各有不同,所以這邊設計的文章縮圖置於左側與頂部,實際情況還是須依自己的版型而做 CSS 調整。

這裡先觀察一下「Step2」完成後的文章縮圖置於標題左側的樣張。背景色使用灰階並在邊框的部份使用點線,jQuery 抽取 Feed 導引的標籤為《技研可樂》的開箱文「unboxing」標籤,並取樣一個標籤。

挑選特定標籤製作 Blogger 文章置頂功能_001


上圖是以《技研可樂》目前的版型而設定的 CSS 數值,實際的縮圖大小還是要以自己的版型為準。好的,接下來就可以開始動工了。



相關連結

版型配色:「Chrome 擴充:ColorPick Eyedropper 網頁色碼擷取器

CSS 調整:「http://www.1keydata.com/css-tutorial/tw/border.php

範例 DEMO 頁面|電腦版網頁:「電腦版

範例 DEMO 頁面|行動版網頁:「行動版



設置流程

  1. HTML 範本中部屬 Font Awesome 及 jQuery 函式庫
  2. 版面配置頁用「HTML/JavaScript 小工具」安裝程式碼 ( 文章縮圖在左側 )
  3. 讓「HTML/JavaScript 小工具」在首頁或特定頁面顯示
  4. 調整 CSS 讓文章縮圖在顯示在標題上方
  5. 靈活應用

設置前準備

若對編譯 Blogger 的 HTML 模板還不太熟悉,建議先執行『備份 Blogger 模板 (範本)』的動作,以防原始模板資料遺失。



設定教學

Step 1

HTML 範本中部屬 Font Awesome 及 jQuery 函式庫

首先,在 HTML 範本中搜尋『</head>』,在「</head>」上方加入以下代碼,並『儲存範本』。


<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>



Step 2

版面配置頁用「HTML/JavaScript 小工具」安裝程式碼 ( 文章縮圖在左側 )

接著前往 Blogger 後台版面配置頁 ( 拖拉編輯頁 ) 新增一個『HTML/JavaScript 小工具』,標題命名為『文章置頂』並放入以下程式代碼。然後將小工具拖拉到「網誌文章」的上方。


<style type='text/css'>
/* 文章置頂 */
.pt-body{background-color: #ffffff;border:#dddddd 1px dotted;} /* .pt-body 及 #poststop 可視情況加入 (border:顏色 粗度 線條屬性) 或 (background-color 背景色) */
#poststop li{list-style-type:none;} /* 清單記號:無; (沒使用縮圖,可添加 border-bottom:#EEE 1px solid; 加入下劃線) */
#poststop .pt-thumb{display:block;width:250px;height:170px;float:left;margin:15px;} /* 區塊呈現; 圖片:寬250px 高170px; 左側浮動; 邊界15px */
#poststop .pt-title{font-family:Microsoft JhengHei;font-size:22px;font-weight:400;margin:5px 0 8px 0;} /* 微軟正黑體; 文字寬度 400; 文字大小 22px; 邊界-上、右、下、左 */
#poststop .pt-title a{color:#666;font-weight:700;font-size:21px;} /* 連結:顏色 #666; 文字寬度 700; 文字大小 21px */
#poststop .pt-title a:hover{color:#999;text-decoration:none;} /* 滑鼠移到連結上方:顏色 #999; 字體裝飾-預設無底線 */
#poststop .pt-summary{margin:2px 0 2px 0;font-size:110%} /* 邊界-上、右、下、左; 文字大小:110%; */
#poststop .pt-content{margin-left:260px;} /* 邊界-左:260px; (沒使用縮圖,可註釋掉這一行) */
.fa {display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} /* 區塊水平排列; Awesome文字-厚度正斜體大小寫 normal、字體大小行高14px/1、字體類別-FontAwesome; 文字繼承大小; 文本渲染-自動; WebKit 字體平滑-反鋸齒; MOZ 字體平滑-灰階 */
.fa-calendar:before{content:"\f073";padding: 4px 6px 4px 6px;} /* fa-calendar 之前顯示日期圖示:awesome 圖示 \f073; 留白-上、右、下、左 */
.fa-user:before{content:"\f007";padding: 4px 6px 4px 6px;} /* fa-user 之前顯示作者圖示 */
</style>
<div class='pt-body'>
<ul id="poststop"></ul>
<div>
<script type="text/javascript">
//<![CDATA[
$(function () {
$.ajax({
    url: '/feeds/posts/default/-/unboxing/?alt=json-in-script&max-results=1',
    type: 'get',
    async: true,
    dataType: "jsonp",
    success: function(pte){
    //使用 for 循環 feed 資料
        for (var k = 0; k < pte.feed.entry.length; k++){ //使用 length 得知陣列數量
          for (var p = 0; p < pte.feed.entry[k].link.length; p++) {
            if (pte.feed.entry[k].link[p].rel == 'alternate') {
              var ptl = pte.feed.entry[k].link[p].href; //變數 ptl 替換掉文章網址
              break; //跳出循環
            }
          }
          
    //使用 var 變數更替 feed 原始資料
        var ptt = pte.feed.entry[k].title.$t; //文章標題
        var ptn = pte.feed.entry[k].author[0].name.$t; //文章作者
        var ptd = pte.feed.entry[k].published.$t.substring(0, 10); //文章日期前十個字符
     if ("content" in pte.feed.entry[k]) {
        var ptc = pte.feed.entry[k].content.$t; //文章內容
        var pth = $("<div>").html(ptc); //在 html 內容中用選擇器找到 div
        var pts = pth.find("img:first").attr("src"); //在 div 中找到第一張圖片網址        
        }
     else 
        var ptc = ""; //變數 ptc 為空的
        var ptrec = /<\S[^>]*>/g; //變數 ptrec 為圖片或連結代碼內容
        ptc = ptc.replace(ptrec, ""); //將相關代碼內容清除
     if (ptc.length > 100){ //如果文章內容大於 100 字符
        ptc = "" + ptc.substring(0, 100) + "..." //ptc 等於 100 字符
    }
        var pto = "//lh3.googleusercontent.com/-jh02MUWhncs/VkX56nM0DQI/AAAAAAAAIJ0/el0tmMh-9XM/s640-Ic42/no-image.png";
            if (pts === undefined) { //如果第一張圖片沒有顯示
            //顯示 no-image.png 圖片
                var pta = '<a class="pt-thumb" href="' + ptl + '" style="background:url(' + pto + ') no-repeat center center;background-size: cover" title="' + ptt + '"/>'
            } else { //如果不是的話
            //顯示文章中的第一張圖片
                var pta = '<a class="pt-thumb" href="' + ptl + '" style="background:url(' + pts + ') no-repeat center center;background-size: cover" title="' + ptt + '"/>'
            } //在 ul id="recentposts" 的物件結尾加入包含 <li> 之後的組裝物件
        $('#poststop').append('<li>' + pta + '<div class="pt-content"><h3 class="pt-title"><a href="' + ptl + '" title="' + ptt + '">' + ptt + '</a></h3><span class="pt-date"><i class="fa fa-calendar"/>' + ptd + '</span><span class="pt-author"><i class="fa fa-user"/>' + ptn + '</span><div class="pt-summary">' + ptc + '</div></div></li><div class="clear"/>');
        }
    }
});
});
//]]>
</script>

「HTML/JavaScript 小工具」拖拉到下圖的位置。

挑選特定標籤製作 Blogger 文章置頂功能_201



代碼說明

CSS 的部份已在代碼中做了說明。另外「border」邊框,有需求使用其他線條可佈置為 ( dashed 虛線、double 雙線、dotted 點線、groove 凹線、ridge 凸線、outset 浮出線、inset 嵌入線 )。

要顯示特定標籤的文章當作 Blogger 的置頂文章,可將「url: '/feeds/posts/default/-/unboxing/?alt=json-in-script&max-results=1'」當中的『unboxing』變更為想顯示文章的標籤。

max-results=1」則為要顯示的標籤文章數,『1』即為 1 篇文章。



Step 3

讓「HTML/JavaScript 小工具」在首頁或特定頁面顯示

接著再前往 HTML 範本搜尋『文章置頂』,並使用以下代碼包覆文章置頂小工具『<b:includable id='main'></b:includable>』的部份,在『儲存範本』後即可完成設定。「文章置頂」就只會在網誌的首頁中顯示。


<b:if cond='data:blog.url == data:blog.homepageUrl'> 
    <!-- 此段內容只在網誌首頁顯示 -->
</b:if>


整體的代碼配置如下:

    <b:widget id='HTML31' locked='false' title='文章置頂' type='HTML'>
      <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- 開始:只在網誌首頁顯示加在這 -->
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>  <!-- 結束:只在網誌首頁顯示加在這 -->
</b:includable>
    </b:widget>


其他可能運用的頁面判斷式用法:


<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + &quot;p/static_page.html&quot;'> 
    <!-- 此段內容只在特定靜態頁面顯示 -->
</b:if>

<b:if cond='data:blog.url == &quot;http://blog-name.blogspot.com/2015/11/post_page.html&quot;'>
    <!-- 此段內容在只在網站的單一網址頁面顯示 -->
</b:if>

<b:if cond='data:blog.searchLabel'>
    <!-- 此段內容只在標籤頁面顯示 -->
</b:if>
 
<b:if cond='data:blog.searchLabel == &quot;Label&quot;'>
    <!-- 此段內容只在單一 "Label" 標籤頁面顯示 -->
</b:if>



Step 4

調整 CSS 讓文章縮圖在顯示在標題上方

如果要讓小工具中的文章縮圖顯示於標題的上方,可以使用以下 CSS 代碼替換掉「Step2」包含「<style type='text/css'></style>」的部份。

<style type='text/css'>
/* 文章置頂 */
.pt-body{background-color: #FFFDE1;border:#dddddd 1px dotted;} /* .pt-body 及 #poststop 可視情況加入 (border:顏色 粗度 線條屬性) 或 (background-color 背景色) */
#poststop li{list-style-type:none;} /* 清單記號:無; (沒使用縮圖,可添加 border-bottom:#EEE 1px solid; 加入下劃線) */
#poststop .pt-thumb{display:block;width:420px;height:280px;margin:15px;} /* 區塊呈現; 圖片:寬420px 高280px; float:left-左側浮動; 邊界15px */
#poststop .pt-title{font-family:Microsoft JhengHei;font-size:22px;font-weight:400;margin:5px 0 8px 0;} /* 微軟正黑體; 文字寬度 400; 文字大小 22px; 邊界-上、右、下、左 */
#poststop .pt-title a{color:#666;font-weight:700;font-size:21px;} /* 連結:顏色 #666; 文字寬度 700; 文字大小 21px */
#poststop .pt-title a:hover{color:#999;text-decoration:none;} /* 滑鼠移到連結上方:顏色 #999; 字體裝飾-預設無底線 */
#poststop .pt-summary{margin:2px 0 2px 0;font-size:110%} /* 邊界-上、右、下、左; 文字大小:110%; */
/* #poststop .pt-content{margin-left:260px;} 邊界-左:260px; (沒使用縮圖,可註釋掉這一行) */
.fa {display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} /* 區塊水平排列; Awesome文字-厚度正斜體大小寫 normal、字體大小行高14px/1、字體類別-FontAwesome; 文字繼承大小; 文本渲染-自動; WebKit 字體平滑-反鋸齒; MOZ 字體平滑-灰階 */
.fa-calendar:before{content:"\f073";padding: 4px 6px 4px 6px;} /* fa-calendar 之前顯示日期圖示:awesome 圖示 \f073; 留白-上、右、下、左 */
.fa-user:before{content:"\f007";padding: 4px 6px 4px 6px;} /* fa-user 之前顯示作者圖示 */
</style>



下圖則為文章縮圖於標題上方顯示的樣張。

挑選特定標籤製作 Blogger 文章置頂功能_401



Step 5

靈活應用

我們可以使用較為靈活設定標籤的方式,來佈屬「置頂文章」,這樣就不用每次都到小工具或是範本中更換「標籤」值。首先,可以將「Step2」當中需要設置抽取的「標籤」值,設為「Top-Post」固定值。


url: '/feeds/posts/default/-/Top-Post/?alt=json-in-script&max-results=1',

將「Top-Post」設置為固定值,在設定完之後,我們每次要更換「置頂文章」時,只要到「發表文章 › [全部]」更替勾選需要置頂的文章即可。如下圖:
挑選特定標籤製作 Blogger 文章置頂功能_501



額外的,我們也可以將「Step2」當中「CSS」的部份,放置於範本的「</head>」之前或是「<skin>」中 ( CSS代碼放置在「<skin>」中時,不用加入「<style type='text/css'></style>」),然後將「JavaScript」放置於範本的「</body>」之前,或是將「JavaScript」經過壓縮後製作一個外連「Top-Post.js」檔,放置於範本的「</body>」之前,來調整整體模版的速度。

而小工具中只要放入如下代碼即可:


<div class="pt-body">
<ul id="poststop"></ul>
<div>




小結

設定方式有點繁複,不過設置完成後能使用標籤導文章,也相當方便。文章「Step5」的部份設置較為靈活,此法也可以試出其他的玩法;例如技研可樂「電腦版」網頁的首頁及文章頁側邊欄即為本篇文章的變化版,主要是將「max-results=1」設定為「5」再加入了「CSS」拉版的變化,有興趣的話大家不妨可以多做嚐試。



相關文章

[外掛] Blogger 最新文章小工具插件 CSS 縮圖 jQuery 模組



分享

共有 2 則留言

留言迴響
上月美智
管理員
5/20/2017 7:54 PM ×

BLOG主你好,很高興找到這一篇文章,由於個人關係文章內容沒有略縮圖的,請問這個文章置頂的代碼有沒有單純文字形式的呢?

回覆
avatar
coke tech
管理員
5/20/2017 10:09 PM ×

試著將 STEP2 代碼中第 60 行的『' + pta + '』刪除,應該就不會顯示縮圖。

其他位置行距的部份 CSS 重拉一下就可以使用。

回覆
avatar

加入代碼加入代碼

若您在閱覽文章時,於文章頁面找不到相關的應用主題,歡迎移駕到『站內留言』一起研究討論,謝謝!

使用超連結:<a href="https://www.techcoke.com/">技研可樂</a> =『技研可樂

加入圖片 ( https ):支援 HTTPS 網址型式的 .jpg .png 格式圖檔,直接貼入 HTTPS 圖片網址即可在留言時顯示!

支援非嵌入 Youtube 視頻:https://www.youtube.com/watch?v=hdfSISI24Xk (* 瀏覽器網址列中的 Youtube 網址 )

&&amp;'&#039;"&quot;<&lt;>&gt;
技研可樂 © 2013 - 2017

Contact Form

Name

Email *

Message *