網頁教學: Blogger/Blogspot 版面設計與技術收錄 03

[dropcap]這[/dropcap]是教學綜合收錄第 3 篇。維德佛爾尼爾 Vedfolnir舊版實際上是建構在 Google 的 Blogger 系統。雖然 Blogger 具備有方便與安全的優點,但是自由度也會稍微受到約束。不過 Google 讓我們在版面規劃的部份,具有相當高度的自由,因此我們可以依照自己的想法,讓部落格更俱個人風格。下面我將針對網路上,談到 Blogger 版面設計與應用的許多零碎資料,重新進行整理、驗證與分類,希望對大家有用。:)

修改前請注意,一旦修改 HTML 內容,原本"版面配置"中的"網誌文章"的"編輯內容",將會停止使用者再更新。如果有需要使用特別設定,像是地址顯示等,請在修改範本前先行設定完成(但是新模板不一定支援)。建議大家在做任何修改前,務必先行備份範本,或是弄個測試網站先做測試呦。by 萊恩

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="http://www.vedfolnir.com" data-trigger="X%" data-read-time="5" data-site="http://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="http://www.vedfolnir.com/">ShareThis</a></div></div><!-- floating share bar End -->

繼續閱讀

  •  
  •  
  •  
  •  
  •  
  •  

2 個回應

  1. Vedfolnir Lion 說:

    你可以用Facebook的Like 或是 Addthis 的多功能按讚列(像我在文章末用的)。要直接寫入Html中喔,不知道你打算放哪個位置?基本來說,文章頭或是尾,你可以搜尋 “data:post.body/" 這串代碼,再決定要將程式碼放在之前或之後。

  2. Style Rainbow 說:

    請問要怎麼在每篇文章裡都能顯示臉書讓人按like?謝謝!

說些什麼吧

您也許也會喜歡…