泪划痕
Best viewed in Google Chrome

2011年5月31日星期二

鼠标指着标签菜单会扩展开来 (Joly Ko)

当你鼠标指向其中一个标签菜单时,它会扩张开来

登入博客 - 信息中心 设计 - 修改HTML

CTRL+F<head>

将以下的代码paste在<head>的后面

<script src='http://pujangga.googlecode.com/files/jquery.tools.min.js' type='text/javascript'/>
<script type='text/javascript'> 
$(document).ready(function(){
$(&quot;#accordion&quot;).tabs(&quot;#accordion div.pane&quot;, {tabs: &#39;h2&#39;, effect: &#39;slide&#39;, initialIndex: null});

});

</script>

就像这样:
保存模板。

最后再到 页面元素 - 添加小工具 -  HTML/JavaScript

Copy以下的代码PasteHTML/JavaScript

<style type="text/css">
h5 {
font-family: trebuchet-ms, arial, tahoma;
font-size: 13px;
padding: 0 0 1em;
font-weight:bold;
color: #ffffff;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#FFB6D6;
margin:1px;

-moz-border-radius: 35px;
border-radius: 35px;

}
.msg_body {
padding: 5px 10px 15px;
background-color:#FFFFFF;
}
</style>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/tabmenuaccordion.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane h5.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane h5.msg_head").mouseover(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});
});
</script>
<div class="msg_list" id="secondpane">
<h5 class="msg_head">标题 1</h5>
<div class="msg_body">
<center>

标题 1 里面的内容</div>
<h5 class="msg_head">标题 2</h5>
<div class="msg_body">

标题 2 俩面的内容
</div>
<h5 class="msg_head">标题 3</h5>
<div class="msg_body">
标题 3 俩面的内容</div>
</div> 


温馨提示:

*青色字标签菜单的字体颜色
*橙色字体标签菜单的背景颜色
*蓝色字体标签菜单 里面的内容背景颜色
*粉色字体你要写的标题
*红色字体标签菜单里面的内容(你也可以放聊天室代码在里面,任何什么都行


*注 如果菜单死板板的扩展不开来的
CTRL + F 找 </html>

在 </html> 前面添加以下代码

<script type="text/javascript" src="https://sites.google.com/site/jquery01/tabmenuaccordion.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane h5.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane h5.msg_head").mouseover(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});
});
</script>


menu tab页面换成图片 (给Katherine 和 Amy


就是这种,将页面换成图片。


给Katherine 和 Amy的教程 =)

信息中心 - 设计 - 添加小工具 -Html/JavaScript

Copy以下的代码paste到Html/JavaScript

<center>
<ul class="basictab">
<li class="selected"><a href="链接网址1"><img src='图片网址1'/></a></li>
<li><a href="链接网址2"><img src='图片网址2'/></a></li>
<li><a href="链接网址3"><img src='图片网址3'/></a></li>
<li><a href="链接网址4"><img src='图片网址4'/></a></li>
</ul>
</center>

*链接网址就是你要开的网页的链接
*图片网址就是页面的图片网址


温馨提示:
页面的图片可以找LOGO底图先,就是这种Photobucket
可以到素材系列谷歌找类似这样的LOGO做图片
自行设计,设计后变成这样Photobucket

不会设计的也可以到素材系列页面按钮(就是这种Photobucket
已经设计好附上字体了的

完成……

2011年5月30日星期一

更换文章帖子背景 (给mouse

红色箭头处文章帖子背景

给mouse的教程=)

信息中心 - 设计 -修改HTML 

CTRL+F找 .post-body {

 .post-body {后面加上以下代码。

background: url(文章背景网址) repeat scroll center center;

就像下图:

*文章背景网址要找自己喜欢的图片背景网址放上去。

文章帖子背景网址例子:

图片网址:
http://4.bp.blogspot.com/-4AsoprsC1Qs/TdD1el0b9BI/AAAAAAAADUw/8ViBP66rlNQ/s320/1104271222618694c8eee5abf9.jpg

图片网址:
http://2.bp.blogspot.com/-61fgnF5fnHE/TdD1YtSt4uI/AAAAAAAADUY/7iN_TpyXUKI/s320/1104271222673a74c10ff52690.jpg

图片网址:
http://2.bp.blogspot.com/-d2p4cPNdLqs/TdD1PnM1LLI/AAAAAAAADTY/v8L7rfeKd1A/s320/11042712225ffe538a858677a7.jpg


图片网址:
http://2.bp.blogspot.com/-1QgMZbTa25w/TdD1B8xcm5I/AAAAAAAADSY/RUT15uhQ8Bw/s320/1104271140aa9188633816eb28.jpg

想找更多背景可以到素材系列找或者也可以自己到谷歌找。


Back to top (给mrs-hongki

就是按TOP的图片会飞上去的=_=

给mrs-hongki的教程 =)

信息中心 - 设计 - 添加小工具 - HTML/JavaScript

Copy以下的代码Paste到HTML/JavaScript

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="返回顶楼"><img src="http://3.bp.blogspot.com/-ESBqU13lk84/TeOsxWHfqDI/AAAAAAAAAF4/aJMrwfT_mKE/s1600/t2.png" /></a>


蓝色字体就是鼠标指向TOP的时候出现的字眼,如上图所示
红色字体就是TOP图片的网址,可以自行更改

自制TOP图片=_= 。

TOP图片网址:
http://3.bp.blogspot.com/-cM_Vr5zRtjI/TeOswfFmaQI/AAAAAAAAAF0/L6wywI6b4hk/s1600/t1.png
TOP图片网址:
http://3.bp.blogspot.com/-ESBqU13lk84/TeOsxWHfqDI/AAAAAAAAAF4/aJMrwfT_mKE/s1600/t2.png
TOP图片网址:
http://2.bp.blogspot.com/-_Buy7I2p2-8/TeOsxx8kCpI/AAAAAAAAAF8/0KZjkDIAKaI/s1600/t3.png
TOP图片网址:
http://3.bp.blogspot.com/-PzTYS5WZmBg/TePCSlo8mtI/AAAAAAAAAGA/ZqpF4h4_y8g/s1600/%25E6%259C%25AA%25E5%2591%25BD%25E5%2590%258D_%25E5%2589%25AF%25E6%259C%25AC.png

TOPUP的图片如果想找更多可以到素材系列按钮找或谷歌找


留言我迟点回复,现在看戏,网速有点慢 =)

自制的CLICK/Comment Here图 (ßοωιε﹏Vγεε 和 HIMIKO

给ßοωιε﹏Vγεε 和 HIMIKO制作的CLICK/Comment Here图  =)
图片网址:
http://3.bp.blogspot.com/-OMZrIVp0bQ4/TeNRRM8ZG_I/AAAAAAAADlI/UwVWQx5HesQ/s1600/c1.png

图片网址:
http://1.bp.blogspot.com/-tsaz8doEpgc/TeNRQRMHRcI/AAAAAAAADlE/ExBguhFDOsE/s1600/c.png



图片网址:
http://2.bp.blogspot.com/-6X8hUji1caU/TeNYSqWqdlI/AAAAAAAADlo/DAQ6i59GoTk/s1600/c7.png

图片网址:
http://4.bp.blogspot.com/-mTIK7_olqVw/TeNRZ-oQF6I/AAAAAAAADlQ/OkG1FT12hh0/s1600/c3.png

图片网址:
http://4.bp.blogspot.com/-mTIK7_olqVw/TeNRZ-oQF6I/AAAAAAAADlQ/OkG1FT12hh0/s1600/c3.png

图片网址:
http://4.bp.blogspot.com/-yoAjA-wTYkY/TeNRaM8HzEI/AAAAAAAADlU/Ps67ezPXGxU/s1600/c4.png

图片网址:
http://1.bp.blogspot.com/-Cv9kdUyggd8/TeNRaui8tEI/AAAAAAAADlY/aNnxkxEAtRY/s1600/c5.png






图片网址:
http://3.bp.blogspot.com/-368gH-bmZiI/TeNVuIx3D0I/AAAAAAAADlc/FrOG8YbxXQw/s320/c6.png
图片网址:
http://3.bp.blogspot.com/-rrHTmpNjinU/TeNVu7O8QbI/AAAAAAAADlg/iMrA7Awvp_E/s1600/%25E6%259C%25AA%25E5%2591%25BD%25E5%2590%258D_%25E5%2589%25AF%25E6%259C%25AC.png


图片网址:
http://4.bp.blogspot.com/-P6Jq7Q1Rgsk/TeNYSFeeMkI/AAAAAAAADlk/S2GBcHWgSbo/s1600/c8.png

图片网址:
http://4.bp.blogspot.com/-clcSh-4OFek/TeNbVspUxJI/AAAAAAAADls/0ZJCuYfHsxI/s320/cc1.png
图片网址:
http://4.bp.blogspot.com/-xxSLjlWlA6A/TeNbW9w4R0I/AAAAAAAADlw/ZtLQnKGi5aE/s1600/cc2.png

关注器隐藏法(给Im Auntie Berlian



如上图,就是你按了Follow的图片后,会弹出关注器来……
Im Auntie Berlian的教程=)


信息中心 设计 - HTML/JAVASKRIPT

第一步骤:拷贝以下代码,到HTML/JAVASKRIPT


<style type="text/css">


#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbtab{
height:400px;
width:160px;
float:left;
cursor:pointer;
background:url('http://3.bp.blogspot.com/-5JAh6spTuWI/TeZ5zUstDWI/AAAAAAAADnY/FPTi1AvMc1M/s320/jkjlkl.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>


<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 150-w) : moveGB(170-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">


你的Follower代码








<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (140-gb.offsetWidth).toString() + "px";
</script>

蓝色字体就是Follow的图片网址,可以自行更改
红色字体就是放你的Follower代码

获取Follower代码
sign in博客之后,到这网站http://www.google.com/friendconnect/ ,然后跟着下图做。
1-如果你有很多博客,在旁边会出现你所有博客,选你要设置的博客
2-按第二红框里的Add the member gadget

3-这里你可以自行设计你的关注统计器

最后按Generate Code获取代码再paste到刚刚第一步骤代码里面的你的Follower代码

根据Im Auntie Berlian自制的Follow图片>0<||||(也可以自行设计
Follow图片网址:
http://4.bp.blogspot.com/-GSDgGP860NI/TeJoWokfmoI/AAAAAAAAAFQ/ivTMBKAFplQ/s1600/f2.png
Follow图片网址:
http://2.bp.blogspot.com/-oStlq3jRUiM/TeJoXnKDQrI/AAAAAAAAAFY/3U8HLy42onM/s1600/follow.png

当然还有其他颜色
Follow图片网址:
http://1.bp.blogspot.com/-wLmKJZvjh2g/TeJoXcXsN8I/AAAAAAAAAFU/Fr8O8q_H0Wk/s1600/f3.png

Follow图片网址:
http://2.bp.blogspot.com/--R4v0NfjZns/TeFTgUjq9-I/AAAAAAAADjA/wPQyMMIcnWE/s1600/444444444444.png

如果喜欢的话可以Copy Follow图片网址替换到到第一步骤的蓝色字体