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 menuTiệ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ốnwww.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
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
-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
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
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
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
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!
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
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?
Nó cũng dạng dạng như này :-?
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 :-<
<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 !
Insert Emoticons» 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>
Mã Hóa Code Tạo và xem trước comments Cancel Reply
&
Convert
'
Convert
"
Convert
<
Convert
>