"Trình diễn bài viết mới với hiệu ứng Zoom cho Blogspot"

(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 đó. Để thấy rỏ hơn, trực quan hơn bạn có thể xem demo bên dưới.

» 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://data-traidatmui.appspot.com/scripts/Jquery1.3.2.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>

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] = "http://lh6.ggpht.com/_BTztXRwC9ik/TMmT8UtD9QI/AAAAAAAAElc/wEXpVqs7lt4/no.png";
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://data-traidatmui.appspot.com/scripts/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://data-traidatmui.appspot.com/scripts/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://data-traidatmui.appspot.com/scripts/JQ_sliderpost.js

Chúc bạn thành công

Xem khác cùng chủ đề

12 nhận xét | Viết lời bình

6/04/2011 02:36:00 SA Trả lời

Bài này bén đấy, y hệt bên worspress votay

6/13/2011 05:34:00 SA Trả lời

mấy cái này đẹp thật...nhưng ngại cái sợ bị nặng

Admin
6/13/2011 07:02:00 CH Trả lời

Nó cũng không nặng lắm đâu bạn, nếu bạn dùng quá nhiều thủ thuật tương tự cho blog thì việc làm nặng blog là khó tránh khỏi

6/16/2011 07:40:00 SA Trả lời

Đã thực hiện thành công Cuoilon

Admin
6/16/2011 11:42:00 CH Trả lời

=L:

6/17/2011 08:09:00 SA Trả lời

thanks phat nua Cuoilon

ffc
7/15/2011 06:24:00 SA Trả lời

sao blog em nó chỉ hiện duy nhất một bài mới nhất à

8/26/2011 08:42:00 SA Trả lời

em đã thử ,hay thật đấy.cảm ơn anh nha!

Admin
8/26/2011 09:22:00 SA Trả lời

Cái này trình diễn bài viết trông cũng khá đẹp mắt. c:o

8/30/2011 07:34:00 SA Trả lời

web nay hay qua ak thu thuat blog kai ji cung có good

5/09/2014 04:56:00 SA Trả lời

anh ơi cho em hỏi làm sao điều chỉnh thời gian chuyển vậy ạ? =:?

7/24/2015 02:19:00 SA Trả lời

Bạn ơi bên mình có dịch vụ Đăng tin tự động lên groups trên facebook miễn phí bạn xem qua nhé. miễn phí 100%
Ngoài ra các bạn có thể đọc tin tức tại Kênh tin tức giải trí yeubao.com
Các bạn có thể truy cập link sau để xem thông tin công nghệ
Khoinguoncongnghe.net | kênh thông tin dành cho tín đồ công nghê
cám ơn bạn đã đọc
đăng tin tự động trên facebook miễn phí 100% xem tại Đăng tin tự động lên groups trên facebook miễn phí
xem thủ thuật blogspot, thủ thuật blogger, thủ thuật facebook tại thủ thuật tổng hợp facebook, blogger,coputuer
xem tin tức giới trẻ, các tin nổi bật tin tức nổi bật, tin sao, tin giới trẻ, đời sống xã hội
xem thong tin giải trí, cung hoàng đạo, tại bí mật 12 chòm sao,tâm sự,blog tâm sự

giải trí thư giã relax giải trí thư giãn relax
khám phá du lịch, bi ẩn khám phá du lịch, bí ẩn
kho video giải trí khổng lồ video đời sống xã hội, video giải trí
khởi nguồn công nghệ, xem tin tức công nghệ, tin tức internet
tin tức internet
Tin tức itc , tin tức technogoy tin tức ict

Khám phá công nghệ
khám phá

Thủ thuật công nghê thủ thuật công nghệ, tips





Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang