Blogger 最新文章 小工具

   適合 任何寬度的最新文章小工具

最新文章 小工具能適合 RWD 的回應式設計，以百分比的方式、以及彈性的畫面，可以在不同解析度下正常顯示。






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

複製以下的樣式碼，填入內容裡 >> 最後按下儲存 ~ OK

在下面的文字框內點一下，複製 程式碼：
<style type="text/css"> #posts-conten {} #posts-ul li a{text-decoration:none; color:#222; bottom: 0; left: 0; position: absolute; right: 0; top: 0; z-index: 10;} #posts-ul { display:flex; flex-flow: row wrap; list-style:none;padding-left:0px} #posts-ul li{ margin: 5px; flex:1 0 320px;border: 1px solid #aaa; display:flex; align-items: center; position: relative;} #posts-ul div{height:120px;overflow:hidden; flex:0 0 120px} #posts-ul div img{width:101%; height:101%; transition: .6s;} #posts-ul li:hover div img{transform:scale(1.3)} #posts-ul li:hover .title{color:#eaf;} #posts-ul li .title{ line-height: 160%; font-size:18px; font-weight: bold;color:#99f;} #posts-ul li P{margin:5px 5px 5px 15px;max-height:110px;overflow:hidden;} </style> <div id="posts-conten"> <ul id="posts-ul"></ul> </div> <script> $(function() { var text_len =30 , //摘要字數 count ="10" ; //文章篇數 function xson(data) { var tent = data.feed.entry, temp=''; if (!tent) { $('#posts-ul').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].published.$t.replace(/[T].*/,"")+'</span><br /><span class="title">'; temp += tent[i].title.$t +"</span><br />"; temp += tent[i].content.$t.replace(/<\S[^>]*>/g,"").substr(0,text_len) + '</p></li>'; } $('#posts-ul').append(temp); } $.ajax({ url: '/feeds/posts/default?alt=json-in-script&max-results='+ count, type: 'get', dataType: 'jsonp', success: xson, }); }); </script> 不懂語法的格友請按  >>  

  假如你會 CSS 可以自行修改樣式唷!!

#posts-ul li{ flex:1 0 320px;} 每一則摘要的寬度 最小為320px，也是起始寬度。
#posts-ul div{height:120px; flex:0 0 120px} 圖像的寬、高度， 圖片的高度等於摘要的高度。

還有、 網站資訊提供 ~ 允許網誌動態消息 》 ( 要設定成 ) 》完整