Demo: Click
Nguồn: <o>
Hướng dẫn bên dưới:
Hường dẫn bằng bài viết
Hướng dẫn bằng Video
Bây giờ bạn copy tất cả các code dưới đây dán vào sau (dưới) dòng lệnh <head>Nhé
Code:
<style type='text/css'>
#gb{
position:fixed;
top:20px;
z-index:+1000;
right:3px;
}
* html #gb{position:relative;}
.gbtab{
margin-top:-1px;
height:200px;
width:30px;
float:left;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCa13min-yGsfRYvp_B_y1qO5rNaFn1H0wp6mMc7iw7ACMZgV1beEXdPxrrQa03v9MWXLiA1wtga-TJiED2EhQP2KERkRAQIZQvWGvUpZ-GQnHhRSujl98wwoOCmJdDK1o6wqeFymqvZE/s1600/picture4.jpg) no-repeat;
}
.gbcontent{
float:left;
border:3px solid #FFFFFF;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikg9-M012EvySNRBldr_h_GE1IBjCiKNEeFSaaRDI7XDAfAzYZH7YTyCAE_IBa20S5p7Z26RCERFJrQ4EQMuQs2SN-8Niiz-TzykonfIVXcmsY3b78FJIuSU-wJ9P1NDv39cQDUv3Mgnc/s1600/picture5.jpg);
padding:5px 15px 3px 15px;
line-height:1.3em;}
</style>
<script type='text/javascript'>
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 24-w) : moveGB(20-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>
#gb{
position:fixed;
top:20px;
z-index:+1000;
right:3px;
}
* html #gb{position:relative;}
.gbtab{
margin-top:-1px;
height:200px;
width:30px;
float:left;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCa13min-yGsfRYvp_B_y1qO5rNaFn1H0wp6mMc7iw7ACMZgV1beEXdPxrrQa03v9MWXLiA1wtga-TJiED2EhQP2KERkRAQIZQvWGvUpZ-GQnHhRSujl98wwoOCmJdDK1o6wqeFymqvZE/s1600/picture4.jpg) no-repeat;
}
.gbcontent{
float:left;
border:3px solid #FFFFFF;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikg9-M012EvySNRBldr_h_GE1IBjCiKNEeFSaaRDI7XDAfAzYZH7YTyCAE_IBa20S5p7Z26RCERFJrQ4EQMuQs2SN-8Niiz-TzykonfIVXcmsY3b78FJIuSU-wJ9P1NDv39cQDUv3Mgnc/s1600/picture5.jpg);
padding:5px 15px 3px 15px;
line-height:1.3em;}
</style>
<script type='text/javascript'>
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 24-w) : moveGB(20-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>
Tiếp tục bạn bấm LƯU MẪU để lưu lại các sửa đổi.
Sau
khi LƯU MẪU, bạn bấm vào thẻ BỐ CỤC ở bên trái và
thêm tiện ích HTML/Javacript
<div id="gb">
<div class="gbtab" onclick="showHideGB()">
</div>
<div class="gbcontent">
<strong><span style=" "></span></strong>
<center>
<center><div style="font-weight:bold; border: 2px #30a1db solid; padding:5px; text-align:center; background:#FFF380;"><span style="color: red; font-size: large;">Bình luận mới nhất của các bạn</span></div>
<div style="border: 5px solid orange; color: cyan; height: 650px; margin: 5px 0; overflow: auto; padding: 15px; text-align: left; width: 300px;">
<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:#ffffff!important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:none;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 200,
showAvatar = true,
avatarSize = 60,
roundAvatar = true,
characters = 60,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script src="https://sites.google.com/site/dunghennessyjs/comment2.js" type="text/javascript"></script>
<script src="http://www.dunghennessy.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=200" type="text/javascript"></script>
</div>
</center>
</center>
<div style="text-align: right;"><span style="float:left; ">Widget by dunghennessy</span>
<a href="javascript:showHideGB()">[Đóng lại]
</a></div></div></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (24-gb.offsetWidth).toString() + "px";
</script>
<div class="gbtab" onclick="showHideGB()">
</div>
<div class="gbcontent">
<strong><span style=" "></span></strong>
<center>
<center><div style="font-weight:bold; border: 2px #30a1db solid; padding:5px; text-align:center; background:#FFF380;"><span style="color: red; font-size: large;">Bình luận mới nhất của các bạn</span></div>
<div style="border: 5px solid orange; color: cyan; height: 650px; margin: 5px 0; overflow: auto; padding: 15px; text-align: left; width: 300px;">
<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:#ffffff!important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:none;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 200,
showAvatar = true,
avatarSize = 60,
roundAvatar = true,
characters = 60,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script src="https://sites.google.com/site/dunghennessyjs/comment2.js" type="text/javascript"></script>
<script src="http://www.dunghennessy.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=200" type="text/javascript"></script>
</div>
</center>
</center>
<div style="text-align: right;"><span style="float:left; ">Widget by dunghennessy</span>
<a href="javascript:showHideGB()">[Đóng lại]
</a></div></div></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (24-gb.offsetWidth).toString() + "px";
</script>
Bình luận mới nhất của các bạn
http://www.dunghennessy.blogspot.com <=> Thay thành đường link: của blogger của bạn
Video Hướng dẫn:
Chúc các bạn thành công!
Bài Viết tại:http://onlinesinhloinhuan.blogspot.com/
Không có nhận xét nào:
Đăng nhận xét