close

             裝飾部落格語法大整理

如果你看到喜歡ㄉ圖片就按滑鼠右鑑後按內容會出現網址!再複製網址貼在語法的圖片網址看看有沒有出現.如沒有的話-看看有沒有相同的語法把原本的刪掉. 在把你的語法貼在下面或貼在最上面!!ok! 試試看唷~~


首先(開新視窗)登入奇摩到自己的部落格管理部落格面板設定自訂樣式在最下面輸入以下的語法


更新日期前ㄉ小圖片 

/*Module latest upup*/
#ymodupdate .mbd
.date{background:url(圖片網址) right left
no-repeat;font-size:120%;font-family:Art;}

更改部落格性別
#ymodprf .horos img{display:none;}
#ymodprf
.horos{width:100px;height:120px;background:url(圖片網址) center no-repeat;}


滑鼠語法
body{cursor:url(圖片網址)}
a:hover
{cursor:url(圖片網址)}


左右欄位小圖語法

/*Nav module list*/
.ycntmod .mbd ul.list li {background:url(圖檔網址) left .1em
no-repeat;padding-left:17px;margin-bottom:3px;_margin-bottom:3px;_line-height:1.5em;}
.ycntmod .mbd ul.list li.more {margin:-3px 0 0
-3px;text-align:right;background:url(圖檔網址) 48px center no-repeat;}

黃色字是設定左右欄位內容小圖,就是旁邊的愛心

藍色字是設定"所有文章"和"更多回應"前的小圖,就是旁邊的布丁

圖檔網址可以到圖檔網址1或是圖檔網址2或是自己上網找

找到你要的圖片按右鍵點內容會看到網址(URL,)那個就是你要的圖片網址複製就好哩!

接下來登入奇摩帳號→到自己的部落格→管理部落格→面版設定→自訂樣式→貼上語法就好了!



連結顏色.訪問過連結顏色.執行中連結顏色

a:link {color:#ccccff}    //連結顏色(大小圖內文字顏色)
a:visited {color:#ccccff}   //訪問過連結顏色 (招呼與顏色)
a:active {color:#ccccff}   //執行中連結顏色

 

紅色部分只是說明不用複製唷﹋黃色部分為色碼可以修改

色碼可以到這找↓

http://www.powmo.com/ac.html
 

用CSS把文章標題前有圖案!
首先(開新視窗)登入奇摩→到自己的部落格→管理部落格→面板設定→自訂樣式→在最下面輸入
/*article content module*/
.yblogcnt .blgtitlebar {margin-bottom:10px;zoom:1;}
.yblogcnt .blgtitlebar h2 {font-size:126%;font-weight:bold;background:url(小圖網址) no-repeat;padding-left:32px;}
.yblogcnt .blgtitlebar h2 a {color:#195693; padding-right:5px;}

 

部落格橫向動畫語法

 /*Background image for blog title*/
#yblogtitle .mbd {background-image:
url(圖片網址);
background-repeat: no-repeat}

部落格文章背景換圖語法
/*Background color for main content body*/
.yc3pribd .mbd, .yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table,
 #yusrinfo table, #yusrintro p {background: url(圖片網址);}

部落格背景底換圖語法
/*Background image for whole page*/
body {background-image: url(圖片網址); background-repeat: repeat}

背景固定
body {
background-image: url(圖檔網址);
background-repeat:no-repeat ;
background-position :0% 100%;
background-attachment: fixed;}

部落格左右小圖背景
管理部落格 → 面板設定 → 自訂樣式 → 在到CSS將下面↓語法複製,貼在CSS語法欄內CSS語法欄內內沒有   /*Nav module body*/ 語法.就直接在CSS語法欄內最下面貼上.有的話請(覆蓋原先的設定)=>貼在最下面ㄉ語法唷!

/*Nav module body*/
.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft{ background: #FFFFFF;background-image: url(圖檔網址) ;

color:#ff0000}

 

左右兩側的標題背景語法
/*Nav module header*/
.yc3sec .mhd, .yc3subbd .mhd, .yc3sec .mhd a, .yc3subbd .mhd a,.yc3sec .mhd a:link, .yc3subbd .mhd a:link,.yc3sec .mhd

a:visited, .yc3subbd .mhd a:visited{ background:#FBF2CA; color:#90620E;background-image:url(圖檔網址);


招呼語背景
 
更改紅色部份,並複製語法
 
#yblast .bg {zoom:1; filter:alpha(opacity:82); background: url(圖片網址) no-repeat}

 註:opacity:50→調整透明度,數字越小越透明
 
         repeat→圖片重覆,填滿整個招呼語外觀
         (no-repeat→圖片不重覆)


自定欄位圖片

按圖片連結:


 src="圖片網址" width="130" height="64">


一般連結:

  • 網址名稱

    例如:

  • href=http://tw.myblog.yahoo.com/gray-0920398237>小灰的部落格
     

    ★訂閱部落格語法
    div#btnsbsrb a{display:block;width:134px;height:110px;overflow:hidden;background:url(http://img220.imageshack.us/img220/6721/4hm6.gif) no-repeat;margin:0;}

    div#btnsbsrb_nologin a{display:block;width:134px;height:110px;overflow:hidden;background:url(http://img220.imageshack.us/img220/6721/4hm6.gif) no-repeat;margin:0;}

    部落格網頁最外圍線框語法

    body{
    border-right: 10px outset;
    border-top: 10px outset;
    border-left: 10px outset;
    border-bottom: 10px outset;border-color:#0000FF;}


    html{SCROLLBAR-FACE-COLOR: #000000;

    SCROLLBAR-HIGHLIGHT-COLOR: #6c48d8;

     SCROLLBAR-SHADOW-COLOR: #0048fc;

     SCROLLBAR-3DLIGHT-COLOR: #000000;

    SCROLLBAR-ARROW-COLOR: #d8b4d8;

    SCROLLBAR-TRACK-COLOR: #000048;

     SCROLLBAR-DARKSHADOW-COLOR: #6cd800;

     SCROLLBAR-BASE-COLOR: #480090}

    文章大小字CCS語法教學

    font-family:標楷體;     如果你不想更換字體~就刪掉這些字~或更改成你想要的字體

    font-size:150%;              依你自己的喜好~~更改數字~~改成自己喜歡的大小

    color: #0066ff;             如果你不想更改文字顏色~就刪掉這些字~或更改成自己喜歡的顏色~色碼表

     

    /*Text color for blog title*部落格標題字體顏色*/
    #yblogtitle .text {color: #660099;font-family:標楷體;font-size:150%;}


    /*Text color for main content*文章欄位字體顏色*/
    .yc3pribd .text {color: #0066ff;font-size:150%;font-family:標楷體;}


    /*Text color for module*左右欄位字體顏色*/
    .text {color: #0066ff;font-size:150%;font-family:標楷體;}

     

    自己更改測試~~找出自己看起來最順眼的大小..顏色..字體..

    如果你是新手..對CSS不熟..會擔心CSS亂掉..

    你可以先將原來的CSS語法複製下來..貼在記事本..

    如果亂掉了..再貼回來就好了..


     


    線框語法

    /*Shared rounded corner for all modules 紫緞蕾絲*/
    .ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
    .ycntmod .rctop {zoom:1;background:url(http://hk.geocities.com/zxcvbnm000qwe/f01.gif) left top no-repeat;margin-right:10px;}
    .ycntmod .rctop div {background:url(http://hk.geocities.com/zxcvbnm000qwe/f02.gif) right top no-repeat;height:34px;font-size:0;position:relative;right:-10px;}
    .ycntmod .rcbtm {zoom:1;background:url(http://hk.geocities.com/zxcvbnm000qwe/f03.gif) left bottom no-repeat;margin-right:10px;}
    .ycntmod .rcbtm div {background:url(http://hk.geocities.com/zxcvbnm000qwe/f04.gif) right bottom no-repeat;height:26px;font-size:0;position:relative;right:-10px;}
    .ycntmod .rcl {padding-left:19px;background:url(http://hk.geocities.com/zxcvbnm000qwe/f05.gif) repeat-y;}
    .ycntmod .rcr {zoom:1;padding-right:18px;background:url(http://hk.geocities.com/zxcvbnm000qwe/f06.gif) right repeat-y;}
    .ycntmod .text {position:relative;word-break:break-all;}
    .yc3pribd .ycntmod{overflow:visible;}
    .yc3pribd .ycntmod .yblogcnt{overflow:hidden;}
     

    /*紫緞蕾絲游標圖*/
    body{cursor:URL(http://hk.geocities.com/zxcvbnm000qwe/fi01.ani);}
    a:hover{cursor:URL(http://hk.geocities.com/zxcvbnm000qwe/fi02.ani);}


    部落格文字標題變圖片
    #yblogtitle h1 {
        display:block;
        float:left;
        background:url(網址) 0 0 no-repeat;
        width:120px;
        height:50px;
        font-size:0;
        line-height:0;
        text-indent:-5000px;
        overflow:hidden;
        cursor:pointer;
        cursor:hand;}

    貼影片在部落格

    用文章語法打勾觀看貼上語法下面!之後取消打勾後出現影片即可~~

    影片右邊寫=>Embed的框裡複製裡面的語法如:

     

    ps:有數字的地方可以調影片螢幕的大小

  • arrow
    arrow
      全站熱搜

      babyhouseyumi 發表在 痞客邦 留言(1) 人氣()