"訂閱部落格"按鈕圖片~~換新裝囉!

2013121812:51

"訂閱部落格"按鈕圖片~~換新裝囉!

分享

 

 

有看到我格子裡右上角的訂閱部落格,跟您的不一樣嗎?

本文引用自 Distort Life 感謝這位大大的大方分享。

更改"訂閱部落格"按鈕圖片,在自訂樣式(『管理部落格』-->『面板設定』-->『自訂樣式』)

 

 


 

作法:將下列語法複製,貼在CSS最底端就OK了。

這個語法一樣很簡單,只要修改一下圖片網址圖片大小(寬高),其他不用管它,這樣就能把原設單調的"訂閱部落格"按鈕圖片,換新裝了。

 

 


 

語法範例:

 

 

/*btnsbsrb訂閱部落格圖示*/

div#btnsbsrb a{display:block;width:110px;height:35px;overflow:hidden;background:url(http://homelf.kimo.com.tw/zz14723/subscribe000-1.gif) no-repeat;margin:0;}

div#btnsbsrb_nologin a{display:block;width:110px;height:35px;overflow:hidden;background:url(http://homelf.kimo.com.tw/zz14723/subscribe000-1.gif) no-repeat;margin:0;}

 

 


 

CSS語法說明與修改重點:

基本上這兩個CSS內容是一模一樣的,只是ID不同,所以下方修改重點所提到要修改的地方,在兩個CSS語法中都改成一樣即可。

 

  • 修改重點一:width:110px;height:31px; ←(圖片寬高大小)

    修改寬度高度為你想要放置圖片的寬度(width)與高度(height)。
    例如:你想要放的圖寬為110px高31px,則將語法修正為:width:110px;height:31px;

  • 修改重點二:background:url(圖片網址) no-repeat;

    修改圖片連結路徑,將圖片網址,改成你圖片的連結位置。
    例如:你想要放置的圖片連結為http://homelf.kimo.com.tw/zz14723/subscribe000-1.gif,則將語法修正為:


    background:url(http://homelf.kimo.com.tw/zz14723/subscribe000-1.gif) no-repeat;

     


     

    就是這麼簡單,圖片大小沒有限制,不過原設的大小也差不多是在110*30之間 ,若想要貼大圖也無妨,只是會拉開了名稱標題跟內容文章間的距離。

    就是說圖片越大,部落格描述的框框也會跟著大,所以圖片高度最好設在35px以內,而寬度則隨便囉。

    大家有空,可以玩玩,很有趣的。祝大家玩的愉快!

    對了,若找不到圖片,我做了幾個圖示,可供參考,若喜歡就請自行copy。(選圖按右鍵,點進內容,即可看到圖片網址及寬高了。)

     

         

        

 

 ↑以上動畫圖示是用下面的G5軟體做的,就把這個小動畫當成logo來做吧!

 

 


動畫製作軟體:

 

 點選下載↓

   Ulead GIF Animator 5 ←繁體中文化註冊版

   GIF Animator  ←影音教學網

   製作LOGO - 314-素材教學迴廊 ←利用G5 製作logo

 

※ 因為奇摩不支援GIF檔,所以圖檔做好要先上傳到網路空間。

如:雅虎香港網頁空間申請教學或其他的免費空間→空間多功網


 

※ 貼圖語法:< img src="圖片網址" >