隱藏看看-03

每次都要去記住那個標記繼續閱讀的tag是很煩人的,
那麼就這樣做吧:

1.登入網誌後,點選如圖的TAB


2.往下找到這個區塊


3.把這段貼上去後儲存就好了
< class="fullpost">這裡面就是你想要隱藏的段落< /span >

編輯時記得把要隱藏的內容取代紅色那段字就OK了,
當然啦,是要在修改Html的模式下面改就是了
Read more...繼續閱讀...

隱藏看看-02

幾個步驟,順著做就可以了

步驟一

找到< head >這個Tag,
在其後加上:
< style >
< b:if cond='data:blog.pageType == "item"' >
span.fullpost {display:inline;}
< b:else/ >
span.fullpost {display:none;}
< /b:if >
< /style>

步驟二

找到< data:post.body/ >這個Tag,
在其後加上:
< b:if cond='data:blog.pageType != "item"'>< br / >
< a expr:href='data:post.url'>Read more!< /a >
< /b:if >
其中[Read more!]可以隨意替換成你想要引導進一步閱讀的文字.
#另外,如果找不到< data:post.body/ >這個Tag,可以注意一下[顯示範本小裝置的CheckBox小方框]是否有點選.

完成以後儲存,如果沒有顯示任何錯誤,那就是成功一半了!

步驟三

貼完你想要發表的文章後,切換到修改Html,
用這個< span class="fullpost" >這裡面就是你想要隱藏的段落< /span >把你想要的文章段落整個包起來,

存好後,就可以看看囉~如同隱藏看看-01的範例
Read more...繼續閱讀...

隱藏看看-01

讓我用這篇長文來解是怎麼做到繼續閱讀,
這個做法有個好處:

1. 可以不需要引用外部地JAVA元件,效能比較好
2. 可以自行決定文張斷在哪裡

但是缺點是

• 每篇文章再發布的時候要自己加點Tag

巫婆的故事

有一個國王去打獵時墜落山谷，當孤立無援時，有一隻巨大的神龍出現。
神龍告訴國王一個交換援助條件 :國王必須正確回答一個全世界最困難的問題才能獲得神龍的救助。
神龍發問：女人究竟真正要什麼？
國王被問倒了，於是想出緩兵之計。
國王說：神龍可否先救我，我將靈魂抵押給你，讓我回到王宮尋求答案，七日後我會帶著答案再來找你。
神龍說：可以，不過如果七日後你不信守承諾，你就會因失魂落魄而死。
國王回到宮中將經歷告知內閣大臣及國策顧問，結果大家都想不出答案而愁眉苦臉。
眼看日子一天天過去，期限只剩兩天了。
一位國王的馬夫說：城南有一位巫婆知識淵博，他應該知道答案。
於是英俊瀟灑的侍衛長立刻騎快馬將巫婆請到宮中。
巫婆到宮中後，國王將經歷與神龍的問題告知巫婆。
巫婆說：答案我是知道的，國王的命我也能救，不過我有交換條件。
那就是要陛下的侍衛長在事成後娶我為妻。
國王毫不考慮一口就替侍衛長答應了並立下詔書為憑。
巫婆說答案是：女人真正要的 , 是能由自己決定主宰她自己的生活方式。
國王告訴侍衛長關於巫婆的要求，侍衛長差點昏倒， 但為了國王的性命，只能愁眉苦臉且無奈地接受事實。
國王帶著答案去找神龍要贖回自己的靈魂，神龍聽到標準答案後，稱讚國王是全世界最聰明的男人，也依約將國王的靈魂還給國王。
一行人回到宮中後即開始籌備侍衛長與巫婆的婚禮( 婚紗照，喜餅，菜色等事宜 )。
婚禮當天，雞皮鶴髮的新娘配上年輕英俊的侍衛長， 喜宴上巫婆吃像難看不打緊，還邊吃邊大聲放屁，不時發出不雅的笑聲。
侍衛長為了國家犧牲自我，男人的威嚴一點都不敢在喜宴中發作。
好不容易熬到入洞房的時刻。當巫婆換下禮服，從淋浴間出來時 ,侍衛長不敢相信他的眼睛，因為走出來的是一個比馬莉亞凱莉，飯島愛，濱崎步更超級性感十倍的辣妹。
她對侍衛長說：" 因為你信守承諾，沒有對我發怒， 容忍我在喜宴中放肆丟你的人，我決定往後每一天中有十二小時變成超級溫柔美女陪伴你，但是你可以決定我固定在白天變美女還是晚上變美女，而且選完就不能改變心意 "。
年輕英俊的侍衛長頓時陷入兩難的局面。
因為他不知應該選擇白天帶一位絕世美女出門向朋友炫耀，讓眾人羨慕，而晚間要和一位雞皮鶴髮的巫婆同床共枕（要面子犧牲裡子），還是白天讓眾人對老巫婆指指點點， 嘲笑侍衛長的可憐，而晚上他可以和超級美女夜夜春宵（犧牲面子要裡子）。
想了半天，年輕英俊的侍衛長最後向巫婆說：" 你自己決定何時要扮演你喜歡的角色就可以了，我不干涉你的生活方式。"
巫婆聽了很高興，對年輕英俊的侍衛長說："由於你的包容與智慧，我決定天天二十四小時變成一個有教養的超級性感溫柔美女陪伴你照顧你。"
侍衛長突然驚訝的發覺：原來幸福竟然如此意外地降臨在他身上。
國王、侍衛長、巫婆最後皆大歡喜，眾內閣官員全數跌破眼鏡。
這個故事給我們的啟示是 :
1. 人要信守承諾。
2. 小人物的建議有時應參考一下。
3. 未經你的同意，你主管幫你包山包海承諾的事情還是要盡力完成。 真是經典
4. 婚姻的幸福與否與婚禮的排場無關。
5. 對女人一定要有包容心，讓女人自己決定她的生活方式。
6. 不管外表如何裝扮或改變，女人的內在本質還是一個巫婆。 真是超經典
7. 不要指望你的另一半看完這故事會大徹大悟。(尤其打你的手機第一句話是問你現在在哪裡的人 ----- -因為標準答案是 "我在! 你心裡 "。)
8. 在台灣，巫婆是不會變美女的。
Read more...繼續閱讀...

分析這個佈景主題-03

接下來我修改了這裡(下面紅色的部分),你看JJ的其中一個需求就達成囉^^
(完成率25%)

#header .titlewrapper {
background:#be4 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4MboHnNjoPzZ5PwOsZ0exGGE5TOWcjIOytkFjsXXpG1vm09eAOA7vBGpJM0lnKvdUcDBAEzshqe1U-DSS1FjxWIXqBFKGhW_nAz0mjzKd75TPsZQs3YDK6ZIMy3XZdMc1tV2RYtnSbnk/s1600-r/head-01.gif") no-repeat $startSide bottom; 這張圖就是把標題圖放上去(當然要先傳到picasa囉)
padding-top:0;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:260px;
margin:0px 0px 10px 0px;
color:#fff;
width:100%;
width/* */:/**/auto;
width:auto;
_height: 0px;
min-height: 122px; 原本是100,而jj做的圖示122的高,所以要調整一下
}
#header h1 {
/*---
background:url("http://www1.blogblog.com/no565/bg_header.gif") no-repeat $startSide
---*/ 這一行原本是那個565的浮水印,因為用不到所以就mark掉囉
top;
margin:0;
padding:40px 0 0px; 紫色這裡預設值是30,其實就是這個區域離頂的位置,因為我們不需要這個區域了,因此記得設為0
line-height: 97px;
font: $titleFont;
text-transform:lowercase;
_height: 0px;
}

接下來只要調整綠色字的地方就可以左右調整,調整藍色字的地方就是上下,
如此標題[kunnni]的字型與位置囉!
Read more...繼續閱讀...

分析這個佈景主題-02

首先我們來看這一段CODE

/* Header
----------------------------------------------- */
#header-wrapper {
background: #fff;
padding-bottom: 4px; /* 這個就是如圖所示B,這個區塊的厚度 */
position: relative; /* 這個是採用'relative'相對座標的意思,這樣的話隨著瀏覽器的大小,他會去自動調整位置,不會錯位.(尚有幾個值absolute,fixed....) */
min-height: 190px; /* 整個A區域的厚度(高度) */
_height: 0px;
}

#header .titlewrapper {
background:#be4 url("http://www.blogblog.com/no565/topleft_$startSide.gif") no-repeat $startSide bottom;
padding-top:0;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:160px;
margin:0px 0px 10px 0px;
color:#fff;
width:100%;
width/* */:/**/auto;
width:auto;
_height: 0px;
min-height: 100px;
}
#header h1 {
background:url("http://www1.blogblog.com/no565/bg_header.gif") no-repeat $startSide top;
margin:0;
padding:70px 0 30px;
line-height: 97px;
font: $titleFont;
text-transform:lowercase;
_height: 0px;
}
#header h1 a {
color:#fff;
text-decoration:none;
}
.postpage #header h1 {
padding-top:0;
background-position:0 -40px;
}

.clear { clear: both; }

/* Description
----------------------------------------------- */
#header .descriptionwrapper {
background: #ff9900 url("http://www2.blogblog.com/no565/bg_desc_top_$startSide.gif") no-repeat $startSide top;
margin:0 0 6px;
padding:12px 0 0;
color: $descColor;
font-size: 75%;
border-bottom: 1px solid #ffffff;
width: 100%;
}
#header .description {
background:url("http://www.blogblog.com/no565/bg_desc_bot_$startSide.gif") no-repeat $startSide bottom;
margin:0;
padding:0 0 12px;
display:block;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
min-height:12px;
border-bottom: 1px solid #ffffff;
}

#header .description span {
/* To remove the word next to the description, delete the following background property */
background:url("http://www2.blogblog.com/no565/temp_no.gif") no-repeat $startSide center;
/* Keep everything below */
display:block;
padding-top:0;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:160px;
text-transform:uppercase;
letter-spacing:.1em;
min-height:12px;
}


.postpage #description em {
font-size:1px;
line-height:1px;
color:$descColor;
visibility:hidden;
}
Read more...繼續閱讀...

分析這個佈景主題-01

上面的TITLE由兩張圖兩個區域所組成,
一是左邊的這張:


二是右邊的這張:

這個是用DIV的方式使用圖層互疊,照理來說應該還有一張底圖,
但這是透過佈景主題的方式去設置底色.

左下二的565LOGO的底色跟組成也是如此

因此修改就必須就以下的HTML TEMP進行修改

/* Header
----------------------------------------------- */
#header-wrapper {
background: #fff;
padding-bottom: 4px;
position: relative;
min-height: 190px;
_height: 0px;
}

#header .titlewrapper {
background:#be4 url("http://www.blogblog.com/no565/topleft_$startSide.gif") no-repeat $startSide bottom;
padding-top:0;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:160px;
margin:0px 0px 10px 0px;
color:#fff;
width:100%;
width/* */:/**/auto;
width:auto;
_height: 0px;
min-height: 100px;
}
#header h1 {
background:url("http://www1.blogblog.com/no565/bg_header.gif") no-repeat $startSide top;
margin:0;
padding:70px 0 30px;
line-height: 97px;
font: $titleFont;
text-transform:lowercase;
_height: 0px;
}
#header h1 a {
color:#fff;
text-decoration:none;
}
.postpage #header h1 {
padding-top:0;
background-position:0 -40px;
}

.clear { clear: both; }

/* Description
----------------------------------------------- */
#header .descriptionwrapper {
background: #ff9900 url("http://www2.blogblog.com/no565/bg_desc_top_$startSide.gif") no-repeat $startSide top;
margin:0 0 6px;
padding:12px 0 0;
color: $descColor;
font-size: 75%;
border-bottom: 1px solid #ffffff;
width: 100%;
}
#header .description {
background:url("http://www.blogblog.com/no565/bg_desc_bot_$startSide.gif") no-repeat $startSide bottom;
margin:0;
padding:0 0 12px;
display:block;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
min-height:12px;
border-bottom: 1px solid #ffffff;
}

#header .description span {
/* To remove the word next to the description, delete the following background property */
background:url("http://www2.blogblog.com/no565/temp_no.gif") no-repeat $startSide center;
/* Keep everything below */
display:block;
padding-top:0;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:160px;
text-transform:uppercase;
letter-spacing:.1em;
min-height:12px;
}


.postpage #description em {
font-size:1px;
line-height:1px;
color:$descColor;
visibility:hidden;
}

接下來我會一個個解釋怎麼改~跟修改之後的效果以及限制.


Read more...繼續閱讀...