Mã:
/*cong cu ben trai */
.side-sharebar {
top: 147px;
left: 7.8%;
background-color: #EEE;
border: 1px solid #CCC;
border-right: none;
position: fixed;
-webkit-box-shadow: -6px 0 6px -6px rgba(0,0,0,0.25) inset,0 1px 0 #fff inset;
-moz-box-shadow: -6px 0 6px -6px rgba(0,0,0,0.25) inset,0 1px 0 #fff inset;
box-shadow: -6px 0 6px -6px rgba(0,0,0,0.25) inset,0 1px 0 #fff inset;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
padding:0px;
}
.side-sharebar .item {
border-bottom: 1px solid #CCC;
-webkit-box-shadow: 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
padding: 10px 2px 10px 0;
text-align: center;
width: 76px;
}
.side-sharebar .item:last-child{
border:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
font-size:.8em;
line-height:1.133em;
}
.side-sharebar .recentCount{
display:block;
text-align:center;
width:58px;
height:40px;
padding:2px 0 0 0!important;
background-color:#b7b7b8;
background:none,-khtml-gradient(linear,left top,left bottom,from(#d7d8d9),to(#aaaaab));
background:none,-moz-linear-gradient(top,#d7d8d9 0,#aaaaab 100%);
background:none,-webkit-gradient(linear,left top,left bottom,color-stop(0,#d7d8d9),color-stop(100%,#aaaaab));
background:none,-webkit-linear-gradient(top,#d7d8d9 0,#aaaaab 100%);
background:none,-o-linear-gradient(top,#d7d8d9 0,#aaaaab 100%);
background:none,-ms-linear-gradient(top,#d7d8d9 0,#aaaaab 100%);
background:none,linear-gradient(top,#d7d8d9 0,#aaaaab 100%);
color:#39434c;
border:1px solid #A7A7A8;
-webkit-box-shadow:0 1px 0 #8b8b90,0 1px 0 0 rgba(255,255,255,0.4) inset;
-moz-box-shadow:0 1px 0 #8b8b90,0 1px 0 0 rgba(255,255,255,0.4) inset;
box-shadow:0 1px 0 #8b8b90,0 1px 0 0 rgba(255,255,255,0.4) inset;
-moz-text-shadow:0 1px 0 rgba(255,255,255,0.65);
-webkit-text-shadow:0 1px 0 rgba(255,255,255,0.65);
-khtml-text-shadow:0 1px 0 rgba(255,255,255,0.65);
text-shadow:0 1px 0 rgba(255,255,255,0.65);
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
font-size:10px;
font-weight:bold;
-webkit-box-shadow:0 2px 0 #8b8b90;
-moz-box-shadow:0 2px 0 #8b8b90;
box-shadow:0 2px 0 #8b8b90;
position:relative;
margin:0 auto;
text-decoration: none;
}
.side-sharebar .recentCount .countNumber{
font-size:1.8em;
}
.side-sharebar .recentCount:after{
width:0;
height:0;
border-top:5px solid #aaaaab;
border-bottom:5px solid transparent;
border-right:5px solid #aaaaab;
display:block;
position:relative;
bottom:-7px;
position:absolute;
right:10px;
}
.side-sharebar .recentCount:before{
width:0;
height:0;
border-top:5px solid #8b8b90;
border-bottom:5px solid transparent;
border-right:5px solid #8b8b90;
display:block;
position:relative;
bottom:-8px;
position:absolute;
right:10px;
}
#shareBar p.recentCount{
font-weight:bold;
}
.rqd
{
text-align: center;
display: block;
}
.rqd_count {
font-family: Arial, Helvetica, sans-serif;
font-size:12pt;
background-image: url('../vtlai_img/rqd_count_bg.gif');
background-repeat: no-repeat;
background-position: center top;
margin: 0px;
padding: 0px;
padding-top: 7px;
height: 35px;
border: 0px;
vertical-align:middle;
}
.rqd_btn
{
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
display: block;
text-decoration: none;
padding: 3px;
padding-left:12px;
text-align: center;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
background-color: #eceef5;
border: 1px solid #cad4e7;
background-image: url('../vtlai_img/rqd_btn_bg.png');
background-repeat: no-repeat;
background-position: left center;
color: #003;
width: 50px;
margin-left: auto;
margin-right: auto;
}
.rqd_btn:visited,.rqd_btn:active
{
color:#003;
}
.rqd_btn:hover
{
border-color: #9dacce;
color: blue;
}
Thêm vào
Mã:
<!--cong cu ben trai-->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(window).bind("resize", function() {
$('#noidung').toggle($(this).width() > 1300);
}).trigger("resize");
});
</script>
<menu class="shareBar side-sharebar" id="noidung">
<div class="item">
<p class="recentCount"><span class="countNumber">{vb:raw thread.views}</span><br>Lượt xem</p>
</div>
<div class="item">
<div class="item">
<iframe src="http://www.facebook.com/plugins/like.php?href=http://2mit.org/forum/{vb:link thread, {vb:raw thread}}&send=false&layout=box_count& amp;width=52&show_faces=false&action=like& amp;colorscheme=light&font=arial&height=62 " scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:52px; height:62px;" allowTransparency="true"></iframe>
</div>
</div>
<div class="item">
<a name="fb_share" type="button_count" share_url="http://2mit.org/forum/{vb:link thread}" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class="item">
<a href="javascript:void(window.open('http://link.apps.zing.vn/share?u=http://2mit.org/forum/{vb:link thread}','','top=20, left=250,scrollbars=no,width=600,height=500')) "><img src="http://img.zing.vn/ani/skin/ani-112011/images/icon_zingme.png"></a>
</div>
<div class="item">
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</menu>
<!--cong cu ben trai-->
Tự động ẩn đi đối với những máy có độ phân giải màn hình < 1300 (tức là dùng laptop mới thấy) 