[Blogger Addon and Fix] PremiumBloggerTemplates 版型縮圖功能小修正

image

近期我使用了很多從 PremiumBloggerTemplates 網站分享的 Blogger 版型,該網站分享的版型有幾個特點:輪播的特色文章、首頁文章縮圖、DropDown menu,其中首頁文章縮圖原來的程式是設定固定的縮圖大小,除了長形的圖比例會改變以外,有些時候文章裡的圖還比設定的縮圖大小還小時,就會變成放大模糊的圖,最近用 jQuery 加了一段小程式在底下去做判斷,當文章的圖比較小時,那就維持原來的圖的大小顯示。

做法:

首先,PBTemplates 用來產生首頁文章版面的程式:

這裡改的地方,除了只依照設定的寬去改變縮圖的大小 (拿掉了 height=”’+img_thumb_height+’px”) 以外,粉紅字的部份是我加進去的,用來給我寫的小程式處理用的

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 id="tnimg" src="'+img[0].src+'" width="'+img_thumb_width+'px"/></span>';
        summ = summary_img;
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
}

我寫的用來修正小圖被放大的小程式:

接在上面那一段之後會有一個 </script> 的後面,貼上底下的語法

<script>
//<![CDATA[
/* for small pics fix by jimmyyen using jQuery */
jQuery(document).ready(function() {
  jQuery("img[id^=tnimg]").each(function() {
         var timg = jQuery(this);
         var newImage = new Image();
         newImage.src = timg.attr("src");
          if (newImage.width && newImage.width < img_thumb_width) {
                timg.attr('width', newImage.width);
          }
   });
});
//]]>
</script>

提供給同樣有使用 PBTemplates 版型的朋友參考。最後我要感謝 PBTemplates 提供許多優秀的版型給 Blogger 的使用者。

留言

  1. 您好~想請教個問題
    我使用PBTemplates的版型時
    中文的顯示(文章內文、其它小工具就OK)
    不是很好看
    例:http://barkleyc.blogspot.com/2010/04/blogger.html
    (這不是我的,我發現別人也有這個問題)

    我看你的文章內文字型都很漂亮
    請問您如何解決呢?

    回覆刪除
  2. hi LOUIS,
    用 CSS 去調整字體,英文字體的部份我是用 Google Web Font,中文用微軟正黑體,標題有加上陰影

    如我的文章標題 CSS:
    h2 {font-family:'Droid Sans',sans-serif,'Microsoft JhengHei'text-shadow: 0px 0px 1px #A9A9A9;}

    使用 Google WebFont 可以參考我寫的這篇:http://jimmyyen.blogspot.com/2010/05/free-web-fonts-service-web-fonts.html

    回覆刪除
  3. 文章內文的CSS:
    .post-body{font-family:'Ubuntu',sans-serif,'Microsoft JhengHei'}

    字體大小我都有調整過,以舒適閱讀為原則。

    回覆刪除

張貼留言

回應不用錢,請多多益善!懶得寫字按個讚也是相當感謝!

這個網誌中的熱門文章

[古典相機] 巧緻實用的簡單精神.Nikon FE.1978

[中判相機] 開始 120 吧.Pentax 6x7.1969

在 Excel 裡轉換 Unixtime 格式

[古典相機] M42 機皇.快門最速機身.Fujica ST801.1973

[古典相機] 世界第一台 TTL 分區測光 SLR,Minolta SRT-101.1966