2005年08月14日
隨機切換樂多Blog網頁樣式
測試切換網頁樣式:
每次造訪或更新你的Blog網頁時,隨機切換不同佈景樣式(theme),最適合不喜歡一成不變的網友,也讓造訪你Blog的網友有不同的驚喜!.利用簡單的JavaScript程式,以亂數決定所要使用的佈景樣式,目前切換的是樂多Blog所提供的20種佈景.
把下列程式碼貼到自由欄位或文章裡面,貼到自由欄位時,不必單獨做一個欄位,可以附在其他自由欄位內容的後面,但樂多的自由欄位只在Blog的首頁出現,所以若附在自由欄位後面就只有首頁有這個效果,若要讓單篇文章也有這個效果,就要貼在文章裡面,最好貼在文章的最後面,避免多篇文章列表時,多篇文章同時產生這個效果,可能會發生不可預期的結果?!
網頁一開始會先載入你預設的樣式,然後才切換到隨機更換的樣式,若要採用這個小技巧,建議預設的樣式儘量選擇比較簡單一點的.
隨機切換的程式碼:
2005/08/26
修改了一下程式,除了可以隨機切換之外,也可以在Blog的自由欄位或文章裡顯示一個可以選擇網頁樣式的下拉式選單,這樣就可以由造訪你Blog的網友自己決定網頁風格,由於之前有看到網友討論樣式的字大小的問題,若能由網友自行依據閱讀習慣來改變字的大小,各取所需,相信是比較好的解決方案.
下拉選單切換的程式碼:
紅色的部分與前面設定隨機顯示網頁樣式的程式碼相同,若是同時要隨機切換也要顯示下拉選單的話,要記得紅色部分不能重複,只要寫一次即可.
增加你自己的網頁樣式
我程式中附的網頁樣式是引用樂多所提供的樣式,可能其他的Blog網站不適用,你可以增加你自己設計的樣式,或適用其他Blog網站的網頁樣式,方法如下面的程式碼例子:
在叫用ShowStyleMenu()函數之前,先設定樣式陣列的元素,就可以增加新的樣式到下拉式選單中提供選擇.
上例中增加了2個新的樣式選擇,s[20]是指編號20的s陣列元素,而設定的字串裡面,前面是選項的名稱,後面是該選項樣式的網址,要注意中間以分號隔開.所以s[20]增加了chinamoon選項,其樣式網址為http://blog.roodo.com/theme/chinamoon/site.css
選項名稱也可以使用中文,如同s[21]所示.
原來所提供的樂多網頁樣式,也可以把它置換或取消,s陣列最前面的20個元素就是預設的樂多網頁樣式,要替換時要注意陣列編號是從0開始,所以前20個元素是 s[0] 到 s[19],你可以直接設定這幾個元素的新字串值,或給空的字串,那麼該陣列元素就不會顯示為選項.
每次造訪或更新你的Blog網頁時,隨機切換不同佈景樣式(theme),最適合不喜歡一成不變的網友,也讓造訪你Blog的網友有不同的驚喜!.利用簡單的JavaScript程式,以亂數決定所要使用的佈景樣式,目前切換的是樂多Blog所提供的20種佈景.
把下列程式碼貼到自由欄位或文章裡面,貼到自由欄位時,不必單獨做一個欄位,可以附在其他自由欄位內容的後面,但樂多的自由欄位只在Blog的首頁出現,所以若附在自由欄位後面就只有首頁有這個效果,若要讓單篇文章也有這個效果,就要貼在文章裡面,最好貼在文章的最後面,避免多篇文章列表時,多篇文章同時產生這個效果,可能會發生不可預期的結果?!
網頁一開始會先載入你預設的樣式,然後才切換到隨機更換的樣式,若要採用這個小技巧,建議預設的樣式儘量選擇比較簡單一點的.
隨機切換的程式碼:
<script src="http://www.ezeshop.com.tw/sidebar/change-blog-style.php" language="JavaScript"
type="text/javascript">
</script>
<script type="text/javascript">
RandomStyle();
</script>
</script>
<script type="text/javascript">
RandomStyle();
</script>
2005/08/26
修改了一下程式,除了可以隨機切換之外,也可以在Blog的自由欄位或文章裡顯示一個可以選擇網頁樣式的下拉式選單,這樣就可以由造訪你Blog的網友自己決定網頁風格,由於之前有看到網友討論樣式的字大小的問題,若能由網友自行依據閱讀習慣來改變字的大小,各取所需,相信是比較好的解決方案.
下拉選單切換的程式碼:
<script src="http://www.ezeshop.com.tw/sidebar/change-blog-style.php" language="JavaScript"
type="text/javascript">
</script>
<script type="text/javascript">
ShowStyleMenu();
</script>
</script>
<script type="text/javascript">
ShowStyleMenu();
</script>
紅色的部分與前面設定隨機顯示網頁樣式的程式碼相同,若是同時要隨機切換也要顯示下拉選單的話,要記得紅色部分不能重複,只要寫一次即可.
增加你自己的網頁樣式
我程式中附的網頁樣式是引用樂多所提供的樣式,可能其他的Blog網站不適用,你可以增加你自己設計的樣式,或適用其他Blog網站的網頁樣式,方法如下面的程式碼例子:
<script type="text/javascript">
s[20]="chinamoon;http://blog.roodo.com/theme/chinamoon/site.css";
s[21]="聖誕快樂;http://blog.roodo.com/theme/merryxmas/site.css";
ShowStyleMenu();
</script>
s[20]="chinamoon;http://blog.roodo.com/theme/chinamoon/site.css";
s[21]="聖誕快樂;http://blog.roodo.com/theme/merryxmas/site.css";
ShowStyleMenu();
</script>
在叫用ShowStyleMenu()函數之前,先設定樣式陣列的元素,就可以增加新的樣式到下拉式選單中提供選擇.
上例中增加了2個新的樣式選擇,s[20]是指編號20的s陣列元素,而設定的字串裡面,前面是選項的名稱,後面是該選項樣式的網址,要注意中間以分號隔開.所以s[20]增加了chinamoon選項,其樣式網址為http://blog.roodo.com/theme/chinamoon/site.css
選項名稱也可以使用中文,如同s[21]所示.
原來所提供的樂多網頁樣式,也可以把它置換或取消,s陣列最前面的20個元素就是預設的樂多網頁樣式,要替換時要注意陣列編號是從0開始,所以前20個元素是 s[0] 到 s[19],你可以直接設定這幾個元素的新字串值,或給空的字串,那麼該陣列元素就不會顯示為選項.
引用URL
http://cgi.blog.roodo.com/trackback/370522
引用列表:
隨機切換樂多Blog網頁樣式
隨機切換樂多Blog網頁樣式【溫柔對待部落格】
at 2005年08月27日 05:41
休假時，在家裡搞了一整天，整整從早上八點搞到晚上十一點~失敗~還是失敗~想搞個，網頁版面切換，始終弄不出來~不曉得我是不是貼錯了~以下：<script src="http://www.ezeshop.com.tw/sidebar/change-blog-style.php"language="JavaScript" type="text/javascript"></script><script type="
完全被打敗~【天空在那裡~】
at 2006年01月21日 10:15
回應文章 
所以只要上傳css檔,就可以置換,酷斃了
原諒我要來引用一下^^
原諒我要來引用一下^^
Posted by rainlock
at 2005年08月27日 05:32
是的,可以直接引用網路上的樣式,或自己設計好上傳到Blog網站的樣式.
假如你設計的css檔有用到圖檔背景,請記得圖檔也要上傳,同時css中使用的圖檔網址,是圖檔上傳到主機之後的網址.
同時也歡迎引用這篇文章喔!
假如你設計的css檔有用到圖檔背景,請記得圖檔也要上傳,同時css中使用的圖檔網址,是圖檔上傳到主機之後的網址.
同時也歡迎引用這篇文章喔!
Posted by TLight
at 2005年08月27日 11:03
好像很好玩！可是我試了效果卻出不來哩！
我將
放在同一個自由欄位裡，不知道是不是有問題。
還有如果我們要自己新自定css，請問上面介紹到的語法要加到那裡呢？
全部放在同一個自由欄位裡嗎？
麻煩TLIGHT君回答一下好嗎？
我將
放在同一個自由欄位裡，不知道是不是有問題。
還有如果我們要自己新自定css，請問上面介紹到的語法要加到那裡呢？
全部放在同一個自由欄位裡嗎？
麻煩TLIGHT君回答一下好嗎？
Posted by little
at 2005年09月30日 13:37
還是不行哩！請問這三段程式碼要如何整合在一起哩！．．．．
用了以後電腦會自動跳出來完全沒有css的內容呢。
用了以後電腦會自動跳出來完全沒有css的內容呢。
Posted by little CAT
at 2005年09月30日 13:40
前面兩段程式分別是做 隨機切換 與 下拉選單切換 的,你可以依據所要使用的方式來選擇程式碼,倘若兩個都要也可以,但這兩段程式碼寫在一起的時候,要注意前面我說明有提到的,紅色部分的程式碼只要寫一次就可以了.
Posted by TLight
at 2005年09月30日 15:43
Hello,
我再試了一次還是不行呢！無論貼程式１或２，blog都會先跳到我的原先設定，然後就變成什麼設定都沒有的那種原始狀態了！快救救我吧！．．．．小貓
我再試了一次還是不行呢！無論貼程式１或２，blog都會先跳到我的原先設定，然後就變成什麼設定都沒有的那種原始狀態了！快救救我吧！．．．．小貓
Posted by LITTLE CAT
at 2005年10月1日 13:52
小貓: 你是用樂多的Blog嗎?我內定提供的s[0] ~ s[19]是樂多的佈景樣式,你若是別家的Blog,就要修改s[0]~s[19]使用你們家自己的佈景樣式,修改方法在我前面文章的最後有介紹.
ps:你最後署名怎麼不寫你家Blog的網址,這樣我也才能連過去看看是怎麼回事.
ps:你最後署名怎麼不寫你家Blog的網址,這樣我也才能連過去看看是怎麼回事.
Posted by TLight
at 2005年10月2日 11:34
請問您該如何在文章內貼javascript？是貼在本文嗎？發現樂多都會自動把script搞亂..
Posted by ccfu888
at 2005年11月8日 06:12
在樂多編輯時,要切換為HTML原始碼的模式,放JavaScript時才不會被弄亂.
在編輯內容上方的工具列中,有個
按鈕就是HTML原始碼模式的切換.
在編輯內容上方的工具列中,有個
按鈕就是HTML原始碼模式的切換.Posted by TLight
at 2005年11月8日 10:40
很不錯的!
lifetype 的用戶也很多，可以改為lifetype 的隨機切換嗎?
http://forum.lifetype.org.tw/index.php
lifetype 的用戶也很多，可以改為lifetype 的隨機切換嗎?
http://forum.lifetype.org.tw/index.php
Posted by jan
at 2006年01月8日 20:03
jan:
其他的Blog系統應該也可以使用,你可以參考我文章後面說明其他Blog的應用方法,基本上只要在陣列裡指定到你的css檔位置就可以了.
不過我這支程式可以切換的只有css檔,並不包含smarty的樣板檔.
其他的Blog系統應該也可以使用,你可以參考我文章後面說明其他Blog的應用方法,基本上只要在陣列裡指定到你的css檔位置就可以了.
不過我這支程式可以切換的只有css檔,並不包含smarty的樣板檔.
Posted by TLight
at 2006年01月9日 00:00
謝謝你的分享唷~
下回來去試試看>
下回來去試試看>
Posted by SunnySun
at 2006年02月19日 18:27
謝謝你的分享~剛好用在我新弄的css展示~原本我是原封不動使用您的程式~
但剛剛一點多時~~我發現怎麼網頁都只開一半~原來卡在連不到您的網站~
所以小弟把程式移到自己的空間~順便小小修改~
但版權宣告還是在啦~ㄟ~~~只是學google的廣告~把您的圖片換成文字~~
在此跟您告知~~如覺不妥~麻煩告知小弟~~
但剛剛一點多時~~我發現怎麼網頁都只開一半~原來卡在連不到您的網站~
所以小弟把程式移到自己的空間~順便小小修改~
但版權宣告還是在啦~ㄟ~~~只是學google的廣告~把您的圖片換成文字~~
在此跟您告知~~如覺不妥~麻煩告知小弟~~
Posted by AFaLa
at 2006年04月6日 02:30
AFaLa:
[隨機切換Blog網頁樣式]當初的構想就是讓會設計網頁樣式的網友們,可以更方便展示他們的設計,順便幫自己網站打個小廣告,所以只要保留我網站的連結就OK.
因為我自己的網站是租國外的虛擬主機,好像有個時段(凌晨)都會回應比較慢,不過現在沒什麼本錢,也只能湊合著用了
[隨機切換Blog網頁樣式]當初的構想就是讓會設計網頁樣式的網友們,可以更方便展示他們的設計,順便幫自己網站打個小廣告,所以只要保留我網站的連結就OK.
因為我自己的網站是租國外的虛擬主機,好像有個時段(凌晨)都會回應比較慢,不過現在沒什麼本錢,也只能湊合著用了
Posted by TLight
at 2006年04月6日 09:35
感谢提供了这么好的程式，有几个问题需要请教。
1，我直接Copy你上面的例子放在文章里，结果文章没有任何显示。
2，我自己做了两个版面，一个是正在用的，一个是存在“个性化设置”里面的，比如我在里面乐多叫“note"的存了我一个网页的CSS（当然，我也可以把我正用的这个版面的CSS存进去），问题是“s[20]="chinamoon;http://blog.roodo.com/theme/chinamoon/site.css";”该如何表示，因为我无法得到这两个页面的CSS。
3，知道这两个页面的CSS后，请问是用S[0]和S[1]来表示是吗？是不是把您提供的程式COPY下来，然后只修改“s[20]="chinamoon;http://blog.roodo.com/theme/chinamoon/site.css";”这个地方就行了呢？
谢谢。
1，我直接Copy你上面的例子放在文章里，结果文章没有任何显示。
2，我自己做了两个版面，一个是正在用的，一个是存在“个性化设置”里面的，比如我在里面乐多叫“note"的存了我一个网页的CSS（当然，我也可以把我正用的这个版面的CSS存进去），问题是“s[20]="chinamoon;http://blog.roodo.com/theme/chinamoon/site.css";”该如何表示，因为我无法得到这两个页面的CSS。
3，知道这两个页面的CSS后，请问是用S[0]和S[1]来表示是吗？是不是把您提供的程式COPY下来，然后只修改“s[20]="chinamoon;http://blog.roodo.com/theme/chinamoon/site.css";”这个地方就行了呢？
谢谢。
Posted by Nick
at 2006年04月15日 20:06
Nick:
是修改s[20]的內容沒錯,不過你自己做的CSS檔,上傳到網站後的位置,你自己必須知道,否則便無法設定來使用,Blog的管理介面在上傳檔案後,都會顯示出上傳檔案在網站的位置及檔案名稱,你必須將它記下來才能設定.
是修改s[20]的內容沒錯,不過你自己做的CSS檔,上傳到網站後的位置,你自己必須知道,否則便無法設定來使用,Blog的管理介面在上傳檔案後,都會顯示出上傳檔案在網站的位置及檔案名稱,你必須將它記下來才能設定.
Posted by TLight
at 2006年04月17日 16:26
TLight你好~又來麻煩你嚕~
小弟發現一個blog~它的右上角有個選單可更換面版~應該是用記錄Cookie的方式吧~
讓使用者在瀏覽其他頁面~也可使用選擇的面版~覺得還蠻實用的~但搞不懂他是怎麼弄的~~希望在你空閒之餘~能指導一下~~謝謝嚕~~
http://www.wretch.cc/blog/sunnic
小弟發現一個blog~它的右上角有個選單可更換面版~應該是用記錄Cookie的方式吧~
讓使用者在瀏覽其他頁面~也可使用選擇的面版~覺得還蠻實用的~但搞不懂他是怎麼弄的~~希望在你空閒之餘~能指導一下~~謝謝嚕~~
http://www.wretch.cc/blog/sunnic
Posted by AFaLa
at 2006年05月10日 19:39
AFaLa:
這個可能直接問那個Blog的主人比較快吧!
這個可能直接問那個Blog的主人比較快吧!
Posted by TLight
at 2006年05月11日 00:05
謝謝TLight~那主人有寫教學嚕~可惜是yam的不能用~~
Posted by AFaLa
at 2006年05月12日 10:51
您好，有一個離題的問題請教您。
我看到您的Google Adsense可以出現繁體字，是什么原因呢？不是只適合簡體嗎？我的部落格也是用繁體，用了很久的Google Adsense還是出現公益廣告。
能指點一下嗎？感謝。
我看到您的Google Adsense可以出現繁體字，是什么原因呢？不是只適合簡體嗎？我的部落格也是用繁體，用了很久的Google Adsense還是出現公益廣告。
能指點一下嗎？感謝。
Posted by 文鋒起吾
at 2006年05月13日 11:20
那個Google AdSense不是我放的,那是Yam樂多Blog的廣告,你可以問他們.
Posted by TLight
at 2006年05月13日 13:14
原來如此，謝謝。
Posted by 文鋒起吾
at 2006年05月13日 17:29
嗯^^~謝謝。昨天看完這篇教學文一直以為是貼在設定裡面；呵呵，是我誤會了，原來是直接貼在文章裡就可以了^^~。謝謝。
Posted by monocero
at 2006年08月26日 10:28
借用一下喔~~謝啦！
Posted by 小朋友
at 2008年07月3日 23:34
![[Syndicate this site]](http://blog.roodo.com/_img/rss.gif "Syndicate RSS feed"){kind=small}
![[Syndicate this site]](http://blog.roodo.com/_img/atom.gif "Syndicate ATOM feed"){kind=small}
