[教程]如何把Sidebar和Post的Body連在一起(BS) ♥Friday, November 30, 2012, 11/30/2012 02:08:00 AM - Permalink | 2 Comments
有人問了，我也只好寫教程了。Erm……我標題應該寫得很清楚吧？如果不明白的可以看一下圖片，點擊放大。
在圖裡我也很清楚地表示出來，再不明白的我也幫不了你了。這個教程只是給BS使用者而已哦~~如果你是BT的我就幫不了你了:P 簡體字開始就表示我的教程開始啦！
好，首先就是到你修理代码的地方了。我先声明一点就是每个人BS的代码都不一样，如果我这个教程失效了请告诉我，成功了也告诉我好吗？因为我要知道是不是每个BS的skin都适合以下代码。
我的代码是比较复杂。分为两个。第一个是sidebar的代码，而另一个就是整个sidebar加post的body代码。清楚吗？不清楚就看回刚刚那张图片，红色框的是sidebar；橙色框的是post；而两个加起来就把它们成为一个整体的body。
而你现在必须做的就是看看自己BS Skin的代码。因为每个人的代码不同，我很难在这里说明到很清楚那种。你先看看你是否有sibebar的代码，如果有就删除，如果没有就把我以下的代码paste进去。
以下代码是paste在</style>之后，如果你们的代码有<body>的话就放在<body>的后面。先声明你放这个代码的时候preview时是没有效果或效果烂透的那种。
<table style="background:#fff; padding:10px;" width="900" align="center" cellspacing="5"><tbody><tr><td valign="top" style="width:550px; padding-right:5px;">
说明：
table就是表的意思。所以你就可以使用这个标签来做出那个整体body的感觉。table的style你可以自己加代码美化。如，text-shadow、font-size、background url等等之类的代码。
width就是宽度。table的宽度尽量放大一点，因为它是整体body。接下来那个td的就是你的sidebar了！WOW！终于登场了XD
一样的可以自己美化~~那个width自己慢慢调~自己喜欢就好XD
好了，整体和sidebar的出来了。只剩下post的。這裡就有點難講明 =3= 因為每個人的BS代碼有4份不同的頁面代碼。所以如果看不明白的可以再問我，如果失敗的話可以給我你的代碼，然後我再幫你糾正回來。
请找一下你Entry的代码。就是会有<blogger>这个标签的出现。你找到后请确保它是在前面的，意思就是说<blogger>的前面没有任何的代码。不明白？点击下图就知道了。
就是那样。它那一段就只有<blogger>是最前，如果不是的也别担心，没必要删除掉。只需要在那一段的最前面加上以下代码。
<td valign="top" style="width:550px; padding-left:5px; border-left:1px solid #000; padding-right:5px;"><div id="entry">
说明：
width就是宽度。如果你不要像我一样sidebar和post之间有一条线的间隔话，请把border-left:1px solid #000 ←这个删除掉。个人建议最好是不要删，那样会比较整齐。 :)
至于<div id="entry">这个代码在每个skin应该有的，如果没有请添加。有的就不用管它XD 好，我把那个entry弄成紫色的原因是因为那个有时候会有所变动的。
<a class="" onClick="document.getElementById('entry').innerHTML=document.getElementById('').innerHTML" title=""></a>
<a class="" onClick="document.getElementById('entry').innerHTML=document.getElementById('').innerHTML" title=""></a><br/>
<a class="" onClick="document.getElementById('entry').innerHTML=document.getElementById('').innerHTML" title=""></a>
<a class="" onClick="document.getElementById('entry').innerHTML=document.getElementById('').innerHTML" title=""></a>
每个BS都有以上代码。这个是页面的代码，如果你没有就代表你是BT的使用者啦~XD那么看到那个entry了吗？有的人是main、post等等之类的名称。如果你的不是entry，请你把刚刚<div id="entry">里的entry改成挂号里拥有的名称。明白？
好了，已经万事俱备，只欠东风罢了XD 记得！在你已经完全弄好以上的代码，请到代码的尾找</html>，在它的之前一定要有</table>，</tbody>和</td>。如果没有请自行添加，有的话就别管它 :D 如果你放了这3个关闭标签却没有效果请告诉我，或者遇到很糟的效果就先别放那3个关闭标签。因为你的代码可能不需要释读这3个关闭标签。
已經到尾聲了。如果你成功或不成功的都告訴我，因為我暫時還沒看到有人寫關於這種教程，不知道我的對你們全部的BS Skin適合嗎 :P 還有請不要轉帖，因為我要獨一無二XD
P/S：這是我自己辛辛苦苦一字一字編出來的！抄襲者滾！不能轉帖，謝謝。
請幫按按Nuffnang和ChurpChurp。謝謝！:)
完畢·The End
Labels: bs
[教程]Navigation 頁面 Ⅰ ♥Wednesday, November 14, 2012, 11/14/2012 07:54:00 AM - Permalink | 0 Comments
好的，因為有人問所以我寫！XD這次的教程不知道要怎麼標題==所以大概大概這樣咯~~不明白的看圖 :)
ok！看到沒有？啊~就是這個，它會動的~~繼續看下去~~
看到沒有！我都講它會動咯~只要你的鼠標過去，它就會滾下來給你選你要看什麽~很不錯嘞？我也是被這個effect吸引了=3= 現在要換skin都捨不得！
其實這個東西hor~~它是騙你們的眼睛的，你們不相信是嗎？我告訴你們，我把代碼改一下你們就會相信什麽叫blind spot的~盲點的意思XD
看到了嗎？我只是把它們弄成一樣顏色、一樣身高、一樣的長度。好了，廢話少囉嗦了~教程開始吧！*先聲明，此教程只適合BS，至於BT的朋友可以自己慢慢研究啊！
我們先去找<body>或是</style>。
找到了之後就把以下代碼放在</style>的後面。
<!-------Sidebar-----><div style="background:#fff; width:300px; position:fixed; top:120px; left:50px;">
<img src="圖片網址1" width="200"/></div>
<!-------Navi-----><div style="background:#fff; width:310px; position:fixed; top:120px; left:50px; border-radius:2px; padding:5px; ">
<div class="navibox">顯示的字體<br/><img src="圖片網址2" width="200"/></div>
有看我的教程的朋友一定會明白爲什麽我要把代碼塗到這樣，不明白的去面壁思過！XD開玩笑的啦~~ok！轉入正題橙色的是說明來的，說明那個是我的sidebar咯~亮一點的橙色就是說明那是我的navibox的代碼！
至於其他的代碼自己消化啊~background就是你背景的顏色！記住一定要和navibox的顏色一樣~不一樣也沒關係啦~~製造盲點是有很多方法的XD 圖片就是你要的咯~1和2的放不一樣也可以，一樣也可以，你們喜歡。顯示的字體就是我的“navigation”，你們可以換去別的，如click me！hover me 等。
- div class就是我在引用啦。引用什麽，看下去吧！
.navibox{
width:200px;
height:15px;
font: 12px arial;
color:#FF36A1;
text-align:center;
-webkit-transition:All 0.6s ease;
-moz-transition:All 0.6s ease;
-o-transition:All 0.6s ease;
overflow:hidden;
}
.navibox:hover{
width:200px;
height:250px;
text-align:center;
}
先給大家解釋解釋。我把那頁面稱為navibox，所以代表你們可以為它改別的名字！比如kiki啊。記得前面一定要放fullstop！因為上面的sidebar我們引用它的navibox嘛~~（CSS引用教程遲些教XD） 簡單來講就是一定要和你div class的名稱一樣！
我們先看看亮紅的.navibox。你們一定要記得它的高度，顏色和寬度要和sidebar的一樣。各位以上的代碼一定都要有在，不在的話就不會呈現很好的結果出來。
- 淺青（width）= 寬度【值越大就越寬】
- 淺藍（height）= 高度【值越大就越高】
- 深紫色（font）= 字體【值越大字體越大 後面是你要用的font family。如：arial，tahoma等】
- 深橙色（color）= 字體顏色
- 淺紫色（text-align）= 字體集中在？【left，左。right，右。center，居中。justify，一致。】
- 深紅的的所有代碼代表你鼠標指過去時，在幾秒鐘內有變化。而overflow的意思遲些CSS代碼教程會發佈。
好，現在看.navibox:hover，就是鼠標指過去后。
- 淺青（width）= 寬度【值越大就越寬】
- 深藍（height）= 高度 【值越大就越高，最好和sidebar的一樣。】
- 淺紫色（text-align）= 字體集中在？【left，左。right，右。center，居中。justify，一致。】
好了，告一段落咯~~不明白嗎？請發問，因為我已經把最基本的代碼給你們了，你們已經可以做出一個navigation出來~你們可以自己加代碼來美化。我還有一樣要告訴大家就是BS的頁面代碼都很相同的，可惜BS的頁面有很多不一樣的名字很難和各位說清楚。
<a class="XX" onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML" title="">顯示的字體1</a>以上的代碼代表那個我的灰色格子的頁面。你們可以用自己的BS頁面代碼，每個skin都不一樣的，所以原諒我沒有把它們聲明好來，paiseh~~
<a class="XX" onClick="document.getElementById('main').innerHTML=document.getElementById('post').innerHTML" title="">顯示的字體2</a>
<a class="XX" onClick="document.getElementById('main').innerHTML=document.getElementById('stuff').innerHTML" title="">顯示的字體3</a>
<a class="XX" onClick="document.getElementById('main').innerHTML=document.getElementById('links').innerHTML" title="">顯示的字體4</a>
還有一件事就是……我發現我錯用了繁體字來編寫教程，看不懂的朋友很抱歉，因為這是後來才發現的，懶惰重打字，所以你們有什麽不明白的可以問我~謝謝。
要转帖请告知并附上本blog的大名/鏈接,请别copy : )
版权所有归葆薏優閣 ♥
Copyrighted © 14.11.2012 BaoYogurt
請幫我按按Nuffnang和ChurpChurp，謝謝 :)
The End.
Labels: bs
