"Tiện ích bài viết mới nhất với ảnh thumb trượt dành cho Blogger"
Traidatmui.com – Tiếp theo những bài viết về tiện ích bài viết mới nhất cho blogspot thì hôm nay mình xin chia sẻ cùng các bạn một cách trình diễn mới dạng slide, với thủ thuật này thì phần tiêu đề bài viết sẽ được trình bày ở bên phải và phần ảnh thumb sẽ nằm phía bên trái. Điểm đáng chú ý ở thủ thuật này là nó sẽ trình diễn các ảnh thumb dạng trượt, tức là khi bạn rê chuột vào tiêu đề của một bài viết nào đó thì phần ảnh thumb bên trái sẽ tự động trượt đến ảnh thumb của bài viết đó. Để thấy rỏ hơn bạn có thể xem demo ở bên dưới, bạn rê chuột vào phần tiêu đề sẽ thấy rỏ hiệu ứng.
Hình ảnh minh họa
» Bắt đầu thủ thuật1. Đă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 type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.min.js"></script>
<script src="http://data-traidatmui.appspot.com/scripts/Slide_IFocus.js" type="text/javascript"></script>
<style type="text/css">
* { margin:0; padding:0; }
ul, li { list-style:none; }
#slide {margin-top:10px;width:640px;height:260px;background:#fff; border:2px solid #ccc;}
#ifocus_pic { display:inline; position:relative; float:left; width:360px; height:250px;overflow:hidden; margin:5px 0 0 5px; }
#ifocus_piclist { position:absolute; }
#ifocus_piclist img { width:360px; height:250px; }
#ifocus_btn { display:inline; float:left; width:91px; margin:5px 8px 5px 8px;}
#ifocus_btn li {width:265px; line-height:21px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); text-align:left; white-space:nowrap; overflow:hidden; color:#000;}
#ifocus_btn li a{color:#000; font-size:12px;}
#ifocus_btn li:hover, #ifocus_btn li a:hover {color:#0000ff;opacity:1; }
#new_entry{font-size:17px; color:#c71585; line-height:30px;width:265px;font-weight: bolder ;}
</style>
<script src="http://data-traidatmui.appspot.com/scripts/Slide_IFocus.js" type="text/javascript"></script>
<style type="text/css">
* { margin:0; padding:0; }
ul, li { list-style:none; }
#slide {margin-top:10px;width:640px;height:260px;background:#fff; border:2px solid #ccc;}
#ifocus_pic { display:inline; position:relative; float:left; width:360px; height:250px;overflow:hidden; margin:5px 0 0 5px; }
#ifocus_piclist { position:absolute; }
#ifocus_piclist img { width:360px; height:250px; }
#ifocus_btn { display:inline; float:left; width:91px; margin:5px 8px 5px 8px;}
#ifocus_btn li {width:265px; line-height:21px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); text-align:left; white-space:nowrap; overflow:hidden; color:#000;}
#ifocus_btn li a{color:#000; font-size:12px;}
#ifocus_btn li:hover, #ifocus_btn li a:hover {color:#0000ff;opacity:1; }
#new_entry{font-size:17px; color:#c71585; line-height:30px;width:265px;font-weight: bolder ;}
</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/AVvXsEis1lcqvCNY5dZQkdt43XLcovWMm-UakS9Kg1atz5yR3sFUBfrzCcae08yMIp0-Xt3KPHfhR2VqhgqK6PCXwVaJKmXLqjs0YWP2KZ6Z3jUPGAxklOAitP7Dulz0Bffic8p9IuZmAvhqdnW8/";
showRandomImg = true;
aBold = true;
text = "";
showPostDate = false;
numposts = 10; //số bài viết hiển thị
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<div id="slide">
<div id="ifocus">
<script src="http://data-traidatmui.appspot.com/scripts/re_slidefocus_01.js" type="text/javascript"></script>
<div id="ifocus_btn">
<div id="new_entry">Bài viết mới nhất</div>
<script src="http://data-traidatmui.appspot.com/scripts/re_slidefocus_02.js" type="text/javascript">
</script>
</div>
</div></div>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis1lcqvCNY5dZQkdt43XLcovWMm-UakS9Kg1atz5yR3sFUBfrzCcae08yMIp0-Xt3KPHfhR2VqhgqK6PCXwVaJKmXLqjs0YWP2KZ6Z3jUPGAxklOAitP7Dulz0Bffic8p9IuZmAvhqdnW8/";
showRandomImg = true;
aBold = true;
text = "";
showPostDate = false;
numposts = 10; //số bài viết hiển thị
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<div id="slide">
<div id="ifocus">
<script src="http://data-traidatmui.appspot.com/scripts/re_slidefocus_01.js" type="text/javascript"></script>
<div id="ifocus_btn">
<div id="new_entry">Bài viết mới nhất</div>
<script src="http://data-traidatmui.appspot.com/scripts/re_slidefocus_02.js" type="text/javascript">
</script>
</div>
</div></div>
Ở trên mình chỉ cho trình diễn dạng slide tối đa là 10 bài viết, nếu hơn 10 bài thì bài viết thứ 11 trở đi sẽ không có dạng trượt các ảnh thumb. Ở đây hiện tại mình chưa tìm ra cách để có thể ghép 2 file JS lại với nhau để giảm dung lượng, tạm thời thì chúng ta sẽ sử dụng 2 file trên. Thời gian tới nếu khắc phục được mình sẽ update sau.
7. Cuối cùng save tiện ích lại
Chúc bạn thành công
Nguồn: TRAIDATMUI.com
0 nhận xét:
Đăng nhận xét