改造 ~ Blogger 熱門文章

如何改造 博客 BLOGGER 的熱門文章  變成能適合 RWD 的回應式設計

 要如何改造你的 ~ 熱門文章小工具　?　 
讓它變成能適合 RWD 的回應式設計，以百分比的方式、以及彈性的畫面，可以在不同解析度下正常顯示。

只要在你的 XML 主題範本裡，加上幾行CSS 樣式碼，就能做到，也會變得不一樣。

點按下面的 Code 複製 CSS 樣式碼：

 .widget.PopularPosts { border:1px solid #ccc; border-radius: 10px; box-shadow: 1px 1px 3px rgba(10%,10%,10%,0.5);}
.widget.PopularPosts .widget-content >div{display:flex; flex-flow: row wrap; border:1px solid #999;}
.widget.PopularPosts .widget-content >div article{flex: 1 0 280px; border:1px solid #ccc; padding:12px; position: relative; overflow:hidden;}
.widget.PopularPosts .widget-content >div .ripple{width: 100%; height: 100%; position: absolute; top: -15px; left:0;font-size: 0px; display: block; transition:.6s;}

在不同解析度下的顯示效果

DEMO : 請看首頁

　　　不懂語法的格友請按  >>   <style> .widget.PopularPosts { border:1px solid #ccc; border-radius: 10px; box-shadow: 1px 1px 3px rgba(10%,10%,10%,0.5);} .widget.PopularPosts .widget-content >div{display:flex; flex-flow: row wrap; border:1px solid #999;} .widget.PopularPosts .widget-content >div article{flex: 1 0 280px; border:1px solid #ccc; padding:12px; position: relative; overflow:hidden;} .widget.PopularPosts .widget-content >div .ripple{width: 100%; height: 100%; position: absolute; top: -15px; left:0;font-size: 0px; display: block; transition:.6s;}

樣式 2

在下面的文字框內點一下，複製 CSS 樣式碼：
<style type="text/css"> .PopularPosts .item-thumbnail { float: left; margin-right: 1.5em; } .PopularPosts .item-thumbnail img { width: 15vw; min-width: 110px; } .PopularPosts .widget-content >div .ripple, .PopularPosts article:nth-child(3n+1) .snippet-container{display: none;} .PopularPosts { border:1px solid #ccc; border-radius: 10px; box-shadow: 1px 1px 3px rgba(10%,10%,10%,0.5); padding:6px;} .PopularPosts .widget-content >div{ border:1px solid #999; overflow:hidden} .PopularPosts .widget-content article{ margin:5px; border:1px solid #ccc !important; padding:12px; float:left; width:calc(50% - 10px); box-sizing: border-box; height: calc(5vw + 155px); position: relative; overflow:hidden} .PopularPosts .widget-content article:nth-child(3n+1){height: calc(320px + 10vw); clear:left;} .PopularPosts article:nth-child(3n+1) .item-thumbnail img{ width:100% !important; height: 100% !important; max-height: 100% !important; max-width: 100% !important;} .PopularPosts article:nth-child(3n+1) .item-thumbnail{ position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin:0; } .PopularPosts h3.post-title a{ color: #fffff0 !important; line-height: 180% !important; margin-bottom: 0; z-index: 100; position: absolute; background-color: #191818a3; display: block; left: 0; right: 0; max-width: 100%; top: 0; text-align: center; } .PopularPosts .post-header a{width: 100%; height: 100%; position: absolute; top: 0; left:0;font-size: 0px; display: block; z-index:30; display: block;} @media screen and (max-width: 1000px){ .PopularPosts .widget-content article:nth-child(3n+1){ width:calc(100% - 10px)}} /* 解析度在 1000px 以下、變換隊形 */ @media screen and (max-width: 800px){ /* 解析度在 800px 以下、再次變換隊形 */ .PopularPosts .widget-content >div article{ width:calc(100% - 10px)}} </style> <script> $('.PopularPosts article:nth-child(3n+1) .item-thumbnail img').removeAttr('srcset'); </script> 不懂語法的格友請按  >>  

這個小工具、會使用到 jQuery 程式庫，如果沒有安裝，請安裝。

每個人的主題寬度會設定不一樣，有2次的變換排列，請自行調整。

本樣式為一大兩小的組合，所以顯示數目，最好是設定為 3 的倍數。

假如出現、圖片糢糊 ~請參考這篇文章 如何調整縮略圖尺寸