這是 Blogger 教學綜合收錄第三篇。我們網站舊版實際上是建構在 Google 的 Blogger 系統。雖然 Blogger 具備有方便與安全的優點，但是自由度也會稍微受到約束。不過 Google 讓我們在版面規劃的部份，具有相當高度的自由，因此我們可以依照自己的想法，讓部落格更俱個人風格。
下面我將針對網路上，談到 Blogger 版面設計與應用的許多零碎資料，重新進行整理、驗證與分類，希望對大家有用。:)
修改前請注意，一旦修改 HTML 內容，原本”版面配置”中的”網誌文章”的”編輯內容”，將會停止使用者再更新。如果有需要使用特別設定，像是地址顯示等，請在修改範本前先行設定完成（但是新模板不一定支援）。建議大家在做任何修改前，務必先行備份範本，或是弄個測試網站先做測試呦。
Random Posts 隨機推薦文章（以標題文字隨機顯示部落格文章）
在小工具的新增 HTML 裡，填入下列代碼：
<script type="text/javascript"> var randarray = new Array();var l=0;var flag; var numofpost=10;function randomposts(json){ var total = parseInt(json.feed.openSearch$totalResults.$t,10); for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}} if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>'); for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1]; for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>"; document.write(item);}} }document.write('</ul>');} </script> <script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>臉書推薦 浮動（漂浮）視窗（Recommendations Bar）
在部落格中想要安裝臉書的浮動推薦視窗（在左或右下角會自動浮起的小視窗），可將下列程式碼安裝在 HTML 編輯中，BODY 中的任意位置：
<div data-href="https://www.vedfolnir.com" data-trigger="X%" data-read-time="5" data-site="https://www.vedfolnir.com"></div>其中，X% 表示文章頁面被捲動到全頁面的百分比，則浮動視窗自動開啟，X 可填入50，或者，將 X% 更改成「onvisible」，表示當網頁中，存放「fb-recommendations-bar」代碼的位置顯示在視窗上時，浮動視窗即自動開啟。
注意，在使用本方法前，要先安裝 Facebook 留言板中，在 Get Code 時，上半部取得的程式碼（我一般都會裝，所以是將該段程式碼直接放在新增小工具的 Html/JavaScript Widget 中，這樣就不用每次安裝新板型都得重貼一次。）。
在文章側邊固定位置處浮動的社群分享視窗
進入部落格的後台，在版面配置中，新增「HTML/JavaScript」小工具，並將下列程式碼貼到該小工具裡頭，如此便能在網頁上直接呈現適當的分享視窗。
提示：bottom:5% 是控制分享視窗在螢幕上的上下位置，而 margin-left:-750px 控制分享視窗在螢幕上的左右位置，可依自己喜好進行更改。
另外，下列程式提供五種社群的分享按鈕，可以個人喜好酌刪。
一、
<style type="text/css">
#pageshare {position:fixed; bottom:5%; margin-left:-730px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:right;clear:both;/*bs-fsmsb*/margin:5px 5px 0 5px;}
</style>二、
<div id='pageshare' title="Get this from Vedfolnir">
<div class='sbutton' id='vfacebook' style='margin-left:8px;'>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/zh_TW/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div></div>三、
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone></div>四、
<div class='sbutton' id='vtwitter'>
<a href="http://twitter.com/share" data-count="vertical" >Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>五、
<div id="vplurk">
<a href="javascript: void(window.open('http://www.plurk.com/?qualifier=shares&status=' .concat(encodeURIComponent(location.href)) .concat(' ') .concat('(') .concat(encodeURIComponent(document.title)) .concat(')')));"><img src="https://lh4.googleusercontent.com/-jUi5FkX5RBI/UbF5qLrW6pI/AAAAAAAAUf4/sUcTeQb4O1g/s64/plurk_Vedfolnir.com.png" height="50" width="50" /></a></div><!--此段為 Plurk 分享按鈕。-->
<div class='sbutton' id='vstu'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div><!--此段為 stumbleupon 分享按鈕，可刪。-->
<div class='sbutton' id='vdigg' style='margin-left:3px;width:48px'> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script> <a></a></div> <!--此段為 stumbleupon 分享按鈕，可刪。-->
<div style="clear: both;font-size: 5px;text-align:center;">Get <a href="https://www.vedfolnir.com/">ShareThis</a></div></div><!-- floating share bar End -->
發佈留言