• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Trình chiếu nội dung và hình ảnh sử dụng Mootools

13
17/12/2010

Theo yêu cầu của bạn Hoang Lee tại blog ebeat5.blogspot.com, bạn ấy muốn tiện ích Feature Slideshow trên blog ebeat5.blogspot.com có nút chuyển slide sang trái và sang phải giống như trang playrecords.net.

Trang playrecords.net được tạo trên nền Wordpress nên kiểu slideshow rất phức tạp. Sau khi nghiên cứu, tôi đã tích hợp nó thành một gói slideshow tương thích cho blogspot và có một số điều chỉnh như tạo thêm phần tiêu đề và tóm tắt cho từng slide ảnh để người đọc có thể nắm bắt thông tin cơ bản về slide ảnh. Slideshow này có sự hỗ trợ của thư viện Mootools giúp cho kiểu trình chiếu nội dung và hình ảnh mượt mà hơn.

Xem Demo.

Để cài đặt tiện ích này, bạn hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger vào Design >> Edit HTML và đặt đoạn code dưới đây vào trước thẻ </head>.

<style type="text/css">
#myGallery,#myGallerySet{width:560px;height:200px;z-index:5;margin-bottom:20px;margin-top:15px;overflow-y:hidden;}
.jdGallery a{outline:0}
#myGallery img.thumbnail,#myGallerySet img.thumbnail{display:none}
.jdGallery{overflow:hidden;position:relative}
.jdGallery img{border:0;margin:0}
.jdGallery .slideElement{width:100%;height:100%;background-color:#000;background-repeat:no-repeat;background-position:center center;background-image:url('http://3.bp.blogspot.com/_ActSVcJ9YKs/TLfKeseQMmI/AAAAAAAABEQ/5dGrFZFIKes/s000/loading-bar-black.png')}
.jdGallery .loadingElement{width:100%;height:100%;position:absolute;left:0;top:0;background-color:#000;background-repeat:no-repeat;background-position:center center;background-image:url('http://3.bp.blogspot.com/_ActSVcJ9YKs/TLfKeseQMmI/AAAAAAAABEQ/5dGrFZFIKes/s000/loading-bar-black.png')}
.jdGallery .slideInfoZone{position:absolute;z-index:10;width:100%;margin:0;left:0;bottom:0;height:50px;background:#343433;color:#fff;text-indent:0;overflow:hidden}
* html .jdGallery .slideInfoZone{bottom:-1px}
.jdGallery .slideInfoZone h2{padding:0;margin:0;margin:2px 5px;font-size:14px;font-weight:bold;color:#fff !important}
.jdGallery .slideInfoZone p{padding:0;font-size:12px;margin:2px 5px;color:#eee}
.jdGallery div.carouselContainer{position:absolute;height:135px;width:100%;z-index:10;margin:0;left:0;top:0}
.jdGallery a.carouselBtn{position:absolute;bottom:0;right:30px;height:20px;/*width:100px;background:url('img/carousel_btn.gif') no-repeat;*/
text-align:center;padding:0 10px;font-size:13px;background:#333;color:#fff;cursor:pointer}
.jdGallery .carousel{position:absolute;width:100%;margin:0;left:0;top:0;height:80px;background:#333;color:#fff;text-indent:0;overflow:hidden}
.jdExtCarousel{overflow:hidden;position:relative}
.jdGallery .carousel .carouselWrapper,.jdExtCarousel .carouselWrapper{position:absolute;width:100%;height:78px;top:10px;left:0;overflow:hidden}
.jdGallery .carousel .carouselInner,.jdExtCarousel .carouselInner{position:relative}
.jdGallery .carousel .carouselInner .thumbnail,.jdExtCarousel .carouselInner .thumbnail{cursor:pointer;background:#000;background-position:center center;float:left;border:solid 1px #fff}
.jdGallery .wall .thumbnail,.jdExtCarousel .wall .thumbnail{margin-bottom:10px}
.jdGallery .carousel .label,.jdExtCarousel .label{font-size:13px;position:absolute;bottom:5px;left:10px;padding:0;margin:0}
.jdGallery .carousel .wallButton,.jdExtCarousel .wallButton{font-size:10px;position:absolute;bottom:5px;right:10px;padding:1px 2px;margin:0;background:#222;border:1px solid #888;cursor:pointer}
.jdGallery .carousel .label .number,.jdExtCarousel .label .number{color:#b5b5b5}
.jdGallery a{font-size:100%;text-decoration:none;color:#fff}
.jdGallery a.right,.jdGallery a.left{position:absolute;height:99%;width:25%;cursor:pointer;z-index:10;filter:alpha(opacity=20);-moz-opacity:0.2;-khtml-opacity:0.2;opacity:0.2}
* html .jdGallery a.right,* html .jdGallery a.left{filter:alpha(opacity=50)}
.jdGallery a.right:hover,.jdGallery a.left:hover{filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8}
.jdGallery a.left{left:0;top:0;background:url('http://www.playrecords.net/wp-content/plugins/featured-content-gallery/css/img/fleche1.png') no-repeat center left}
* html .jdGallery a.left{background:url('http://www.playrecords.net/wp-content/plugins/featured-content-gallery/css/img/fleche1.png') no-repeat center left}
.jdGallery a.right{right:0;top:0;background:url('http://www.playrecords.net/wp-content/plugins/featured-content-gallery/css/img/fleche2.png') no-repeat center right}
* html .jdGallery a.right{background:url('http://www.playrecords.net/wp-content/plugins/featured-content-gallery/css/img/fleche2.png') no-repeat center right}
.jdGallery a.open{left:0;top:0;width:100%;height:100%}
.withArrows a.open{position:absolute;top:0;left:25%;height:99%;width:50%;cursor:pointer;z-index:10;background:none;-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8}
.withArrows a.open:hover{background:url('http://1.bp.blogspot.com/_ActSVcJ9YKs/TLfKfyyIYxI/AAAAAAAABEk/y0BMfUVlrJE/s000/open.png') no-repeat center center}
* html .withArrows a.open:hover{background:url('http://3.bp.blogspot.com/_ActSVcJ9YKs/TLfKgYF5GgI/AAAAAAAABEo/43lr5-tTcyA/s000/open.gif') no-repeat center center;filter:alpha(opacity=80)}
/* Gallery Sets */
.jdGallery a.gallerySelectorBtn{z-index:15;position:absolute;top:0;left:30px;height:20px;/*width:100px;background:url('img/carousel_btn.gif') no-repeat;*/
text-align:center;padding:0 10px;font-size:13px;background:#333;color:#fff;cursor:pointer;opacity:.4;-moz-opacity:.4;-khtml-opacity:0.4;filter:alpha(opacity=40)}
.jdGallery .gallerySelector{z-index:20;width:100%;height:100%;position:absolute;top:0;left:0;background:#000}
.jdGallery .gallerySelector h2{margin:0;padding:10px 20px 10px 20px;font-size:20px;line-height:30px;color:#fff !important}
.jdGallery .gallerySelector .gallerySelectorWrapper{overflow:hidden}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton{margin-left:10px;margin-top:10px;border:1px solid #888;padding:5px;height:40px;color:#fff;cursor:pointer;float:left}
.jdGallery .gallerySelector .gallerySelectorInner div.hover{background:#333}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview{background:#000;background-position:center center;float:left;border:none;width:40px;height:40px;margin-right:5px}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3{margin:0;padding:0;font-size:12px;font-weight:normal;color:#fff}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info{margin:0;padding:0;font-size:12px;font-weight:normal;color:#fff !important}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js' type='text/javascript'></script>
<script src='http://hacodeproject.googlecode.com/files/mootoolmore.js' type='text/javascript'> </script>
<script src='http://hacodeproject.googlecode.com/files/smoothgallery.js' type='text/javascript'></script>
<script src='http://hacodeproject.googlecode.com/files/slidetransition.js' type='text/javascript'></script>

Trong đoạn code trên ở dòng đầu tiên chú ý các tham số width:560px;height:200px thể hiện chiều rộng và chiều cao cho panel slide (bạn Hoang Lee có thể điều chỉnh 200px thành chiều cao tương thích theo ý thích của bạn).

Bước 2. Đặt đoạn code sau đây vào một tiện ích HTML/JavaScript và tiện ích này có thể nằm ở trên hoặc dưới phần Blog Posts
<!-- Featured Content Slider Started -->
<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
delay: 6000,
slideInfoZoneOpacity: 0.8,
showCarousel: false,
slideInfoZoneSlide: false
});
}
window.addEvent('domready', startGallery);
</script>
<div class='fullbox_excerpt'>
<div class='fullbox_content'>
<div class='smooth_gallery'>
<div id='myGallery'>
<div class='imageElement'>
<h3>Đây là tiêu đề bài viết 1</h3>
<p>Thay thế đoạn văn này bằng nội dung mô tả tóm tắt cho bài viết liên quan đến hình ảnh này.</p>
<a class='open' href='URL_Bài viết 1' title=''></a>
<img alt='' class='full' src='http://3.bp.blogspot.com/_ActSVcJ9YKs/TLfKiX6XToI/AAAAAAAABFA/b4Ru-vmbfkE/s000/1.jpg' style="width:560px;height:200px"/>
</div>
<div class='imageElement'>
<h3>Đây là tiêu đề bài viết 2</h3>
<p>Thay thế đoạn văn này bằng nội dung mô tả tóm tắt cho bài viết liên quan đến hình ảnh này.</p>
<a class='open' href='URL_Bài viết 2' title=''></a>
<img alt='' class='full' src='http://1.bp.blogspot.com/_ActSVcJ9YKs/TLfKinTjY7I/AAAAAAAABFE/ljHAu63dH64/s000/2.jpg' style="width:560px;height:200px"/>
</div>
<div class='imageElement'>
<h3>Đây là tiêu đề bài viết 3</h3>
<p>Thay thế đoạn văn này bằng nội dung mô tả tóm tắt cho bài viết liên quan đến hình ảnh này.</p>
<a class='open' href='URL_Bài viết 3' title=''></a>
<img alt='' class='full' src='http://2.bp.blogspot.com/_ActSVcJ9YKs/TLfKi5qPbwI/AAAAAAAABFI/wW9lZJk_Bdw/s000/3.jpg' style="width:560px;height:200px"/>
</div>
<div class='imageElement'>
<h3>Đây là tiêu đề bài viết 4</h3>
<p>Thay thế đoạn văn này bằng nội dung mô tả tóm tắt cho bài viết liên quan đến hình ảnh này.</p>
<a class='open' href='URL_Bài viết 4' title=''></a>
<img alt='' class='full' src='http://4.bp.blogspot.com/_ActSVcJ9YKs/TLfKjMpDkeI/AAAAAAAABFM/UETsq_e18ws/s000/4.jpg' style="width:560px;height:200px"/>
</div>
<div class='imageElement'>
<h3>Đây là tiêu đề bài viết 5</h3>
<p>Thay thế đoạn văn này bằng nội dung mô tả tóm tắt cho bài viết liên quan đến hình ảnh này.</p>
<a class='open' href='URL_Bài viết 5' title=''></a>
<img alt='' class='full' src='http://2.bp.blogspot.com/_ActSVcJ9YKs/TLfKjUybaLI/AAAAAAAABFQ/Pw75qfZT_ac/s000/5.jpg' style="width:560px;height:200px"/>
</div>
……. // Xóa dòng này nếu bạn không muốn thêm slide
</div></div></div></div>
<!-- Featured Content Slider End -->
Bạn có thể thêm nhiều slide khác vào dòng …. với định dạng HTML như sau:
<div class='imageElement'>
<h3>Đây là tiêu đề bài viết n</h3>
<p>Thay thế đoạn văn này bằng nội dung mô tả tóm tắt cho bài viết liên quan đến hình ảnh này.</p>
<a class='open' href='URL_Bài viết n' title=''></a>
<img alt='' class='full' src='URL_hình ảnh' style="width:560px;height:200px"/>
</div>

{13 bình luậnAdd yours ?}

02:43:00, 18 thg 12, 2010

đầu tiên cảm ơn bạn rất nhiều, nhưng mình đang gặp khó khăn là Featured của mình hiện đã mặc định sẵn rồi, ko biết phải edit vào thế nào nữa :(

Reply
Nặc danh
17:05:00, 20 thg 1, 2011

Anh ơi Help Help...Làm giống y trang như anh hường dẫn vẫn chưa được.Có sai sót gì không.Anh trả lời nhanh chút nhé.Thanks

Reply
19:26:00, 20 thg 1, 2011

@Nặc danh :(( Sai sót gì bạn, có trang Demo rồi mà, thư viện Mootools đôi khi xung đột với các thư viện như jQuery, bạn xem Template bạn đã xài jQuery chưa nhé, mà bạn Nặc danh k để lại địa chỉ blog biết đâu mà Help chứ

Reply
15:18:00, 20 thg 3, 2011

:51)
Sao mình làm giống thế mà nó không hiện slide gì hết nhỉ, chỉ được mỗi cái ảnh tĩnh đầu tiên, không liên kết được với bài viết
Bạn xem trang của mình và cho ý kiến nhé, mà nó load trang chậm lắm, compress CSS thì Google nó bão lỗi "not well formed". híc.
www.medipharm.vn

Reply
14:05:00, 19 thg 4, 2011

Bạn ơi! Sao mình làm đúng theo hướng dẫn nhưng nó k hiển thị thành slide mà sổ dọc xuống như dạng bài viết mới trong trang chính vậy bạn!?
giúp mình với nhé! Cảm ơn rất nhiều!
Trang blog của mình là: http://tintucbds.blogspot.com/

Reply
14:21:00, 19 thg 4, 2011

Mootools xung đột với jquery đấy bạn, cái này hơi hạn chế, xung đột thì k hoạt động được

Reply
14:44:00, 19 thg 4, 2011

Hix! Hình như bạn xóa comment của mình rồi hả ta!?
Bạn làm ơn cho mình hỏi trường hợp trang blog của mình là bị gì vậy bạn!?
Mình đã làm theo hướng dẫn nhưng nó k hiển thị thành slide được, mà nó sổ dọc như dạng tin bài mới trên phần main vậy!
Blog của mình là: http://tintucbds.blogspot.com/

Reply
15:32:00, 19 thg 4, 2011

^__^
Mình làm được rồi! Và mình hiểu lúc nãy mình bị lỗi gì rồi! ^__^
Cảm ơn bạn nhiều lắm nha! Nhờ tin nhắn phản hồi lúc nãy của bạn đó! (Lúc nãy mình k biết tin nhắn đó là bạn trả lời mình đâu. Hihi...)

Một lần nữa,... thank you bạn Huỳnh Nhật Hà nha! (Mình và bạn cùng tên ;))

Reply
00:06:00, 2 thg 11, 2011

thủ thuật này hơi mệt khi up bài mới,kể mà anh làm cho nó auto update thì hay quá,anh Hà làm tiện ích giống trang thuthuatso.com

Reply
01:41:00, 23 thg 4, 2012

Ha oi hình như k có nút điều chỉnh trái phải, them vo thì như thế nào vậy, TKS nhìu!
http://tour-vn-inbound.blogspot.com/ mình đang text thôi chưa viết gì cho blog

Reply
01:51:00, 23 thg 4, 2012

Hình như chưa có nut trái phải Hà ơi
http://tour-vn-inbound.blogspot.com/

Reply
01:53:00, 23 thg 4, 2012

trang mình post đấy, Hà xem chỉnh lại với tour-vn-inbound.blogspot.com. cảm on nhìu !!

Reply
20:00:00, 30 thg 8, 2012

Bạn có thể cho mình xin mấy cái file ".js" trên được không, vì link trên hacodeproject.googlecode.com bi die hết rùi bạn

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn