|
每次造訪或更新你的Blog網頁時,隨機切換不同佈景樣式(theme),最適合不喜歡一成不變的網友,也讓造訪你Blog的網友有不同的驚喜!利用簡單的JavaScript程式,以亂數決定所要使用的佈景樣式,目前內定切換的是樂多Blog所提供的20種佈景(適用於使用樂多網站的Blog).
把下列程式碼貼到自由欄位或文章裡面,貼到自由欄位時,不必單獨做一個欄位,可以附在其他自由欄位內容的後面,但樂多的自由欄位只在Blog的首頁出現,所以若附在自由欄位後面就只有首頁有這個效果,若要讓單篇文章也有這個效果,就要貼在文章裡面,最好貼在文章的最後面,避免多篇文章列表時,多篇文章同時產生這個效果,可能會發生不可預期的結果?!
網頁一開始會先載入你預設的樣式,然後才切換到隨機更換的樣式,若要採用這個小技巧,建議預設的樣式儘量選擇比較簡單一點的.
除了可以隨機切換之外,也可以在Blog的自由欄位或文章裡顯示一個可以選擇網頁樣式的下拉式選單,這樣就可以由造訪你Blog的網友自己決定網頁風格,由於之前有看到網友討論樣式的字大小的問題,若能由網友自行依據閱讀習慣來改變字的大小,各取所需,相信是比較好的解決方案.
測試切換本頁樣式(選項內容為osc適用樣式)
應用1:隨機切換網頁樣式
程式碼:
<script src="http://www.ezeshop.com.tw/sidebar/change-blog-style.php" language="JavaScript"
type="text/javascript">
</script>
<script type="text/javascript">
RandomStyle();
</script>
應用2:下拉選單切換網頁樣式
程式碼:
<script src="http://www.ezeshop.com.tw/sidebar/change-blog-style.php" language="JavaScript"
type="text/javascript">
</script>
<script type="text/javascript">
ShowStyleMenu();
</script>
紅色的部分與前面設定隨機顯示網頁樣式的程式碼相同,若是同時要隨機切換也要顯示下拉選單的話,要記得紅色部分不能重複,只要寫一次即可.
說明:增加你自己的網頁樣式
我程式中附的網頁樣式是引用樂多所提供的樣式,可能其他的Blog網站不適用,你可以增加你自己設計的樣式,或適用其他Blog網站的網頁樣式,方法如下面的程式碼例子:
程式碼:
<script type="text/javascript">
s[20]="chinamoon;http://blog.yam.com/theme/chinamoon/site.css";
s[21]="聖誕快樂;http://blog.yam.com/theme/merryxmas/site.css";
ShowStyleMenu();
</script>
在叫用ShowStyleMenu()函數之前,先設定樣式陣列的元素,就可以增加新的樣式到下拉式選單中提供選擇.
上例中增加了2個新的樣式選擇,s[20]是指編號20的s陣列元素,而設定的字串裡面,前面是選項的名稱,後面是該選項樣式的網址,要注意中間以分號隔開.所以s[20]增加了chinamoon選項,其樣式網址為http://blog.yam.com/theme/chinamoon/site.css
選項名稱也可以使用中文,如同s[21]所示.
原來所提供的樂多網頁樣式,也可以把它置換或取消,s陣列最前面的20個元素就是預設的樂多網頁樣式,要替換時要注意陣列編號是從0開始,所以前20個元素是 s[0] 到 s[19],你可以直接設定這幾個元素的新字串值,或給空的字串,那麼該陣列元素就不會顯示為選項.
Blog實際應用範例
|
