2010年3月12日 星期五

Blogger hack - V3.0目前使用的hack及簡單教學

自動縮文及縮略圖


這是最令我驚喜的一個hack程式，這個模組可以自動縮文並抓取網誌文章第一張圖片做為縮略圖，使用時只需要將文章寫好就可以自動完成排版，目前Chucky版面配置就是使用此hack。
image
他還有一些變化型，除了可以嵌入在post區域，還可以放在小裝置裡，搭配其他的script可以達到很多意想不到的效果，真的非常好用。
Automatic Readmore hack for blogger with thumbnail
首先先將程式碼放到<head></head>中間

script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
最重要的就是這四個
summary_noimg = 430; 文章沒有圖時顯示字元數
summary_img = 340;    文章有圖時顯示的字元數
img_thumb_height = 100; 縮圖的高
img_thumb_width = 120;  縮圖的寬
找到<data:post.body/>並以以下程式碼取代
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
如果想改成嵌入影片或投影片可以從這邊改。

Navibar


應該是最簡的的吧，直接附上網址
Navibar

每篇文章都顯示日期


Blogger同一天的發文只會顯示日期在最後更心那篇，之前用舊版面不會影響，但換了Chucky之後版面會變的參差不齊，除了關閉日期顯示就可恢復平行併排版面，也可以使用以下方法將每篇的日期都顯示出來。
這邊參考每篇文章都顯示日期
首先打開小裝置範本並找到以下程式碼
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
替換成以下程式碼
<b:if cond='data:post.dateHeader'>
<script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(ultimaFecha);</script>
</h2>
</b:if>
儲存即可

日曆模組


使Abin"結合發表文章的日曆模組 (Feed Calendar)"

最新文章與最新回應模組


這裡使用Abin"最新文章模組「終極版」"及"最新回應」模組 (Recent Comments)"

使用jQuery讓側邊列可展開及摺疊


原先使用Abin的"讓側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling)"，但在這模組中，需製作摺疊展開的按鈕，於是參考了阿特學習筆計中"利用jQuery 網誌旁側點標題摺疊收合內容"這篇文章來修改。
首先在<head></head>中插入以下程式碼，若先前已經呼叫過ajax的jquery程式碼這裡就不需要呼叫了。
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
    $(function(){
        $("div#Profile1 h2:first").click(function(){
            $("div#Profile1 div:first").toggle("middle");
        });
        /*$("div#Profile2  h2:first").click(function(){
            $("div#Profile2  div:first").toggle("middle");
        });
        $("div#Profile3  h2:first").click(function(){
            $("div#Profile3  div:first").toggle("middle");*/
        });
    });
//]]>
</script>
找到sidebar的id定義。
Ex.
<b:widget id='Profile2' locked='false' title='PROFILE' type='Profile'/>
<b:widget id='BlogArchive2' locked='false' title='Calendar' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='HTML5' locked='false' title='Recent Posts' type='HTML'/>
<b:widget id='HTML4' locked='false' title='Recent Comments' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='HTML2' locked='false' title='Counter' type='HTML'/>
直接把程式碼紅字部分改成小裝置的ID就可以了。
如果要預設摺疊，先展開小裝置範本，並找到要收摺小裝置的程式碼…
在'widget-content'之後加上id='toggle' style='display:none;'
Ex.
<b:widget id='HTML5' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><span class='sign-icon' style='float:right;margin-right:20px;cursor:hand;'/><data:title/></h2> 
  </b:if>
  <div class='widget-content' id='toggle' style='display:none;'>
然後儲存就ok了。

Blogger加密


Google Blogger由於還是Beta版，功能非常陽春，連個文章加密功能都沒有，目前本站使用的加密器為加密文章
首先先把以下程式碼放到<head></head>中間
<script src="http://m017.googlecode.com/files/encrypt-blog-posts.js" type="text/javascript"></script>
將加密文章copy到加密網站，得到密文，再把密文放置在文章中即可，記得文章要備份，密碼要牢記。
Ex.密碼1111
wpchMTMhfCEzOSEhMzkhASEwISEwIS3nrKDkvaw=
Script&CCS方塊


純粹方便閱讀加的
codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}
將程式碼加在
<div class="codeview">
code…
</div>

相關文章

加入相關文章方法

隨機文章(與版面不合所以取消)
參考隨機文章
在</head>上方加入
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>


打開小裝置，並在隨機文章後加上以下程式碼


 


<div id="div_Get_ranTitles"></div>




<script>




jQuery(function(){jQuery.getScript("http://blogger-random-post-hack.googlecode.com/files/randomPost_2.0.pack.js",function(){MakeRanPostList('qq0526',5,12,'更新列表','試試手氣','','');});});
</script>



一共出現七個參數，必須按照順序填入，「''」符號不可省略！以下是說明。


  1. 「'qq0526'」，Blog的帳號，如網址http://qq0526.blogspot.com/，就是qq0526。
  2. 「5」，顯示 N 篇隨機文章，預設 5。
  3. 「12」，最新的 N 篇文章不列入隨機範圍，預設 12。
  4. 「'更新列表'」，第一個按鈕中出現的文字，按下後會更新隨機文章列表。


    若設為「''」，則會關閉此功能，此按鈕將不會出現。
  5. 「'試試手氣'」，第二個按鈕中出現的文字，按下後會隨機前往 Blog 中的一篇文章。


    若設為「''」，則會關閉此功能，此按鈕將不會出現。
  6. 「''」，「''」內可填入一個「標籤名稱（tag）」，如「我在日本的生活」。


    設定後，列表內只會出現含有「某個標籤（tag）」的文章，目前只能設一個。


    預設為「''」，代表所有文章皆納入隨機範圍內。
  7. 「''」，「''」內可填入一個「標籤名稱（tag）」，如「公告事項」。


    設定後，列表內不會出現含有「某個標籤（tag）」的文章，目前只能設一個。


    預設為「''」，代表所有文章皆納入隨機範圍內。


加入推文按鈕


在blogger 加入PLURK, Twitter, Facebook, funP, 黑米的推文按鈕


在相關文章後放入



<!-- 推文到PLURK -->

<a expr:href='&quot;http://www.plurk.com/?qualifier=shares&amp;status=&quot; + data:post.url + &quot; &quot; + &quot;(&quot; + data:post.title + &quot;)&quot;' target='_blank' title='推文至plurk'><img src='http://sites.google.com/site/siteimgs/blog/plurk_share.png'/></a>


<!-- 推文到 facebook -->


<script type='text/javascript'>


function fbs_click()


{u=&#39;<data:post.url/>&#39;;t=&#39;<data:post.title/>&#39;;window.open(&#39;http://www.facebook.com/sharer.php?u=&#39;+encodeURIComponent(u)+&#39;&amp;t=&#39;+encodeURIComponent(t),&#39;sharer&#39;,&#39;toolbar=0,status=0,width=626,height=436&#39;);return false;}


</script>


<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' onclick='return fbs_click()' target='_blank'> <img src='http://sites.google.com/site/siteimgs/blog/facebook_share.png' title='推到facebook'/></a>


<!--推文到 Twitter -->


<a expr:href='&quot;http://twitter.com/?qualifier=shares&amp;status=&quot; + data:post.url + &quot; &quot; + &quot;(&quot; + data:post.title + &quot;)&quot;' target='_blank' title='推到Twitter'><img src='http://sites.google.com/site/siteimgs/blog/twitter_share.png'/></a>


<!--推文到黑米-->


<a expr:href='&quot;http://www.hemidemi.com/user_bookmark/new?title=&quot;


+ data:post.title + &quot;&amp;url=&quot; + data:post.url + &quot; &quot;' target='_blank' title='推到黑米'><img src='http://sites.google.com/site/siteimgs/blog/hemidemi_share.png'/></a>


<!--推文到funP-->


<a expr:href='&quot;http://funp.com/pages/submit/index.php?title=&quot;


+ data:post.title + &quot;&amp;url=&quot; + data:post.url + &quot; &quot;' target='_blank' title='funP'><img src='http://sites.google.com/site/siteimgs/blog/funp_share.png'/></a>




版面順序可自行調整

Posted on 10:37
Keep Reading...

2010年3月11日 星期四

新版面blog V3.0

大約一年多前左右，因為某些因素與不爽把我的部落格搬離無名小站，來到blogger這個系統，blogger真的是個很陽春很陽春的界面，什麼事情都得要自己來，版面自己調整，程式碼自己寫(當然可以用抓的)，基本上java script我可是一點也不會寫，連網路放置程式碼的空間都沒有，但持著DIY的精神，我修改了一些版面並且調整了一下，完成了我搬家之後部落格版面，主題為-"My life,My Opinion…"(V2 beta)，用了幾個月後，終於找到一個令我滿意的templete-"Chucky"，並花了不少時間做調整。

基本上這個版面最重要的script就是"縮圖文"，精選文章和文章區塊都是用這方法所寫成，讓我的部落格變得很好閱讀，也就是原先我打算用在V2 beta的預定版面。

image

.....
Posted on 20:00
Keep Reading...

2009年7月8日 星期三

新居落成?!

搬家了，搬來google這個新地方...

blogger有優點也有缺點，優點就是自由度超大，缺點就是什麼程式都得要自己寫。也因為這樣，蓋了很久才弄成這樣而已，文章也只搬了一些過來。

無名小站在6/1終止了網誌備份的服務，好險我在去年12月就有備份過，影響不大，但是搬家還是得要連圖帶過來，有空我會慢慢把照片放回去，就這樣囉.....
Posted on 21:23
Keep Reading...