Blogger 自選焦點分類文章🤍 灰鴿 ⭐ Google Blogger 建置研習工作室

Blogspot的「熱門文章」小工具，要顯示的文章，是由訪客來決定 ~
而精選文章也只能選一個，若想要能自選多個得意的聚焦文章、就要自已動手來建立嚕!!

首先 >> 進入文章管理頁面，利用標籤來建立分類文章，點按右上角 > 管理，

快速的來作大量的批次處理 ...

接下來、點按下面的 Code 複製 XML碼：

<b:widget id='TextList122' locked='false' mobile='yes' title='自選熱門文章' type='TextList' version='2' visible='true'>
<b:includable id='main'>
<b:include name='content'/>
<b:include name='script'/>
</b:includable>
<b:includable id='content'>
<div class='hot-post'>
<article class='art'>
<h3 class='entry-title'>
<a href=''/>
</h3>
<div class='post-header'/>
<div class='entry-content'>
<a href=''>
<div class='s-thum'/>
</a>
<div class='s-item'/>
</div>
<div class='post-bottom'>
<span class='num_comments'/>
<div class='jump-link'>
<a href=''>
閱讀完整內容 »
</a>
</div>
</div>
</article>
</div>
</b:includable>
<b:includable id='script'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js'/>
<script type='text/javascript'>
$(function() {
var url = "<data:blog.homepageUrl/>feeds/posts/default?category=<b:eval expr='data:items[0]'/>&alt=json-in-script&max-results=<data:shownum/>";
var cont = '#<data:widget.instanceId/> .hot-post';
// <![CDATA[
$.ajax({
url: url ,
type: 'get',
dataType: 'jsonp',
success: xson,
error: function() {
$(cont).html(
'<strong>系統不正常</strong>')}
});
var x=$('article.art');
function xson(data) {
var tent = data.feed.entry, temp='';
if (!tent) { $(cont).html('<span>沒文章下載</span>'); return(0);}
for ( i in tent) {
const y=tent[i];
x.find('.entry-title a').html(y.title.$t);
x.find('.publ').html(y.published.$t.replace(/[T].*/,""));
x.find('a').attr('href',y.link[4].href);
x.find('.s-thum').html(y.content.$t.match(/<img\S*.[^>]*>/));
x.find('.s-item').html(y.content.$t.replace(/<\S[^>]*>/g,"").substr(0,200));
x.find('.num_comments').html('留言(' + y.thr$total.$t +')');
if(i < tent.length-1){x.clone().prependTo(cont);}
}
} });
// ]]>
</script>

<style type='text/css'>
.hot-post .art{margin:20px 10px; border:1px solid #aaa; padding:10px;
overflow:hidden;box-shadow:1px 1px 10px rgba(50,50,50,0.5);}
.hot-post .s-thum{ width:35%; max-width:380px;margin:10px;float:left; overflow:hidden;}
.hot-post .s-thum img{ transition: .6s;}
.hot-post .art:hover .s-thum img{ opacity:0.8; transform:scale(1.2)}
.hot-post .s-item{ padding: 30px;}
.hot-post .post-bottom{ clear:both; margin: 0 auto; width: 250px;}
.hot-post .num_comments{margin:2px 30px;}
</style>
</b:includable>
</b:widget>