Loading post navigation ...
 
 

Pro page

35
Nhận xét

SlideTab Recent posts (jQuery)

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Phải nói là ở blog của mình tiện ích recent posts rất nhiều, nhiều là do mỗi cái có giao diện khác nhau, chứ về cơ bản thì nó đều như nhau, và đa phần là do các bạn yêu cầu. Và bài này cũng không ngoại lệ. Bài này mình rip lại giao diện theo yêu cầu, chỉ có khác là thay nội dung của nó bằng tiện ích Recent Posts mà thôi.

Xem DEMO

Hình minh họa :

Sau đây là các bước thực hiện :
- Vào code template (thiết kế -> chỉnh sửa code HTML), và chèn đoạn mã code bên dưới vào trước thẻ đóng </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
- lưu ý là nếu trong code template của bạn đã có file jquery.min.js thì không cần chèn vào nữa, hiện tại jquery đã ra bản 1.7.1

- tiếp theo, tạo 1 widget HTML/javascript và chèn đoạn code bên dưới :
<style type="text/css">
#slidearea {
height: 242px;
overflow: hidden;
margin: 0px 20px 0 20px;
position: relative;
width: 960px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdEBVJV_Km5ahkDeeUunFAucRF2EvkQ1Rp42Lju223F3gKMSlZmv9gPxP5JmTf4k5ZvdbJtdb4oHaNGp1tmOy_9QtQsvXyNWWenxDiI9B-6Fjt1ucFD9PTDRZMO0b8aCFFaCR60KGjtv7n/s0/slider.png) no-repeat;
}
#gallerycover {
overflow: hidden;
margin: 15px 30px 0 30px;
width: 900px;
}
.mygallery {
overflow: hidden;
visibility: visible;
position: relative; z-index: 2;
left: 0px;
width: 900px;
}
.mygallery ul {
margin:0;
padding:0;
position: relative;
list-style-type: none;
z-index: 1;
width: 2700px;
left: -1620px;
}
.mygallery ul li {
overflow: hidden;
float: left;
width: 180px;
height: 210px;
}
.mytext {
position: relative;
margin: 0 5px 0 5px;
width: 170px;
height: 210px;
display: inline;
float: left;
color: #C4C4C4;
}
.mytext p {
padding: 0 0;
color: #555;
font-size: 12px;
line-height: 20px;
width: 170px;
text-shadow: 1px 1px 0 #F6F6F6;
}
.mytext h2 {
padding: 5px 0;
color: black;
width: 170px;
font-size: 14px;
font-weight: bold;
}
.mytext h2 a:link, .mytext h2 a:visited {
color: black;
text-decoration: none;
outline: none;
}
.mytext h2 a:hover {color:#888;}
img.sidim {
width: 170px;
height: 100px;
}
.prevb {
float: left;
width: 20px;
height: 35px;
z-index: 200;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE6SZwtV0loatp9KHdfdeR_R9MLwCY-GI47RGVo1iT5uta6D1__ykuvKTofGbK51C4oQc0bGY9gnQZB0phB0p8rHAxZfbOkGXhhv4zbE6FTvGssLkE0Xe8VkbHFiSWsr1FejjEFvAsEAzN/s0/prev.png)!important;
position: absolute;
left: 5px;
bottom: 110px;
}
.nextb {
float: right;
width: 20px;
height: 35px;
z-index: 200;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsOR9kKu_wo7l0mk3sP7VOb67Z9ZUz8cf59vdKbMTxqA5IroidSi6TL8zu_YO_BDiqJpmopMIQtIJ3Q2v3A0G2L9-7TXkOumZ8itIpREgp6hdQHoQDO4kHL2g2ImarOO2Uu2F6bge5pXsI/s0/next.png)!important;
position: absolute;
right: 5px;
bottom: 110px;
display: block;
}
</style>

<script src="http://fandung.googlecode.com/svn/trunk/js/slide-mygallery.js" type="text/javascript"></script>

<script stype="text/javascript">
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".nextb",
btnPrev: ".prevb",
visible: 5,
auto: 3000,
speed: 1000,
easing: "backout"
});
});
</script>

<div id="slidearea">
<div id="gallerycover">
<div class="mygallery">
<ul>
<script type="text/javascript">
var mode = "all";
var g_numposts = 10;
var g_numcontents = 15;
var g_label="B-advance";
var homepage="http://www.fandung.com";
</script>

<script src="http://fandung.googlecode.com/svn/trunk/js/feed-mygallery.js" type="text/javascript"></script>
</ul>

<div class="clear"></div>
</div>
</div>
<a class="prevb" href="#"></a>
<a class="nextb" href="#"></a>
</div>

Hướng dẫn tùy chỉnh :
- visible: 5 đây là số bài viết sẽ được hiển thị ra ngoài, như trong demo là 3.
- auto: 3000 đây là thời gian chạy auto, 3000 tương ứng với 3 giây, tức là sau 3 giây tự động chuyển bài.
- speed: 1000 là tốc độ chuyển bài viết khi click vào button left hoặc right (mũi tên màu cam)
- Lưu ý : nếu không muốn chạy auto, thì bạn bỏ dòng auto: 3000, trong đoạn code javascript, tức là đoạn script ở trên chỉ còn như bên dưới :
<script stype="text/javascript">
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".nextb",
btnPrev: ".prevb",
visible: 5,
speed: 1000,
easing: "backout"
});
});
</script>
- var mode = "all"; là chế độ hiển thị theo cả blog hoặc theo 1 nhãn nào đó, nếu giá trị là all thì hiển thị các bài viết mới của blog, nếu giá giá trị là single thì sẽ hiển thị bài viết theo nhãn được chọn (là biến g_label bên dưới)
- var g_numposts = 10; là số bài viết sẽ load (lưu ý là số bài viết sẽ load (g_numposts) khác với số bài viết sẽ được hiển thị (visible: {giá trị thiết lập}) )
- var g_numcontents = 15; số chữ (là các chuỗi ngăn cách bằng dấu khoảng trắng) sẽ được hiển thị ở đoạn mô tả bài viết.
- var g_label="B-advance"; tên nhãn sẽ được chọn nếu hiển thị ở chế độ mode = "single";
- var homepage="http://www.fandung.com"; thay http://www.fandung.com thành tên domain của blog bạn, ví dụ http://YOUR-BLOG-NAME.blogspot.com

- Ngoài ra nếu tiện ích rộng quá thì các bạn tùy chỉnh lại các thông số về chiều dài và rộng trong code CSS.

- Thủ thuật này xin lưu ý là hơi nặng, nên bạn nào thật sự thích thì hãy sử dụng, còn không thì có thể tham khảo thôi.

Thực hiện theo yêu cầu của Việt Nam


Enter your mail address:

35

Vịnh

Đẹp quá nhỉ! Bóc tem...

Pig

đẹp mắt quá anh Dũng ạ, cho nó auto run chậm chậm chút đc ko anh

Dr.House

Hì cảm ơn anh Dũng đã làm giúp yêu cầu của em :D. Em còn nhiều yêu cầu lắm, mà chưa dám nhờ, thấy anh bận quá :p

Unknown

Tuyệt thật... có càng nhiều món ngon thì bữa ăn càng ngon. Đúng là fandung trở lại lợi hại hơn xưa... :)

Minh

Rat hay! nhung cho no auto run thi thay dep hon do Dung!

Phan Dũng

đã thêm chức năng auto run cho nó :D, mọi người có thể xem trên demo

HelloXimo

Ngon em thích cái feed-mygallery.js của anh :X

blue

Blog a.Dũng dạo này tràn đầy sức sống. Thật tuyệt!

Điện Tử ChipKool

bài viết rất hay,em sẽ dùng nó cho blog giao diện mới của em,dạo này nhìn blog cũ nó cổ điển quá,SEO cũng ít,hihi,chúc anh Dũng ra nhiều thủ thuật na,tiện ích này nếu thích cho nó chạy auto như slice phim ấy chứ.

Bao An Angel

cho mình hỏi... hiện tại mình có code đang dùng jquery 1.4.2. Nhưng mình thay thế bằng jquery 1.7.1 sao code không chạy nhỉ

Phan Dũng

@Ximo : sao thích, nó gọn à :D
@Jack : ah, cái thư viện jquery này mình chỉ biết dùng thôi, chứ nghiên cứu kĩ về nó thì mình chịu :D. nếu chạy được bạn cứ để bản 1.4.1 mà dùng

Nguyen Duc

Hay, áp dụng liền, thank anh

Quỳnh Nguyễn

bạn ơi sao mình không cho nó nằm ở giữa được vậy.Chỉnh center mà ko được à

Phan Dũng

bạn cho vào thẻ <center> là được

Unknown

sao nó chỉ hiện ra 1 tin tức thui nhỉ.hixx..

Quỳnh Nguyễn

ok cám ơn cậu hì .
"Cado188BET" của bạn chắc do mạng kém nên nó chưa cập nhật hết à bạn thử đợi 1 chút xem sao hì.
À tiện thể mình hỏi Fan Dũng sao mình dùng web fim mà sever megafun của mình ko chạy được và khi pót phim của mình dùng được thẻ [id] ko dùng được thẻ à.hì

Nobita

Cái này hay quá :D

Unknown

em muốn tạo một SlideTab nhưng không phải là Recent posts. Mà em tự chọn liên kết. Anh Dũng có thể giúp em thủ thuật này được không anh?

Unknown

hii... dep

Unknown

vẫn áp dụng hok thành công. đã áp dụng thủ thuật khác, chắc là hok hay bằng cái nhưng xài tạm.keke..demo

Unknown

NẾU HIÊN THỊ TOÀN " NO IMAGE " THÌ CHỈ CẦN CHỈNH FEED DẠNG FULL LÀ ỔN ;))

Quyền

chạy rất mượt :D
http://www.thephotobest.blogspot.com/
m muốn cân lề cho nó thỳ ở đâu vậy nhỉ?

Quyền

nhưng thanh menu nó k hoạt động đc anh ơi ><

[SeS] St0Rm

sao em để giá trị single nó không cho ra gì cả, trắng trơn, nhãn khá nhiều bài viết

Thế Này Nhé

bạn ơi, tớ muốn nó chạy giới thiệu ngẫu nhiên bài viết bất kỳ thì có cách nào không?
Thanks

Thế Này Nhé

Mình muốn cái slide nè nó gọn gàng hơn, hiện tại tớ thấy nó hơi lèm nhèm tí :D
Có thể bỏ trích dẫn bài viết được không bạn ơi?
Green

Unknown

có cách nào làm cho nó dừng lại khi rê chuột vào không hả bạn?

Unknown

Cảm ơn về bài chia sẻ rất hay...rất mong anh thăm quan và góp ý cho blog của em www.VuVanHanh.com ...Chúc anh luôn hạnh phúc và thành công !

Phúc Phở

Bỏ cái phần mô tả đi làm thế nào anh

vanly__dochanh
vanly__dochanh

- sao em thay đổi kích ảnh mãi ko đc nhỉ?

vanly__dochanh

fixed đc hết rồi......ai muốn ko hiển thị phần tóm tắt thì chỉnh sửa cái feed-mygallery.js của anh Dũng ấy. Demo

tran tai linh

cho nó lớn 1 chút nữa được k ạ. Thanks nhiều

Vòng Tay Hạnh Phúc

http://msmvietnam.blogspot.com/

Admin

Thank xếp Dũng nhé :D
Thủ thuật rất hay ^^
http://www.truyenhay.info



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home