NoMuzikNo:zilchide♪: Blogger 相關文章推薦工具

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

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

主要內容都在上方教學文章中解說了。這邊需要安裝的包括在 </head> 前方的CSS調整程式碼。因為我不需要 ~~不喜歡~~ 在滑鼠移到連結位置後會出現色塊 (hover)，因此我將原本 WFU Blog 預設的兩處淡綠色背景CSS刪除 (background: #ecf5ff;)，圖片外框也因應我深色網誌的整體設計，調整成深灰色，其他的都不變。

點開取得程式碼



    <style>
    /* 相關文章2 */
    .rltPost2_bar { /* 標題欄 */
    }
    
      .rltPost2_caption { /* 標題文字 */
    
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    }
    
      .rltPost2_allPost {
        /* 相關文章區塊 */
    
    display: table-row;
    }
    
      .rltPost2_post { /* 個別文章區塊 */
    
    padding: 5px;
    display: table-cell;
    }
    .rltPost2_post:hover {
    text-decoration: none;
    }
    .rltPost2_post:hover .rltPost2_picFrame {
    border: 1px solid transparent;
    }
    
      .rltPost2_picFrame{ /* 圖片外框 */
    
    padding: 2px;
    border: 1px solid #4A4A4A;
    }
    .rltPost2_pic { /* 圖片 */
    border-radius: 5px;
    }
    
      .rltPost2_title { /* 文章標題 */
    
    font-size: 13px;
    font-weight: bold;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    }
    
      .rltPost2_more { /* 更多文章按鈕 */
    
    vertical-align: middle;
    display: table-cell;
    font-size: 60px;
    }
    .rltPost2_more:hover {
    }
    </style>

接下來必須在HTML範本的 </body> 前安裝以下的程式碼。我個人的修改包括了將呈現的相關文章數目改成5篇，這邊要注意的是，因為我的網誌寬度在我設定過後變得比較寬，才能順利容納下5篇，若你採用預設的Blogger模版，很有可能只夠容納4篇。此外最重要的是，記得在 WFU Blog 中，按照說明將作者存放在Google drive上的js檔案下載下來，並字型上傳到你自己可外連的雲端空間上，並將連結貼到下方程式碼劃上紅色底線的位置，才能夠執行此功能。

點開取得程式碼


    

    
      <!-- 相關文章2 start -->
    
    <script type='text/javascript'>
    //<![CDATA[
    var rltPost2 = {
    show : 5, // 相關文章的數量
    
      width : 120, // 縮圖寬度(px值)
    
    
      height : 80, // 縮圖高度(px值)
    
    
      cut : "Y",
      // 縮圖是否裁切, 預設 "Y" 效果較佳; 若改為 "N" 則不裁切,
        圖片會變形為設定的尺寸
    
    
      caption : "相關文章推薦 :",
      // 大標題字樣
    
    
      moreLogo : "‣",
      // 更多相關文章圖示字元, 也可使用 http 開頭的圖片網址
    
    
      noImage : "https://.../Banner%20120x80-2.jpg", //無縮圖的替代圖片
    
    
      location : ".post-footer-line-3",
        // 相關文章顯示的位置
    
    //]]>
    postUrl : &quot;<data:blog.canonicalUrl/>&quot;
    };
    //<![CDATA[
    (function () {
    
      var url = "https://..../related-post-2-140516-min.js",
    
    script = document.createElement("script");
    script.src = url;
    document.documentElement.firstChild.appendChild(script);
    } )();
    //]]>
    </script>
    
      <!-- 相關文章2 end, designed by WFU BLOG-->

NoMuzikNo:zilchide♪

2022年4月11日

Blogger 相關文章推薦工具

沒有留言: