Manhhaiblog chào mọi người ,chúc mọi người một mùa noel an lành ấm áp vui vẻ và hạnh phúc.
Hôm này manhhaiblog chia sẻ với những bạn bắt đầu có chút đam mê về thủ thuật dành cho blogger,
đó là cách tạo một widget bài biết ngẫu nhiên đính trượt ở sidebar.tức là widget đó từ điểm đứng trượt xuống dưới trân trang theo con chỏ chuột của blog. Như vậy nhìn trang blog của bạn rất chuyên nghiệp và đẹp mắt.Vậy cách làm như thế nào hãy cùng manhhaiblog đi vào thực hiện nhé
![Cách Tạo Widget Bài Viết Ngẫu Nhiên Đính Trượt Lên Xuống Ở Sidebar [Thủ Thuật Blogger]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif_rtkCvOcKKlODCaWOKS9ynGNVd5pAo-HO9KWFtEy6z_82YnY4-Bv8tXZNSbLN99UMdU3P_chRWpfs_YuMv3InUWTomrbvM8UFJBNPYNnAJrOzZ28NzT2ceo0EhASjezjAw4j3Ccch9di/s640/ba%25CC%2580i+v+ng%25C3%25A2%25CC%2583u+nhi%25C3%25AAn+%25C4%2591i%25CC%2581nh+tr%25C6%25B0%25C6%25A1%25CC%25A3t.manhahiblog.png "Cách Tạo Widget Bài Viết Ngẫu Nhiên Đính Trượt Lên Xuống Ở Sidebar [Thủ Thuật Blogger]")
Trước tiên những ai chưa có tài khoản Blogger thì hày tạo cho mình một tài khoản rồi đăng nhập vào blog tạo cho mình một trang blog theo ý của bạn nhé.
Sau khi chúng ta có một trang blog Hãy vào :
Trang tổng quan ==> Mẫu ==> chỉnh sửa mẫu ==> tìm thẻ ]]></b:skin> ==> copy code sau rồi pass code vào trước thẻ ( ]]></b:skin> ) này nhé.
***********
/*######## Random Posts Widget By STCnetwork.org ########*/
.mbtlist {list-style-type:none;overflow:hidden; margin: 10px 0px 0px 10px!important; width:300px; padding:0px!important;}
.mbtlist li {margin:0px auto 10px auto; clear:both; color:#666; font-family:helvetica; font-size:12px; border-bottom:1px solid #eee; overflow:hidden; position:relative}
.mbtlist li a { color:#666; text-decoration:none; }
.mbtlist i{color:#999; padding-right:5px; }
.mbtlist .iline{line-height:2em; margin-top:3px;}
.mbtlist .icontent{line-height:1.5em; margin-top:5px; clear:both}
.mbtlist div span{margin:0 7px 0 0; display:inline-block;font-weight: normal; }
.mbtlist .mbttitle {font-family:oswald; font-size:13px; color:#838383; font-weight:normal; text-decoration:none;}
.mbtlist .mbttitle:hover, .mbtlist .itotal a:hover {color:#333; text-decoration:none;}
.mbtlist .iedit a{text-decoration:none; color:#999; cursor:pointer}
.mbtlist .iedit:before, .mbtlist .iauthor:before, .mbtlist .itag:before, .mbtlist .icomments:before, .mbtlist .idate:before, .mbtlist .itotal span:before{font-family:fontAwesome; position:relative; padding-right:8px; color:#999;}
.mbtlist .iauthorpic{width: 17px;height: 17px;border-radius: 50%;
float: none; display: inline-block; margin:0px 0px 0px 0px; padding-right:3px; position:relative; top:3px;}
.mbtlist .itag{ color: #fff;position: absolute;left: 9px;top: 9px;display: inline-block;font-size: 11px;width: 100px; height:22px; overflow: hidden;}
.mbtlist .itag a{background:#000;background:rgba(0,0,0,0.7);text-decoration:none;color:#fff;padding:4px 5px;text-transform:capitalize;line-height: 2em;font-family: arial;font-size: 11px;border:1px solid #333;}
.mbtlist .itag a:hover{background:#84DB06;border: 1px solid #84DB06; color:#fff; text-decoration:none;}
.mbtlist .iFeatured{overflow:hidden;position:relative;float:left;margin:0 10px 10px 0;padding:0;}
.mbtlist .iFeatured a {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheGbxxb6X_irb35ix6VLnDvCv6oJI5p5WI9YrdIYl2_Ybj7ubY4pQ7w7CacPa_AgoNAa6fqQthQjK777LabHonyObhFZhO-kwxPoTzm781tcdQPbVbqNCb-M2S5TZVVqw4k7at-XG_fWM/s100/mbt-bg1.png) 0 0;padding:6px 5px 4px 6px;display: block;}
.mbtlist .iFeatured img{width:100px;height:60px;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s; border: 1px solid #ddd; border-radius: 2px;}
.mbtlist .iFeatured:hover img{ opacity:1; -moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)}
.mbtlist .icomments a{color:#0080ff; font-family: arial;font-size:12px;}
.mbtlist .icomments a:hover{text-decoration:underline}
.mbtlist .icomments:before {content:'\f086'; padding:0px 3px 0px 7px; color:#84DB06;}
.mbtlist .idate:before {content:'\f073';padding-right:4px}
.mbtlist .iedit:before {content:'\f040';}
.mbtlist .imore {font-size:16px; font-weight:bold; text-decoration:none; color:#666;}
.mbtlist .itotal {color:#999; padding:5px 0px; }
.mbtlist .itotal a {font-family:"Droid Sans"; font-size:12px; font-weight:normal; color:#999; text-decoration:none}
.mbtlist .itotal span:before {content:'\f07c';}
.mbtlist .itotal span font {padding:0px 3px; color:#333; font-family:droid sans; font-size:15px; font-weight:bold}
**********
Sau đó nhấn Lưu mẫu lại rồi quay lại phần Tổng quan chọn;
Bố cục ==> Tiện ích HTML/Javacript ==> coppy và pass code dưới đây vào nhé .
***************
<style>
#sticky {
height:580px;
width:310px;
position:relative;
}
</style>
<script>
var $stickyHeight = 580;
var $padding = 2;
var $topOffset = 2390;
var $footerHeight = 180;
<![CDATA[ */
function scrollSticky(){
if($(window).height() >= $stickyHeight) {
var aOffset = $('#sticky').offset();
if($(document).height() - $footerHeight - $padding < $(window).scrollTop() + $stickyHeight) {
var $top = $(document).height() - $stickyHeight - $footerHeight - $padding - 185;
$('#sticky').attr('style', 'position:absolute; top:'+$top+'px;');
}else if($(window).scrollTop() + $padding > $topOffset) {
$('#sticky').attr('style', 'position:fixed; top:'+$padding+'px;');
}else{
$('#sticky').attr('style', 'position:relative;');
}
}
}
$(window).scroll(function(){
scrollSticky();
});
/* ]]> */
</script>
<div id="sticky">
<script type='text/javaScript'>
//#################### Defaults
var ListBlogLink = "https://manhhaiblog.blogspot.com/";
var ListCount = 5;
var ChrCount = 85;
var TitleCount = 70;
var ImageSize = 150;
var showcomments = "on";
var showdate = "off";
var showauthor = "on";
var showthumbnail = "on";
var showlabel = "off";
var showcontent = "off";
var RandomArray = [];
var TotalPosts = 0;
var RandomArray = new Array(ListCount);
function TotalCount(json) {
TotalPosts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"https://manhhaiblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=TotalCount\"><\/script>');
function GenerateNum() {
for (var i = 0; i < ListCount ; i++) {
for (var j = 0; j < RandomArray.length; j++){
var RandomNum = Math.floor(Math.random() * (TotalPosts ) + 1);
RandomArray[i] = RandomNum; }
}
}
</script>
<script type='text/javaScript'>
document.write('<ul class="mbtlist">');
//################ Function Start
function mbtrandom(json) {
for (var i = 0; i < ListCount; i++)
{
//################### Variables Declared
var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT = "";
//################### Category
if (json.feed.entry[i].category != null)
{
for (var k = 0; k < json.feed.entry[i].category.length; k++) {
ListTag += "<a href='"+ListBlogLink+"/search/label/"+json.feed.entry[i].category[k].term+"'>"+json.feed.entry[i].category[k].term+"</a>";
if(k < json.feed.entry[i].category.length-1)
{ ListTag += " ";}
}
}
//################### URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
//################### Info
TotalPosts = json.feed.openSearch$totalResults.$t;
if (json.feed.entry[i].title!= null)
{
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
}
if (json.feed.entry[i].thr$total)
{
ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>";
}
ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");
ListAuthor=ListAuthor.slice(0, 1).join(" ");
AuthorPic = json.feed.entry[i].author[0].gd$image.src;
//################### Content Check
ListConten = json.feed.entry[i].content.$t;
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);
//################### Date Format
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
ListDate= json.feed.entry[i].published.$t.substring(0,10);
Y = ListDate.substring(0, 4);
m = ListDate.substring(5, 7);
D = ListDate.substring(8, 10);
M = ListMonth[parseInt(m - 1)];
ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16);
YY = ListUpdate.substring(0, 4);
mm = ListUpdate.substring(5, 7);
DD = ListUpdate.substring(8, 10);
TT = ListUpdate.substring(11, 16);
MM = ListMonth[parseInt(mm - 1)];
//################### Thumbnail Check
// YouTube scan
if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null)
{
var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();
if (youtube_id.length == 11) {
var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";
}
}
else if (json.feed.entry[i].media$thumbnail)
{
thumbUrl = json.feed.entry[i].media$thumbnail.url;
sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");
ListImage= "'" + sk.replace("?imgmax=800","") + "'";
}
else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)
{
// Support For 3rd Party Images
ListImage = json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
}
else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5xjTJE9Dx3GMBtXIkaN40aLhA6hGX-b7Pym0mjGG69UgVCTc8O5ZQLxJyg3wMfYtxMFUKtVLi6N1SvWrBxs1dYS-ZwvZ8HfyHY5cIAuR-cA67Yne3ZrAOPrR1eBP8_kw9KtY-VKFTL3w/s320/dfgh.JPG'";
}
//################### Printing List
document.write( "<li style='margin:0px auto 10px auto!important; padding:0px!important;' class='node"+[i]+"' >");
if (showthumbnail == 'on'){
document.write("<div class='iFeatured'><a href="
+ ListUrl+
"><img src="
+ListImage+
"/></a></div>");
}
if (showlabel == 'on'){
document.write("<span class='itag'>"
+ListTag +
"</span>");
}
document.write("<a class='mbttitle' href="
+ ListUrl+
">"
+ ListTitle+
"</a><div class='iline'>");
if (showauthor == 'on'){
document.write("<span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"
+ListAuthor+
"</span>");
}
if (showcomments == 'on'){
document.write("<span class='icomments'>"
+ListComments +
"</span> ");
}
if (showdate == 'on'){
document.write("<span class='idate'>"
+ M +
" "
+ D +
"</span>");
}
document.write("</div>");
if (showcontent == 'on'){
document.write("<div class='icontent'>"
+ListContent +
"...</div> ");
}
document.write("</li>");
}
document.write("<div class='itotal'><span> <a href='"+ListBlogLink+"'>View all <font>"+TotalPosts+"</font> posts in ─ "+ListLabel+" </a></span></div>");
}
<!-- ######### Invoking the Callback Function ######## -->
for (var i = 0; i < ListCount ; i++) {
GenerateNum();
document.write('<script type=\"text/javascript\" src=\"https://manhhaiblog.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=' + RandomArray[i] + '&max-results=1&callback=mbtrandom\"><\/script>')
};
document.write('</ul>');
</script>
</div>
***************
Một số thay đổi sau đây :
- height:580px; chiều cao của widget bài viết
width:310px; độ rộng của widget bài viết
- $stickyHeight = 580; // chiều cao của widget bài viết
- $padding = 2; // khoảng cách top của widget bài viết khi đính
- $topOffset = 2390; // khoảng cách từ top của widget bài viết khi bắt đầu dính (tức là khoảng cách tính từ trên xuống đến vị trí đặt widget bài viết )
- $footerHeight = 180; // Định vị điểm dừng của widget bài viết, tính từ chân lên
- "https://manhhaiblog.blogspot.com/"; thay link của bạn vào.
- ListCount = 5; số bài hiển thị trên widget
- ImageSize = 150;kích thước ảnh hiển thị 150px X150px ( nếu blog của bạn muốn ảnh hiển thị to hơn nữa có thể 180 X 180 px chỉ cần sửa là 180 là ok.
- showdate = "off"; Hiển thị ngày đăng bài ( = on )
- showlabel = "off"; Hiển thị nhãn ( = on)
Sau đó lưu lại và quay lại trang để thưởng thức thôi nhé chúc các bạn thành công.
Đăng nhận xét Blogger Facebook Disqus