.My pham Ohui Han Quoc........Nuoc Hoa Chanel Phap
» » » Thủ thuật Slide JQuery bài viết ở trang chủ cho Blogger

Thủ thuật Slide JQuery bài viết ở trang chủ cho Blogger

Lưu ý: Nếu bạn gặp khó khăn với cách làm của bài viết "Thủ thuật Slide JQuery bài viết ở trang chủ cho Blogger" dưới đây hoặc mọi vấn đề khác, hãy gửi câu hỏi cho chúng tôi - TẠI ĐÂY - Đội ngũ lập trình sẽ trả lời và hỗ trợ bạn nhiệt tình sau 3 phút, 24/24h. Ok, giờ chúng ta bắt đầu

Hôm nay WHG Blogger sẽ chia sẻ cùng các bạn một thủ thuật blogger thiết kế website trình diễn các bài viết dạng slide trông rất hấp dẫn và mượt mà dành choblog. Nhược điểm của tiện ích này là sử dụng nhiều file JS nên có thể load hơi chậm, tuy nhiên đổi lại thì các bài viết của bạn được trình diễn đẹp hơn. Ở tiện ích này sẽ được tích hợp các nút như Next, Previous và nút Stop/Play các bài viết.
1. Đăng nhập vào tài khoản Blogger  
2. Vào phần Mẫu (Template)  
3. Chọn chỉnh sửa HTML (Edit HTML) 
4. Chèn code bên dưới vào sau thẻ <head>
<script language="javascript" type="text/javascript" src="http://thietkewebplus.googlecode.com/files/Jquery.min.1.5.1.js"></script>
<script language="javascript" type="text/javascript" src="http://thietkewebplus.googlecode.com/files/Jquery.min.1.3.js"></script>
<script language="javascript" type="text/javascript" src="http://thietkewebplus.googlecode.com/files/script.js"></script>
5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin> 
.main-slider{width:414px;  /*độ rộng của phần bên trái*/
height:300px; /*chiều cao của phần bên trái*/
border-right:#ccc solid 1px;}
.lof-slidecontent { width:710px;  /*độ rộng của cả tiện ích*/
height:300px; /*chiều cao của cả tiện ích*/
background:#eee;position:relative; overflow:hidden; border:#ccc solid 3px;}
.preload{ height:100%; width:100%; position:absolute; top:0; left:0; z-index:100000; text-align:center; background:#FFF}
.preload
 div{ height:100%;width:100%; background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1aHhcmQWZMo_tJMCFHIA4AvXYEujulCqogonLlsz1YAswEXKD8K4pGIfF9jhNnF7MTJgFEZb9jQMKXGCkhad4jqSzZKgMrlVi8SjKZvA1ckqqSk-dYNwPOBcQccVWjuHTpSUQrYUl7eSq/s1600/load-indicator-namkna-blogspot-com.gif)
 no-repeat scroll 50% 50%;}
.sliders-wrapper{position:relative; height:100%; z-index:3px; overflow:hidden; }
ul.sliders-wrap-inner{overflow:hidden;
 background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1aHhcmQWZMo_tJMCFHIA4AvXYEujulCqogonLlsz1YAswEXKD8K4pGIfF9jhNnF7MTJgFEZb9jQMKXGCkhad4jqSzZKgMrlVi8SjKZvA1ckqqSk-dYNwPOBcQccVWjuHTpSUQrYUl7eSq/s1600/load-indicator-namkna-blogspot-com.gif)
 no-repeat scroll 50% 50%; padding:0px; margin:0; position:absolute; 
overflow:hidden;}
ul.sliders-wrap-inner li{overflow:hidden;float:left; padding:0px;margin:0px; position:relative;}
ul.sliders-wrap-inner li img{ padding:0px;
width:414px; /*độ rộng của ảnh bên trái*/
height:300px; /*chiều cao của ảnh bên trái*/
}
.slider-description a{ color:#000; }
.slider-description{
font-size:12px;
z-index:100px;
position:absolute;
bottom:0px;
left:0px;
width:400px; /*độ rộng của phần mô tả hay phần tóm tắt nội dung*/
background:#000;
height:100px; /*chiều cao của phần mô tả hay phần tóm tắt nội dung*/
padding:0px 8px 5px 8px;
color:#fff;
opacity:0.8;
line-height:1.5em;
}
ul.navigator-wrap-inner h2,.slider-description h2{background:none; }
.slider-description h2{line-height:1.1em;margin: 5px 0 5px 0;}
.slider-description h2 a{font-size: 14px;margin: 0; padding: 0; color:#fff}
.navigator-content {position:absolute;right:0;top:0px;z-index:9;height:300px;color:#FFF
}
ul.navigator-wrap-inner h2{line-height:1.3em;padding:0 0 0 8px;font-size:14px;margin-left:85px;color:#fff;}
.navigator-wrapper{ z-index:10;
height:180px; /*chiều cao của list bài viết bên phải*/
width:310px;  /*độ rộng của list bài viết bên phải*/
overflow:hidden;
color:#FFF;
}
ul.navigator-wrap-inner{ top:0; padding:0; margin:0; position:absolute; width:100%; }
ul.navigator-wrap-inner
 li{ cursor:hand;  cursor:pointer; list-style:none; padding:0; 
margin:0px; overflow:hidden; display:block; text-align:center;}
ul.navigator-wrap-inner
  
li.active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD22RzeWPdqknxuu2vsw8Fgo8wvsz7ZsBkeCEF_9QmSmNglm76sG8O4_chz0hnNj2MJuUVvwE5VwHRlXPof30wY0X1Z4XMu3z5Nwt51ggVMijOsKlXImDiZDpGX-m9UA77JUYcmromVuIb/s1600/arrow-bg-namkna-ngoctra.png)
 no-repeat scroll left center; color:#FFF
}
ul.navigator-wrap-inner
 li.active 
div{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjD89he-jz6yoxQmL-Zw0NHmJ9Y84UrGpyomNH3Zy-H3Q7sLmyZqnXrYPIUdVBI5GRgKEPX_ydVmSJbDhvvdWIjbS_r1KeA1Q6fn0N-wjxB-lIHyusGItSbpfz_wOJVpZcme2nMZfKqaFV/s1600/grad-bg-namkna-ngoctra.gif);
color:#FFF;}
ul.navigator-wrap-inner  li >  div{
background:#333;
color:#FFF;
height:100%;
position:relative;
margin-left:15px;
padding-left:15px;
border-top:1px solid #E1E1E1;
text-align:left
}
.navigator-wrap-inner img{
height:75px;  /*chiều cao của ảnh thumb ở list bài viết bên phải*/
width:75px;   /*độ rộng của ảnh thumb ở list bài viết bên phải*/
margin:8px 8px 8px 0px;
float:left;
padding:2px;
border:#C5C5C5 solid 1px;
}
.button-next,
.button-previous{
display:block;
width:40px;
color:#FFF;
cursor:pointer;
position:absolute;
height:100%;
z-index:40;
top:0;
text-indent:-999px;
}
.button-next {
right:0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB4uvgp6kr6FL9KyDzhRQwQYp20iAs5C3zDi1tqYHRvOs1qz5RlC56L_hMJdI0zd0kXIWjmT-3qb1zDXp635ggyQPZ2awPRb_flHOxGmtoqYgu3Vgqs85ZJaYOZ70syjCbfAsXrzZkbZfF/s1600/next-namkna-ngoctra.png)
 no-repeat right center;
}
.button-previous {
left:0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_-xW2FH05fMpsaIXyR2_XbRwEsVGNhPLiLvnC_T2mrV-rgxN1wsBgvMk3WnytvoDriA1QZCuItgRat5VCgkBJX_jkIU_QQhIhuC0VLYKOpMT7iAC3_R_AsAt4C2Zc1qlRhSaBi8p2QV2x/s1600/previous-namkna-ngoctra.png)
 no-repeat left center;
}
.button-control {
background:#333;
position:absolute;
top:10px;
right:48%;
height: 20px;
width: 20px;
cursor:hand; cursor:pointer;
}
.button-control span { display:block;  width:100%; height:100%;}
.action-start span  {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVO3UwmbFPOKicZQ6N7NdbA5TjnAOvqEB0GVeiascK2KkeC7gUJtg9SzlGlu-FJ2Ftm9OBu-zWhCxp7QoVxv9q5OMPwNY3-2GPxnaRHZ5PoYva57GVyDehkggxyajw0liw_7m40sQhYoPi/s1600/play-namkna-blogspot-ngoctra.png)
 no-repeat center center;
}
.action-stop span {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ3FunQeKCyCqdVearaowBW-Pqzuzkv7YtTiUpCzQHFv2kgVEhxeNk-pBCpasGiAKMzjMqPYaI1X_1qQYg_Qo_UPAXDj00YdkGMr_vQpV-p5Z3WerbMIN1ZxSIS-L4CkU7SlJpTNtDOzTP/s1600/pause-namkna-ngotra.png)
 no-repeat center center;
}
6. Save template lại

7- Về Bố cục (Lay out) => Thêm 1 HTML/Javascript và thêm vào code bên dưới.
<script type="text/javascript">
$(document).ready( function(){ 
var buttons = { previous:$('#jslidernews .button-previous') ,
next:$('#jslidernews .button-next') };
$('#jslidernews').lofJSidernews( { interval:5000,
easing:'easeOutBounce',
duration:1200,
auto:true,
mainWidth:414, 
mainHeight:300,
navigatorHeight : 100,
navigatorWidth : 310,
maxItemDisplay:3,
buttons:buttons});  
});
summaryposts = 30;
numposts = 15;
label = "Blogspot-tips";
home_page = "http://www.thietkeblogger.net/"; 
</script>

<div id="jslidernews" class="lof-slidecontent">
<script src="http://thietkewebplus.googlecode.com/files/jqslidernews.js" type="text/javascript">
</script></div>

  • easeOutBounce, là tên của hiệu ứng bạn có thể chọn kiểu trình diễn khác bằng cách thay (easeOutBounce) thành một trong các tên sau: easeInOutExpo,easeInOutQuad.
  • mainWidth:414,  Là độ rộng của phần trình diễn bên trái
  • mainHeight:300, Là chiều cao của phần trình diễn bên trái
  • navigatorHeight : 100,   Là chiều cao của list bài viết bên phải
  • navigatorWidth : 310, Là độ rộng của list bài viết bên phải
  • summaryposts = 30; là số ký tự của nội dung phần mô tả
  • numposts = 15; là số bài viết hiển thị
  • label = "Blogspot-tips"; thay Blogspot-tips thành tên nhãn muốn hiển thị tronmg blog của bạn nếu bạn chọn hiển thị cho một nhãn cụ thể.
  • home_page = "http://namkna.blogspot.com/"; thay thành địa chỉ blog của bạn
  • Ở trên mình cho tiện ích hiển thị tất cả bài viết trên blog không theo từng nhãn riêng nên bạn không cần quan tâm đến phần (label = "Blogspot-tips";), phần đó mình thêm phụ để bạn nào muốn hiển thị theo nhãn thì sẽ phải quan tâm đến biến này. Để hiển thị theo từng nhãn riêng biệt thì bạn cần thay file JS bên dưới 
    http://thietkewebplus.googlecode.com/files/jqslidernews_2.js 
    thành file JS sau  
    http://thietkewebplus.googlecode.com/files/jqslidernews_label.js
8. Cuối cùng bạn save tiện ích lại là xong.Ngoài ra các bạn có thể tham khảo thêm các thủ thuật tạo Slide cho blogger tại đây. 

Ban quản trị:

Bạn đang đọc bài viết "Thủ thuật Slide JQuery bài viết ở trang chủ cho Blogger". Nếu bạn đang gặp khó khăn với cách làm trên hoặc mọi vấn đề khác, hãy gửi câu hỏi cho chúng tôi - TẠI ĐÂY - Đội ngũ lập trình sẽ trả lời bạn sau 3 phút, 24/24h (Nếu bị bật ra quảng cáo, vui lòng nhấn Bỏ Qua Quảng Cáo)

Trang chủ | Thủ thuật Seo | Thủ thuật Blogspot | Thủ thuật Facebook | Kiếm tiền online | Sitemap | Hỏi đáp nhanh
Công ty cổ phần công nghệ truyền thông Media Label
Media Label Communications Joint Stock Company
Bản quyền © 2009-2015
Ghi rõ nguồn khi phát hành lại thông tin từ website này
TOP