活動1  活動2
本站需要您的支持,以助網站更好運作:
(1)懇請您捐款購買推薦商品
(2)或懇請您戳戳它↓(無法顯示請重整或點此)



本站公告:
鼓勵本站:您的贊助是本站動力來源
◆推薦本站:歡迎分享文章連結給好友
◆拜訪本站:文章陸續更新,歡迎關注
◆介紹本站:歡迎介紹好友來本站坐坐
◆聯絡本站:
(1)可在文章下或此頁任一處留言即可
(2)內容不合規定者會刪除,還請見諒
◆今日更新:快感指令next奇迹暖暖牟奄陰陽師愛麗絲的精神審判
P.S.快感指令next(中版):歡迎各位提供席德線選項,幫助更多玩家!
 公告.更新  文章搜尋

2008/10/03

[網站技術]Yahoo和Yam天空版面語法+基礎CSS語法匯整+BLOG搬家方法與使用心得







本文包含奇摩部落格修改版面的語法,yam天空BLOG的工具列、移除相關與基本CSS語法,還有部落格搬家方法與使用心得 MT檔轉成XML檔等內容。






==============================


奇摩部落格修改版面的語法


==============================


【連結】


/*Links連結底圖無底線*/
a,a:link,a:visited{color:#0033FF;text-decoration: none;}
a:hover{color:#eeeeee;text-decoration: none;background-image:url(http://網路圖片)}

color:#0033FF->未連結時顏色
color:#eeeeee->連結時顏色
none->去底線

如果想要Links連結底圖有底線
用上面的語法改上面第二行的text-decoration改成underline

這是連結時有底線,未連結沒有底線
如果想要未連結有底線,就上面那行把none改成underline就可


/*Links文章去除連結底線*/
a,a:link,a:visited{color:#904E0E;text-decoration: none}
a:hover{color:#F4AB25;background-color: #FFECD9;text-decoration: none;}

color:#904E0E->連結時的字體顏色
color:#F4AB25->停在超連結文字的顏色
background-color: #FFECD9->停在超連結背景顏色

【滑鼠指標】
body{cursor:url(一般指標圖);}
a:hover{cursor:url(指向連結圖);}

【背景】
不讓文字遮到背景的
#yblogtitle {margin-top:200px;}

/*Background image for whole page背景底圖*/
body {background-image: url(連結網址); background-attachment:fixed}

#yblogtitle .rctop, #blogtitle .rctop div, #yblogtitle .rcl, #yblogtitle .rcr, #yblogtitle .rcbtm, #yblogtitle .rcbtm div {zoom:1; filter:alpha(opacity:100)}

#yblogtitle .mbd .thd{background-position:0% 100%;width:663px;height:140px}

/*Blog title部落格標題敘述欄底圖*/
#yblogtitle .mbd,#yblogtitle .mft{background: url(連結網址) repeat-x; color:#18467d;font-size:140%;font-family: 新細明體;text-align:center; }

#yblogtitle h1{color:#DCEDF7;font-weight:bold; }

/*Main content body文章背景圖*/

.yc3pribd .mbd, .yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table, #yusrinfo table, #yusrintro p{font-size:120%;background-image:url(連結網址);

color:#} #ymodcal .mbd td strong {color:#}

/*背景固定法,fixed:是固定的意思*/

body {background-image:url(圖);background-repeat:repeat;background-position:0% 0%;background-attachment:fixed;}


/*背景無框線*/

.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}

.ycntmod .rctop {zoom:1;background:left top no-repeat;margin-right:5px;}

.ycntmod .rctop div {background:right top no-repeat;height:5px;font-size:0;position:relative;right:-5px;}

.ycntmod .rcbtm {zoom:1;background:left bottom no-repeat;margin-right:5px;}

.ycntmod .rcbtm div {background:right bottom no-repeat;height:5px;font-size:0;position:relative;right:-5px;}

.ycntmod .rcl {padding-left:5px;background:repeat-y;}

.ycntmod .rcr {zoom:1;padding-right:5px;background:right repeat-y;}

.ycntmod .text {position:relative;word-break:break-all;}

.yc3pribd .ycntmod{overflow:visible;}

.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}


/*Opacity for blogtitle上橫框 框線*/

#yblogtitle .rctop, #blogtitle .rctop div, #yblogtitle .rcl, #yblogtitle .rcr, #yblogtitle .rcbtm, #yblogtitle .rcbtm div {zoom:1; filter:alpha(opacity:77)

border-bottom:3px double #0033FF ;

border-top:3px double #0033FF;

border-left:3px double #0033FF;

border-right:3px double #0033FF }


/*Opacity for sub column左右欄框線*/

.yc3subbd .rctop,.yc3subbd .rctop div,.yc3subbd .rcl,.yc3subbd .rcr,.yc3subbd .rcbtm,.yc3subbd .rcbtm div, .yc3sec .rctop,.yc3sec .rctop div,.yc3sec .rcl,.yc3sec .rcr,.yc3sec .rcbtm,.yc3sec .rcbtm div {zoom:1; filter:alpha(opacity:79)

border-bottom:3px double #0033FF;
border-top:3px double #0033FF;
border-left:3px double #0033FF;
border-right:3px double #0033FF}


/*Opacity for main content文章區框線*/

.yc3pribd .rctop,.yc3pribd .rctop div,.yc3pribd .rcl,.yc3pribd .rcr,.yc3pribd .rcbtm,.yc3pribd .rcbtm div {zoom:1; filter:alpha(opacity:78)
border-bottom:3px double #0033FF;
border-top:3px double #0033FF;
border-left:3px double #0033FF;
border-right:3px double #0033FF}


【部落格描述】

/*Blog title主標題欄位*/(此種是無欄框貼圖用)


#yblogtitle .mbd{background-color:transparent;font-size:15px;}#yblogtitle .mbd .thd{background-image:url(http://www.fileden.com/files/ 2007/10/2 /1476085/1069.gif);background-repeat:no-repeat;background-position:10% 10%;width:600px;height:360px;font-size:30px;text-align:center;font-family:標楷體;}#yblogtitle .mbd .tbd{display:none;}#yblogtitle h1{color:#CC33FF;font-weight:bold;text-align:center;}#yblogtitle .rctop, #yblogtitle .rctop div, #yblogtitle .rcl, #yblogtitle .rcr, #yblogtitle .rcbtm, #yblogtitle .rcbtm div{background-color:transparent;}


【招呼語框】

/*招呼語透明度*/

#yblast .bg {zoom:1; filter:alpha(opacity:100)}


/*招呼語-自訂背景圖,底圖圖片如果與字寬同寬時,可設 no-repeat */

#yblast .bg {background: url(連結網址) repeat;}

/*招呼語-自訂背景圖,底圖寬高*/


#yblast .bg {width:88%;height:100px;}


/*招呼語-自訂背景圖,底圖位置*/

#yblast {position:relative;top:27px;left:17px;}


/*招呼語-文字寬高*/

#yblast .text {width:90%;height:40px;}


/*招呼語-文字置中-文字位置*/

#yblast .text{text-align:center; position:relative;top:-30px;left:-10px;}

/*招呼語-字體顏色-字型-大小-粗體*/

#yblast .text{color:#FFFFFF;font-family:新細明體;font-size:170%;font-;}


/*Opacity for blast 招呼語的留言框消失*/
#yblast{zoom:1;position:relative;top:110px;left:-150px;margin:0 0 -55px 0;z-index:2;}
#yblast .text,#yblast .bg{overflow:hidden;padding:5px 5px;width:47px;height:45px;}
#yblast .text{zoom:1;margin:-55px 0 0;}
#yblast .text a{display:none;}
#yblast a.edit{background:url(圖);width:13px;height:13px;}
#yblast .bg {zoom:1; filter:alpha(opacity:100); background: url(圖) no-repeat}
#yblast .text{color:#817254;}


【隱藏】

/*隱藏部落格*/
body{background-image:url(背景圖網址); background-attachment:fixed;}
.ycntmod { filter:alpha(opacity:0); }

將自訂樣式中所有的文字全部清除→然後貼上隱藏部落格語法→整個部落格就隱藏起來了
只想單獨的話

/*隱藏自我介紹*/
#ymodprf{display:none}

/*隱藏留言板*/
#ymodmsgbd h3{display:none}
#ymsgboard {display:none;}

/*隱藏部落格相簿*/
#ymodalbum{display:none;}

/*隱藏更新日期欄*/
#ymodupdate{display:none}

/*隱藏雅虎的頁首和頁尾*/
#yhtw_masthead,#yhtw_mastfoot{display:none;}

/*部落格敘述去除 */
#yblogtitle .mbd .tbd{display:none;}


/*隱藏左右欄位標題*/
.yc3sec .mhd,.yc3sub .mhd{display:none}
.yc3sec .mbd,.yc3sub .mbd{zoom:1;filter:alpha(opacity:0)}

/*隱藏文章欄位標題*/
.yc3pribd .mhd{display:none}
.yc3pribd .mbd{zoom:1;filter:alpha(opacity:0)}

/*隱藏個人性別圖*/
#ymodprf .horos img{display:none;}

/*隱藏回應按鈕*/
div.btncomment a {display:none;}

/*隱藏引用按鈕*/
div.btntrackback a {display:none;}

/*Master header置頂欄位文字消失*/
#yhtw_masthead{color:#666; background:#c5c5c5;filter:alpha(opacity=0); opacity:1; moz-opacity:1;}
#yhtw_masthead a,
#yhtw_masthead a:link,
#yhtw_masthead a:visited,
#yhtw_masthead a:hover{color:#fff;}
#yhtw_masthead .mhuser q{display:none;}


【自訂文章分類(去除文章數量顯示)】

/*加寬自訂欄位*/
.thrcol .yc3main {width:100%;float:left; margin-left:-180px;}
.thrcol .yc3mainbd {margin-left:180px;}
.thrcol .yc3pri {width:100%;float:right;margin-right:-180px;}
.thrcol .yc3pribd {margin-right:180px;}
.thrcol .yc3subbd {width:170px;float:right;}
.thrcol .yc3sec {width:170px;}
.thrcol .yc3sub{z-index:1;}
.thrcol .yc3pri,.thrcol .yc3main{z-index:10;}


【部落格標題顏色修改】

#yblogtitle h1{
color:#5e5e5e;

【捲軸顏色】

HTML {
scrollbar-face-color:#(色碼);
scrollbar-track-color:#(色碼);
scrollbar-3dlight-color:ED5; 
scrollbar-highlight-color:#(色碼);
scrollbar-shadow-color:#(色碼);

}


【性別圖/刪除性別圖:語法不用第二行】
#ymodprf .horos img{display:none;}
#ymodprf .horos{width:130px;height:35px;background:url(圖) center no-repeat;}
#ymodprf .horos img{display:none;}


【日期前的小圖】
#ymodupdate .mbd .date{background:url(圖) left center no-repeat;font-size:85%;font-family:verdana;}


【欄框】

上邊框
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url(圖) left top no-repeat;margin-right:5px;}

右上框
.ycntmod .rctop div {background:url(圖) right top no-repeat;height:98px;font-size:0;position:relative;right:-5px;}

中間連結(下面框)
.ycntmod .rcbtm {zoom:1;background:url(圖) left bottom no-repeat;margin-right:5px;}

右邊框(中間)
.ycntmod .rcbtm div {background:url(圖) right bottom no-repeat;height:152px;font-size:0;position:relative;right:-5px;}

支節
.ycntmod .rcl {padding-left:6px;background:url(圖) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:6px;background:url(圖) right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}


【回應、引用】
div.btncomment a {display:block;height:55px;width:65px;background:url(圖) no-repeat;}
div.btntrackback a {display:block;height:55px;width:65px;background:url(圖) no-repeat;}


◆◆BOTSODG+~世界一空~◆◆




==============================


yam天空部落格修改版面的語法(移除相關)


==============================

按一下連結頂層的天空工具列就會馬上出現或消失

貼在自訂欄位區、文章內皆可


[顯示工具列]


刪除語法:

1.POWERED BY(請加在自由欄位內)




2.系統公告和其他廣告、相簿廣告等

.chromestyle

{

DISPLAY: none;

}

DIV#tearad

{

DISPLAY: none;

}

DIV#sponsorAd

{

DISPLAY: none;

}

DIV#othermessage

{

DISPLAY: none;

}

DIV#powerdbyBlock

{

DISPLAY: none;

}

#systemAnnounce

{

DISPLAY: none;

}


#p_id_12

{

DISPLAY: none;

}


#p_id_13

{

DISPLAY: none;

}

#p_id_11

{

DISPLAY: none;

}

#p_id_31

{

DISPLAY: none;

}

#companyBar

{

DISPLAY: none;

}

#copyright

{

DISPLAY: none;

}

#flipPageDiv

{

display : none;

}

/* 動態廣告 */

#tearad { display:none; }

/*贊助商*/

#sponsorAdbyyam { display: none; }


/*系統公告*/

#systemAnnounce { display: none; }

#othermessage, #powerdbyBlock, #sponsorAd, #systemAnnouncebyyam,

#dropDownBlog, #ADstyle, #sponsorAdbyyam, .blogmain table{ display:none;

position:absolute; top:-500px; }

/*使相簿內的頂部廣告穩定隱藏*/

IFRAME

{

DISPLAY:none;

}

/*刪除相簿內的頂部廣告 &相簿底部廣告(ad of yahoo)的CSS代碼*/

#YamAD_560_block

{

display: none;

}

#ad_text1

{

display: none;

}

#ad_text2

{

display: none;

}

#ad_text3

{

display: none;

}

#ad_text4

{

display: none;

}

#twysm_ad1

{
display: none;
}

/*(2011.05.31新增)*/

/*刪除隨機跳出的大聲公*/

DIV#yam_AD_Flash_AD_MsgBox_SUBDIV;

{

display: none;


}

DIV#yam_AD_Flash_AD_MsgBox_DIV;

{

display: none;

}



==============================


yam天空部落格的基本CSS語法

==============================

/*超連結文字格式,清除超連結底線*/

A:link {

COLOR: #FFFFFF; TEXT-DECORATION: none;

}


/*瀏覽過的超連結樣式*/

A:visited {
COLOR: #ffffff; TEXT-DECORATION: none;

}

/*游標移至超連結的樣式*/

A:hover {

COLOR: #ffffff; TEXT-DECORATION: none;

}


/*按下超連結時的樣式*/


A:active {

COLOR: #FFFFFF; TEXT-DECORATION: none;

}

/*沒有hr這個類型選擇器,可能是舊版結構*/

hr {

COLOR: #DE7F4F; HEIGHT: 1px;

}


/*網頁背景色彩,邊界值,文字色彩,字型,文字大小,字間距離*/

BODY {

BACKGROUND: #000000;

MARGIN: 0px;
COLOR: #ffffff;

FONT-FAMILY: Verdana, Arial, Georgia, Helvetica, sans-serif;

FONT-SIZE: 2px;

letter-spacing:0.05em;

}


/*圖片超連結邊框顏色,框線寬度值,邊框空白值*/

A IMG {

color:#FFFFFF;

BORDER-TOP-WIDTH: 1px ;

BORDER-LEFT-WIDTH: 1px ;

BORDER-BOTTOM-WIDTH:1px ;

BORDER-RIGHT-WIDTH: 1px ;

PADDING-RIGHT: 3px;
PADDING-LEFT: 3px;

PADDING-BOTTOM: 3px;

PADDING-TOP: 3px;

}



/*個人圖示四邊框線寬度,下邊界值*/

IMG.profile {

BORDER-TOP-WIDTH: 0px;

BORDER-LEFT-WIDTH: 0px;

BORDER-BOTTOM-WIDTH: 0px;

MARGIN-BOTTOM: 5px;

BORDER-RIGHT-WIDTH: 0px;

}


/*整體框架邊界值,總寬度,依框架左上角為基準取相對位置,文字靠左對齊,背景圖片不重複置中對齊*/

#mainFrame {

MARGIN: px auto;

WIDTH: 1000px;

POSITION: relative;

TEXT-ALIGN: left;

background-

image:url(http://img230.imageshack.us/img230/5317/defaultlh.jpg); ← 這裡少打了一個分號

background-repeat: no-repeat;

background-position: center;

}


/*推薦這個部落格區塊高度、邊框空白值、寬度、文字大小、背景顏色、不重複向右向上對齊*/


#topbar {

height:25px;

padding: 5;

width: 100%;

font-size: 12px;

background-color:#ffffff;

background-repeat: no-repeat; ← 無作用

background-position: right top; ← 無作用

}


/*推薦這個部落格區塊超連結樣式*/


#topbar a:link {

COLOR: #333333;

TEXT-DECORATION: none;

}

/*#companyBar天空連結包覆在topbar區塊內,不過您的網誌找不到這個標籤,所以有關companyBar標籤均無作用,就不貼上佔回答字元了*/

#companyBar {

position: relative;

top: 7px;
z-index: 10;

color: #333333;

width: 150px;

float: left;

padding-left: 30px;

}


/*#adText廣告連結設定也是包覆在topbar區塊內,依網頁左上角為基準的上與左絕對位置*/

#adText {

position: absolute;

top: 7px;

left: 250px;

}


/*廣告連結設定超連結顏色*/

#adText a {

color: #333333;

}


/*推薦這個部落格區塊寬度,元素向右靠,文字置中,推薦人數文字顏色*/


#commend {

width:200px;

float: right;

text-align: center;


color: #3333 ← 色碼應為#333;或#333333;

} ← 這裡少了結束大括號




◆◆BOTSODG+~世界一空~◆◆







==============================
部落格搬家方法與使用心得 MT檔轉成XML檔
==============================

一、奇摩部落格到優仕網部落格---MT檔OK:

(一)方法:

01.加入優仕網的會員


02.新增部落格:

=>網址設定(輸入網址、下面的驗證碼。)

=>命名部落格(輸入名稱、上傳封面圖案和文字說明)

=>選擇外觀範本(依樣式有二欄、三欄等不同排法)

按「申請完成」就可以完成,之後都這些設定,都可以在管理後台修改。


03.部落格新增完畢,會看到

「所在位置:部落格名稱」下方「發表文章」鍵的隔壁

有「 [ 匯入其他部落格內容 ] 」選擇即可進入搬入畫面:

匯入來源:選WRETCH 無名部落格

上傳部落格要匯入的txt檔(如:tw-blog_2013-10-30_movable-type.txt),完成就能將文章順利匯入


若開有兩個部落格以上,也能從「我的部落格」看到「匯入他站文章」的按鈕

還有「優仕網的官方部落格」中寫到搬家的方法(含圖),是以痞客邦PIXNET為例。



(二)注意事項:

01.全部搬來文章預設都是「草稿」,需要每篇的重新發佈文章。

02.匯入的部落格所設的「文章分類」名稱,在優仕網會變更為「標籤」名稱。

「標籤」名稱可以新增,但無法刪除。

03.圖片、自訂欄位、瀏覽人數的部份,無法繼承之前的部落格。

04.文章中圖片鏈結的為奇摩部落格,需要更換重新上傳圖片。


(三)有關優仕網:

01.一個帳號支持開多個部落格,名稱能“英數“、“-”、“_”,字數3~20字之內。

02.部落格名稱可以自己設定,如:http://blog.youthwant.com.tw/帳號/部落格名稱/

03.可以隨時手動刪除或新增部落格,刪除:基本設定=>刪除部落格=>確定刪除。

04.文章一覽最多可以顯示9999篇文章。

05.想找回刪除的文章可以從「顯示文章的狀態」=>「已刪除的文章」找回。

06.大多的JavaScript語法都支持,元位(自由欄位)最多能設60個。

07.免費相本空間100MB

08.部落格含有內置廣告

09.有匯入功能但沒有匯出備份的功能

10.預設版面有官方、部落客上傳版面、有自己可簡單製作版面的功能也可編輯CSS語法



二、奇摩部落格到Blogger部落格---MT檔轉成XML檔:

(一)方法:

01.需要有Blogger的帳號。

02. 需用「Blogtrans」轉檔程式,將txt檔轉成xml檔

03.解開rar檔後,開啟blogtrans.exe

04.點「匯入」=>「MT檔」(如:tw-blog_2013-10-30_movable-type.txt)

成功可以看到旁邊會顯示所發佈的文章,點入可以見到內容

05.點「匯出」=>Blogger Atom XML=>輸入想要的檔名,如:blog.xml存檔


06.在管理後台的「設定」=>「其他」=>「匯入網誌」,就可以成功匯入文章



(二)注意事項:

01.匯入文章全部為公開狀態

02.文章的分類消失,全部文章需要重新設分類。

03.圖片、自訂欄位、瀏覽人數的部份,無法繼承之前的部落格。

04.文章中圖片鏈結的為奇摩部落格,需要更換重新上傳圖片。




(三)有關Blogger:

01.一個帳號支持開多個部落格,如:部落格名稱.blogger.com,後面的com會自動轉成國家縮寫

02.可以隨時手動刪除或新增部落格,刪除:「設定」=>「其他」=>「網誌工具」=>刪除網誌

03.文章一覽最多可以顯示100篇文章,一次最多能刪50篇文章。

04.誤刪的文章可以嘗試下面的方法,但請保持定期備份的習慣,在「網誌工具」中能備份。

可以嘗試:搜尋引擎輸入「site:部落格的網址」=>找到誤刪的文章=>「頁庫存檔」


或是Google Chrome 瀏覽器的網址列輸入「cache:http://部落格的網址」=>找到誤刪的文章=>「頁庫存檔」

05.文章編輯器沒有插入表格的功能、需要手動插入「繼續閱讀」


06.若發文文章時間不對,需要重新設定時區:「設定」=>「語言及格式」=>「時區」


07.可以自己設定的文章網址,可能“英數”、“-”。


08.部落格的圖片存在Picasa中,提供1G的空間。


09.部落格版面能用預設或參考網站教學,部分教學為英文,版面官方只有二欄無三欄設計。

10.預設版面的瀏覽人數、熱門文章、搜尋等功能,都需另外新增小工具才能實現。