hovering-peek-boo/ anti-navbar

實作了在這裡看到的navbar隱現效果，作法說明記錄在《在Beta去除NavBar》這篇文章裡。

　有一點沒有寫出來的是：Template裡的CSS調整。因為NavBar消失後，上方的空白會更明顯多餘，所以需要調整#header-wrapper的margin及padding值，最好是把上方間距設零甚至是負，之所以沒在上述說明文寫到這裡，主要是因為每個模版都不一樣，所以請自行斟酌調整。

在Beta使用HaloScan Trackback

這篇實作記錄是用來解決「如何在blogspot引用文章」這篇提及的作法無法套用在blogger Beta的問題。其實，blogger Beta顯然可以使用舊版已經可以使用的Trackback功能，新的問題解決早先在HaloScan.com Forums已經熱烈討論過，並且有熱心網友提供作法整理。

　如果你已經遵照「如何在blogspot引用文章」這篇文章的說明，完成前置的申請程序，那麼，只要一個步驟就可以讓你的blogger Beta開始使用HaloScan Trackback。

　首先，登入blogger beta後台，依序找到「範本＞修改HTML」並勾選「展開小裝置範本」，開始編輯：

　接著，把下列語法中的你的haloscan帳號改為你自己的帳號：

<script src='http://www.haloscan.com/load/你的haloscan帳號' type='text/javascript'> </script> <a expr:href='"javascript:HaloScanTB(" + "\"" + data:post.id + "\"" + ");"' target='_self'> <script type='text/javascript'>postCountTB('<data:post.id/>');</script> </a>

　在範本原始碼裡找到：

<span class='post-comment-link' > <b:if cond='data:blog.pageType != "item" '> <b:if cond='data:post.allowComments'>

　往下繼續找到<!-- quickedit pencil -->，然後將之前改好帳號的語法複製並且貼在<!-- quickedit pencil -->之前即可。

「延伸閱讀」在Beta的作法

這篇實作記錄主要在解決舊版延伸閱讀(expandable post)無法直接套用到blogger Beta的問題。

　作法只需要兩個步驟，後台登入後依序找到範本＞修改HTML，然後勾選「展開小裝置範本」，開始編輯：

1. 在head加入這段javascript：

   <script type="text/Javascript"> function hidePost(postUrl) { var label=document.getElementById("fullpost"); if(label!=null){ eA = document.createElement("a"); eA.setAttribute("href",postUrl); eA.setAttribute("title","詳閱全文"); eA.appendChild(document.createTextNode("詳閱全文")); eB = document.createElement("p"); eB.setAttribute("id","read-more"); eB.appendChild(eA); label.parentNode.appendChild(eB); label.parentNode.removeChild(label);} } </script>

2. 在語法欄內找到：

   <p><data:post.body/></p>

   取代為：

   <p><data:post.body/></p> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.url'> <script type='text/javascript'>hidePost('<data:post.url/>');</script> </b:if> </b:if>

　接下來，你可以在後台依序找到「設定＞格式」，然後在「文章範本」欄位填入：

<p>簡介文字</p> <span id="fullpost">「延伸閱讀」內文</span>

　這麼一來，每次發文時，只要把「延伸閱讀」內文填入span#fullpost，就能夠在blogger beta順利使用延伸閱讀(expandable post)的功能了。

Label Cloud

參考Beta Blogger Label Cloud所提供的作法，三個步驟完成Label Cloud。

1. 後台登入，選擇範本，修改HTML。不勾選展開小裝置範本

   

2. 首先，加入CSS宣告於]]></b:skin>之前：

   /*--Label Cloud Styles--*/ #labelCloud {text-align:center;font-family:arial,sans-serif;} #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;} #labelCloud ul{list-style-type:none;margin:0 auto;padding:0;} #labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0} #labelCloud a{text-decoration:none} #labelCloud a:hover{text-decoration:underline} #labelCloud li a{} #labelCloud .label-cloud {} #labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000} #labelCloud .label-cloud li:before{content:"" !important}

   其次，在]]></b:skin>與</head>之間加入javascript：

   <script type='text/javascript'> // Label Cloud User Variables var lcBlogURL = 'http://你的站名.blogspot.com'; var maxFontSize = 20; var maxColor = [0,0,255]; var minFontSize = 10; var minColor = [0,0,0]; var lcShowCount = false; </script>

3. 取代原有的Label Widget：

   找到

   <b:widget id='Label1' locked='false' title='標籤' type='Label'>

   取代為：

   <b:widget id='Label1' locked='false' title='標籤' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <div id='labelCloud'/> <script type='text/javascript'> // Don't change anything past this point ----------------- function s(a,b,i,x){ if(a>b){ var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m) } else{ var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a) } return v } var ta=0 var c=[]; var labelCount = new Array(); var ts = new Object; <b:loop values='data:labels' var='label'> var theName = "<data:label.name/>"; ts[theName] = <data:label.count/>; </b:loop> for (t in ts){ if (!labelCount[ts[t]]){ labelCount[ts[t]] = new Array(ts[t]) } } tz = labelCount.length-1; lc2 = document.getElementById('labelCloud'); ul = document.createElement('ul'); ul.className = 'label-cloud'; for(var t in ts){ for (var i=0;3 > i;i++) { c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz) } var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz); li = document.createElement('li'); li.style.fontSize = fs+'px'; li.style.lineHeight = '1'; a = document.createElement('a'); a.title = ts[t]+' Posts in '+t; a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')'; a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t); if (lcShowCount){ span = document.createElement('span'); span.innerHTML = '('+ts[t]+') '; span.className = 'label-count'; a.appendChild(document.createTextNode(t)); li.appendChild(a); li.appendChild(span); } else { a.appendChild(document.createTextNode(t)); li.appendChild(a); } ul.appendChild(li); abnk = document.createTextNode(' '); ul.appendChild(abnk); } lc2.appendChild(ul); </script> <noscript> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url'><data:label.name/></a> </b:if> (<data:label.count/>) </li> </b:loop> </ul> </noscript> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

　接下來就全靠CSS調整成你想要的樣子即可。

　另外，隨著文章增加，點選單一Label的文章可能變得落落長，如果你想只顯示標題，請勾選「展開小裝置範本」，繼續編輯：

　尋找以下這段語碼：

<b:include data='post' name='post'/>

　改成：

<b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType != "item"'> <li><a expr:href='data:post.url'><data:post.title/></a></li> <b:else/> <b:include data='post' name='post'/> </b:if> <b:else/> <b:include data='post' name='post'/> </b:if>

Beta之謹慎前瞻

在眾BSP裡，要說力推零整篩濾的穿透社群，blogger.com應該是名列前矛的優選。

雖然，搞不大懂，為什麼直到現在還要分別以blogger.com帳號及Google帳號分別登入blogger.com及beta.blogger.com，不過，自從無名小站的全方位嶄新個人服務之後，反而覺得謹慎Beta自有其提供更佳服務的道理吧。

整合前的亂流

用Windows Live Writer發了兩篇文章之後，Jas9 Taipei.突然發生第500號錯誤地掛點了，查了一下Blogger Status發現：從八月二十二日開始的各種症狀，我在這幾週內都遇過了。

Lucky me!!

　這應該就是所謂整合前的亂流吧。

　不過，我試著設定Jas9 Beta到Windows Live Writer去，卻發生數次帳號密碼錯誤，不知道是Windows Live Writer還沒有開始支援blogger.com beta的API，還是blogger.com beta作了什麼封鎖的動作呢？總之，就是暫時沒辦法用Windows Live Writer來寫Blog了。

　寫到這裡，剛發現，Jas9 Taipei.的問題已經修好了，看來blogger.com的用戶們真的全員進入beta期了。

Beta Beta

這一篇是Beta的Beta，感覺上好像回到一兩年前，blogspot只有英文介面的時期。

　不需要重建的blogspot果然省時省力許多，發佈後馬上看到修改後的結果。

　除了操作界面之外，這個beta版就像是舊blogspot的優化版，源自google pages拖拉式的模版編輯，反正我用不到，倒是navibar改為iframe置入，原來的anti-navi便失效了，看來，舊模版要移殖到beta，可能要花點時間來調校吧。

　另外，除非後續找得到破解之道，否則，目前若要使用labels，也就是分類功能，則一定要使用templates裡的layouts功能，這也就是說，你得使用它的預設版型，並且使用拖拉式的模版編輯。嗯，如果是這樣的話，好像，還不如不要用它的labels，就目前而言，它支援中文的程度很差，所以，大概只能下英文分類吧，我猜。