回味美好的旅行─豐富旅憶,燦爛微笑
    

banner.jpg
Banner

  最新為部落格安裝上新功能,是每按一次「重新整理(F5」,或點入新的頁面,Blog上的Banner會隨機播放不同的影像,增添像切換電視頻道的新奇感,對我而言是不用艱難的取捨只有一張的限制。

  在網路閒逛時見到好幾個部落格有這樣有趣的功能,進而產生來試試看的念頭,靠著網路豐富的教學文,只需向股狗大神(Google)進拜會搜尋到許多相關文章。(關鍵字可打:隨機、banner

  參考各家學說後,奇緣一試不成,二試差一點救不回來,不斷在pixnet後台的CSS語法中嘗試,誤打誤撞完成這一度想放棄的功能。

  提供Banner隨機播放教學:
  (適用於pixnet平台,或可使用JAVA的部落格)

1.部落格後台,樣式管理打開「編輯CSS原始碼」。

2.#banner { background:url('http://…….jpg')}改為
{ background:#none;}或直接去掉此行。

3.製作好放於Banner的照片,建議尺寸一致。

4.照片上傳至網路空間或相簿,並將圖片網址放進以下語法中。
banner[0~5]是設定預播放的張數,例如banner[5]代表放入六張,可自行增減)

*****語法*****
<script type="text/javascript">
var banner= new Array()
banner[0]="
圖片網址"
banner[1]="
圖片網址"
banner[2]="
圖片網址"
banner[3]="
圖片網址"
banner[4]="
圖片網址"
banner[5]="
圖片網址"
var random=Math.floor(banner.length*Math.random());
document.write("<style>");
document.write("#banner  {");
document.write(' background:url("' + banner[random] + '") no-repeat center;');
document.write(" }");
document.write("</style>");
</script>

*****語法*****

5.複製語法放入後台任一個自訂欄位,或是「部落格描述」、「公佈欄」皆可,最後檢視成果。(奇緣是放在「部落格描述」中)

(ps.)通常第二步驟完成即可進入下個步驟,但奇緣測試的發現, Banner可能有移位與僅出現一小部分的現象,需在#banner#header直接設定好符合自己banner的高度(height)與寬度(width),並依原本樣式的CSS做微調。
例如:
#banner{height:000px; width:000px;}
#header{height:000px; width:000px;}

【系列閱讀】
2009-08-17 [Blog]Banner。旅行間的精彩

【參考文章】
讓心情跟隨夢想起飛─分享│banner隨機更新
地下電台─隨機BANNER教學
我在我家222號─[教學]部落格的隨機banner語法
Sandor
的攝影生活─[站務] Blog banner 隨機更新功能!!

 

創作者介紹
創作者 奇緣 的頭像
奇緣

奇緣童話。旅行誌

奇緣 發表在 痞客邦 留言(13) 人氣()


留言列表 (13)

發表留言
  • 小熊
  • 很棒呢!:D
    這樣就可以放上許多奇緣喜歡的照片嚕!:)
  • 這樣部落格可以久久再換一次新裝,
    是不錯的偷懶秘方:P

    奇緣 於 2009/08/24 15:27 回覆

  • 悄悄話
  • puddings274
  • 真不錯丫!!小布也想試
    只是現階段我連一張可以放上當banner都沒有
  • 哈哈~小布多出門旅行幾趟就會有放不完的照片,
    不知道最新放在banner的天使機成相如何,
    奇緣很期待:D

    奇緣 於 2009/08/24 21:28 回覆

  • xz056865
  • 謝謝奇緣分享~我想試看看
  • 不客氣,祝福一試成功:)

    奇緣 於 2009/08/24 21:30 回覆

  • 孟
  • 謝謝分享!
    很不錯的功能說

    可以再附帶的請教你:
    抬頭那張照片的長寬高尺寸我應該如何去調整?
    上回搞了一整天就只搞出我部落格上方那一小塊『牛頭牌』
    跟我預期的『壯闊』有一大段落差呢 >///<!
    懇請奇緣老師指點一二
    咚、咚、咚....(磕頭聲)
  • Dear孟:
    被你稱老師實在不敢當>///<
    以我微薄的功力觀察,可以嘗試做以下調整:
    方法1.牛頭的照片尺寸需要再縮小,才不會被裁掉。
    方法2.在部落格後台換一個樣式,選擇banner(上方圖示)範圍大者,便可替換大張的照片。
    方法3.調整CSS語法,找到#banner開頭,設定{height:000px; width:000px;}
    (height代表高度,依照片高度設定,width寬度也是相同)
    提供意見,希望能有所幫助:P
    ps.我看到傳說中的小喇嘛了,這種照片只有你抓得到XD

    奇緣 於 2009/08/24 21:41 回覆

  • puddings274
  • 其實。我自己愛龜毛。所以挑不出什麼好的
    另外,那台白天使不是我的,我的是藍精靈
    雖然是一樣的,不過成相要等幾個月了吧~
  • 哈哈~小布這是「嚴選」的專業態度:D

    奇緣之前在誠品有看到白天使、藍精靈與黑惡魔,
    一直窩在試用機前愛不釋手,又看到照出來的奇妙色彩,
    慾望與理性交戰許久,
    最後雖然沒有敗下手,
    不過有在留心相關的資訊,
    說不定,過不久也會沉淪到底片機的世界(遠目)。

    奇緣 於 2009/08/25 09:16 回覆

  • 孟
  • Dear 奇緣:

    妳的版子是自個兒設計的嗎?
    乾乾淨淨不譁眾取寵的感覺
    很舒服呢!

    之前上過網頁設計課程
    影像編輯部分還好
    但看到那些語法就覺得腦門發脹
    很難下嚥成為自己的東西
    看來
    不再狠下決心『深造』是不行了
    謝謝妳悉心的指導
    我先搞搞看
    也許會再來吵妳幾次哦!
    想想我的名字早就嵌進『煩』這個字了
    所以我會真的很煩哦!
    忍著點....
    呵呵

  • Dear孟:
    我現在使用的版面是套用後台的樣式,
    自己再經過加工(更換圖片、版面調寬已放入照片、背景色系有改......),
    慢慢修,多多試,做中學,
    會調出自己滿意的版面,
    畢竟是天天看著部落格,
    總不能先自我厭惡:P

    網路上有不少CSS的教學文章,可以來協助,
    如果孟有需要,奇緣可以寄目前所使用的樣式CSS給妳參考:)

    奇緣 於 2009/09/02 09:31 回覆

  • 孟
  • Dear 奇緣:

    我相信你是個相當有耐心的人
    因為CSS語法真的要耗去許多的精神^^
    如果方便
    就麻煩妳寄給我妳目前版型的語法讓我研究研究
    謝謝
    愛妳哦!
    呵呵

  • Dear 孟:
    我整理一下相關的資料、加上一些說明,再寄給你:D

    奇緣 於 2009/09/04 23:36 回覆

  • chai258611
  • 謝謝你的教學
    試了幾天,終於成功了!
    超開心的...謝謝你.....^^
  • 不客氣~
    這是一款簡單又有趣的語法:)

    奇緣 於 2010/10/20 05:03 回覆

  • James&amp;Sarah
  • 原來如此!
    我之前就一直很好奇怎麼會有人的網誌上面的照片可以這樣換來換去的
    實在是太酷了!

    等我摸索好上面的照片要怎麼換到適當大小之後就來試試看!
  • Dear James&Sarah:
    我也是先從好奇的發現開始,
    才慢慢摸索出自己也能轉換照片,
    這樣就能讓每一次的點閱都是不同的驚喜:D

    奇緣 於 2012/03/26 21:17 回覆

  • James&amp;Sarah
  • ps.我有留問題在留言板問你喔
    然後剛剛一看之下發現有好多學生要借你的照片用喔
    看來你的照片真的很迷人呢!
  • Dear James&Sarah:
    我正好在回覆你的留言>////<
    提供小小的建議,不知道能不能幫上忙。

    PS.因為現在正值推甄的熱門時期,
    真的好多學生跑來找照片,
    想以前的報告都是文字與黑白:P
    現在講求視覺化~

    奇緣 於 2012/03/26 22:32 回覆

  • 熊愛講
  • 謝謝你的分享喔♥
    還挺好玩的說~雖然我研究了兩天><呵
  • Dear 熊愛講 :)
    不客氣~
    研究過一次,之後就可以玩不同的花樣:D

    奇緣 於 2012/12/18 23:29 回覆

  • Kiwi (原黃小晴)
  • 謝謝你的分享
    我想問一下,因為我的輪播已經放很久,我一直想要拿掉,卻不知道自己到底怎麼裝上去....不知道大師是否可以幫我看看~感謝你