自訂blogger網頁(pages)網址

Blogger新增所謂的網頁功能已經有段時間了，不過因為有網友針對我導覽列標籤連結的網址提出疑問，就趁此機會做個簡單的教學。另外，雖然blogger的網頁(pages)功能可以非常直覺、便利的的形式設置導覽列標籤，但為了自訂版面時能有更高的自由度，我選擇了手動連結，詳細設定方式也會在本篇一起說明。

【Plurk版型】悼莫拉克颱風受害災民-噗浪哀河悼

今天一打開YAHOO的頁面覺得跟從前五彩繽紛的樣子很不一樣，噗浪上一問才知道這是YAHOO為了對莫拉克颱風受災的台灣民眾表示默哀而蒙上灰階版面，討論串中有噗友表示希望也有灰階的噗浪版面，火速的改了一個，有需要的朋友再請取用。今天文章也不加底線了，一律灰階低調。

悼莫拉克颱風受害災民-噗浪哀河悼

按此安裝

如需調整照片色階，又苦無繪圖軟體的人可以到阿榮福利味下載簡單、明瞭又好用的大畫家(Paint.net)，下載執行後，選擇工具列上的調整》色相/飽和度，慢慢試，真得很容易:)。

• 歡迎加入我的噗浪》凱特打結該該河
  
  


• 相關噗浪討論串:
  
  

Plurk版型任你換之二

這是之前做的Plurk 版型，生性自私小氣、且每年冬天都只掃自家門前積雪而從不搭理鄰居屋頂上結霜(誰會搭理阿？)的我，絲毫沒丁點要把版面分別人用的念頭，自然沒將版型分享的連結給留下。豈料自從馬英九登基後，我倏地性格轉變成一名慷慨大方、樂善好施、溫柔婉約並且考試都得100分的好姑娘；如此這般的我，再碰上flickr上古今中外先後向我詢問這個面板如何安裝的好友們，以及百般魯小殷切索討的前同事，終於忍不住心軟，索性重做一次該版型、把安裝網址留下以便於需要的人取用。

Plurk Theme by凱特打結

[ 套用凱特打結的版型｜install ]

語法很簡單，歡迎自由修改。
圖片則是出自N.Design Studio這個很酷的網站，裡面有很多好物喔！

body, html {
background-image: url(http://www.ndesign-studio.com/file/wallpapers/phoenix-1280x1024.jpg);
background-repeat: repeat;
background-attachment: fixed;
color: white;
}
#dynamic_logo {opacity:0} /*隱藏*/

#top_bar a, #top_login a, #dashboard_holder a, #footer a {
color:#ff0099;
} /*登入等選項文字顏色*/

#profile_pic{width: 80px; }/*檔案照片大小控制*/

.friend_holder .user_link{height: 22px!important; width: 22px!important; border: none!important; }
.friend_holder img{width: 22px; height: 22px; border: none; }/*朋友照片大小控制*/


.plurk_cnt {background-color:#ffffff;filter:alpha(opacity=75);opacity:0.75;zoom:1}

#main_poster .qual_holder{color:#ffffff;filter:alpha(opacity=75);opacity:0.75;zoom:1}

.div_inner,.day_bg .div_inner{filter:alpha(opacity=30); -moz-opacity:0.2; opacity: 0.2;}

.plurk a.ex_link {color:#2e7888} .plurk a.ex_link:hover{color:#64493f} /*連結顏色*/


#bottom_line
{
background: none;
opacity: 0.5;
filter: alpha(opacity=50);
}

#timeline_holder
{
background: none;
}


#timeline_holder #timeline_bg .bottom_start, .bottom_end {color:#ffffff} /*河道文字顏色*/



#timeline_holder #bottom_line {background: #ffffff; opacity: 0.2; filter: alpha(opacity=20);} /*時間軸半透明*/



#plurk-dashboard { background: #000000; opacity:0.55; filter: alpha(opacity=55); } /*dashboard透明度*/

若有其他問題，歡迎留言在問與答。
雖然我不過分享個plurk theme就馬屁拍一堆，還是希望大家不要棄嫌才好；
畢竟和這個比起來，我真的只是還好而已。


ps.歡迎加入我的噗浪，不介意我是政治魔人的話。

[自爽用]Plurk噗浪版型教學-自訂獎項列

我在好一段時間以前，曾寫過Plurk版型任你換之CSS簡易教學，隨著時光荏苒，自寫該篇教學文至今都將近一年了，方才在噗浪上走跳時恍然想起似乎很久沒寫相關題材；擇期不如撞日，今天就來分享個純自爽用的-自訂獎項列的小技巧。

所謂獎項列是我自己隨意取的，直接檢視CSS的話該區的標籤是award_bar，翻成獎吧的話，就似乎太深奧了......誰有更好的建議歡迎留言XD。由於這一區的圖示每一種都需達一定條件才能顯示，也就是不是我們想放上去就放上去，而且樣式也沒得挑，所以需要可變通的方法。經由CSS的設定，我們可以加上自己的標章，就像這樣。

我很獨

設定方式如下:

1. 首先，按一下河道左上方的「編輯」
2. 「個人設定」的視窗會隨即開啟
3. 再點選「自訂外觀」標籤




我很獨



4. 貼入下列CSS控制碼



.award_bar{background:url(圖片網址) no-repeat scroll 146px 8px;min-height:48px; }



5. 設定完成後再點選「儲存並更新」
   
6. 146px 8px指的是X軸與Y軸的位置，因為每個人的版型不同，所以可能要自行增減數字，調整到最合適的位置喔！
   

若設定上有問題，歡迎留言討論。

也歡迎加入凱特打結的噗浪。

Plurk版型任你換之CSS簡易教學

Plurk真的越來越好玩了，現在還可以開放Karma25以上的噗浪客自行修改版型，不過必須會基本的CSS才可以，今天我大概把玩了一下，真的很有趣。許多噗友也躍躍欲試，希望可以交流一下修改版面的方法，只是小妹我正在上班阿，只能先寫個簡單的教學，希望大家別棄嫌阿(笑)。

從我的檔案旁邊的edit進入，再選自訂外觀，編輯CSS的地方就在下圖圈選處。把下方的語法複製貼上後,開始照自己想要的顏色、圖片修改就OK啦!!

看看我的噗浪版面!!

/*全頁面背景修改*/

body, html {

background-image: url(圖片網址);

background-repeat: repeat;

color: black;

}



/*頁首的BAR左半部*/

#top_bar .content a{color:#ff0099[字的顏色]; font-weight: normal ;}

#top_bar .content a:hover{color:#ff0099; font-weight: normal ;}

#top_bar .content a#edit_link{color:#ff0099; font-weight: bold ;}



/*頁首的BAR右半部*/

#top_login a{color:#ff0099;}



/*河道底色或圖案*/

#timeline_holder {

background-image: url(背景圖網址);

background-repeat: repeat; background-color:#ffffcc[底色]

}

#timeline_holder #timeline_cnt #time_show {}

#timeline_holder #timeline_cnt #display_options_holder {}

#timeline_holder #timeline_cnt .day_start {background-color:#F09} /*換日線*/

#timeline_holder #timeline_bg .bottom_start , .bottom_end {color:#111} /*時間軸柱的顏色*/

#timeline_holder #bottom_line {background-color:#FFF; border:0px ;} /*時間軸柱背景色*/



/*河道上浪友發的浪*/

.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; }/*左*/

#updater #noti_np a{color:#fff;}

#updater #noti_re #noti_re_view #noti_re_text {color:#fff}

#updater #noti_re #noti_re_view a{color:#f09;}



/* 整個控制面板底圖 */

#plurk-dashboard

{

background: #000000 url(底圖網址);

background-repeat: repeat;

}



/*控制面板鍵入訊息處*/

#main_poster .qual_holder{color:#004080; 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: Verdana, 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; background-color:#666}

#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; background-color:#666}

#dash-friends #friend_holder{border:1px solid #aaa ;}



/*控制面板粉絲 FANS欄位*/

#dash-fans{}

#dash-fans h2{color:#FFF; background-color:#666 }

如果發懶而想直接套用我的版型，請直接按這個連結囉!

[ 套用凱特|該該的版型 ]

成功了嗎?操作起來若有問題再留言討論囉!我繼續上班XD

統一發票7 8月

Plurk Widget變形式

Plurk是不同於Twitter、Buboo的另一形態微網誌，但同樣讓我們可以在上面有事沒事碎碎念一下，而且同樣有社群的功能，同道中人你言我語，心情、新訊在螢幕河道上迅速流動，舉凡分享心情、聯繫情感、結交朋友、交換資訊、互通意見等，人們社交往來的許多重要行為皆可在其中完成。

不過今天談論的重點，是Plurk的相關應用(畢竟已經有太多的高手做過詳細介紹啦!)。就如同曾於台灣派也是要twi一下阿!!提到的，Twitter有許多形式Widget的可置放在部落格，隨時更新目前該帳號碎碎念的狀態，同樣的Plurk也提供了Widget予以使用者放在所需要的地方。

• 從個人頁面左上角的【edit】進入編輯。

• 跳出的編輯畫面選擇【Widget】。

• 即看到官方版【Widget】畫面，並獲得一組語法；貼到部落格欲顯示的位置即可。

<script type="text/javascript" src="http://www.plurk.com/static/widget/plurkwidget.js?user_id=20677&height=300&interval=10"></script>

不過先前遇到一個很苦惱的問題是，Plurk介面上提供調整Widget的高度，卻無從調整寬度；這點我和酥餅葛格都為之苦惱很久，因為這樣無法放進部落格中阿(我的邊欄非常苗條)！昨天我試著從自己部落格的CSS去設定對應的語法，好不容易研究出來了，欣喜若狂的在Plurk上歡呼時，CGS才說Plurk現在已經提供到可以用語法調整寬度的程度了...囧rz。



但畢竟我這是量身訂做的設計家款式，還是跟用原始的Widget直接把尺寸調小有所不同，因為我的Plurk Widget長這樣呢!

也就是可以改變成自己喜歡的底圖，還有字的大小、顏色

，也可以讓它與你的部落格更match!方法如下:



一樣將Plurk Widget語法法放至於希望顯示的位置，然後在 CSS 區塊(或 body{} 之後)加入此段程式碼，再依據需求喜好設定即可。

.plurk-widget {

max-width: (寬度)px !important;

margin:auto !important;

background:url("底圖網址") !important;

font-size: 字體大小px !important

}

.plurk-timeline {

height: 高度px !important;

background: 背景色 !important

}

.plurk-widget .plurk-timeline a , .plurk-widget .plurk-timeline a:link {

color: 內文連結字體色 !important;

background: transparent !important

}

.plurk-meta {

font-size: 內文連結字體大小px !important

}

.call-action , .plurk-widget .call-action a , .plurk-widget .call-action a:link {

color: 底部連結字體色 !important;

background: transparent !important

}

★延伸閱讀

• Plurk激活風格．發揮微網誌精神ClubEddy 步落癮


• 最近我在Plurk恩的領域


• Plurk 其實也沒什麼，就只是真的很好玩而已電腦玩物


• 黑兄，噗浪中～Plurk！！！Black Brother