Hướng dẫn tạo Box Slider tin trượt trên sidebar cho Blogger (Blogspot). Slider kiểu này trông khá đẹp mắt và dễ thực hiện.
1 Đăng nhập vào Blogger DashBoard > Edit (Template).
Thêm đoạn code bên dưới vào trước thẻ ]]></ b: skin>:
.sompret-wrapper {
float: right;
position: relative;
}
.sompret {
overflow: hidden;
position: relative;
width: 300px;
height: 300px;
}
.image_reel {
position: absolute;
top: 0;
left: 0;
}
.image_reel img {
overflow: hidden;
float: left;
width: 300px;
height: 300px;
}
.paging {
background: #878773;
border-top: 2px solid #fff;
padding: 8px 0 8px;
text-align: center;
z-index: 100;
}
.paging a {
text-indent: -9999px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY4REttZotcLgQIjpsvOsH_3qEkRQftm7meerGTlffpVQpV32cDON_ny_Wi0IfChAztSAKsE8IBy7kddMQyavjR5mPFbQfu8TF9I3-MBeyNeiF7xX6trcWunGMfTL-hiCS47dsTXMX-eU/s1600/slider_item.png) no-repeat center;
width: 10px;
height: 10px;
display: inline-block;
margin: 5px;
outline: none;
}
.paging a.active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjpj-rrn2wICZdYFd17dOZqzzCzn8Z-60TS4itGmMcN7pUkIPAwSGO-93L8VXg8b4tLLsXcmYQ6VvUEXxfT4UYurwxc7yNp_ZrLpGyZvodyhJJWJZnr-1TTiAj8_s9QjtgqNmOx6a9l0s/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/AVvXsEhziKmSMwv57lm56zXiSzOQtrwR-ye4dnCoM_r-4rq7_o4prSUOZTyYN3tDsg3CY0yhzYvNwCkZHcWvzBiz26CAN5MBY8gzhk2ikBsjq-6IL09Egwas_65Ig2yyNDQKxrwCrfaPWgrtjgEy/s1600/uj-opacity-40.png);
padding: 10px 10px;
}
.crott a {
color: #fff;
font: 18px Arial;
margin-bottom:8px;
}
.crott p {
color: #fff;
font: 12px Arial;}
.post-date {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgStQols3cK37xoW3OgZWrzDgrmkcJd42rkZ2uEwI6nTr9Fx2AeWizpZzEBG-BFxo-jrEUNg1erJASBYHX6HOdaL7oJMO6TewrMIbfzPo6PAV_e3xeOKl7KaKh5dUrp7bONyfNdaMhj2LQ/") no-repeat scroll 0 4px transparent;
color:#6F6F6F;
padding-left:15px;
font-size:13px;}
.single_comments a {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh23UcFl5QTkmolNAqLIR8Kft5QVS7u7Nj7sXA0l-ezDG8NBV7Ev4x80B1ekYayMp8oO4HcBSAALdreLqZfYm3KnvkOV_XiTx5fAhhS5jLNWVR5sFtSKXh_TiuyDpcwMJ0vdaNch1f9CA/") no-repeat scroll 0 4px transparent;
color:#6F6F6F;
font-size:13px;
line-height:1em;
margin-left:20px;
padding-left:15px}
.i-snippet{
font-size:15px;line-height:18px;margin-top:5px;font-weight:500}
Dòng in đậm ở trên là kích thước của thanh trượt, với chiều rộng của 300px và chiều cao 300px.
2. Nhập mã script sau vào trước thẻ </ head>:
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1eGS0AJgxezlpcdzs20OCCAtU9w5z4i_9i1g_R_-ywYB6zPI-DG6-dvAkVYhyphenhyphenwTSBTIv8nRip4qnaBErMFGh344fVTzX7pJ-Z7jgeHVJUmxdmROOXjM2nCEZ8_eUAsvw_3jOF6XtC08g/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryTitle = 20;
numpostsAB = 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 showrecentpostsA(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numpostsAB; 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;
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><span class="post-date" style="color:#fff !important">' + daystr + '</span><span class="single_comments"><a href="'+posturl+'" style="font-size:12px !important">'+pcm+'</a></span></p><p class="i-snippet">'+removeHtmlTag(postcontent,120)+'...</p></div>';
document.write(trtd);
j++;
}
}
function showrecentpostsB(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numpostsAB ; 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;
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>
3 Coppy code chính để hiển thị Slide của bạn.
<div class='sompret-wrapper'>
<div class='sompret'>
<div class='image_reel'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numpostsAB+"&orderby=published&alt=json-in-script&callback=showrecentpostsB\"><\/script>");
</script></div>
<div class='description'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numpostsAB+"&orderby=published&alt=json-in-script&callback=showrecentpostsA\"><\/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>
<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>
Bạn có thấy nó đơn giản không nào, vậy là đã thực hiện xong.
Tag :
Blog Design,
Blog Tips
. Slider kiểu này trông khá đẹp mắt và dễ thực hiện. ){kind=link}
0 Comment "Hướng dẫn tạo Box Slider tin trượt trên sidebar cho Blogger (Blogspot)"