香港新浪網MySinaBlog 精選話題工具
| 10 May, 2009 | 一般 | (2 Reads)

  • #main就係「MySinaBlog.com | 主頁 | 管理面版 | 資料夾 」呢行字以下,FOOTER以上既BLOG內容。
    #main{ /* the middle region between the "top_menu" & "footer" */
    float : left;
    background-color : #FFFFFF;/*你可以改成自己想要的顏色*/
    background: url(
    http://cheese326.mysinablog.com/resserver.php?resource=awa1.gif); /*呢句係我後加既,就姐係加上圈圈背景圖*/
    }
  • #main_content就係整個blog內容既排列。
    #main_content{ /* the content's region */
    float           : left; /*left就姐係主內容係左邊,相反right就會變左主內容係右邊,side bar既內容去o左左邊*/
    width           : 530px; /*主內容既寬度,可以唔改*/
    }
  • #content係內容既位置調教。可以不改。
    #content{
    padding-top : 15px; /*離上15px*/
    padding-right: 15px; /*離右15px*/
    }
  • #main_sidebar就係隔離sidebar既寬度同位置。
    #main_sidebar{ /* the sidebar's region */
    float            : right; /*如果你既內容係左,呢個當然係set right啦!相反內容係右的話,呢個就要set right喇!*/
    width            : 230px; /*sidebar既寬度*/
    }

 


好,宜家開始改既係每一個post,開始會有d難度,要小心留意顏色哦!

  • 搵到以下common layout:
    /***********************************************/
    /* common layout                         */
    /***********************************************/
  • div.c_outline就係上圖橙色果部分。如有需要可加框框,如:border: 1px dotted Black;
    div.c_outline{ /* the outline */
    width       : 100%;
    padding     : 0px;
    }
  • div.c_title即是紅色框框題目名果行。在示範中我將所有邊框刪除,然後用花花作背景圖。
    div.c_title{ /* title */
    padding-top         : 2px;
    padding-left        : 5px;
    height              : 20px;
    font-family         : lucida grande, verdana, arial, sans-serif;
    font-size           : 13px;
    font-weight         : bold;
    line-height         : 1.5;
    color               : #FFFFFF; /*字顏色改為藍色navy*/
    text-align          : left; /*對齊改為center*/

    background-color    : #518CCE;
    border-top          : 1px solid #2E66A5;
    border-left         : 1px solid #2E66A5;
    border-right        : 1px solid #2E66A5;
    background-image: url(
    http://cheese326.mysinablog.com/resserver.php?resource=line01.gif); /*加上花花背景圖及其他細節*/
     background-repeat: no-repeat; /*加上花花背景圖及其他細節*/
     background-position: center;/*加上花花背景圖及其他細節*/
    }
  • 以下係改紅色框框題目既字及mouse移過去時變色。
    .c_title a, .c_title a:link, .c_title a:visited{
    color               : #FFFFFF; /*因為背景係白色所以將字改成藍色#6495ED*/
    text-decoration     : none;
    background          : transparent;
    }
    .c_title a:active,.c_title a:hover{
    color               : #FFFFFF; /*因為背景係白色所以將字改成藍色blue*/
    text-decoration     : none;
    background          : transparent;
    }
  • .c_content_space就係紫色框框既地方。
    .c_content_space{ /* the content */
    padding             : 5px;
    height              : 100%;
    font-family         : lucida grande, verdana, arial, sans-serif;
    font-size           : 12px;
    background-color    : #F3F8FC; /*現改為透明 transparent; */
    border              : 1px solid #2E66A5; /*邊框,全行刪除*/
    text-align   : left;
    background: url(
    http://cheese326.mysinablog.com/resserver.php?resource=60760-tetubou_k11.gif) no-repeat top left; /*這是我後加上去的,就是那倒轉的三個人作背景圖,不重複,位置對齊上方及左方*/
    }
  • 以下是超連結之顏色變化,請自行改變你要的顏色。
    .c_content_space a:link        
    .c_content_space a:visited     
    .c_content_space a:active      
    .c_content_space a:hover       
  • #post_index即是 上一篇 | 下一篇 藍色框框。
    #post_index{ /* e.g. Previos Page | Next Page */
    margin-bottom       : 10px;
    text-align          : center;
    font-size           : 12px;
    }
  • #post_index a,#post_index a:link,#post_index a:visited,#post_index a:active,#post_index a:hover就係上一篇 | 下一篇既超連結變化,不詳解喇。
  • div.post_content即是黃色框框既地方。
    div.post_content{ /*the post's content */
    padding         : 4%;
    padding-top  : 20px;
    color           : #333333; /*可改字顏色*/
    font            : 12px lucida grande, verdana, arial, sans-serif;
    overflow        : hidden;
    margin-bottom   : 0px;
    width           : 90%;
    word-wrap       : break-word;
    overflow        : hidden;
    line-height     : 1.8;
    text-align  : left;
    background-color: white; /*這是我後加上的背景色為白色*/
    filter:alpha(opacity=80); /*這是我後加上的,透明度為80%,會顯示為半透明,將.c_content_space的三個人倒轉既背景圖輕輕透出又唔怕遮住d字*/

    }

 


| 10 May, 2009 | 一般

 

今次教既係「MySinaBlog.com | 主頁 | 管理面版 | 資料夾 」呢行字以下,FOOTER以上既BLOG內容。

#main就係「MySinaBlog.com | 主頁 | 管理面版 | 資料夾 」呢行字以下,FOOTER以上既BLOG內容。
#main{ /* the middle region between the "top_menu" & "footer" */
float : left;
background-color : #FFFFFF;/*你可以改成自己想要的顏色*/
background: url(
http://cheese326.mysinablog.com/resserver.php?resource=awa1.gif); /*呢句係我後加既,就姐係加上圈圈背景圖*/
}

 

 

可不要background-color

改為圖片背景

 


| 10 May, 2009 | 一般

因為改左LOGO大小,所以請修改#document之width為800px,整個blog的寬度就會改變。
#document{ /* the blog's main frame */
padding             : 0px; /*可以不改*/
width                : 760px; /* blog's width ←改為800PX或依你自己個LOGO來改。*/
margin-left         : auto;  /*對齊為自動,可以不改*/
margin-right        : auto; /*對齊為自動,可以不改*/
border-right        : 1px solid #1E436C; /*這是BLOG右邊的幼線,可依照自己的喜好修改。*/
border-left         : 1px solid #1E436C; /*這是BLOG左邊的幼線,可依照自己的喜好修改。*/

http://sugarblythe.mysinablog.com/index.php?op=ViewArticle&articleId=71134


| 10 May, 2009 | 一般

 

HEADER   HIGHT[318   SUCCESS

另外要改既係#header,就是放logo既地方。因為logo既大小改變,要將高度改成你的logo高度。
#header{
padding     : 0px;
margin      : 0px;
height      : 100px; /* header's height改成318*/
width       : 100%;
background  : url(http://cheese326.mysinablog.com/resserver.php?resource=59486-logo.gif); /* header's image 改成你自己的圖網址*/
}


| 10 May, 2009 | 一般

 

logo


#title{ /* the blog's title */

padding             : 0px 20px 0px 20px;
position            : relative;
top                 : 30%;  [標題頂高度]
text-align          : left;
font                : bold 25px lucida grande, verdana, arial, sans-serif;
}


#title a{

color           : #66FFFF;   [文章雜錦字有顏色]
text-decoration : none;
}


| 10 May, 2009 | 一般 | (1 Reads)

 

#title a:hover就係滑鼠移去BLOG時既狀態。例如本身BLOG名為白色,滑鼠移過去時會變黃色。[按文章雜錦字有色彩出現]
#title a:hover{
color               : Yellow;
text-decoration     : none;


SINA BLOG米唐遊樂誌SUCCESS


| 10 May, 2009 | 一般

要改靚個BLOG唔少得一個靚LOGO啦!
也不少得一兩個繪圖軟件旁下身。(請來信register.sugar@gmail.com)

詳細CSS之語法可參考:
http://www.casys.com.tw/news/ReadNews.asp?NewsID=3

改LOGO
準備好了嗎?首先做一個LOGO。因為時間上既關係已經做左一個800px X 316px既LOGO。

  • 因為改左LOGO大小,所以請修改#document之width為800px,整個blog的寬度就會改變。
    #document{ /* the blog's main frame */
    padding             : 0px; /*可以不改*/
    width                : 760px; /* blog's width ←改為800PX或依你自己個LOGO來改。*/
    margin-left         : auto;  /*對齊為自動,可以不改*/
    margin-right        : auto; /*對齊為自動,可以不改*/
    border-right        : 1px solid #1E436C; /*這是BLOG右邊的幼線,可依照自己的喜好修改。*/
    border-left         : 1px solid #1E436C; /*這是BLOG左邊的幼線,可依照自己的喜好修改。*/

    }
  • 另外要改既係#header,就是放logo既地方。因為logo既大小改變,要將高度改成你的logo高度。
    #header{
    padding     : 0px;
    margin      : 0px;
    height      : 100px; /* header's height改成318*/
    width       : 100%;
    background  : url(http://cheese326.mysinablog.com/resserver.php?resource=59486-logo.gif); /* header's image 改成你自己的圖網址*/
    }
  • #title就係你logo上面既BLOG名,你可以根據你既LOGO設計改變其位置。
    #title{ /* the blog's title */
    padding             : 0px 20px 0px 20px;
    position            : relative;
    top                 : 20%;  /*依自己LOGO位置而改成80%*/
    text-align          : left; /*依自己LOGO位置改變:靠左LEFT、置中CENTER、靠右RIGHT*/

    font                : bold 25px lucida grande, verdana, arial, sans-serif;
    }
  • #title a就係BLOG名,可調教其顏色。
    #title a{
    color           : White;
    text-decoration : none;
    }
  • #title a:hover就係滑鼠移去BLOG時既狀態。例如本身BLOG名為白色,滑鼠移過去時會變黃色。
    #title a:hover{
    color               : Yellow;
    text-decoration     : none;
    }
  • .description就係blog名下面果句介紹你的網誌(描述)
    .description{ /* the blog's description */
    font            : bold 12px lucida grande, verdana, arial, sans-serif;
    color           : #ffffff;
    line-height     : 1.5;
    }
  • #top_menu就係寫「MySinaBlog.com | 主頁 | 管理面版 | 資料夾 」果行。
    #top_menu{  /* the horiozontal menu under the header */
    width           : 100%;
    height          : 30px;
    text-align      : left;/*對齊方法:靠左left、置中center、靠右right*/
    font            : 12px lucida grande, verdana, arial, sans-serif;
    color           : black;/*可改變其字體顏色*/
    background      : transparent url(
    http://mysinablog.com/templates/sina_default/img/top_menu.gif) repeat-x top left;/*可依你喜好改變其背景圖片,在此例未有更改*/
    }
  • 以下一堆係關於「MySinaBlog.com | 主頁 | 管理面版 | 資料夾 」果行既連結變化。
    #top_menu a 連結
    #top_menu a:link 一般連結
    #top_menu a:visited 參觀過的連結
    #top_menu a:active 正在執行的連結
    #top_menu a:hover 當滑鼠移到連結上
    #top_menu_nav 其位置

 


| 9 May, 2009 | 一般
<img style=

wave Effect, image effects, myspace image effect, myspace image wave effect


| 1 May, 2009 | 一般 | (5 Reads)
自訂欄位語法:
<embed src=http://img90.imageshack.us/img90/6991/blackclocks1lc0.swf
width=140 height=210 </embed>
 
自訂欄位語法:

<embed src=http://blog.roodo.com/sos950624/432e439e.swf
width=140 height=210 </embed>


 
自訂欄位語法: 

<embed src=http://img90.imageshack.us/img90/6093/blackclocks4runqq1.swf
width="140" height="210" FlashVars="go=
輸入文字"></embed>

 

 

<embed src=http://img406.imageshack.us/img406/7886/blackclocks6ii6.swf
width=140 height=210 </embed>

 

<embed src="http://blog.roodo.com/sos950624/9d6ffd2d.swf"
width="140" height="210" FlashVars="go=
輸入文字"></embed>



| 1 May, 2009 | 親親跑馬燈2款 | (12 Reads)

http://hk.myblog.yahoo.com/funfunworld@ymail.com/article?mid=113


 

<embed src="http://qqmimiq.googlepages.com/notice_flykiss.swf" width="250" height="25" FlashVars="txt=輸入文字">

<embed src="http://qqmimiq.googlepages.com/notice_shykiss.swf" width="250" height="25" FlashVars="txt=輸入文字">

 

 

 

 

引用 : http://www.wretch.cc/blog/lafite2230/21161326#comment237378643

引用(0)

共6個回應


Next