(Traidatmui.com) – Mình đã từng chia sẻ cùng các bạn nhiều cách trình diễn cho các bài viết mới trên Blogspot và bài viết hôm nay mình chia sẻ thêm một cách trình diễn mới cho bài viết với hiệu ứng Zoom bằng JQuery. Cách trình diễn này mình thấy trông cũng khá hay và đẹp mắt nên chia sẻ cùng mọi người tham khảo. Với thủ thuật này thì các hình ảnh trong bài viết trình diễn hiệu ứng Zoom và có phần tóm tắt nội dụng của bài viết đó.» Bắt đầu thủ thuật
1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<script src="http://luat-1x1-blogspot.googlecode.com/files/Jquery1.3.2%20%282%29.js" type="text/javascript"></script>
<style type='text/css'>
#content-slider { clear: both;
margin: 0 auto; padding: 0; }
#content-slider .wrap {
background: #eee;
position: relative;
display: block;
font-family:arial;
font-size:12px;
width: 500px; /* độ rộng của tiện ích*/
height: 300px; /* chiều cao của tiện ích*/
margin: 0 auto 20px auto;
padding: 0;
}
#content-slider #slider-item {
position: relative;
display: block; list-style: none;
margin: 0; padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
border: none; z-index: 1;
}
#slider-item li {
list-style: none; margin: 0;
padding: 0; width: 100%;
height: 100%; overflow: hidden;
border: none; position: relative;
display: block; }
#slider-item li .slider-detail {
width: 100%;
height: 120px; /*chiều cao của phần tóm tắt bài viết*/
background: #000;
position: absolute;
bottom: 0; left: 0;
color: #FFFFFF; }
#slider-item li .slider-detail .slider-detail-wrap {
padding: 0px 5px 3px 5px; }
#slider-item li .slider-detail h3 { padding: 3px; background: #ccc;
font-size: 14px;
font-weight: normal;
margin-bottom:5px; }
#slider-item li .slider-detail a { color: #000; }
#content-slider .wrap a.slider-prev {
position: absolute; top: 45%;
left: 10px; z-index: 2;
text-indent: -9999px;
cursor: pointer; display: block;
width: 50px; height: 50px;
background: transparent url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/Tc9nyqRb33I/AAAAAAAAATU/cGOCGPFzeZ0/prev.png) no-repeat; }
#content-slider .wrap a.slider-next {
position: absolute; top: 45%;
right: 10px; z-index: 2;
text-indent: -9999px; cursor: pointer;
display: block; width: 50px; height: 50px;
background: transparent url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/Tc9ny7tmeUI/AAAAAAAAATY/_BGccjJyxGU/next.png) no-repeat; }
#content-slider .wrap a.slider-prev:hover, #content-slider .wrap a.slider-next:hover {text-decoration: none; }
</style>
<style type='text/css'>
#content-slider { clear: both;
margin: 0 auto; padding: 0; }
#content-slider .wrap {
background: #eee;
position: relative;
display: block;
font-family:arial;
font-size:12px;
width: 500px; /* độ rộng của tiện ích*/
height: 300px; /* chiều cao của tiện ích*/
margin: 0 auto 20px auto;
padding: 0;
}
#content-slider #slider-item {
position: relative;
display: block; list-style: none;
margin: 0; padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
border: none; z-index: 1;
}
#slider-item li {
list-style: none; margin: 0;
padding: 0; width: 100%;
height: 100%; overflow: hidden;
border: none; position: relative;
display: block; }
#slider-item li .slider-detail {
width: 100%;
height: 120px; /*chiều cao của phần tóm tắt bài viết*/
background: #000;
position: absolute;
bottom: 0; left: 0;
color: #FFFFFF; }
#slider-item li .slider-detail .slider-detail-wrap {
padding: 0px 5px 3px 5px; }
#slider-item li .slider-detail h3 { padding: 3px; background: #ccc;
font-size: 14px;
font-weight: normal;
margin-bottom:5px; }
#slider-item li .slider-detail a { color: #000; }
#content-slider .wrap a.slider-prev {
position: absolute; top: 45%;
left: 10px; z-index: 2;
text-indent: -9999px;
cursor: pointer; display: block;
width: 50px; height: 50px;
background: transparent url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/Tc9nyqRb33I/AAAAAAAAATU/cGOCGPFzeZ0/prev.png) no-repeat; }
#content-slider .wrap a.slider-next {
position: absolute; top: 45%;
right: 10px; z-index: 2;
text-indent: -9999px; cursor: pointer;
display: block; width: 50px; height: 50px;
background: transparent url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/Tc9ny7tmeUI/AAAAAAAAATY/_BGccjJyxGU/next.png) no-repeat; }
#content-slider .wrap a.slider-prev:hover, #content-slider .wrap a.slider-next:hover {text-decoration: none; }
</style>
5. Save template lại và trở về phần tử trang (Page Elements)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRRBpjmZ7_2yC_d0voyUwDswUZfRCoE02b0jh5k4eoJdvXWTi6qoDKaLOAMMR-h4hHhrTPDoestitXebgcn_NiYCFac5iP0ZZ18UUZyBaTEB3-9hWZn9S5Tn7EEIDB6FKgNQZCcw9Q-A_q/";
imgwidth = 500; //độ rộng của ảnh trong tiện ích
imgheight = 300; //chiều cao của ảnh trong tiện ích
showRandomImg = false;
aBold = true;
text = "Nhận xét";
showPostDate = true; //Nếu không muốn hiển thị ngày đăng bài bạn thay TRUE thành FALSE
summaryPost = 340; //số ký tự hiển thị phần tóm tắt bài viết
numposts =5; //số bài viết hiển thị, ở đây mình chỉ mặc định số này bằng 5
label = "Advanced blogger"; //thay thành nhãn bài viết của bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<div id="content-sidebar-wrap"><div id="content" class="hfeed"><div id="content-slider"><div class="wrap">
<script src="http://traidatmui-tips.googlecode.com/files/JQ_sliderlabel.js" type="text/javascript"></script>
<a class="slider-prev">Previous</a><a class="slider-next">Next</a></div></div></div></div>
<script src="http://traidatmui-tips.googlecode.com/files/jquery.cycle.all.min.2.73.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($){$("#slider-item li a.slider-image").each(function(){var w1,h1;w1=$(this).parent().width();h1=$(this).parent().height();$(this).css({width:w1});$(this).css({height:h1});});});
jQuery(document).ready(function($){$('#content-slider #slider-item').cycle({fx:'zoom',timeout:3800,speed:1500,pause:1,prev:'a.slider-prev',next:'a.slider-next',before:extended_slider_before,after: extended_slider_after});function extended_slider_before(){$('#slider-item .slider-detail').hide();}function extended_slider_after(){$('#slider-item .slider-detail').css({opacity:'0.8'}).slideDown('normal');}});
</script>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRRBpjmZ7_2yC_d0voyUwDswUZfRCoE02b0jh5k4eoJdvXWTi6qoDKaLOAMMR-h4hHhrTPDoestitXebgcn_NiYCFac5iP0ZZ18UUZyBaTEB3-9hWZn9S5Tn7EEIDB6FKgNQZCcw9Q-A_q/";
imgwidth = 500; //độ rộng của ảnh trong tiện ích
imgheight = 300; //chiều cao của ảnh trong tiện ích
showRandomImg = false;
aBold = true;
text = "Nhận xét";
showPostDate = true; //Nếu không muốn hiển thị ngày đăng bài bạn thay TRUE thành FALSE
summaryPost = 340; //số ký tự hiển thị phần tóm tắt bài viết
numposts =5; //số bài viết hiển thị, ở đây mình chỉ mặc định số này bằng 5
label = "Advanced blogger"; //thay thành nhãn bài viết của bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<div id="content-sidebar-wrap"><div id="content" class="hfeed"><div id="content-slider"><div class="wrap">
<script src="http://traidatmui-tips.googlecode.com/files/JQ_sliderlabel.js" type="text/javascript"></script>
<a class="slider-prev">Previous</a><a class="slider-next">Next</a></div></div></div></div>
<script src="http://traidatmui-tips.googlecode.com/files/jquery.cycle.all.min.2.73.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($){$("#slider-item li a.slider-image").each(function(){var w1,h1;w1=$(this).parent().width();h1=$(this).parent().height();$(this).css({width:w1});$(this).css({height:h1});});});
jQuery(document).ready(function($){$('#content-slider #slider-item').cycle({fx:'zoom',timeout:3800,speed:1500,pause:1,prev:'a.slider-prev',next:'a.slider-next',before:extended_slider_before,after: extended_slider_after});function extended_slider_before(){$('#slider-item .slider-detail').hide();}function extended_slider_after(){$('#slider-item .slider-detail').css({opacity:'0.8'}).slideDown('normal');}});
</script>
7. Save tiện ích lại là xong
Ở trên là mình cho bài viết hiển thị theo từng nhãn bài viết trên blog, nếu muốn hiển thị cho toàn bộ bài viết trên blog bạn thay link file JS có tên (JQ_sliderlabel.js) trong code ở bước 6 thành link bên dưới
http://traidatmui-tips.googlecode.com/files/JQ_sliderpost.js
Chúc bạn thành công
Bài đăng
0 nhận xét