1.2.15

↑部落格達人變裝秀-BLOG徹底改造零限制

  打造超完美自製部落格範本教學專書

  歷經幾個月的磨難,終於嘔心瀝血完成這部著作,除了封面設計之外,包括內頁排版、範本規劃、版面繪製、撰寫程式、跨瀏覽器測試全部一手包辦,完稿那天,我深深被一種終於從河溝裡爬上陸地的感動所震撼。

  部落格達人變裝秀是第一本華文Blogger範本設計書籍,用輕鬆活潑的筆法和豐富多變的範例引導部落客製作專屬的部落格版型,從此,隨處可見的共享大眾臉部落格out,獨一無二的數位臉孔才是王道

  書中以天馬行空的創意設計範本,總共有十個精美範例,風格和色彩計畫包羅萬象,無論偏好甜美可愛、成熟華麗或簡約個性都能符合期待,搭配的版型架構多樣豐富-三欄式、橫向側欄、圖像選單、Flash動畫等,令部落格不但實用美觀,更加處處驚喜(別忘了拉動捲軸看看文章下方的範本截圖和示範網址喔!)。

Q:這本書適合哪些族群閱讀呢?
A:厭倦一層不變範本的部落客、想學習CSS排版的初學者、對自製範本有興趣的設計師、喜歡支持和收藏好書的讀者、小雪球和愛貓咪的粉絲們(裡面用了很多喵喵小姑娘的照片,歡迎宅男貓以美少女寫真集的心態購入)。

Q:這種專門電腦書會不會很枯燥乏味又麻煩?
A:全書頁面皆為全彩,排版清新簡約帶有童趣,有美麗的風景圖和插畫,教學過程就像在讀者面前展示範本的小故事,所有程式碼都可以從光碟拷貝複製,也能用上傳的方式,立即將部落格套用成喜歡的範例。

Q:完全沒有網頁設計基礎,也能看懂這本書嗎?
A:保證沒問題!經過對程式碼很陌生的雪球姨測試,只要按書中步驟操作,任何基礎的部落客都能暢行無阻。

Q:對這本書中有一些部分不太明白,要到哪裡發問?
A:有任何疑問、建議和交流都歡迎在這裡留言,或是寫E-Mail給我,我會用最快的速度回應*^^*。

Q:哪裡能購買到這本書呢?
A:全省各大書局都有販售,文章最下方有網路書局的購書頁面連結,在Google輸入書名也能找得到喔!

by雪球媽


  豐富多樣的範本         由淺而深的教程
  輕鬆活潑的解說         一鍵套用的檔案
  貼近潮流的設計         溫馨可愛的圖像
  突破框架的思維         值回票價的光碟

範本:淺藍甜心     特色:清爽簡約、淡雅信紙



範本:音樂童話     特色:黑白琴鍵、橫向側欄



範本:璀璨花語     特色:繽紛花卉、彩繪潑墨
示範部落格網址:http://mu-ping.blogspot.com 



範本:夢幻喵喵     特色:甜美貓咪、粉嫩夢幻
示範部落格網址:http://e-snowball.blogspot.com



範本:卡通學院     特色:活潑逗趣、塗鴉黑板
示範部落格網址:http://q-no-p.blogspot.com  



範本:華夏采風     特色:東方風情、華麗雅緻



範本:復古童趣     特色:懷舊質感、童趣玩偶
示範部落格網址:http://mu-jung.blogspot.com 



範本:旅行筆記     特色:記遊手札、仿真書本



範本:療傷插畫     特色:溫馨柔和、圖像選單
示範部落格網址:http://esnowball.blogspot.com



範本:星光樂園     特色:原創動畫、主題樂園


  • 站內資源提供

部落格達人變裝秀-錯誤勘正

部落格達人變裝秀-導讀文章

部落格達人變裝秀-聯播貼紙

部落格達人變裝秀-無名樣式

  • 網路購書直達

金石堂網路書店-http://kingstone.com.tw/book/book_page.asp?LID=se008&kmcode=2013120149823

博客來書籍館-http://www.books.com.tw/exep/prod/booksfile.php?item=0010470115

誠品網路書店-http://www.eslite.com/product.aspx?pgid=1001113881946271

新絲路網路書店-http://www.silkbook.com/book_Detail.asp?goods_ser=%27kk0272446%27

華文網網路書店-https://www.book4u.com.tw/book_Detail.asp?goods_ser=kk0272446&flag=0,


17 Comments:

Post Comments

Sani said :

我去書局無意間看到這本書,就被書裡粉嫩的內容吸引了呢!!明明很缺錢,還是亳不猶豫的買下了它!
順便問一下,書裡的教學是不是適用於各大BLOG呢!(大部分啦,因網站不同使用方法都不同嗎?)

cunnie said :

你好~感謝你的支持
書內的部落格範例選用Google旗下的Blogger.com
因為Blogger提供的自由度比較高,能讓部落格有千變萬化的體驗^^

不過用來改造每個部落格平台的CSS其實是很相似的喔!
只是需要花時間去找到對應的名稱~
對學會自己作部落格版型的讀者來說(書裡面有教XD)
版型從一個平台換到另一個平台也不難~
不過平台開放給使用者的權限越大~
能改的就越多~部落格也就可以更漂亮~

如果以後有機會~我會嘗試撰寫其他部落格平台的範本教學
也歡迎讀者提供相關的建議給我唷^^

win said :

先來這跟你打招呼。

上周末在香港電腦書店買了你的作品, 雖然仍未開始逐步學習css語言, 但你的書能喚起我重新在鍵盤上打字的動力。期望能透過你的作品來學會css, 從中自娛一番。

謝謝囉!

cunnie said :

To win:
感謝你的留言鼓勵~
沒想到這本書在香港也有上架
覺得很開心*^^*
我一直糾結書有點太厚重了..
不過對於教學的詳細度我是很有自信的喔!!
歡迎加入css達人的行列:>

Lay~ said :

這本書~內容很讚喔!
雖然我有點給他看的霧沙沙...
(原諒初學者,我正在努力進化...)
可是內容有點小錯喔!
p.8&p.9的示範網址錯了~
正確:http://qnop.blogspot.com
錯誤:http://qnop.blogsdpot.com
有注意到ㄇ?多了一個『d』...
我還以為示範網頁的頁面關掉了
結果...
還好有拆字試試看,不然就永遠找不到你了~

Lay~ said :

拍謝~拍謝~
我沒看到你已經堪正錯誤了...
多有打擾..西累!

cunnie said :

To Lay:
不會打擾啦!!我也覺得很扯~自己的網址還打錯XD
很高興你喜歡這本書~歡迎你常來這裡玩喔!!

Lay~ said :

雪球媽~
我套版了時候阿...
『谷歌先生』給我出現下面這些東西
------------------------
小裝置即將刪除
請確認以下的小裝置是否應該刪除。 這些小裝置的所有配置數據都將遺失。
Profile1
BlogArchive1
Subscribe1
------------------------
這要怎麼解決阿?
還是我哪裡有出錯?

cunnie said :

To Lay:
會出現這樣的狀況是因為你的部落格版面中的網頁元素比要上載的範本多。
範本上載等於是一個覆蓋的動作,會讓整個部落格的網頁元素也改變。
建議將這些網頁元素大約用記事本紀錄一下作備份,等範本上載好後再重新加入就可以嚕^^

匿名 said :

親愛的雪球媽,我有買了變裝秀這本書,相當精緻且詳細的內容喔。但是看到那書中滿天的程式碼,不禁讓我回想到當學生的時代了....=.="。請問一下,我在按照書本內容想利用光碟片操作時,發現樣板6-10好像都沒有附元素圖片,是沒有辦法使用嗎?

cunnie said :

To Anonymous:
謝謝你的支持*^^*
網頁設計是離不開程式碼的~
要做版型只好跟程式做好朋友囉!!

6-10沒有圖片是因為當時有一些考量~
建議可以用相同尺寸的圖片代替~
(書的封面有註明喔)

這本書主打製做範本教學~
希望大家看完書都可以做出專屬自己的範本喔:>

匿名 said :

請問無名也可以這樣改嗎?
謝謝你~
希望你不要覺得我問了蠢問題..哈哈!

cunnie said :

To Anonymous:
無名樣式也是用CSS構成的~
雖然不能直接貼過去..
但是製作的方法是一樣的喔!!
把書中的概念融會貫通後~
要自己做無名樣式應該是沒問題的^^

不過無名限制很多~
是個小氣巴拉的平台..
要符合他的一拖拉庫限制~
做出來的版型就無法像Blogger給人有部落格竟然也能改成這樣的感覺!!

書中的夢幻喵喵範本有出無名樣式~
如果讀者希望能在無名使用書中的範本請留言給我~
我會再多改一些分享給大家
(很棒的售後服務吧?!XD)

下次留言要記得寫暱稱喔:>

夢幻喵喵的無名樣式教學在這邊:
http://esnowball.blogspot.com/2009/09/blog-post_3649.html

蝴蝶烘培坊 said :

Dear 雪球媽,當我在書局看到這本書時,二話不說就捧回家啦..當要實際操作時發現..嗚..嗚..對於我這種新手,好多問題唷~呵..希望不會打擾到妳!就是有關於圖片切割,不知道是否有建議的軟題呢?

cunnie said :

To蝴蝶烘培坊:
謝謝你對部落格達人變裝秀的支持*^^*
我使用的圖片切割軟體是Adobe Photoshop~
歡迎常來一起討論喔:)

孟小娜 said :

雪球媽您好:
我買了你的書,
可是STEP BY STEP的時候遇到很大的問題,
光是P.71
IE的捲軸變色將您書上寫的程式碼取代原始碼之後,
按預覽,
他出現一行字『網頁外觀中的無效變數聲明: 您可以使用變數,但不能定義它。 輸入: bgcolor
Error 500』
我覺得好沮喪喔,
才第2個步驟就碰壁了,
請問這是什麼原因呢?

cunnie said :

To孟小娜:
我使用書中程式碼測試後沒有發現上述的狀況喔!

請試試看直接複製以下CSS取代"body {"到下一個"}"之間的程式碼:
body {
background: $bgcolor;
margin: 0;
padding: 0;
color: $textcolor;
font-size: small;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color:
scrollbar-shadow-color: #ffffff;
scrollbar-3dlight-color: #a6ccec;
scrollbar-arrow-color: #a6ccec;
scrollbar-track-color: #ffffff;
scrollbar-darkshadow-color: #a6ccec;
scrollbar-base-color: #ffffff;
}

可能是你輸入時有漏掉幾個頑皮的字母,
建議直接覆製光碟檔案中的程式碼比較不會有問題喔!:)