Bài viết mới theo nhãn dạng drop menu

Giới Thiệu

Thủ thuật mà mình sẽ giới thiệu sau đây thật ra không có gì xa lạ đối với blogger bởi vì đây chính là tiện ích bài viết mới nhất sử dụng feed theo một nhãn với định dạng Json kết hợp với Javascript và mình đã chỉnh sửa để tiện ích liệt kê bài viết dưới dạng drop menu
Tiện ích phù hợp đối với những bạn phát triển blog theo dạng Truyện dài tập


Yêu cầu


Huy ơi! Bạn có thể hướng dẫn làm cái menu Xem nhanh (xem nhanh các chương truyện) như trong bài này được không http://4phuong.net/ebook/31580867/114175727/chuong-02-tam-kinh-bien-mat.html .Mình có xem view nguồn để làm theo nhưng sao nó không giống. Web của mình http://www.yeutruyenngan.com/. Chẳng hạn như mình nhấn vào chủ đề truyện ngắn tình yêu thì mặc dù nó load các bài thuộc chủ đề truyện ngắn tình yêu nhưng trên thanh vẫn hiện chữ Chọn chủ đề- không giống như trang web kia nhấn vào chương nào thì tên chương đó hiện lên trên thanh chọn nhanh.Xin bạn hướng dẫn giùm. Cám ơn :)



Demo

Cách thực hiện

Soạn thảo bài viết với chế độ HTML sau đó sử dụng đoạn code sau
<script type="text/javascript">
function recentpostslist(json) {
document.write('<select class="selectchapter" onchange="window.location=this[this.selectedIndex].value;">');
document.write('<option>Choose a Category</option>');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<option value="+ entryUrl + '>' + entryTitle + "</a> </option>";
document.write(item);
}
document.write('</select >');
}
</script>
<script src="http://www.trollvl.com/feeds/posts/summary/-/Thủ Thuật Facebook?max-results=500&alt=json-in-script&callback=recentpostslist"></script>

Tùy Chỉnh

Choose a Category Thành đổi  thành nội dung bạn muốn
www.trollvl.com Thành url blog của bạn
Thủ Thuật Facebook Thành tên nhãn bạn muốn liệt kê trong drop menu
21 Comments
Comments

21 comments

Thủ thuật rất hay nhưng mà mình thực hiện theo cách này vào blog mình không được ổn lắm. Vì trong nhãn truyện dài nước ngoài sẽ có nhiều truyện (mình đang update dần) nó hiện hết chương của tất cả các truyện luôn.Chứ nó không hiện chương của từng truyện.

Dẫu sao cũng rất cám ơn lòng nhiệt tình giúp đỡ của bạn. Công nhận bạn pro thật ^^

P/S: Mình có ghé cái blog này http://blog.duypham.info/ bằng điện thoại, thấy cái menu Chủ đề và Đánh dấu rất hay, hiện thị vừa đẹp vừa hơi bị pro (y hệt mấy web chuyên nghiệp) trên điện thoại. Nếu được, Huy hướng dẫn cho mình cũng như các bạn làm được không :D
8/10/13
Có hiện chương của từng truyện mà bạn, ví dụ bạn muốn hiển thị tất cả các tập truyện của Đô-rê-mon trên blog của mình bạn làm như sau
-Thêm nhãn doremon cho tất cả những truyện Đô rê mon trên blog
-Thêm code sau vào toàn bộ những bài viết Đô rê mon trên blog
<script type="text/javascript">
function recentpostslist(json) {
document.write('<select class="selectchapter" onchange="window.location=this[this.selectedIndex].value;">');
document.write('<option>Choose a Category</option>');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<option value="+ entryUrl + '>' + entryTitle + "</a> </option>";
document.write(item);
}
document.write('</select >');
}
</script>
<script src="http://www.trollvl.com/feeds/posts/summary/-/doremon?max-results=500&alt=json-in-script&callback=recentpostslist"></script>

Mặc dù đây là cách thủ công nhưng có lẽ vẫn còn hơn nếu bạn làm cách thủ công hơn đó là add từng link của tập truyện vào mỗi bài viết đúng không? :D
Còn về menu của Duy Phạm cũng như các menu khác được nhiều blogger giới thiệu thôi, chỉ khác nhau về CSS. Nếu có thời gian mình sẽ cùng các bạn thảo luận về vấn đề này :cuoi
Mình làm theo mẹo này của Huy. Thấy ok trên máy tính lắm :vi . Nhưng khi mình xem bằng điện thoại thì lúc mình chọn chương thì nó không hiện cái dòng bôi đen (để cho mình biết đang nhấp chọn tới chương nào). Dòng chọn chương nào cũng nền trắng hết nên mình không biết đang chọn tới chương nào. Có cách nào khắc phục không Huy :(

P/S: Mình tra google mà không thấy ai hướng dẫn làm menu như của Duy Phạm hết. Khi nào Huy rãnh thì làm 1 bài hướng dẫn luôn được không :D
Anonymous
9/10/13
Cái này hay đó. Ngày mới vui nhé!
9/10/13
Bạn đã thực hiện chưa? Nếu đã thực hiện thì cho mình xem demo đi vì mình đã thử xem trên mobile và hiển thị rất ok mà.
http://4.bp.blogspot.com/-2KRyEAEgHp4/UlTRP6OKCcI/AAAAAAAAMaA/XYVHWV9-4y8/s1600/dropmenumobile.PNG

Và đây là drop menu style của Duy Phạm theo yêu cầu của bạn http://www.trollvl.com/2013/10/drop-menu-css3-style-cua-duyphaminfo.html
9/10/13
Cảm ơn bác! Em cũng chúc bác vui vẻ và đừng quên thỉnh thoảng ghé thăm nhau nhé! :cuoi
This comment has been removed by the author.
Ý của mình là khi nhấp chọn từng dòng, nó không có cái nền màu đen để cho mình biết đang chọn tới chương đó. Huy xem tại bài viết này bằng dt nhé http://www.yeutruyenngan.com/2013/10/harry-potter-va-phong-chua-bi-mat-chuong-6-gilderoy-lockhart.html . Lúc mình chọn bằng máy tính thì có cái nền màu xanh (cho biết mình đang chọn tới chương đó), trong khi xài điện thoại thì nó không xuất hiện cái nền màu đen, chỉ là màu trắng nên không biết đang chọn tới chương nào :(

P/S: Mình có làm theo hướng dẫn của bạn về menu của Duy Phạm. Nhưng nó không hiện giống như mình thấy trên blog Duy Phạm khi xem bằng điện thoại bằng trình duyệt Opera mini ở chế độ xem di động. Hôm nay mình mới nhận ra style menu của Duy Phạm dành cho điện thoại di động (nó không hiện thị tốt trên Opera mini khi tắt chức năng xem di động)
Trong khi blog mình chỉ hiện thị tốt trên Operami khi tắt chế độ xem di động. Nên có lẽ mình không thể xài được kiểu menu này :(

Cám ơn Huy nhiều lắm. Hỏi bạn nhiều thế này, hơi bị ngại ý :D
9/10/13
Thật ra drop menu mình sử dụng cho thủ thuật này tất cả các trình duyệt web của máy tính hay mobile đều có thể hiểu được. Mình truy cập vào link bạn đưa ra vẫn bình thường
http://3.bp.blogspot.com/-D2diQgLbNfs/UlUy1sakDBI/AAAAAAAAMaQ/QUIQNAh-ebM/s1600/%E1%BA%A3nh.PNG
Blog của bạn hiển thị khi chiều rộng màn hình khoảng dưới 800px và trên 250px lại bị trắng khoảng 4/5 về phía bên trái và chỉ hiển thị nội dung bài viết ở 1/5 bên phải còn lại, đồng nghĩa với việc toàn bộ độc giả đọc của bạn đọc trên thiết bị mobile đến máy tính bảng đều gặp tình trạng này, bạn nên xem lại vấn đề này nhé!
Mình khuyên bạn nên chú trọng hơn về độc giả của mình phần đông sử dụng hệ điều hành gì? Trình duyệt web gì? Để mà viết template cho hệ điều hành, trình duyệt đó. Bạn có thể xem các thông tin trên tại Stats › Audience. Đừng chỉ viết template theo thiết bị, hệ điều hành, trình duyệt web mình hay sử dụng.
Chúc bạn thành công!
Vậy hả. hjhj. Có lẽ do điện thoại mình bị cùi nên không thấy được. Blog mình chuyên về truyện nên chủ yếu quan tâm đến độc giả đến từ mobile màn hình vừa và nhỏ.

P/S: Huy nói đúng đó, mình mới thử thu nhỏ màn hình trình duyệt lại, blog mình bị lệch nhiều quá. Để mình chỉnh sửa lại. Cám ơn Huy vì tất cả. Chúc blog Huy ngày càng phát triển và có thêm nhiều bài viết thủ thuật hay cho các blogger :cuoi
9/10/13
Cảm ơn nha! Thỉnh thoảng ghé thăm blog mình nha!
10/10/13
Mình hay ghé blog Huy vs blog anh Namkna để coi có thủ thuật gì mới mới hay hay không đó 1cuoi .Mình thấy Huy có cộng tác bên blog anh Namkna, chia sẻ theme vs thủ thuật fb nữa :cuoi
10/10/13
:thank
TrollVl có thể cải tiến code này để giống thế này được không?
http://suoinguoncuocsong.blogspot.com/p/sitemap_8943.html#0
Cái này nó không cho hiện 1 label. Có cách nào để nó chỉ hiện số bài của 1 label như bài trên không?
9/12/13
Bạn phải đưa cho mình bài hướng dẫn cách tạo site map đang sử dụng mình mới vọc được chứ
http://suoinguoncuocsong.blogspot.com/2013/12/tao-sitemap-dep-cho-blogspot-chon-nhan-tu-dong.html
Nó cũng dạng dạng như này :-?
9/12/13
Mình sẽ xem sau nhưng bạn để nguồn bài viết là Namkna không sợ tác giả viết ra tiện ích này buồn à?
Với dân không chuyên như tớ thì thấy bài đầu tiên ở đâu thì sẽ ghi nguồn ở đó thôi chứ làm thế nào để biết tác giả thực của tiên ích này chứ!
Với lại một bài được viết ra gần như đã được chỉnh cá nhân hóa đi khá nhiều rồi muốn tìm ra người đầu tiên chia sẻ cũng không dễ dàng gì!
Mà sau này cho tớ copy mí cái thủ thuật của trollvl nhé! Lưu giữ lại sau này đỡ mất công tìm:hihi
trollvl và namkna với duypham là 3 blog tớ vào thường xuyên nhất! MÀ giờ hình như chỉ còn mỗi 2 bác là viết về thủ thuật blogger thôi thì phải :-<
10/12/13
Trước đây mình cũng thường ghé Namkna để tham khảo một số thủ thuật nhưng từ khi biết được bên họ thường xuyên không ghi nguồn, trong đó có cả những bài viết từ blog mình nên giờ không có thiện cảm nữa. Còn Duypham thì pro mình cũng rất thích :cuoi
mình ko muốn đề ô select,mà nó hiện lên luôn cái khung chứa tất cả bài viết theo nhãn thì làm sao nhỉ
28/2/14
Bạn sử dụng đoạn code sau
<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul class="selectchapter" onchange="window.location=this[this.selectedIndex].value;">');
document.write('<option>Choose a Category</option>');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li><a href="+ entryUrl + '>' + entryTitle + "</a> </a></li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://www.trollvl.com/feeds/posts/summary/-/Thủ Thuật Facebook?max-results=500&alt=json-in-script&callback=recentpostslist"></script>

Thay thế:
www.trollvl.com thành link blog của bạn
Thủ Thuật Facebook thành tên nhãn bạn muốn liệt kê bài viết

Cảm ơn bạn đã ghé thăm Troll VL !
» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>

Insert Emoticons
:cuoi
:hihi
:thank
:haha
:meu
:cry
:oaoa
1cuoi
:D
@@
:p
:o
:vi
:ko
:ca
:why
:xin
:lanh
:im
:aoi
:ado
:mda
:tat
0:khoa
a:ab
k:ac
q:ad
w:ae
e:af
l:ag
g:ah
8:ai
9:aj
9:ag
:9a
*Phải có khoảng trống trước các code mới hiển thị mặt cười


Mã Hóa Code Tạo và xem trước comments Cancel Reply
-->