非學不可

《數位時代》公佈   2010年台灣100大網站排行榜

依照這個排行榜，有些名次還真超乎想像。

例如、痞客已經躍上台灣第二大部落格平台，僅次於無名。

104人力銀行排行22名，顯然景氣真差，失業率上升。

而Facebook的火紅則是想像得到。。

plurk噗浪樣式css  更換噗浪卡馬karma值背景圖css樣式  讓卡馬值直衝100的plurk噗浪小技巧  文/Sophie

按一下分享到你的臉書Facebook

按一下分享到噗浪Plurk

《網路行銷提昇人氣部落格技巧》搜尋引擎的進步，除了網域名稱、你還得注意網站名稱     文/灰色金盞花

有十年上下網齡的朋友可以回想一下，當年上網打開瀏覽器，『我的最愛』裡頭是不是密密麻麻一大堆網站書籤。
而今、『我的最愛』裡頭，這些書籤的數目是不是明顯變少了？
大約只剩下最常上的網站會加到『我的最愛』，其餘則是在想瀏覽時才會到搜尋引擎輸入關鍵字搜尋，然後再連過去。

plurk噗浪樣式css版型，如何更換plurk河道噗浪背景圖，SNSD少女時代噗浪CSS樣式背景圖   文/Sophie

按一下分享到你的臉書Facebook

按一下分享到噗浪Plurk

(這是完成圖)

上篇提到需要修改的細節和重點，現在開始動手實際的將痞客二欄版型轉成三欄式的。

上篇提到、需要掌握全寬，本文寬，和側欄寬。所以先找出這三個地方來。

#body-div{

  (這是完成圖)

此範例用的是痞客的基本模板。粉紅色那個。   文/灰色金盞花(鹿老師)

在動手做之前，先說明四個重點。

plurk噗浪樣式css教學─下載套用噗浪css樣式  文/Sophie

按一下分享到你的臉書Facebook

按一下分享到噗浪Plurk

Sophie祝痞客所有的朋友新年快樂^^

/*-----HAPPY NEW YEAR BY SOPHIESTUDIO*/ /*--------------------------reset*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0;padding:0;} table {border-collapse:collapse;border-spacing:0;} fieldset,img {border:0;} address,caption,cite,code,dfn,em,th,var {font-style:normal;font-weight:normal;} ol,ul {list-style:none;} caption,th {text-align:left;} h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;} q:before,q:after {content:'';} abbr,acronym {border:0;} pre{font-size: 1em ;} .article-content{ _height: 1% ; overflow: hidden ; _overflow: none;} .article-content p{margin-bottom: 1em;} a { text-decoration: none; } /*a:focus { -moz-outline-style: none; }*/ br{letter-spacing: normal;} input{ border:1px solid #ccc; padding:3px; font:12px arial; color:#666; -khtml-border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px;} /*--------------------------all setting*/ HTML { SCROLLBAR-FACE-COLOR: ; SCROLLBAR-HIGHLIGHT-COLOR: ; SCROLLBAR-SHADOW-COLOR: ; SCROLLBAR-3DLIGHT-COLOR: ; SCROLLBAR-ARROW-COLOR: ; SCROLLBAR-TRACK-COLOR: ; SCROLLBAR-DARKSHADOW-COLOR: ; overflow-x:; } body { background:#000000; font-size:12px; font-family: arial;} #blog-main{} #article-main{} a {color:#c33;} a:hover {color:#f80;} #body-div{} /*--------------------------authority*/ #authority{ background:#000000; width: 900px; margin:0 auto; height:20px; padding-top:10px;} #authority a{ padding:3px 5px; -khtml-border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; background:#d40d37; color:#fff;} #authority a:hover{color:#963;} #authority a#newpost {margin-left:20px;} #authority a#backstage {} /*--------------------------container*/ #container{ width:100%; background:url() left top repeat-x #000000;} #container2{ width:900px; margin:0 auto; position:relative; background:url(http://pic.pimg.tw/sophieyjl/4b700dac513d5.jpg?v=1265634732) left top repeat-y;} #container3{} #extradiv8{ position:relative; width: 20px; height: 320px; position:absolute; left: -20px; top:0; background:#000000;} /*--------------------------header*/ #header{ height: 370px; background:url(http://pic.pimg.tw/sophieyjl/4b700c7ab16e9.jpg?v=1265634429) no-repeat;} #login-bar{ text-align: right; height:30px; line-height:30px; color:#FFFFFF} #login-bar a{color:#FFFFFF} #banner{ margin-left: 350px; padding:20px 0;} #banner h1 a{ position:relative; top:180px; right:150px; font:20px arial; color:#d00;} #banner h2{ position:relative; top:165px; right:150px; font:12px arial; color:#963; margin:5px 0; } #banner .skip link {display:none;} #banner #blog-category{ position:absolute; right:30px; top: 340px; color:#c33;} /*--------------------------navigation*/ #navigation{ position:absolute; top: 340px; left: 400px;} #navigation li{ float: left; padding:0 10px; border-right:2px dotted #eab087;} #navigation a{color:#FFFFFF;} #navigation a:hover{color:#ffc3d0;} #navigation #link-album{} #navigation #link-blog{} #navigation #link-guestbook{} #navigation #link-profile{border:0;} /*--------------------------main*/ #main{ overflow: hidden; _overflow: none; _height: 1%; padding-top:20px;} /*--------------------------content*/ #content{ overflow: hidden; float: left; width: 620px; margin-left: 20px; display:inline;} #spotlight{ border-bottom:1px dashed #AA0C0C; padding-bottom:5px; margin-bottom:20px;} #spotlight h5{ font:bold 15px arial; height: 20px; background:#ffd7d5; line-height: 20px; -khtml-border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; padding:5px; color:#a07c63;} #spotlight-text{ margin:10px; line-height:160%; color:#666;} #article-area{} #article-area .article-area-title, #view-mode{ line-height:150%; color:#963; text-align:right;} #article-box{} .article{ background:url() left bottom repeat-x; padding-bottom:15px; margin-top:20px; margin-bottom:20px;} .article-head{ background:url(http://pic.pimg.tw/sophieyjl/4b71198f74cf5.jpg?v=1265703311) left top no-repeat; padding-left: 45px;} .publish { text-transform:uppercase; font:bold 13px Century Gothic; color:#d00;} .title img{display:none;} .title a{ font:bold 15px arial; color:#000;} .title a:hover{color:#996600;} .article-body{ margin:10px; line-height: 160%; text-align: right; color:#8b7761;} .article-content{ margin:10px 0; text-align: left; letter-spacing:0.05em; color:#444; line-height:170%;} .bookmark{} .author{} .forward{} .article-footer{ color:#8b7761; margin:10px; line-height:160%;} .history{} .refer{} .back-to-top{ text-align:right;} .back-to-top a{ text-transform:uppercase; font:11px CEntury Gothic; padding: 3px 5px; background:#ffe0cb; -khtml-border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px;} /*--------------------------list*/ .main-list {} .main-list table{ width:95%; margin: 10px auto;} .main-list th{ background:#a07c63; padding:5px; color:#fff;} .list-num{display:none;} .list-date {width:100px; color:#666; font:11px Century gothic;} .list-title{} .main-list td{ padding:5px; border-bottom:1px dotted #ccc;} /*--------------------------post-box*/ .user-post-box{ margin: 20px 10px;} .user-post-title{ height:40px; background:#FFFFFF; color:#D91000; font-size:0;text-indent: -5000px; margin-bottom:10px;} #trackback-box .user-post-title{} #comment-box .user-post-title{ background:#FFFFFF;} .post-comment{ width:185px; height: 65px; margin:0 0 20px 400px;} #content .post-comment a{ font-size:0;text-indent: -5000px; display:block; width:100%; height:100%;} .single-post{ overflow: hidden; _overflow: none; _height: 1%; background:#ffe0cb; margin-bottom:10px; -khtml-border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; padding:10px; line-height:160%;} .post-info{ color:#ae8162; margin-bottom:5px;} .post-photo{ float: left; width: 65px;} .post-photo img{ border:1px solid #aaa; padding:3px; background:#fff; width: 50px; height:50px;} .post-text, .reply-text{ float: right; width: 510px;} .reply-text{ margin-top:10px; color:#963;} .reply-text p{} .single-post.secret{} .single-post.secret .post-text{ float: none; width: auto;} #trackback-box {} #trackback-box h3 {} #trackback-box SPAN {} #trackback-box #trackback-url{ margin:10px 0;} #trackback-box input#trackback-input{width:400px;} #trackback-text {} #trackback-text .single-post {} #trackback-text .post-info {} #trackback-box .post-text{ width:auto ; float:none ;} /*--------------------------comment-form */ #comment-form { background: #FFD7D5; padding: 15px; margin: 10px auto; -khtml-border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px;} #comment-form p { color: #bbb; text-align: right; margin: 0px 10px 5px; } #comment-form table { width: 100%; border: none;} #comment-form table tr.comment-form-title { display: none; } #comment-form table td { color: #666; vertical-align: top; border: none; padding: 2px 5px;} #comment-form table th { color: #886852; vertical-align: top; width: 70px; border: none; text-align:right; padding: 2px 5px;} #comment-form table th font { display: none; } #comment-form input { height: 17px; border: none; border-bottom: 1px solid #c5bf9b; background: none; width:90%;} #comment-form input.radio { border: none; width: auto; background: none;margin:0; padding:0;} #comment-form input#blogcommenttext_name{width: 87%; width: 85%\9;} #comment-form input#send-comment{ width: 70px; height:auto; padding:5px; border:0; background:#ff8800; color:#fff;} #comment-form textarea { width: 99%; height: 90px; font-family: Arial; font-size: 11px; line-height: 18px; color: #000; border: 1px solid #ccc; background: #fff; overflow:auto;} /*--------------------------pages*/ .page{ padding:10px; text-align:center;} .page a, .page SPAN{ padding:3px 5px; line-height:150%; margin:0 3px;} .page SPAN{ -khtml-border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; background:#ccc;} /*--------------------------links*/ #links{ overflow: hidden; float: right; width: 210px; margin-right: 20px; display:inline; } #links-row-1{} #links-row-2{} .box{ margin-bottom:10px;} .box-title{ border-top:1px dashed #ffffff; border-bottom:1px dashed #ffffff; height: 30px; padding-left:20px; font:bold 13px arial; line-height:30px; color:#ed78ac; overflow:hidden;} .box-text { padding: 10px 5px; line-height:160%;} .box-text a{color:#5c4e44;} .box-text a:hover{color:#803831;} .box-more{ text-align:right; margin: 5px 0;} .box-more a{ font-size:11px; font-size:10px\9; color:#fff; background:#D40D37; padding:3px 5px; -khtml-border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px;} .box-more a:hover{ background:#fee;} #headshot{} #headshot ul{ overflow: hidden; _overflow: none; _height: 1%;} #headshot li{ width:90px; float: right;} #headshot li#headshot-img{ float: left;} #headshot li#friend-apply{} #headshot li#send-message{} #recent-article img{display:none;} #calendar table{ width: 90%; margin:0 auto;} #calendar th, #calendar td{ text-align:center; border:1px solid #ffe0cb;} #calendar .calMonthHeader{} #calendar td a{ font-size:11px; display:block; color:#fff; background:#963; -khtml-border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px;} .murmur-time{ color:#c33; font:bold 12px Century Gothic; margin-bottom:2px;} .murmur-text{} #visitor,#crumb{} #visitor ul,#crumb ul{ overflow: hidden; _overflow: none; _height: 1%;} #visitor li,#crumb li{ float: left; line-height:0; margin:0 2px 2px 0;} #visitor li img, #crumb li img { width:45px; height:45px;} #broadcast ul{ overflow: hidden; _overflow: none; _height: 1%;} #broadcast li{ font:12px arial !important; border-bottom: 1px dotted #f1c4a5 !important} #broadcast .murmurs-content a{color:#c33;} #broadcast .murmurs-content span{ display:block; color:#333;} #search{} #search ul{ overflow: hidden; _overflow: none; _height: 1%;} #search li{ float: left; margin-right:5px; display:inline;} #search input{ border:1px solid #eee; height:22px; padding:3px; -khtml-border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px;} #search input#search-target{ height:14px; width:140px; background:#fff; border-top:1px solid #bbb; border-left:1px solid #bbb;} #search input#search-submit{ margin:0; width: 40px; font-size:12px; background:#eee; border-right:1px solid #bbb; border-bottom:1px solid #bbb;} #feed {} #announce{} #hot-article {} #category h6{} #category li{} #category .box-more {} #archive select {} #favorite select {} #latest-comment li, #latest-trackback li, #subscription li{ margin-bottom:3px;} #latest-comment a, #latest-trackback a, #subscription a{ display:block; width:99%;} #mylink {} #mylink .inner-box{} #mylink .inner-box h6{ font-weight:bold; color:#c33;} #mylink .inner-box li{ margin-left:12px;} #counter{} #counter SPAN{} .folder{} .folder .box-title{} .folder .box-text{} #powered{} /*--------------------------footer*/ #footer{ clear:both; background:url(http://pic.pimg.tw/sophieyjl/4b70100340b81.jpg?v=1265635331) left top no-repeat #000000; padding:70px 0 30px; text-align: center; line-height:160%; _height:1%;} #footer p{color:#fff;} #bottom a:hover{color:#333}

複製css原始碼‧前往痞客後台樣式設計精靈直接貼上套用即可

痞客後台也有唷，可以直接去套用呢!

《網路行銷提昇人氣部落格技巧》四.部落格名稱、文章標題    文/灰色金盞花(鹿老師)

『寫部落格就是希望有人看，尤其是同好，那麼做一點改變，可以得到更好的效果』

『想隨性而寫，怎麼做都行，但對人氣這回事就不能抱怨』。

餐廳裡的食物，味好料實在，但招牌隱晦，門面斑駁，店內髒亂，卻怨沒人識貨。

並不是東西不好吃，而是你不懂得做生意。

談網頁設計CSS樣式排版?表格排版?    文/sophie

網頁用css排版？還是用表格排版？是一個談到快爛掉的話題了。目前各大網站皆用css排版，這也成為網頁設計的主流，熟優熟劣不言可喻。

正巧 sophie 最近在做一個網站case，順便把自己對網頁設計的感想做一個記錄。

部落格當紅的現在，網頁設計已經不再熱門，每個玩部落格的玩家，幾乎都知道要改部落格的版型需要要一種語法叫做css (cascadind style sheet)。

部落格經營 痞客css樣式教學 語法 背景 痞客部落格版型 http://sophiestudio.pixnet.net/blog