Serpent de mer: 部落格設定

Serpent de mer: 部落格設定

Showing posts with label 部落格設定. Show all posts

Showing posts with label 部落格設定. Show all posts

2008-02-25

http://rjchen325.blogspot.com/2008/02/slideshow.html
新增 slideshow 相簿

1.首先使用 Picasa 建立你的 Picasa Web Albums ; 進入 phydeauxredux.googlepages.com 點選 sidebar "most wanted" 中的 "Picasa web album widget for blogger" 再點選內文 "Picasa Web Albums Widget Creator for New Blogger"--先填入你的 Picasa Web Albums 帳號, 按 "submit"--選擇 "All" 或任單一相簿名稱。

2.如下圖所示點選 : a.共有10段投影速度. b.最多20張影像展示. c. 3 種有游標浮字顯現區( x-small 48px, small 64px, normal 160px) d. 邊框顏色設定

clipped from phydeauxredux.googlepages.com

Display the Widgets Title Show as SlideShow
Vertical Strip Horizontal Strip
Show Album Title as Header Show Border Around Image

Slide Show Speed in Seconds(10 max) Number of Images to Display (20 max) Size of Thumbnails # Border Color (in Hex)

3.取得崁入碼 , 或藉由導引自動 widget 到你的部落格中。

***另一種方法是利用 blogger 新增的 "投影片" 網頁元素製作 :

開啟部落格管理--新增網頁元素--投影片--來源選"Picasa 相簿"--選項點 "相簿"--使用者名稱 "Picasa Web Albums 帳號"--相簿 "自己選擇"--儲存變更--OK!!

**兩者比較前者在網頁上開得較大 , 照片直接post 在固定大小相框內 , 相簿名稱顯現在抬頭 , 游標指向照片浮現照片名稱。缺點只能展示20張 ? 太少 ?

後者簡易數秒即可設定完畢 , 照片呈等比例顯示 , 不過缺點就是秀出來的畫面有點小 ,於觀賞角度略遜前者 , 如何決擇就所需來訂罷。

*如果部落格管理介面還沒更新 "投影片" 這項目 ; 請上 Blogger in draft 更新。

2008-02-18

http://rjchen325.blogspot.com/2008/02/blog-post_18.html
製作月曆

近來想在部落格的 sidebar 上加入一個擷取月曆 , 搜尋結果有兩種 : 一為植入 Html/Javascript 模組式 ; 再者是利用 Blog Archive 更改而成。目前我用前者 , 參考PurpleMoggy 先生之 Blogger Calendar Archive 製作。

部驟有四 : 1.打開 Blog Template (版面配置)--選取『修改 HTML』在 <head>下加入以下程式

<script type="text/javascript"

src="http://yui.yahooapis.com/2.2.0/build/yahoo-dom

-event/yahoo-dom-event.js"></script>
<script type="text/javascript"

src="http://yui.yahooapis.com/2.2.0/build/calendar/c

alendar-min.js"></script>
<link rel="stylesheet" type="text/css"

href="http://yui.yahooapis.com/2.2.0/build/calendar/

assets/calendar.css"/>

2.緊接上段加入以下程式

<script type="text/javascript">
//<![CDATA[
    /*
        Created by: PurpleMoggy
http://purplemoggy.blogspot.com
    */
    var _yourBlogUrl =

"http://purplemoggy.blogspot.com"; //edit this
var _yourBlogTimeZone = "-08:00"; //edit

this
_yourBlogTimeZone = encodeURIComponent

(_yourBlogTimeZone);
var _dayTitles = new Array

("","","","","","","","","","","","","","","","","",

"","","","","","","","","","","","","","");

    YAHOO.namespace("example.calendar");
    function cal1Init() {
        YAHOO.example.calendar.cal1 = new

YAHOO.widget.Calendar("cal1","cal1Container");

YAHOO.example.calendar.cal1.addMonthRenderer(1,

YAHOO.example.calendar.cal1.renderBodyCellRestricted

);

YAHOO.example.calendar.cal1.addMonthRenderer(2,

YAHOO.example.calendar.cal1.renderBodyCellRestricted

);

YAHOO.example.calendar.cal1.addMonthRenderer(3,

YAHOO.example.calendar.cal1.renderBodyCellRestricted

);

YAHOO.example.calendar.cal1.addMonthRenderer(4,

YAHOO.example.calendar.cal1.renderBodyCellRestricted

);

YAHOO.example.calendar.cal1.addMonthRenderer(5,

YAHOO.example.calendar.cal1.renderBodyCellRestricted

);

YAHOO.example.calendar.cal1.addMonthRenderer(6,

YAHOO.example.calendar.cal1.renderBodyCellRestricted

);

YAHOO.example.calendar.cal1.addMonthRenderer(7,

YAHOO.example.calendar.cal1.renderBodyCellRestricted

);

YAHOO.example.calendar.cal1.addMonthRenderer(8,

YAHOO.example.calendar.cal1.renderBodyCellRestricted

);

YAHOO.example.calendar.cal1.addMonthRenderer(9,

YAHOO.example.calendar.cal1.renderBodyCellRestricted

);

YAHOO.example.calendar.cal1.addMonthRenderer(10,

YAHOO.example.calendar.cal1.renderBodyCellRestricted

);

YAHOO.example.calendar.cal1.addMonthRenderer(11,

YAHOO.example.calendar.cal1.renderBodyCellRestricted

);

YAHOO.example.calendar.cal1.addMonthRenderer(12,

YAHOO.example.calendar.cal1.renderBodyCellRestricted

);

YAHOO.example.calendar.cal1.selectEvent.subscribe

(mySelectHandler, YAHOO.example.calendar.cal1,

true);

YAHOO.example.calendar.cal1.changePageEvent.subscrib

e(myChangePageHandler, YAHOO.example.calendar.cal1,

true);

YAHOO.example.calendar.cal1.renderEvent.subscribe

(syncMonthYear);
YAHOO.example.calendar.cal1.render

();
        myChangePageHandler();
    };
    var myChangePageHandler = function

(type,args,obj) {
var month =

YAHOO.example.calendar.cal1.cfg.getProperty

("pagedate").getMonth() + 1;
        if (month.toString().length == 1) {
            month = "0" + month;
        }
        var year =

YAHOO.example.calendar.cal1.cfg.getProperty

("pagedate").getFullYear();
document.getElementById

("cal1Titles").innerHTML = "";
_dayTitles = new Array

("","","","","","","","","","","","","","","","","",

"","","","","","","","","","","","","","");
        checkPostsForMonth(month, year);
    };
    function checkPostsForMonth(month,year) {
        document.getElementById

("cal1loadimg").style.display = "block";
var script = document.createElement

("script");
script.setAttribute("type",

"text/javascript");
var theUrl = _yourBlogUrl

+"/feeds/posts/summary?alt=json-in-

script&callback=checkPostsCallback&published-min=" +

year + "-" + month + "-01T00%3A00%3A00" +

_yourBlogTimeZone + "&published-max=" + year + "-" +

month + "-31T23%3A59%3A59" + _yourBlogTimeZone +

"&max-results=100";
script.setAttribute("src", theUrl);

document.documentElement.firstChild.appendChild

(script);
    };
    function checkPostsCallback(json) {
        if (json.feed.entry) {
            for(i = 0; i <

json.feed.entry.length; i++) {
var month =

json.feed.entry[i].published.$t.substr(5,2);
var year =

json.feed.entry[i].published.$t.substr(0,4);
var day =

json.feed.entry[i].published.$t.substr(8,2);
var date = month +

"/" + day + "/" + year;
var href =

json.feed.entry[i].link[0].href;
var title =

json.feed.entry[i].title.$t;
if (day.substr(0,1)

== "0") {
day =

day.substr(1);
}

document.getElementById("cal1Titles").innerHTML +=

"<li><a href='" + href + "'>" + title + "</a>";
_dayTitles[day] +=

"<li><a href='" + href + "'>" + title + "</a>";

YAHOO.example.calendar.cal1.addRenderer(date,

myCustomRenderer);

}

YAHOO.example.calendar.cal1.render();
}
document.getElementById

("cal1loadimg").style.display = "none";

    };
    function showDayTitles(day) {
        document.getElementById

("cal1Titles").innerHTML = _dayTitles[day];
}
var myCustomRenderer = function(workingDate,

cell) {
var day = workingDate.toString

().substr(8,2);
        if (day.substr(0,1) == "0") {
            day = day.substr(1);
        }
        cell.innerHTML = '<div

onmouseover="showDayTitles(' + day + ');"><a

href="javascript:void(null);" >' +

YAHOO.example.calendar.cal1.buildDayLabel

(workingDate) + "</a></div>";
YAHOO.util.Dom.addClass(cell,

YAHOO.example.calendar.cal1.Style.CSS_CELL_SELECTABL

E);
YAHOO.util.Dom.addClass(cell,

YAHOO.example.calendar.cal1.Style.CSS_CELL_HIGHLIGHT

1);
return

YAHOO.widget.Calendar.STOP_RENDER;
}
var mySelectHandler = function

(type,args,obj) {
        var dates = args[0];
        var date = dates[0];
        var year = date[0];
        var month = date[1];
        if (month.toString().length == 1) {
            month = "0" + month;
        }
        var day = date[2];
        var element =

YAHOO.util.Dom.getElementsByClassName("d" + day,

"td", "cal1Container")[0];
        if (day.toString().length == 1) {
            day = "0" + day;
        }
        if (element.className.indexOf

("highlight1") != -1) {
window.location =

_yourBlogUrl + "/search?updated-min=" + year + "-" +

month + "-" + day + "T00%3A00%3A00" +

_yourBlogTimeZone + "&updated-max=" + year + "-" +

month + "-" + day + "T23%3A59%3A59" +

_yourBlogTimeZone;
}

};
var changeDate = function() {

YAHOO.example.calendar.cal1.setMonth(parseInt

(YAHOO.util.Dom.get("cal1monthselect").value));
YAHOO.example.calendar.cal1.setYear

(parseInt(YAHOO.util.Dom.get

("cal1yearselect").value));
        YAHOO.example.calendar.cal1.render();
        myChangePageHandler();
    }
    var syncMonthYear = function(type) {
        YAHOO.util.Dom.get

("cal1monthselect").value = parseInt

(YAHOO.example.calendar.cal1.cfg.getProperty

("pagedate").getMonth());
var fullYear = parseInt

(YAHOO.example.calendar.cal1.cfg.getProperty

("pagedate").getFullYear());
        var isYearFound = false;
        var i = 0;
        while(i < document.getElementById

("cal1yearselect").options.length && !isYearFound) {
if (document.getElementById

("cal1yearselect").options[i].value == fullYear) {
                isYearFound = true;
            }
            i++;
        }
        if (!isYearFound) {
            var option =

document.createElement("option");
option.setAttribute("value",

fullYear);
var text =

document.createTextNode(fullYear);
option.appendChild(text);
document.getElementById

("cal1yearselect").appendChild(option);
}
YAHOO.util.Dom.get

("cal1yearselect").value = fullYear;
};
YAHOO.util.Event.addListener(window, "load",

cal1Init);
YAHOO.util.Event.addListener

("cal1dateselect", "click", changeDate);
//]]>
</script>

注意開頭部份 , 將

〝var_yourBlogUrl="http://purplemoggy.blogspot.com";

//edit this〞紅字部份改成自己的 blog url。

3.回到 Blog Template (版面配置)--選取『新增網頁要素

』-- 插入 Html/Javascript 項目訂好標題後複製以下程式

<div id="cal1wrapper">

<div id="cal1select">

<select name="cal1monthselect" id="cal1monthselect">
    <option value="0">January</option>
    <option value="1">February</option>
    <option value="2">March</option>
    <option value="3">April</option>
    <option value="4">May</option>
    <option value="5">June</option>
    <option value="6">July</option>
    <option value="7">August</option>
    <option value="8">September</option>
    <option value="9">October</option>
    <option value="10">November</option>
    <option value="11">December</option>
</select>
<select name="cal1yearselect" id="cal1yearselect">
    <option value="1995">1995</option>
    <option value="1996">1996</option>
    <option value="1997">1997</option>
    <option value="1998">1998</option>
    <option value="1999">1999</option>
    <option value="2000">2000</option>
    <option value="2001">2001</option>
    <option value="2002">2002</option>
    <option value="2003">2003</option>
    <option value="2004">2004</option>
    <option value="2005">2005</option>
    <option value="2006">2006</option>
    <option value="2007">2007</option>
    <option value="2008">2008</option>
    <option value="2009">2009</option>
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
    <option value="2015">2015</option>
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>
</select>
<input type="button" value="-->"

id="cal1dateselect"/>

</div>

<div id="cal1Container"><img

src="http://img239.imageshack.us/img239/9057/40lf8.g

if" style="vertical-align:middle;"/>

Loading...</div>
<div style="clear:both;"></div>

<div id="calbackloadimg">
<pre id="cal1loadimg"

style="display:none;"><img

src="http://img239.imageshack.us/img239/9057/40lf8.g

if" style="vertical-align:middle;"/>

Loading...</pre>
<pre id="cal1Titles"></pre>
</div>

</div>

Save 後打開網頁 , 應該可以看到 sidebar 上的月曆了!!

4.接著到這裡下載本月曆的CSS檔 , COPY 至 Blog Template (版面配置) 的CSS檔群之中 ,可以就此自行更改月曆的型式藉以輔合自己的網頁。

總結:使用此月曆由於目前部落格文章數量不多 , 大概 5 秒內完成顯示 ; 又可保留 Blog Archive 功能是我選用之要因

。

2008-02-05

http://rjchen325.blogspot.com/2008/02/blog-post.html
設定部落格

今天我的部落格正式開張了!!
以下是設定時的歷程.....
在選定範本後,首先是標頭的命名:〝 Serpent de mer 〞 ??-->>在 iGoogle翻譯器中鍵入〝大海蛇〞,中翻英,執行--> 〝Sea snake〞-->英翻法,執行-->〝 Serpent de mer 〞。
再則上KKBOX的音樂部落格中找到播放器,設定好後 Copy Html碼 ; 回到 Blogger 開“加入網頁元素”--“ HTML/JavaScript ”, 貼上Html碼 ,標題鍵入 KKBOX 即可;此外我選的音樂是“ 地海戰記 ”主題曲--宛如清唱般的風格正適合這人靜的夜嵐。另外又加了一個 Counter , 如此即初成大觀,不早了今日到此為止。

--------------------------------------------

Subscribe to: Posts (Atom)