[教程]Navigation 頁面 Ⅱ ♥Sunday, December 30, 2012, 12/30/2012 08:37:00 PM - Permalink | 0 Comments
這次教的是圖片頁面，很少Blogskin有圖片頁面的說。也許有，但我暫時還沒看到。最近有人問我，Blogskin的頁面是否可以用圖片來取代？答案是可以的。
我先借用 Bii 的教程，然後再教各位如何用BT的方法取代BS。我先聲明哦~這個我研究蠻久的，如果你拿走代碼，一定要告訴我。如果是要轉載教程的，就不好意思咯~不能轉載 XD
好的，簡體字的開始就是我的教程開始了哦~如果你到现在都还不知道我在讲什么的话，我现在给各位看照片。
就是上面这个东东啦！如果你是BT，你可以到 这里 。如果你是BS的，看这里XD 我不知道外面还有没有这种教程，但是我还是发了XD 首先，使用BS的人，你们可以用很多方法，我一个一个和你们说怎样弄。
① 使用a 标签，链接。
i. 直排方式
<div style="top: 5px; right: 5px; position: fixed;"><a href="页面网址1"><img src="图片网址1"></a><br/><a href="页面网址2"><img src="图片网址2"></a><br/><a href="页面网址3"><img src="图片网址3"></a><br/><a href="页面网址4"><img src="图片网址4"></a><br/></div>
如果你要再有多一点距离的话，你可以自己加多几个<br/>
例子：
例子：
<div style="top: 5px; right: 5px; position: fixed;"><a href="页面网址1"><img src="图片网址1"></a><br/><br/><a href="页面网址2"><img src="图片网址2"></a><br/><br/><a href="页面网址3"><img src="图片网址3"></a><br/><br/><a href="页面网址4"><img src="图片网址4"></a><br/><br/></div>
ii. 横排方式
<div style="top: 5px; right: 5px; position: fixed;"><a href="页面网址1"><img src="图片网址1"></a></div><div style="top: 5px; right: 20px; position: fixed;"><a href="页面网址2"><img src="图片网址2"></a></div><div style="top: 5px; right: 35px; position: fixed;"><a href="页面网址3"><img src="图片网址3"></a></div><div style="top: 5px; right: 50px; position: fixed;"><a href="页面网址4"><img src="图片网址4"></a></div>
那么要把以上代码放在哪里呢？找</style>，然后把上面的代码paste在</style>后面。那么就可以预览一下，ok了就可以save起来了。
说明：
top，是顶部的意思，px的值越大，那个图片就会越下面。right，是右边的意思，px的值越大，那个图片就会越左边。如果你要放在最左边就直接把right改成left。position就是他的位置啦~你要固定的话就是fixed，不要固定的话就不要就改成absolute。
横排的right/left，px的值一定要不一样哦~~不然他们会黏在一起。
那么页面网址要怎么放呢？就是把你那个post的网址放下去就好了。图片网址你们可以自己网上找。
② 使用BS的页面代码。
你们还记得我说的页面代码吗？不记得的可以往下看，复习一下。
说明：
XX是你要引用的class，你也不需要用尽脑汁去修改它们，因为BS原本的代码已经有了，so没必要去修改。我跟你们讲，只是要你们明白他的用处 :)
那么main呢？mian就是你们4个页面的名称代码，有的人是post、entry等等。KK就是引用你4个页面代码，就是你点了它们之后，就会到另个页面。title就是你们鼠标指过去后，就会出现的字体。标题就是你页面显示的字体。
我知道我说得很复杂，不过如果你们细心的话，你们就会和我一样明白了==
好了，复习完后，就是教各位如何把它们改成图片的页面。会很复杂，希望各位会明白。首先找你的页面代码。加上img标签就可以了。
我的代码：
说明：
class，你可以空着，如果你要把网页放在角落的话，我待会再给各位额外的代码。把mian改成你们原本的。KK也是改回你们原本的。图片网址改成你们要的的图片网址。
好了，如果你们要把它们放在角落，有两个方法。第一就是把以下代码paste在</style>前面。当然，还是要保留刚刚那个页面的代码。
和a 标签、链接的方法差不多一样的。以上的方法是for直排。不过记得在你页面代码那里加<br/>。如果是直排的，你们就加多几个和popo一样的代码。
例子：
就是这样啦~~~一样，right/left的px值是不能一样的。然后呢，刚刚不是说有空着的 a class 吗？把popo这些名字放在不一样的页面代码里面的a class了。
第二，你们可以自己在img 标签里面放style。例子如下：
就是这样，第二个方法是给那些第一个方法不能成功的。如果你连全部的方法都失败的话，tell me :)
教程已經到尾聲了！如果有什麽不明白的，可以留言發問。我知道這一篇教程很亂/.\ 不好意思哦~~希望可以體諒一下，因為我已經儘量寫了。
说明：
top，是顶部的意思，px的值越大，那个图片就会越下面。right，是右边的意思，px的值越大，那个图片就会越左边。如果你要放在最左边就直接把right改成left。position就是他的位置啦~你要固定的话就是fixed，不要固定的话就不要就改成absolute。
横排的right/left，px的值一定要不一样哦~~不然他们会黏在一起。
那么页面网址要怎么放呢？就是把你那个post的网址放下去就好了。图片网址你们可以自己网上找。
② 使用BS的页面代码。
你们还记得我说的页面代码吗？不记得的可以往下看，复习一下。
<a class="XX" onClick="document.getElementById('main').innerHTML=document.getElementById('KK').innerHTML" title="">标题1</a>
<a class="XX" onClick="document.getElementById('main').innerHTML=document.getElementById('KK').innerHTML" title="">标题2</a>
<a class="XX" onClick="document.getElementById('main').innerHTML=document.getElementById('KK').innerHTML" title="">标题3</a>
<a class="XX" onClick="document.getElementById('main').innerHTML=document.getElementById('KK').innerHTML" title="">标题4</a>
说明：
XX是你要引用的class，你也不需要用尽脑汁去修改它们，因为BS原本的代码已经有了，so没必要去修改。我跟你们讲，只是要你们明白他的用处 :)
那么main呢？mian就是你们4个页面的名称代码，有的人是post、entry等等。KK就是引用你4个页面代码，就是你点了它们之后，就会到另个页面。title就是你们鼠标指过去后，就会出现的字体。标题就是你页面显示的字体。
我知道我说得很复杂，不过如果你们细心的话，你们就会和我一样明白了==
好了，复习完后，就是教各位如何把它们改成图片的页面。会很复杂，希望各位会明白。首先找你的页面代码。加上img标签就可以了。
我的代码：
<a class="" onClick="document.getElementById('main').innerHTML=document.getElementById('KK').innerHTML"><img src="图片网址1"/></a>
<a class="" onClick="document.getElementById('main').innerHTML=document.getElementById('KK').innerHTML"><img src="图片网址2"/></a>
<a class="" onClick="document.getElementById('main').innerHTML=document.getElementById('KK').innerHTML"><img src="图片网址3"/></a>
<a class="" onClick="document.getElementById('main').innerHTML=document.getElementById('KK').innerHTML"><img src="图片网址4"/></a>
说明：
class，你可以空着，如果你要把网页放在角落的话，我待会再给各位额外的代码。把mian改成你们原本的。KK也是改回你们原本的。图片网址改成你们要的的图片网址。
好了，如果你们要把它们放在角落，有两个方法。第一就是把以下代码paste在</style>前面。当然，还是要保留刚刚那个页面的代码。
.popo {
right:5px;
top:5px;
postion:fixed;
}
和a 标签、链接的方法差不多一样的。以上的方法是for直排。不过记得在你页面代码那里加<br/>。如果是直排的，你们就加多几个和popo一样的代码。
例子：
.kaka {
right:25px;
top:5px;
postion:fixed;
}
.baba {
right:35px;
top:5px;
postion:fixed;
}
.jojo {
right:45px;
top:5px;
postion:fixed;
}
就是这样啦~~~一样，right/left的px值是不能一样的。然后呢，刚刚不是说有空着的 a class 吗？把popo这些名字放在不一样的页面代码里面的a class了。
第二，你们可以自己在img 标签里面放style。例子如下：
<img style="position:fixed;top:5px;right:5px;" src="图片网址"/>
就是这样，第二个方法是给那些第一个方法不能成功的。如果你连全部的方法都失败的话，tell me :)
教程已經到尾聲了！如果有什麽不明白的，可以留言發問。我知道這一篇教程很亂/.\ 不好意思哦~~希望可以體諒一下，因為我已經儘量寫了。
完畢·The End
Labels: bs
[教程] Blog Archives Ⅰ (BS) ♥Sunday, December 16, 2012, 12/16/2012 10:26:00 PM - Permalink | 0 Comments
這個教程我欠很久了！真的很抱歉。我想各位都會這個的，不過照慣例，有人發問我就要發教程！所以簡體字的開始就是我的教程開始啦！ :)
好了，图里橙色框的就是我要教的。这次的教程很简单，所以我在考虑要不要加一些废话进来，这样帖子就能长一点。哈哈 大家都知道我是很喜欢把文章放长地说，我越成熟，文章也越长。原因是：我老了，想的东西比较多，比较复杂，所以写出来的文章比较烦、乱、复杂和长XD
一定很多人很想围殴我！因为我的教程还没出现任何一个代码！XD 很不好意思哦~~我就是偏偏不要XD 哈哈哈 请到你的代码编辑处，然后把以下代码copy and paste到你要放这个blog archives的地方。比如我要放在sidebar的最下面，我就把以下代码paste在我sidebar代码的尾端。
① 第一段的代码。是for 月份的。
<select style="background-color: #000; color: #fff; font: 10px tahoma; letter-spacing: 2px; border: 1px #eee solid; padding: 2px; width: 200px;" onChange="location.href=this.options[this.selectedIndex].value;">
<option value=''>你要显示的字♥</option>
<BloggerArchives>
<option value="<$BlogArchiveURL$>"> <$BlogArchiveName$></option>
</BloggerArchives></select>
② 第二段的代码。是for题目的。
<select style="background-color: #000; color: #fff; font: 10px tahoma; letter-spacing: 2px; border:1px #eee solid; padding: 2px; width: 200px;" onChange="location.href=this.options[this.selectedIndex].value;">
<option value=''>你要显示的字♥</option>
<BloggerPreviousItems>
<option value="<$BlogItemPermalinkURL$>"> <$BlogPreviousItemTitle$></option>
</BloggerPreviousItems></select>
说明：
其实你可以只是选择放一个。你也可以自己慢慢把代码给改掉。比如你不要放题目的，要放日期的，你就自己找代码来取代深红色的代码就行了。
background-color就是背景色，可以改。color就是字体色，可以改。
font就是字体，可以改。px的值越大字体就越大；tahoma就是font-family来的，可以改成arial、georgia、verdana等等。letter-spacing就是字体的空间，px值越大字体就越有距离，可以改。
border就是框，px值越大框就越粗；#eee是框的颜色；solid就是框的pattern，你可以改去dotted、dashed、inset等等。你要显示的字就改成你要的title吧。其他的就别改为妙。
明白了吗？不明白可以发问。你也可以自己加代码美化，比如把背景色换成背景图等等。尾聲了，成功或不成功都要告訴我。雖然教程和代碼很簡單，但是我編寫到很辛苦的。要轉帖什麽的麻煩留言，謝謝~~^~^
P/S: 以上教学是博主辛辛苦苦一字一字编出来的
要转帖请告知并附上本blog的大名/鏈接,请别copy : )
版权所有归葆薏優閣 ♥
Copyrighted © 16.12.2012 BaoYogurt
請幫我按按Nuffnang和ChurpChurp，謝謝 :)
完畢·The End
Labels: bs
[教程] 飄浮在帖子旁的小圖片 ♥Tuesday, December 11, 2012, 12/11/2012 05:08:00 PM - Permalink | 0 Comments
有人問起 我就寫了。我不知道這個要怎樣標題=3= 你們就看圖吧！XD 簡體字的開始就是教程的開始啦！
点图放大
先声明，此教程是 for BS的，如果你是BT的就自己拿代码慢慢研究吧！:) 这个教程也没很复杂，不过还是要很严肃啦~~
首先，到代码编辑处，按Ctrl+F找</style>，然后把以下代码copy and paste到</syle>前面。
.h1-icon{border-radius:3000px;float: right; }
说明：
.h1-icon就是上面图红色框里的照片。
红色（border-radius）= 圆角度（值越大就越圆）如果要四方形就删除红色的代码或改小他。
蓝色（float）= 漂浮（right是漂浮在右边，如果你要放在左边就换left，中间的话就center）
*你可以自己加代码美化，比如：text-sahdow、border、background-color等等。
还没结束，接下来请你到</style>之后的代码查一查每个页面的代码。
你必须确定你帖子的代码。这个我不知道该怎么说，可是如果不明白的话，我教大家最简单的方法，就是把以下的代码加进你要放的地方就对了啦！哈哈，我是说放在贴子，因为BS很多页面的代码，每个页面都会连着帖子而改变对不对？所以呢，就到每个有关你的帖子代码加上这个。
<img class="h1-icon" src="图片网址" width="60">
说明：
class就是在引用刚刚那个h1-icon的代码，图片网址请place你的图片网址下去，width是宽，可以改。
建议：
先放第一个代码，然后马上save。Save了才把第二个代码放在你要的地方，一个一个放，慢慢preview。成功了才save。
尾聲了。成功或不成功都要告訴我，如果不明白還是有弄不回去什麽效果，可以留言。
要转帖请告知并附上本blog的大名/鏈接,请别copy : )
版权所有归葆薏優閣 ♥
Copyrighted © 11.12.2012 BaoYogurt
請幫我按按Nuffnang和ChurpChurp，謝謝 :)
完畢·The End
Labels: bs
[教程]自製Status(狀態) ♥Sunday, December 9, 2012, 12/09/2012 11:59:00 PM - Permalink | 2 Comments
有人問所以我來發教程了。簡體字的開始代表我的教程已經開始了！
点图放大
第二张图 ↓
这个只是给Blogskin的使用者，如果你是Blog Template的，可以自己拿代码慢慢研究。
#status{说明：
width:230px;color:#000;height:auto;padding:5px;overflow:auto;border:1px solid #000;}
.icon{
color: #000;}
.time{
color: #000;font-family: arial;font-size:10px ;padding-right:7px;padding-bottom:3px;padding-top:3px;padding-left:7px;background:#f7f7f7;}
.date{
color: #000;font-family: arial;font-size:10px ;padding-right:7px;padding-bottom:3px;padding-top:3px;padding-left:7px;background: #f7f7f7;}
#status是那个状态的代码，.icon是那个红色心形的代码，.time和.date就是时间和日期。（看第二张图）
浅青（width）= 宽度【值越大就越宽】
深紫色（color）= 字体的颜色
蓝色（height）= 高度【auto是自动，那么你就不用担心写短写长】
浅紫色（border）= 框 【px的值越大框就越粗、solid可以改，如：dashed/inset/dotted等、#000是框的颜色，可以改。】
浅褐色（font-family）= 字体的名称【可以改，如：tahoma，courier等】
深褐色（font-size）= 字体的大小 【值越大字体就越大】
红色（background）= 背景的颜色，可以改。
深红色的所有代码很难解释，不可以删除，所以也别乱改，除非你懂它们的意思和存在意义。
*你还可以自己加代码，比如：letter-spacing、background-url、text-shadow，等等的代码。
还没结束，接下来请把以下代码copy and paste到你想这个status放在的地方。比如我想放在我的sidebar，所以我就回到我sidebar代码那边置放以下代码。
<div id="status"><span class="icon">显示的图案，如：☆、○、●等。</span> >> 要显示的状态。你也可以在加多几段↓
<br/><div style="float: left;margin-top:5px;"><span class="time">时间</span></div><div style="float: right;margin-top:5px;"><span class="date">日期</span></div><br/><br/><span class="icon">显示的图案，如：☆、○、●等。</span> >> 要显示的状态2。
<br/><div style="float: left;margin-top:5px;"><span class="time">时间</span></div><div style="float: right;margin-top:5px;"><span class="date">日期</span></div></div>
<span class="icon">显示的图案，如：☆、○、●等。</span> >> 要显示的状态。那么你就可以一次过写5个或6个状态。
<br/><div style="float: left;margin-top:5px;"><span class="time">时间</span></div><div style="float: right;margin-top:5px;"><span class="date">日期</span></div>
繁體字出現了！尾聲了。如果有什麽不明白可以留言發問，請記得，成功或不成功都要告訴我。
P/S: 以上教学是博主辛辛苦苦一字一字编出来的
要转帖请告知并附上本blog的大名/鏈接,请别copy : )
版权所有归葆薏優閣 ♥
Copyrighted © 09.12.2012 BaoYogurt
請幫我按按Nuffnang和ChurpChurp，謝謝 :)
完畢·The End
Labels: bs
