Banner-Step1.psd.jpg

 

眼尖的格友,應該已經發現懶骨頭家Banner圖片每次點選都不一樣囉!

是的,我把我家的Banner圖片變的更彈性了,這樣我自己看了也很開心,就算偷懶沒發文,也可以讓自己家常常有變化(這算是藉口嗎?)

 

今天就來跟大家說一下這是怎麼辦到的!相信一個星期後,常來格友們的網誌都有新氣象囉! 

 

步驟一:

首先要搞清楚,你的所使用的模板預設的圖片有多大,再依照這個大小挑選照片,把照片切割到一樣的大小,當然你也可以增加設計,比方說地圖、旗幟等等(可參考另一篇文章 圖片簽名章

 


 Banner-Step2.psd.jpg

 

步驟二:

找到你網誌的 CSS 原始碼,簡單的訣竅是程式碼中有圖片網址的那一段就是了,圖片是以痞客幫的管理後台為例,通常都有註記,所以很好找喔!找到的程式碼如下圖:黃色背景的部分就是預設的Banner圖網址,可直接複製到IE的address按enter,看一下是不是就是你現在的Banner圖片,確定之後,把標題(本例子為header,也有可能是Banner等其他標題)抄下來,然後就不要管他了!

Banner-Step3.psd.jpg

 

步驟三:

接下來,依照圖示到你的側邊欄位選單中,任選一個自訂的欄位標題按"設定"

 

Banner-Step4.psd.jpg

4/29 更新....
多虧馬桶碰到問題,我才發現我打錯了,底下有一段語法

var randompic = Math.floor(7*Math.randompic());

應該是

var randompic = Math.floor(7*Math.random());

才對,不好意思,我一時手快多打了,有問題的再跟我說喔!

Banner-Step5.psd.jpg

 

要注意程式碼中紅色標記的部分,header一定要與模板預設的標題欄位相同才有效喔!另外,由於程式是隨機抓圖片,大家都知道所謂隨機並不會很平均的抓圖,如果張數較多,通常第一張及最後一張出現的機率會小一點喔!

 

另外,也請注意一下紅色部分的不同:document.write(' background-image:url(" ' + banner[random] + ' ") ;');

這裡 下載語法 <<靠!無名把文章中的 Javascript 語法強制刪除,真機車!請大家打打字吧!>>

 

Banner-Step6.psd.jpg

 

把上面程式碼加在自訂區塊內容的最後面,再按"送出"
 

 

Banner-Step7.psd.jpg

 

最後記得儲存版面,這樣就大功告成,你的網誌從今天起就不一樣啦!
其實這個原理是用 javascript 改寫一段新的 Banner 程式碼,所以各位不用動到原本的設定,新增一段語法就可以囉!

 

以下就是各位可能在懶骨頭家看到的Banner圖,你看過幾張了呢?

 

bannerlist.psd.jpg

 

英倫懶骨 發表在 痞客邦 PIXNET 留言(16) 人氣()


留言列表 (16)

發表留言
  • 天仙
  • 有趣有趣~~
    有空也來改改看~
  • minami926
  • 這跟換新衣的道理是相同的
    給人容光煥發感啊
    要來試試
  • angellayla
  • 好,我改天來試試
    得先找些漂亮的圖~
  • Yuhi
  • 很想玩...不知道WP適不適用
  • birdshouse
  • 我太懶了。一張就好...XD
  • xemon
  • 我的也是耶
    只是放語法的部份及地方不同
    但重點都是換banner
    真的很有趣^^

    莯/moo
  • bravetoto
  • 懶骨頭的"裝飾你的網誌"類別總是十分實用呢!

    偷了! 有空時馬桶也來試試
  • 悄悄話
  • 太雅小妞妞
  • 懶骨頭,好久不見!
    問個白目問題,痞客邦banner的width和high
    是?*?呢
  • umechen
  • 我有嘗試懶骨頭所述的方法, 成功!
    只是被幾個朋友抗議, 因為沒有注意BLOG名字和標題的字體顏色, 有的背景吃掉, 害他們以為上錯網站, 所以暫時又改回來了, 有空再試一次
  • 悄悄話
  • 政
  • 我想請問一下,這無名可以用嗎?
    ((我用了好像都沒效果...囧
  • 無名不能使用java script語法
    所以.....沒辦法囉~~

    英倫懶骨 於 2009/05/23 12:57 回覆

  • 政
  • 喔...
    雖然不能用,不過還是謝謝!
  • gkkangel
  • 請問圖片要放哪=.=
  • 放在自定的側邊欄位內就可以囉!

    英倫懶骨 於 2009/07/01 08:19 回覆

  • 悄悄話