Hôm nay mình xin được chia sẻ cho các bạn 1 tiện ích bài viết mới tự động trượt ngang có hình ảnh cho blogger/blogspot khá là đẹp mắt.
Bên dưới đây là demo hình ảnh của tiện ích này.
1. Sau khi đăng nhập vào Blogger , chọn blog bạn muốn thêm thanh trượt này.
2. Sau đó vào mẫu >> Chỉnh sửa HTML (đánh dấu vào ô mở rộng mẫu tiện ích )
3. Sao lưu hoặc lưu trữ mẫu đầu tiên, nếu bất cứ lúc nào một lỗi có thể được trở lại hình dạng ban đầu của nó.
4. ìm dòng ]]></b:skin> và chèn vào trước nó đoạn code bên dưới:
Mã màu đỏ là kích thước của thanh trượt ở trên, cho chiều rộng 300px và chiều cao 400px .
5. Tiếp đến tìm thẻ đóng </head> và thêm đoạn code dưới đây bên trên nó:
6. Chèn đoạn code dưới đây nơi mà bạn muốn hiển thị trong template của bạn:
Nếu muốn tiện ích này hiển thị ngoài trang chủ thì xóa dòng <b:if cond='data:blog.pageType == "item"'> và </b:if>
Nếu bạn muốn tiện ích hiển thị theo nhãn của bạn thì thay /feeds/posts/default? thành /feeds/posts/default/-/nhãn của bạn?
Chúc bạn thành công!
Bên dưới đây là demo hình ảnh của tiện ích này.
Demo Ảnh
Sau đây là các bước thực hiện:
2. Sau đó vào mẫu >> Chỉnh sửa HTML (đánh dấu vào ô mở rộng mẫu tiện ích )
3. Sao lưu hoặc lưu trữ mẫu đầu tiên, nếu bất cứ lúc nào một lỗi có thể được trở lại hình dạng ban đầu của nó.
4. ìm dòng ]]></b:skin> và chèn vào trước nó đoạn code bên dưới:
/* Slider */
.sompret-wrapper {float:right; position: relative;}
.sompret { overflow: hidden; position: relative; width:300px; height:400px;}
.image_reel { position: absolute; top: 0; left: 0; }
.image_reel img {overflow: hidden;float: left;width:300px; height:auto;}
.paging {background:#878773; border:1px solid #676756;padding: 4px 0 2px; text-align: right;z-index: 100; }
.paging a { text-indent:-9999px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDUkru4d-FUp4AJKy2iN707p8rnlzchGxcbdohWXf-79PuaSmWTObOmkEpaomZXOS-zyXKDyxo43chrP13NuQ8r-q7duyjnqltma3Ye6yHXqtIZP9Ww4L0cee4lQlTOLnxUhFMAwI2_zE/s1600/slider_item.png) no-repeat center; width:10px; height:10px; display:inline-block;margin:3px; border:none; outline:none; }
.paging a.active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfUBR8NR6Hv7omlBqrQNa0yb3ozhj66fKqr2KwIhB3HoZhrn20X-HTM5ZYuj-Kt7KDXqUMsn_MKcHQGKHSxZKvfaCLwgnl0F9b90tI5wy667cTu3tZ3t1IXnDUDeAoHpyt90VZCtw9oAM/s1600/slider_item_active.png) no-repeat center; border:none; outline:none;}
.paging a:hover {font-weight: bold; border:none; outline:none;}
.crott { width:280px; display: none; position:absolute;bottom: 0; left: 0; z-index: 101; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibY58Vt_wA3DslDZf5SNiA52oPl4PMz1tNAo9Huxv_zFfbLsOX0olVFRXw49bDknxw9iyrQs2vcaCVoWXJE-CshYZNCzWmhF-Nszy8DRilJeicqQHp6BKPs-MHEDMcJqh-YEAM_1ufZm6X/s1600/uj-opacity-40.png);padding:5px 10px; }
.crott a{color: #fff;font: 16px Oswald }
.crott p{color: #fff;font: 12px Arial;}
Mã màu đỏ là kích thước của thanh trượt ở trên, cho chiều rộng 300px và chiều cao 400px .
5. Tiếp đến tìm thẻ đóng </head> và thêm đoạn code dưới đây bên trên nó:
<script src='http://code.jquery.com/jquery-1.8.3.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".sompret").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
$(".crott").stop(true,true).slideUp('slow');
$(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
$(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 10000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPs3rmSkWffmm_XX8agpuBJcU0SFnMnpQF0Vt2-OcC_Oq8ZDlnWbSXrz51NJ6Xhqu2AYmZ5ElOigAZDr8oR2z05j5VQ_pVwsExiJFvae1mFV1zdKyIViWGLfyp4NQop8g8qjiJ9gCk6mo/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost1 = 80;
summaryTitle = 20;
numposts1 = 6;
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts1(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts1; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = m+ ' ' + day + ' ' + y ;
var trtd = '<div class="crott"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>';
document.write(trtd);
j++;
}
}
function showrecentposts2(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts1 ; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>';
document.write(trtd);
j++;
}
}
//]]>
</script>
6. Chèn đoạn code dưới đây nơi mà bạn muốn hiển thị trong template của bạn:
<b:if cond='data:blog.pageType == "item"'>
<div class='sompret-wrapper'>
<div class='sompret'>
<div class='image_reel'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script></div>
<div class='description'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
</div>
<div class='paging'>
<a href='#' rel='1'/>
<a href='#' rel='2'/>
<a href='#' rel='3'/>
<a href='#' rel='4'/>
<a href='#' rel='5'/>
<a href='#' rel='6'/>
</div>
</div></b:if>Nếu muốn tiện ích này hiển thị ngoài trang chủ thì xóa dòng <b:if cond='data:blog.pageType == "item"'> và </b:if>
Nếu bạn muốn tiện ích hiển thị theo nhãn của bạn thì thay /feeds/posts/default? thành /feeds/posts/default/-/nhãn của bạn?
Chúc bạn thành công!
Nguồn: Internet
