d.png   在博客 BLOGGER 新增最新 留言、文章，小工具 



 在Blogger的後台新增小工具裡，想找最新文章與最新回應功能，你會發現 Blogger 沒有提供這兩種小工具。
Blogger 的小工具、等於是痞客邦側欄管理裡的版位，不同的是痞客邦的版位，只能擺在側欄，而Blogger 的小工具可以放在版面的任何地方 
既然沒有提供，我們就動手來製作，為了讓對 APP 程式，不甚了解的格友能輕易安裝，因此、我把CSS樣式碼、HTML、Script 全部寫在一起，你只要會複製貼上就好。

Blogger 把日誌(post)、網頁(page)、回應(comment) 等等 ... 的資料都存放在你部落格下的一個資料夾 (feeds) 的位址，當你要求下載資訊時，url 如下 :
 

日誌 ~ /feeds/posts/default?alt=json-in-script&max-results=10 

回應 ~ /feeds/comments/default 
網頁 ~ /feeds/pages/default

每個項目，都放在 (feeds) /下的不同路徑，有兩個參數，你最好要知道，start-index 從第幾筆開始，max-results 要下載幾筆資料，
假如、你要在別的地方使用，在 feeds 之前，需要加上 你的部落格的首頁網址，也就是你註冊的網址 
以我的格子 "https://e-717.blogspot.com" 為例 -> https://e-717.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=10&start-index=10 
看到這裡、你應該已看出，只要你填上誰部落格的網址，就能讀取誰的部落格資料了 ...


安裝須知 <<< 必看

在後台的設定裡，網站資訊提供，至少要設定成可讀取 
 


請檢查範本或其他小工具裡，看看是否已有安裝過 jQuery 程式庫，如果沒有安裝過請多加入以下，這行程式碼。
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>


假如、你需要安裝多個外掛程式，通常都會使用到 jQuery，最好、將jQuery 程式庫貼在，範本的<head>之間</dead>，因為每一個小工具，並不一定會同時出現在同一個畫面。
如果、你是要安裝在痞客邦的側欄，就不需要引入 jQuery 程式庫，因為、痞客邦已有含入 jQuery ，只是、無法使用錢字號 $，必須將所有的 '$' 換成 jQuery，
或是在 <script src="....> 之後，程式開始的第一行，加入這行 ~  var $=$||jQuery; 

區塊的間距位置 或許需要調整 <style type="text/css">
#comment-list {margin-top: -42px; overflow:hidden;}


第一次、點按最新文章，展開時才會開始下載資料，會停頓一下...


進入 >> 後台管理 >> 版面配置 >> 新增一個「HTML/JavaScript」小工具





複製程式碼：

最新文章~ 程式碼： 

<div id="posts-list">
<img src="https://pic.pimg.tw/e717/1608523373-3319523954-g.png" id="iexpen" style="margin:0px 45%; transition: 1s;" />
<ul id="post-list"></ul>
</div>

<style type="text/css">
#posts-list {margin-top: -42px; overflow:hidden;}

#post-list div{margin:3px 0 3px -132px;
overflow:hidden; position: absolute; width:120px; height:100px;}
#post-list a {text-decoration:none; color:#222;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 10;}

#post-list {border: 1px dotted; overflow:hidden; padding:2PX; list-style:none;}
#post-list li{ min-height:110px; border-bottom: 1px solid; background:white;
padding-left:130px;overflow:hidden;position: relative; line-height: 150%;}
#post-list p{margin:5px;}
#post-list div img{width:102%; height:102%; transition: .5s;}
#post-list li:hover div img{transform:scale(1.3)}
#post-list li:hover span{color:#ff50fa;}
#post-list span{ margin-right:30px; line-height: 180%; font-size:18px;
font-weight: bold;}

#post-list > li:nth-of-type(2n+1){background:#f0fbfb !important;}
</style>

<script>

$(function() {

function psone(data) {

var tent = data.feed.entry, temp='';

if (!tent) { $('#post-list').html('<span>沒文章 下載</span>'); return(0);}

for ( i in tent) {

temp += '<li><a href="'+ tent[i].link[4].href+ '"></a><div>';
temp += tent[i].content.$t.match(/<img\S*.[^>]*>/) + "</div><p><span>";
temp += tent[i].title.$t+' : </span>';
temp += tent[i].published.$t.replace(/[T].*/,"") +"<br />";
temp += tent[i].content.$t.replace(/<\S[^>]*>/g,"").substr(0,30) + '</p></li>';
}

$('#post-list').append(temp);

}

var cx=0,ip=0;

$("#post-list").animate({ height: 'toggle'}, 0);

jQuery("#iexpen").click(function(){

if(ip==0){ $.ajax({
url: '/feeds/posts/default?alt=json-in-script&max-results=10',
type: 'get',
dataType: 'jsonp',
success: psone,

}); ip++;
}

if(cx==0){ cx=1; $("#iexpen").css('transform' , 'rotate(180deg)'); }

else{cx=0; $("#iexpen").css('transform' , 'rotate(0deg)'); }

$("#post-list").animate({ height: 'toggle',opacity: 'toggle'}, 1200);

});});

</script>

限制字數的長度 : 綠色 ! substr(0,30) 


 
 最新留言~ 程式碼：

<style type="text/css">
#comment-list {margin-top: -42px; position: relative;}
.autimg{ position: absolute; margin: 8px; width:80px;height:65px; box-shadow: 2px 2px 8px rgba(10%,10%,10%,0.6);left:0;}
.pimg{float:left; width:100px; height:80px;}

#com-list P{margin-top:5px; max-height:120px;}
#com-list a {text-decoration:none; color:#222;}
#com-list {border: 1px dotted; overflow:hidden; padding:2PX; list-style:none;}
#com-list li{ border-bottom: 1px solid; background:white; padding-top:6px; overflow:hidden; position: relative;}
#com-list li img{max-width:100px; max-height:90px;}
#com-list span{ margin-right:25px; color:#36F;}
.e717{max-width:130px; max-height:120px; }
#com-list > li:nth-of-type(2n+1){background:#e9fbfb !important;}

</style>

<div id="comment-list">
<img src="https://pic.pimg.tw/e717/1608523373-3319523954-g.png" id="iexpent" style="margin:0px 45%; transition: 1s;" />
<ul id="com-list"></ul>
</div>

<script>

$(function() {
$.ajax({
url: '/feeds/comments/default?alt=json&max-results=8',
type: 'get',
dataType: 'json',
success: xson
});

function xson(data) {

var tent = data.feed.entry, temp='';

if (tent !== undefined) {

for ( i in tent) {

temp += '<li><a href="'+ tent[i].link[2].href;
temp += '"><img class="autimg" src="https:'+ tent[i].author[0].gd$image.src.replace(/https?:.*/ig,'//1.bp.blogspot.com/-xifjV61gz-c/X_PIzvy2D3I/AAAAAAABHt8/jyd-FgLaLrcUXzDCIN4HDskegMWaXT98gCLcBGAsYHQ/s0/pic_338.jpg');
temp += '" /><div class="pimg"> </div><span>'+ tent[i].gd$extendedProperty[1].value.replace(/\s.*/i,"") + '</span>';
temp += tent[i].author[0].name.$t+' :<p>';
temp += tent[i].content.$t.replace(/(https?:\/\/.*?(gif|jpg|png))/ig,'<img src="$1" class="e717" />') + '</p></a></li>'; 

}

$('#com-list').append(temp);

} }

$('#com-list').animate({ height:'toggle' }, 0);

var cx=0;

jQuery("#iexpent").click(function(){

if(cx==0){ cx=1;
$("#iexpent").css('transform' , 'rotate(180deg)');
}

else{cx=0;
$("#iexpent").css('transform' , 'rotate(0deg)');
}

$("#com-list").animate({ height: 'toggle',opacity: 'toggle'}, 1200);

}); });

</script>

限制高度 : 綠色 !  #com-list P{margin-top:5px; max-height:120px;}


 痞客邦最新文章 ~ 程式碼：

<div id="e717_article"></div>

<style><!--

.fi-set img {
-webkit-transition: opacity .4s;
-moz-transition: opacity .4s;
-o-transition: opacity .4s;
transition: opacity .4s;
margin:6px 0px;
max-width:100%;
opacity:1;
border-radius:0px 50px;
border:1px solid #777;
-webkit-filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.7));
filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.7));
}

.fi-set:hover img {opacity:0.5;
transition: 2s;
transform: rotate(-10deg) rotateY(360deg) rotate(10deg);
}
.fi-set:hover legend{ color:#f5e;}

.fi-set {
border-radius: 10px ;
border: 1px solid #f77;
padding: 5px;
margin: 12px auto;
text-align:center;
}

legend{
padding: 0px 6px;
margin: 0 auto;
}
--></style>

<script type="text/javascript">// <![CDATA[

var new_article = function(user,put,count="1"){

jQuery.getJSON("https://emma.pixnet.cc/blog/articles/latest?user="+ user +"&limit="+count+"&format=json&api_version=2", function(data){
if(data.error!="0"){
jQuery("#DebugZone").append("Message:" + data.message + "<br>");
return;
}
var fi_set ='';
jQuery.each(data.articles, function(i,blog){


fi_set = ('<fieldset class="fi-set">');
fi_set += '<legend>' + blog.title + '</legend><a href="' + blog.link + '" class="relate-link" title="' + blog.title + '">';
if(blog.thumb.match('90x90')!=null){
fi_set += '<img src="' + blog.thumb.substring(0,blog.thumb.length-9) + '200x130.jpg" class="article-image">';
}
else if(blog.thumb.match('width=90&height=90')!=null){
fi_set += '<img src="' + blog.thumb.substring(0,blog.thumb.length-12) + '225&height=135" class="article-image">';
}
else{
fi_set += '<img src="' + blog.thumb + '" class="article-image">';
}

fi_set += '</a></fieldset>';

jQuery(put).append(fi_set);
});
});
};

new_article('你痞客邦的帳號ID','#e717_article','6');

// ]]></script>


需要修改的參數 : 紅色 ~ 你在痞客邦的帳號 ID，藍色 ~ 要顯示幾篇文章
new_article('痞客邦的帳號','#e717_article','6');

 


 
填入程式碼：最後記得按儲存，醬就 OK 了!!
/tmp/php47eXSj  

<- 裝在P客的範例、在側欄 ~~ 我在榖鴿的 ~ 醉心文章 
 
arrow
arrow
    文章標籤
    Blogger 小工具 Blogger 最新文章 Blogger 最近回應 Blogger 最新留言
    全站熱搜
    創作者介紹
    創作者 灰 鴿 的頭像
    灰 鴿

    ❤️灰鴿❤️

    灰 鴿 發表在 痞客邦 留言(0) 人氣()