追蹤
Ressol's Blog - 舊站
關於部落格
您好,這個網誌已不再更新,僅同步張貼來自新站的文章。
若要閱讀新文章,請您前往 這裡
  • 68232

    累積人氣

  • 0

    今日人氣

    0

    追蹤人氣

【教學】為天空部落加上佈景主題切換的功能


看起來似乎還滿有趣的,其實做法很簡單,只要幾個小步驟。
  • 準備好你所要的 CSS 樣版檔 (*.css ),上傳至網路空間中 (如:google page 或文章附檔...等等)
  • 將下面這段 javascript 加入你的網站中。
<-- 引入 jquery 核心,若您的網誌中已有使用 jquery,請忽略這行 -->
<script type="text/script" src="http://jquery.com/src/jquery-latest.pack.js" -->
</script>

<-- 主要的 JavaScript 程式碼 -->
<script type="text/javascript">
var isRememberStyle = false; // 是否要用 Cookie 記憶使用者所選擇的版面

if( isRememberStyle) {
var c = readCookie('style');
if (c) switchStylestyle(c);
}

function switchStylestyle(styleName) {
$('link[@rel*=style][@title]').each(function(i) {
if( this.getAttribute('href') != "http://pics.blog.yam.com/css/standard.css") {
this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;
}
});
if(isRememberStyle) createCookie('style', styleName, 365);
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < c =" ca[i];" c =" c.substring(1,c.length);" style="color:darkgreen;">
<-- 指定 CSS 的網路位置 -->

<link rel="alternate stylesheet" type="text/css" href="http://ressol.googlepages.com/Autum2.css" title="css1" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="http://ressol.googlepages.com/Crane.css" title="css2" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="http://ressol.googlepages.com/CSS3.css" title="css3" media="screen" />
<-- 佈景切換器 -->
<select onchange="switchStylestyle(this.options[this.selectedIndex].value);">
<option value="css1">原野夕陽</option>
<option value="css2">中國風情</option>
<option value="css3">悠閒海灘</option>
</select>
說明:
  • 使用天空部落格的朋友,要先跳過天空的標準 CSS,別讓程式去處理他
  • 各個 CSS 樣版請換成您自己的檔案位置

小技巧:
如果你與小弟一樣,對網頁版面樣式設計並不在行,那你可以考慮到天空的的後端管理介面的樣版管理,挑選、套用美觀的樣版後: 檢視瀏覽器的原始碼 把對應的 CSS 下載回來 ( 如:<link id="css" href="CSS 檔案位置" rel="stylesheet" type="text/css" />) 把下載回來的 CSS 檔案上傳至網路空間。 這樣子,你就有多個不同的樣版,讓訪客可以依心情挑選自己喜歡的佈景了

其他:
這個小工具的原理應該可適用於其他國內的部落格系統,如:無名、Pixnet、樂多 ... 等等,做法與修改的地方差不多,但你的部落格必須要允許 javascript 功能才可以。(無名免費會員、Yahoo 就不行了 v_v )
相簿設定
標籤設定
相簿狀態