blogger 精選網頁 小工具

此開發是將 LinkList 連結清單小工具轉換為 精選網頁小工具 

Blogger 有一個精選文章小工具，可使文章置頂。現在我來製作一個可以讓網頁置頂的小工具
  簡單的說、就是這個工具能讓你挑選一篇，你認為最得意精采的網頁，當焦點文章來展示

您可以直接在清單小工具的設置中添加 網頁URL

樣式、若不滿意，請自行使用 CSS 修飾

點按下面的 Code 複製 HTML碼：

<b:widget cond='data:view.isMultipleItems' id='LinkList17' locked='false' title='精選網頁' type='LinkList' version='2' visible='true'>
<b:includable id='main'>
<b:include name='widget-title'/>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<div class='widget-content' style='padding:20px; border:1px solid black;overflow:hidden'>
<a expr:href='data:links[0].target'>
<h3 id='ptitle'/>
<img align='left' id='pimg' src='' style='width:40%;max-width:380px;max-height:250px;'/>
<div id='pcontent' style='color:black;'/>
</a>
</div>

<script type='text/javascript'>

var src = "<data:blog.homepageUrl/>feeds/pages/summary?alt=json-in-script&amp;callback=showrpages&amp;path=<b:eval expr='data:links[0].target'/>";

// <![CDATA[
document.write("<script type='text/javascript' src='" + src + "'></" + "script>");

function showrpages(json) {
var ent = json.feed.entry[0];
var src = ent.media$thumbnail ? ent.media$thumbnail.url.replace(/s72/,'s300') : "https://pic.pimg.tw/e717/1610276405-1236476109-g.jpg";

document.getElementById('ptitle').innerHTML = ent.title.$t;
document.getElementById('pimg').src = src;
document.getElementById('pcontent').innerHTML = ent.summary.$t.substr(0,200); //內容字數長度200個

}
// ]]>
</script>

</b:includable>
</b:widget>

按主題  >> 在模板的 HTML 編輯器中添加代碼：

貼在 Blog 小工具上方
<b:widget id='Blog1' locked='true' title='網誌文章' type='Blog' version='2' visible='true'>

儲存模板後，小工具將位於 Blog 項目小工具的正上方。

之後你也可以轉到 [版面配置]窗格，將其移動到你想放置的地方。

編輯網頁清單

轉到 [版面配置]窗格 ~ 打開網頁清單小工具，在設置中輸入網站名稱和網址，該小工具就會出現在博客上。

注 1：小工具不會檢查列表的內容。如果列表包含不是網址的項目，無法正常工作。

注 2：網頁清單、只會使用第一個項目。(你可以輸入多個，以後輪班)

注 3：在設定 》 網站資訊提供 ~ 允許網誌動態消息 》 完整