筆記│美化統計資料模組

flower_copy

換了新的樣式的關係,把一個個模組加回來使用的時候發現原來的統計資料模組無法使用了。(會使得樣式跑版)

可是我又很想在首頁上顯示統計資料呢~

原本模組長這樣

1

名義上是美化/改變了模組樣式,實際上還是裝了這個模組在部落格上

只是我不是從增加小工具那邊增加模組,而是直接在編輯HTML上直接新增她。

實際做法是參考此網誌 - https://www.bloggerspice.com/2015/02/how-to-customize-and-add-blog-stats-widget-in-blogger-blogspot.html

但是黑色的底配上藍色的我覺得會特別顯著..


所以我把它簡化成以下了..

1stats

我覺得這樣比較搭我的部落格耶~


其語法如下:

取代 語法 <b:widget id='Stats1' locked='false' title='Total Pageviews' type='Stats'>...</b:widget>

並改成

<b:includable id='main'>
     <div class='widget-content stats'>Statistics&#65306;
     <div id='totalPosts'>
      <div id='Stats1_totalPosts'>&amp;hellip;</div>
           <span>Posts</span>
       </div>
         <div id='totalComments'>
           <div id='Stats1_totalComments'>&amp;hellip;</div>
           <span>Comments</span>
         </div>
         <div id='totalCount'>
           <div expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>&amp;hellip;</div>
           <span>Pageviews</span>
         </div>
      
       <script type='text/javascript'>
//<![CDATA[
function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');
//]]>
       </script>
     </div>
   </b:includable>

然後在]]></b:skin> 的前面加上

.stats {font-size: 20px; font-weight: 400; color: #fff;display: flex; flex-direction: row; justify-content: space-around;}

就可以了。

張貼留言

【訪客沒有帳號請使用名稱/網址留言。】
【匿名者的留言可能會比較慢回覆】
【請不要留下注音文或者是火星文,謝謝。】

My Instagram

Copyright © SiLlY - 相遇是一場不經意的偶然. Made with by OddThemes