為Neogadget加上標籤雲與簡單的圓角(Blogger Template)

經過兩天的時間,我算是把網站的第一次CSS改版改好了~

我並不懂CSS,也不懂Blogger的樣板怎麼做~所以邊弄邊摸索~

其實大致上整個樣版是從阿倫(真是多倫~)Blogger的新選擇-Neo template 裡面提到的Neogadget所修改而來~

這個樣版的特色就是它運用AJAX來存取文章~所以感覺很順暢~

而我將這個基本版型下載後又參考

Setup and configuration for New Blogger Tag Cloud / Label

加上標籤雲的部分,讓我一堆標籤不會看起來很怪~

然後順便試試把Google產生的圓角套用到這個樣板中~參考

挖掘Google隐藏的超强圆角效果 by. Ken Wong

(雖然套用的方法是自己想出來的~可能不是正規的CSS方式)

以下是我的動作紀錄

直接下載

基本上我只有小做修改~如果你懶得看下面的步驟~也可以直接下載最後做完的結果

套用Neogadget

  • 備份目前的樣板與相關設定
  • 至Neogadget的安裝方法去下載中文模版中文Neo.js
  • 將中文Neo.js(neochinese.js)以記事本另存為UTF-8後(因為我不想用Big5),丟到網路空間去(我是丟到Google page creater)
  • 然後到Blogger的管理畫面,上傳套用中文模版,藉由修改範本的方式修改這個範本(要記得勾選【 展開小裝置範本】,不然會找不到一些Tag)
  • 找到原本的樣板中的【neochinese.js】網址,改為自己上傳的網址,並把語係改為utf-8,如
    <script charset="utf-8" language="javascript" src="http://自己的網址/myneochinese.js"></script>

標籤雲的套用

  • 找到【]]></b:skin>】,將下面的程式加到【]]></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>】之前加入下面這段Script
    <script type='text/javascript'>
    // Label Cloud User Variables
    var cloudMin = 1;
    var maxFontSize = 20;
    var maxColor = [0,0,255];
    var minFontSize = 10;
    var minColor = [0,0,0];
    var lcShowCount = false;
    </script>
  • 然後用下面這段Code取代原本的【<b:widget id='Label1' locked='false' title='Labels' 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&#39;t change anything past this point -----------------
    // Cloud function s() ripped from del.icio.us
    function s(a,b,i,x){
         if(a&gt;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 c=[];
    var labelCount = new Array(); 
    var ts = new Object;
    <b:loop values='data:labels' var='label'>
    var theName = &quot;<data:label.name/>&quot;;
    ts[theName] = <data:label.count/>;
    </b:loop>
    
    for (t in ts){
        if (!labelCount[ts[t]]){
              labelCount[ts[t]] = new Array(ts[t])
              }
           }
    var ta=cloudMin-1;
    tz = labelCount.length - cloudMin;
    lc2 = document.getElementById(&#39;labelCloud');
    ul = document.createElement('ul');
    ul.className = &#39;label-cloud';
    for(var t in ts){
       if(ts[t] &lt; cloudMin){
          continue;
          }
       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(&#39;li');
            li.style.fontSize = fs+&#39;px';
            li.style.lineHeight = &#39;1';
            a = document.createElement('a');
            a.title = ts[t]+&#39; Posts in &#39;+t;
            a.style.color = &#39;rgb('+c[0]+','+c[1]+','+c[2]+')';
            a.href = 'javascript:fetchPosts(&quot;'+encodeURIComponent(t)+'")';
            if (lcShowCount){
                span = document.createElement(&#39;span&#39;);
                span.innerHTML = &#39;('+ts[t]+&#39;) ';
                span.className = &#39;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(&#39; ');
            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>
  • 這樣就可以把標籤雲套用在這個AJAX的樣版囉~

套用圓角

  • 將header的色彩稍微調整一下
  • 在header的背景色變數【headerBgColor】下面加上兩個顏色變數
     <Variable name="headerDescBgColor" description="Page Header Desc Background Color"
              type="color" default="#336699" value="#5E0000">
    <Variable name="headerBottomBgColor" description="Page Header Bottom Background Color"
              type="color" default="#336699" value="#660000">
  • 將Header的Style定義修改如下
    /* Header
    ----------------------------------------------- */
    #header-wrapper {
     margin:0;
     padding: 0;
     background-color: $headerCornersColor;
     text-align: right;
    }
    
    
    #header {
     width: 890px;
     margin: 0 auto;
     background-color:$headerBgColor;
     color: $headerTextColor;
     padding: 0;
     font: $headerFont;
    }
    
    h1.title {
     padding-top: 20px;
     margin: 0 10px .1em;
     line-height: 1.2em;
     font-size: 100%;
    }
    
    h1.title a {
     color: $headerTextColor;
     text-decoration: none;
    }
    
    #header .description {
     background-color:$headerDescBgColor;
     display: block;
     margin: 0 0px;
     padding: 0 0 5px;
     line-height: 1.4em;
     font-size: 50%;
    }
    
    
    b.header-bottom {
     display: block;
     padding: 0;
     margin: 0 auto;
     height: 20px;
     overflow: hidden;
     background: $headerBottomBgColor url("http://google.com/groups/roundedcorners?c=660000&bc=e6e6e6&w=20&h=20&a=bl") no-repeat left top;
     width: 890px;
     text-align:right;
    }
    span.header-bottomright {
     display: block;
     height: 20px;
     background: url("http://google.com/groups/roundedcorners?c=660000&bc=e6e6e6&w=20&h=20&a=br") no-repeat right top;
     width: 890px;
    }
  • 這樣標題就有圓腳了~

結論

上面是我覺得大家可能會需要的~

另外就是加上一些功能~我自己還有用到~我想可能不是人人都需要每個功能~

而且下面這些作者也說明的很清楚了~有需要的人請自行參考囉~

雖然這次大至上碰過Blogger Template~

不過果然CSS沒人帶入門~

還真是難懂的東西~到現在我還一頭霧水~

10 意見:

阿倫 提到...

哇。你好會改。。。超強的
我都沒想到可以存成UTF-8

倫倫3號 提到...

to 阿倫
是嗎~你才厲害吧~
我對樣版其實到現在還是不怎麼懂~
都是邊試邊改~
所以花了不少時間在亂玩樣版上~
有機會要惡補依下CSS與AJAX

阿倫 提到...

我完全是ajax的門外漢_-_-

KeuviN 提到...

改的很不錯∼不過我還是建議你把文章圖片的框線刪除,不然你外部連結的小圖示都會有一個框這樣怪怪的....
會有圖片框線問題就在CSS中的Post img有個border把他刪掉就好了...只是建議而已∼^^"

倫倫3號 提到...

to Keuvin
我那時改版沒改這部份~
既然你提起我就來改一下~
把圖片改文字這樣應該好些~

Davin 提到...
作者已經移除這則留言。
Davin 提到...

請問一下喔!
如果我要更改最新文章的數量,由目前的6筆改成10筆,請問我要改js的哪一部份?煩請賜教!

Davin 提到...

倫倫兄:
最新文章筆數的問題我解決了!

原上草 提到...

你的侧边栏的最新回响是怎么做成的啊,可以告诉我吗

倫倫3號 提到...

to 原上草
我用Blogger的【資訊提供】網頁元素,訂閱Blogger的最新回應RSS呀。
RSS的位址就是
http://allen080.blogspot.com/feeds/comments/default
把前面改成你的Blogger位址就可以了

這裡是關於技術的手札~

也歡迎大家到

倫與貓的足跡



到噗浪來

關心一下我唷!
by 倫
 
Copyright 2009 倫倫3號Beta-Log All rights reserved.
Blogger Templates created by Deluxe Templates
Wordpress Theme by EZwpthemes