Recent post slider for blogger | GIÁO XỨ LỘC THỦY
12 Thánh tông đồ Audio suy niệm Audio truyện Công giáo Âm nhạc Bài Giảng mp3 Bạn có biết bạn trẻ xa nhà Bảo vệ sự sống Blog tips Ca kịch công giáo Các bài giáo lý của ĐTC Phanxicô Các hội đoàn Các mục chính Các Thánh Các thánh địa Công giáo Các thánh khác Các Tuần Cửu Nhật Kính Đức Mẹ Các vấn nạn xã hội Cắm hoa nghệ thuật Câu chuyện Giáng Sinh Châm ngôn công giáo Chiêm ngắm Chúa Chuyện phiếm đạo đời Chuyện về Giáo Lý và Giáo Dục Công Giáo đó đây Cửu Nhật Kinh Nguyện Danh Danh bạ website các giáo xứ - giáo họ việt nam Danh bạ website công giáo Di sản thế giới Du Lịch Đẹp + Để sống đạo hôm nay Đôi nét về Giáo xứ Đời sống cầu nguyện Đức Mẹ Hằng Cứu Giúp Đức Mẹ Lama Đức Thánh Cha phanxico Đức Tin và Khoa Học Đường Hy Vọng Gia đình Giải đáp thắc mắc cuộc đời Giao hat Vang Mai Giáo hạt Vàng Mai Giáo Hội Đông Phương Giáo lý - dân ca Giáo lý - kinh thánh Giáo sử Giáo xứ Media góc học tập Góc khám phá Góc nghệ thuật Góc thư giãn Góp nhặt Hạt Giống Lời Chúa Hình ảnh cổ xưa Hình ảnh Giáo xứ Lộc Thủy học tiếng anh Hướng dẫn sử dụng webblog Kết nối websites Kiến thức phổ thông Kính Đức Mẹ Kinh thánh tiếng anh Lẽ sống Lịch sử các Dòng tu Lịch sử Giáo Hội Việt Nam Lịch sử hình thành Giáo xứ Lộc Thủy Lòng Thương xót Chúa Lộc Thủy Lời Chúa qua bài hát Lời chúa theo chủ đề Mùa Vọng - Advent Năm thánh Lòng Thương Xót Nghe và suy gẫm Nghệ thuật Công Giáo Nghệ thuật sống Ơn gọi-tận hiến Phim công giáo Quỳnh lưu Radio Công Giáo Sách Công giáo sách tháng đức bà Sắc màu cuộc sống Sổ tay sinh hoạt suy gẫm Suy gẫm và Cầu nguyện Suy niệm Lời Chúa Suy niệm Lời Chúa mùa Phục Sinh Suy niệm Lời Chúa mùa TN A Suy niệm Lời Chúa năm A Suy niệm mùa chay Sức khỏe - ẩm thực Tài liệu Công Giáo tổng hợp Tài liệu dạy Giáo Lý Tài liệu Tuần Thánh Thánh ca Thánh ca cầu nguyện Thánh Ca Hoàng Diệp Thánh Mẫu học Thánh Mẫu La vang Thế giới Công Giáo Thơ - Truyện Công Giáo Thơ Công Giáo Thơ và cuộc sống Thủ thuật blog Thủ thuật facebook Thủ thuật google + Thư Viện Công Giáo Tiếng anh qua Lời Chúa Tiêu điểm Tìm hiểu phụng vụ Tin Công Giáo Tin Giáo xứ Tin tức Giáo xứ Lộc Thủy Tin Việt Nam và Thế Giới Tổ chức kỳ thi Giáo lý Tông huấn Giáo hội Công giáo Trang Trí Giáng Sinh Trắc nghiệm Giáo lý Trắc nghiệm Kinh Thánh Trắc nghiệm năm đức tin Truyện Công Giáo Truyện về Mẹ Tư liệu Giáo hội Công giáo việt nam Tư liệu Giáo phận Vinh Tư liệu Giáo xứ Lộc Thủy Từ vựng công giáo Anh-việt Tv Công giáo TVs và Radios khắp nơi Vấn đáp đức tin công giáo Videos Đặc Sắc Vietnamese English Prayers Vinh Quang Đức Maria Website Công Giáo bổ ích

Recent post slider for blogger

16:15:00
How to add animated recent post slider for blogger/auto scrolling recent post slider
(Beautiful animated recent post slider for blogger)

This automated recent post slider/featured post slider  widget updated automatically when you posted on your blogs.


Trình diễn bài viết mới dạng slide đẹp mắt bằng JQuery dành cho Blogspot  - BY: HTTP://NAMKNA.BLOGSPOT.COM/

» Let's start


1. click edit HTML.

2. Insert the below code affter the <head> tag

<script language="javascript" type="text/javascript" src="http://dl.dropbox.com/u/66256041/Menu/Namkna-blogspot-menu-doc/Jquery.min.1.5.1.js"></script>
<script language="javascript" type="text/javascript" src="http://dl.dropbox.com/u/66256041/Menu/Namkna-blogspot-menu-doc/Jquery.min.1.3.js"></script>
<script language="javascript" type="text/javascript" src="http://dl.dropbox.com/u/66256041/Menu/Namkna-blogspot-menu-doc/script.js"></script>
- You should download the above 3 Js files and upload to your own host for long term of usage. If you don't have host, you can check this  post hoặcor this post to see what to do

3. Insert the below CSS before ]]></b:skin> tag
.main-slider{width:414px;  /*the width of  the left part*/
height:300px; /*the height of  the left part*/
border-right:#ccc solid 1px;}
.lof-slidecontent { width:710px;  /*the width of the whole widget*/
height:300px; /*the height of the whole widget*/
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(http://2.bp.blogspot.com/-84W1GJxu2EA/T5DJ1a3O-qI/AAAAAAAABMQ/RN6ZLjmPiTU/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(http://2.bp.blogspot.com/-84W1GJxu2EA/T5DJ1a3O-qI/AAAAAAAABMQ/RN6ZLjmPiTU/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; /*the width of the image on the left*/
height:300px; /*the height of the image on the left*/
}
.slider-description a{ color:#000; }
.slider-description{
font-size:12px;
z-index:100px;
position:absolute;
bottom:0px;
left:0px;
width:400px; /*the width of the content sumary*/
background:#000;
height:100px; /*the height of the content sumary*/
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; /*the height of the right posts list*/
width:310px;  /*the width of the right posts list/
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(http://4.bp.blogspot.com/-JY_fqYF2LRY/T3QZqbn1BZI/AAAAAAAAAv8/cHeTRoWwN08/s1600/arrow-bg-namkna-ngoctra.png)
 no-repeat scroll left center; color:#FFF
}
ul.navigator-wrap-inner
 li.active 
div{background:url(http://1.bp.blogspot.com/-PUT1Yred-Jc/T3QaEk6AqYI/AAAAAAAAAwE/YLrJP459rwk/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;  /*The height of list thumb on the right*/
width:75px;   /*The width of list thumb on the right*/
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(http://3.bp.blogspot.com/-67hwuKSVr-4/T3QYoBTXfvI/AAAAAAAAAvc/yth_B5w22jw/s1600/next-namkna-ngoctra.png)
 no-repeat right center;
}
.button-previous {
left:0px;
background:url(http://2.bp.blogspot.com/-iZGmrZk6eIU/T3QY3tPnpXI/AAAAAAAAAvk/9CXKHmlQRKU/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(http://2.bp.blogspot.com/-iqqR9dcU-P0/T3QZJvnvBwI/AAAAAAAAAvs/BhvMIcgKTDw/s1600/play-namkna-blogspot-ngoctra.png)
 no-repeat center center;
}
.action-stop span {
background:url(http://1.bp.blogspot.com/-jImuLv5abSs/T3QZZmpJ-_I/AAAAAAAAAv0/7hO_l-JREhE/s1600/pause-namkna-ngotra.png)
 no-repeat center center;
}
4. Save template and come back to "Page Elements"
5. add 1 HTML/Javascript and paste the below code into it
<script type="text/javascript">
$(document).ready( function(){ 
var buttons = { previous:$('#jslidernews .button-previous') ,
next:$('#jslidernews .button-next') };
$('#jslidernews').lofJSidernews( { interval:5000,
easing:'easeOutBounce',  // name of the effect
duration:1200,
auto:true,
mainWidth:414,  //the width of the slide on the left
mainHeight:300, //the height of the slide on the left
navigatorHeight : 100,   //the height of the post list on the right
navigatorWidth : 310, ///the width of the post list on the right

maxItemDisplay:3,
buttons:buttons});  
});
summaryposts = 30; //number of summary letters
numposts = 15; //number of posts to show
label = "Advanced blogger"; //change your own lable name
home_page = "http://namkna.blogspot.com/"; //change to your own blog address
</script>

<div id="jslidernews" class="lof-slidecontent">
<script src="http://dl.dropbox.com/u/66256041/Menu/Namkna-blogspot-menu-doc/jqslidernews.js" type="text/javascript">
</script></div>
- In the above code, I choose the (easeOutBounce) effect, you can change  (easeOutBounce) to one of the following effects: easeInOutExpo, easeInOutQuad.

- The above code will show all the reccent posts, so you do not need to care about the (label = "Advanced blogger";), cause I just added that part for those who want to show posts in a specific lable. To show the posts in a specific label, you must change this JS:
http://dl.dropbox.com/u/66256041/Menu/Namkna-blogspot-menu-doc/jqslidernews.js
into this JS file:
http://dl.dropbox.com/u/66256041/Menu/Namkna-blogspot-menu-doc/jqslidernews_label.js
Remember to change the name of label (Advanced blogger) to the label you want to show in your blog

6. Save your template- you done!.

Source: http://namkna.blogspot.com/2011/02/tao-slideshow-trinh-dien-anh-chuyen.html

Labels:

Đăng nhận xét

[blogger][facebook][disqus]

Author Name

{picture#https://1.bp.blogspot.com/-E9BgdfTl7Ug/Xpa2B9OupwI/AAAAAAAAA1U/PnbaR3h3-jE-jQ5GwdNpEvZGUfRWCLz6gCLcBGAsYHQ/s1600/Ch%25C6%25B0a%2B%25C4%2591%25E1%25BA%25B7t%2Bt%25C3%25AAn-1.png} {facebook#https://www.facebook.com/giaoxulocthuygpvinh} {twitter#https://twitter.com/giaoxulocthuy} {youtube#https://www.youtube.com/@giaoxulocthuy}

Biểu mẫu liên hệ

Tên

Email *

Thông báo *

Được tạo bởi Blogger.