<div id='ArchiveList'>
<div class='widget-content' style='overflow:auto; height:200px'>
<head>
<script src='http://pujangga.googlecode.com/files/jquery.tools.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
});
</script>
<style>
#postit{
position:fixed; width:180px; padding:15px; background: url(图片Direct Link)top no-repeat; border: 2px solid #EAE9F7 ; -moz-border-radius: 30px 30px;
border-radius: 30px 30px;
visibility:hidden; z-index:100; cursor:hand; color: white }
-->
</style>
<div id=postit style="right: 35px; top: 65px">
<div align=right><b><a href="javascript:closeit()">[Close]</a></b></div><br />
<!--INSERT YOUR CONTENT HERE--><br />
<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:#000000;
Border: 1px Double #FFFFFF;
margin:2px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#000000;
}
</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>
<!--END YOUR CONTENT HERE--><br />
<br />
</div><br />
<script type="text/javascript" language="javascript">
//Post-it only once per browser session? (0=no, 1=yes)
//Specifying 0 will cause postit to display every time page is loaded
var once_per_browser=0
///No need to edit beyond here///
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all
if (ns4)
crossobj=document.layers.postit
else if (ie4||ns6)
crossobj=ns6? document.getElementById("postit") : document.all.postit
function closeit(){
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
crossobj.visibility="hide"
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function showornot(){
if (get_cookie('postdisplay')==''){
showit()
document.cookie="postdisplay=yes"
}
}
function showit(){
if (ie4||ns6)
crossobj.style.visibility="visible"
else if (ns4)
crossobj.visibility="show"
}
if (once_per_browser)
showornot()
else
showit()
</script>
<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>
</head>
.post h3 strong, .post h3 a:hover {
background:#8E8E8E;
color: #FFFFFF;
-webkit-transition-duration: .5s;
}
h2:hover {
background:#8E8E8E;
color: #FFFFFF;
-webkit-transition-duration: .5s;
}
若是想把更换背景就更换以下代码Example:
background:#8E8E8E;
更换成
background:url('图片Direct Link')repeat;
<ul class="basictab">
<a href="你的Facabook Link"><img src='http://i284.photobucket.com/albums/ll18/evan0805/20110619010847563_easyicon_cn_48-1.png'/></a>
<a href="你的twitter Link"><img src='http://i284.photobucket.com/albums/ll18/evan0805/20110619010829113_easyicon_cn_48.png'/></a>
/* Header
#header-wrapper {
width:660px;
margin:auto 0px;
border:none;
}
/* Outer-Wrapper
/* Posts
/* Footer翻译了就叫页脚
<a expr:href='data:post.url'><data:post.title/></a>
<a expr:href='data:post.url'><这里><data:post.title/><这里></a>
<a expr:href='data:post.url'><div align='center'><data:post.title/></div></a>
#header-wrapper {
#header-wrapper {
width:660px; margin:0 auto 10px;
border:1px solid $bordercolor;
}
#outer-wrapper {
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word;
overflow: hidden;
#sidebar-wrapper {
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
#newsidebar-wrapper {
margin-left:5%;
width: 23%;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
<div id='main-wrapper'>
<!-- new sidebar added-->
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>
<div id='sidebar-wrapper'>
<!-- new sidebar added-->
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
]]></b:skin>
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3); }
Sumber : http://farixsantips.blogspot.com/2011/06/effect-hover-zoom-smooth-pada-object.html#ixzz1X07HXoVg
</style>
<span><a expr:href='"https://www.blogger.com/comment.g?blogID=Your BLOG ID &postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;'>[Reply]</a></span>
<style>
#postit{
position:fixed; width:180px; padding:15px; background: url(图片url Direct Link)top no-repeat; border: 2px solid #EAE9F7 ; -moz-border-radius: 30px 30px;
border-radius: 30px 30px;
visibility:hidden; z-index:100; cursor:hand; color: white }
-->
</style>
<div id=postit style="right: 35px; top: 70px">
<div align=right><b><a href="javascript:closeit()">[Close]</a></b></div><br />
<!--INSERT YOUR CONTENT HERE--><br />
留言/程式码<!--END YOUR CONTENT HERE--><br />
<br />
</div><br />
<script type="text/javascript" language="javascript">
//Post-it only once per browser session? (0=no, 1=yes)
//Specifying 0 will cause postit to display every time page is loaded
var once_per_browser=0
///No need to edit beyond here///
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all
if (ns4)
crossobj=document.layers.postit
else if (ie4||ns6)
crossobj=ns6? document.getElementById("postit") : document.all.postit
function closeit(){
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
crossobj.visibility="hide"
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function showornot(){
if (get_cookie('postdisplay')==''){
showit()
document.cookie="postdisplay=yes"
}
}
function showit(){
if (ie4||ns6)
crossobj.style.visibility="visible"
else if (ns4)
crossobj.visibility="show"
}
if (once_per_browser)
showornot()
else
showit()
</script>
<script type="test/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="图片url Direct Link" style="filter:alpha(opacity=70); -moz-opacity:0.1; width:80px; height:127px" />',
controlattrs: {offsetx:40, offsety:70},
anchorkeyword: '#top',
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport)
this.$control.css({opacity:0})
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1)
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'回到上面 Back to top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='')
mainobj.$control.css({width:mainobj.$control.width()})
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
