blogspot網誌語法:改寬度

2009年8月15日 星期六

blogspot網誌語法:改寬度
找到下列語法 : (這二段語法上下一起),
/* Outer-Wrapper----------------------------------------------- */
#outer-wrapper {
width: 760px;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 100% Georgia, Serif;
}
width: 660px;→修改為→width: 930px;→總寬度調整,
#main-wrapper {
width: 500px;
float: left;
word-wrap: break-word;
/* fix for long text breaking sidebar float in IE */overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}
width: 500px;→修改為→width: 730px;→文章區寬度
調整的值可以依你自己需要的寬度調整

把 Plurk好友名單隱藏

2009年8月14日 星期五

把 Plurk好友名單隱藏

把 Plurk好友名單隱藏,但「加我為好友」按鍵仍留著的語法(附帶把Fans 欄也整個隱藏起來) 在Plurk中 我的檔案>編輯>自訂外觀裡,下方有個大空白處 (CSS),把下面的語法貼上後儲存即可:
這是好友的部分
/* hide friend pics */
#dash-friends-pics { position: absolute; left: -1000px; top: -1000px }
這是粉絲的部份
/* hide fans */
#dash-fans { position: absolute; left: -1000px; top: -1000px }

嵌入撲浪顯示器至msn分享空間
部落格選擇HTML的模式,也就是右邊那個變成圖片的顯示器【部落格文章內沒辦法使用外嵌】想要把撲浪放在分享空間前,你必須要有以下幾個條件你才成完成:
☑ 至Windows Live Gallery 新增 HTML自訂模組
☑ 要有自己的網路空間!
首先,我們要在分享空間裡面新增一個HTML模組,他並非是內建的那種自訂HTML喔,而是自己還要去Windows Live Gallery新增的一個可以放iframe的模組。

確定安裝且新增第三方小工具後,先儲存在你確定好位置的地方。 ※MSN分享空間每次一新增模組,你必須要先儲存好,才能再編輯!
把你的撲浪HTML語法複製貼上 (你可以先設定好你要的長、寬以及顏色) ,在你貼上的語法前後加上
在你的Plurk 噗浪「個人資料」加上國旗!
程式碼:
#location{padding-left:30px; background:url(http://images.plurk.com/175698_b452355fc68dd95b96f3ba120afadfde.gif) no-repeat;}
程式碼中的「http://images.plurk.com/175698_b452355fc68dd95b96f3ba120afadfde.gif」可以替換成任何你喜歡的圖示,你要換成多拉A夢都可以,就是一張圖當作背景這樣。細節的部份有興趣的人可以再自行修改,讓他更符合噗浪頁面的配置。
上面的程式碼要加到哪裡呢?請按一下Plurk網頁左上角的「編輯」,開啟「個人設定」視窗後切換到〔自訂外觀〕頁面,將程式碼貼上到中間方框就可以囉!貼上後再按一下〔儲存並更新〕按鈕即可。
如果方框中本來就有其他CSS控制碼,可以不用管他、不要刪除,直接在最上面貼上另外一段程式碼,除非之前就有定義過location的背景圖,否則應該不會有問題。或者你也可以再搜尋一下CSS中是否有定義過location的內容,再修改一下就好。

移動噗浪的回應時間位置,使能更清楚看到回應時間

移動噗浪的回應時間位置,使能更清楚看到回應時間

只要把下列的CSS內容貼到【編輯→自訂外觀】的CSS框裡就可以了:

/* 把回應時間往左邊移動。
* 回應時間最右側是一個圖形,要把圖形移出畫面;
* 因為Plurk不允許使用visibility和display,只
* 能用移座標的方法。
*/
.response_time .holder+div img {
left:-1200px;
position:fixed;
}

/* 把回應時間左移120px */
.response_time .holder {
background:blue;
color:white;
left:-120px;
position:relative;
}
把落落長的噗友暱稱變獨立一行的噗浪變身法
可以在回應內容區加上背景與文字顏色,以更顯著的形式呈現。

.list .plurk_cnt .td_cnt .text_holder { /* 回應內容區 */
background: green; /* 背景設定為綠底 */
color: white !importnat; /* 白字 */
margin-left:1em;
margin-top:1em;
padding:0.5em;
width:auto !important;
}

Plurk CSS自訂修改全攻略

前後後對Plurk的CSS樣式做了調整,本篇做個到目前為止的修改總整理,並加上註解說明,供有需要的噗友們能再依自己的需求而變更。首先將要調整的樣式複製到系統剪貼簿裡,再依下列圖片對照步驟來操作:
點擊Plurk頁面左上角的【編輯】
個人設定視窗彈出後,點擊【自訂外觀】頁籤
游標移進樣式修改框裡,並移動到最後面,再貼上複製好的樣式
點擊【存檔並更新】,此時會看到後面的網頁閃動一下,表示修改的樣式已生效。最後按個人設定視窗右上角的 X 關閉視窗
把自訂樣式放到最後面以方便日後的修改,當你更換畫面主題時,記得先把後面的這些修改先存起來,等主題更新後再貼回即可。
最後是修改樣式的內容。
由SkyDrive下載樣式檔

/* =========================================================
* 以下是自訂變更Plurk的樣式修改
* 作 者:簡睿 http://jdev.tw/blog/tag/plurk
* 版權宣告:歡迎取用與修改,但請提及http://jdev.tw/blog
* V1.0 2009/07/04
* =========================================================
*/
/* 1.把噗裡最下方的輸入框高度放大成70px */
textarea#input_small { height: 70px; font-size:20px;}

/* 2.網頁下方的大輸入框高度放大成70px */
textarea#input_big.content { height:70px; font-size:20px; wrap:soft}

/* 3.噗的編輯框高度放大成100px */
td.td_cnt textarea { height:100px; }

/* 4.把自己的照片變小,以免嚇到人 :-) */
#profile_pic {
width:64px; height:64px;
}

/* 5.隱藏右方的怪物圖示*/
#dynamic_logo { opacity:0;filter:alpha(opacity=0);zoom:1 }

/* 一整個噗是類別為plurk_box的區域(div),其內有list類別區域,
* list 即為"最近的 plurk 回應:"以下的回應區域,
* 每個回應都有plurk_cnt類別。plurk_cnt類別裡有一個table
* 左邊表格td_qual放暱稱和修飾詞,右邊表格td_cnt放回應內容。
*/
/* 6.把回應區的高度放大為300px,以容納更多的回應 */
.plurk_box .list {
height:300px;
}

/* 7.把列距放大成1.5倍,行跟行間的垂直空間會變大 */
.list .plurk_cnt {
line-height:150%;
}

/* 8.每個回應的下方加淡藍色的分隔線; solid是實心線,可以換成下列不同的線
* dotted=點點,dashed=折線
*/
.list .plurk_cnt tr {
border-bottom: 1px solid lightblue;
}

/* 9.把回應內容的字體放大1.4倍 */
.list .plurk_cnt .td_cnt {
font-size:140%;
}

/* 10.游標經過的回應區,將其背景變成淡藍色,如果要設文字顏色的話, 加上下列指令:
color:navy !important;
*/
.list .plurk_cnt :hover {
background-color:lightBlue;
}

/* 11.將特定噗的獨立頁面的輸入框的高度放大成100px */
textarea#input_permalink.content {
height:100px;
}

/* 12.讓暱稱在獨立一列; 請注意:IE有點異常,暱稱經常會消失 */
.list .plurk_cnt .td_qual {
overflow:auto;
position:absolute;
width:auto;
}

.list .plurk_cnt .td_cnt .text_holder {
margin-left:1em;
margin-top:1em;
padding:0.5em;
width:auto !important;
}

/* 13.噗的回應數目字改成白色. 如果你的河道底色是淺色則請改成深色
如 color:black */
.response_count { color:white;}

/* 14.把游標所在位置的回應時間往左移120px */
.response_time .holder+div img {
left:-1200px;
position:fixed;
}

.response_time .holder {
left:-120px;
position:relative;
}
自己的噗或在別人噗裡的回應,回應時間區域除了時間以外,還會有刪除按鈕。

將Plurk回應區變成固定寬度

將Plurk回應區變成固定寬度
滑鼠游標移到暱稱文字區域時,固定的寬度會放大以顯示較完整的暱稱。下圖是寬度放大後的暱稱:

/* 把回應內容區裡的表格改成固定寬度的layout */
.list table {
table-layout:fixed;
}

/* 暱稱區寬度固定為35%, 淡灰底色;超出寬度的部份會消失(hidden) */
.list .td_qual {
width:35% !important;
border-right: 2px solid #dddddd;
background: #dddddd;
overflow: hidden;
}

/* 游標移入暱稱區時寬度變成60% */
.list .td_qual:hover {
width:60% !important;
position: absolute;
}

/* 游標移至暱稱的文字連結時,顯示超長部份 */
.list .td_qual .name:hover {
overflow: visible;
width: 60% !important;
}

/* 把暱稱三角形按鈕往右移,以免蓋到修飾詞 */
.cmp_tooltips-down {
left:30px;
position:absolute;
}

佈景主題與css控制碼

Plurk除了聊天之外,支援自行修改CSS來改變整站佈景主題的功能也是個很有趣的特色,一般使用者都可以在登入Plurk後,直接按左上角的〔編輯〕→〔自訂外觀〕,來修改「個人頁面」的CSS樣式,透過這些CSS控制碼幫我們的個人頁面改頭換面。另外也可以套用別人安裝好的整站CSS樣式,如同下面所引用的這些佈景主題一樣,直接按一下網址就可以將你的Plurk個人頁面改成全新的樣式囉。
Plurk佈景主題下載網站:
PlurkTemplates
http://www.plurkthemes.com/
Plurk Customized Theme Emporium
The Plurk Themes Pool
Plurk Theme Sate Bab
Plurk Layouts, Plurk Themes, Plurk Designs, Plurk CSS
http://www.letters-to-you.com/category/graphics/
100個令人驚艷的Plurk佈景主題
http://plurk-layout.com/
Plurk的CSS,其實有個基底樣式來做修改,應該很好懂,只要Karma值大於25,按左上角編輯→自訂外觀,即可自己撰寫CSS,自定義版面
原始碼:

/*個人頁面標題*/
#page_title { padding: 1px ; color: #757575;}

/*全頁面背景修改*/body, html {background-image: url(http://i47.photobucket.com/albums/f172/buffoon123/august08-grey-nocal-1680x1050.jpg);background-repeat: no-repeat;background-color: #b5b5b5;}

/*頁首的BAR左半部*/#top_bar .content a{color:#f09; font-weight: normal ;} /*「我的檔案、我的朋友、訊息」字樣*/#top_bar .content a:hover{color:#f09; font-weight: normal ;} /*滑鼠滑過效果*/#top_bar .content a#edit_link{color:#7f40bf; font-weight: bold ;} /*左上角「編輯」字樣*/

/*頁首的BAR右半部*/#top_login a{color:#7f7fff;}

/*河道底色或圖案*/#timeline_holder {background-image: url(http://i47.photobucket.com/albums/f172/buffoon123/august08-grey-nocal-1680x1050.jpg);background-repeat: no-repeat;}#timeline_holder #timeline_cnt #time_show {}#timeline_holder #timeline_cnt #display_options_holder {} /*河道右邊「搜尋」字樣背景底色*/#timeline_holder #timeline_cnt .day_start {background-color:#FFFfilter:alpha(opacity=70);opacity:0.7;zoom:1} /*換日線(左邊)*/#timeline_holder #timeline_bg .bottom_start , .bottom_end {color:#111} /*時間軸柱的文字顏色*/#timeline_holder #bottom_line {background-color:#FFF; border:0px ;filter:alpha(opacity=70);opacity:0.7;zoom:1;} /*時間軸柱背景色*/

/*河道上浪友發的浪*/.plurk_cnt {background-color:#ffffff ;/*border-color:#f09 ;*/ }a.name{color: #111;}.text_holder {color: #1aa;}

/*河道左下方更新通知*/#updater {border:0; }#updater #noti_np #noti_np_text{color:#f09; }/*「X則新的Plurk更新」字樣*/#updater #noti_np a{color:#7f40bf;} /*「更新」字樣*/#updater #noti_re #noti_re_view #noti_re_text {color:#f09}/*「X則新的回應檢視」字樣*/#updater #noti_re #noti_re_view a{color:#7f40bf;} /*「更新」字樣*/

/* 整個控制面板底圖 */#plurk-dashboard{background: #70b5b5 url();background-repeat: repeat;filter:alpha(opacity=80);opacity:0.8;zoom:1;}

/*控制面板鍵入訊息處*/#main_poster .qual_holder{color:#308a7b;filter:alpha(opacity=70);opacity:0.7;zoom:1 font-wight:bold ; font-size:20px;}

/*控制面板更改plurk私密、語系和選項等等*/#more_options {border:0px solid #CCC;} /*字*/#more_options a#more_options_link {}#more_options #plurk_to{color:#000;}#more_options #more_options_holder{}

/*控制面板頭像和年紀、位置標示處*/#dash-profile p#full_name{color:#369}#dash-profile #span_years , #m_or_f{font-size:14px;}

/*控制面板自介*/#dash-additional-info {font-family: Arial;}#dash-additional-info #about_me{color:#00C}#dash-additional-info #about_me a{color:#F06}#dash-additional-info #about_me a:hover{color:#C00;font-size:14px;}

/*控制面板STATS欄位(Karma等等數據欄位)*/#dash-stats{}#dash-stats h2{color:#FFF}#dash-stats #karma {color:#C00;font-family: Arial}#dash-stats table tbody tr th{}#dash-stats table tbody tr td{font-weight:bold;}

/*控制面板朋友 friend 欄位*/#dash-friends {}#dash-friends h2{color:#FFF}#dash-friends #friend_holder{border:1px solid #aaa ;}

/*控制面板粉絲 FANS欄位*/#dash-fans{}#dash-fans h2{color:#FFF }

/*控制河道中對話框的大小*/#input_small {height: 70px; } td.td_cnt textarea { height:100px; }

Plurk Karma 經驗值獎賞清單

什麼是 Karma?
Karma 有點類似遊戲裡的「經驗值」(Plurk 裡大家稱業障值),也就說說,如果經驗值越高的話,Plurk 會給你「額外的道具」,像是:新增表情符號、寵物圖示和其他獨特的功能。
怎樣才會獲得 Karma?
目前的官方說法比較籠統,只知道要大家多參與發文、回應、加入朋友、邀請朋友 (非官方說法)。
以下為 Karma 以及邀請朋友獎賞列表:
Karma 0:. 修正寵物圖視為兩隻 (原本三隻)

Karma 10:. 可以自定自己的標題和名稱

Karma 25:. 新增四款寵物圖示

舊版四款寵物圖示


新版四款寵物圖示

寵物圖示顯示在 Plurk 的右上方
新增表情符號
時間軸主題設定
Karma 40:可以自定自己的顯示名稱
Karma 50:新增六款寵物圖示 (原有四款寵物圖示)
新增表情符號
新增資訊列主題 也就是你的個人資訊那一塊的主題顏色
除了 Karma 之外,另外邀請朋友加入也有獎賞:
邀請 10 個朋友加入:圖示右下角多出銀星
新增表情符號
邀請 25 個朋友加入:圖示右下角多出金星
邀請 50 個朋友加入:圖示右下角多出紅星