Sơ đồ blogspot dạng input của DuyPham

DVD giới thiệu thêm một dạng sơ đồ khác cho blogspot.
Sơ đồ này do bạn duypham viết, bạn terocket chia sẻ lại với cộng đồng blogger.

Nguồn trang chia sẻ tại đây:

https://www.terocket.com/2013/01/sitemap-style-input-for-bloggerblogspot.html

DVD chỉ chia sẻ lại Ves 2 có chức năng sắp xếp tên nhãn theo thứ tự bảng chữ cái và ẩn những nhãn không muốn hiển thị. Các bạn có thể xem trước trong blog chính thức của DVD như ảnh trên TẠI ĐÂY

Cách thực hiện như sau:

1- Đăng nhập vào Blog
2-Tạo một Trang mới.
3. Trước tiên, chọn chế độ soạn thảo Viết, bạn muốn viết thêm vài dòng giải thích thì viết, nếu không muốn, bạn có thể bỏ qua bước 3 này để sang luôn bước 4.
4. Chọn chế độ soạn thảo là HTML. Copy và dán code dưới đây vào khung HTML, bên dưới mấy dòng bạn đã viết ở bước 3. Khi đã dán code vào khung HTML, bạn không được chuyển sang chế độ soạn thảo Viết, vì code sẽ không hoạt động:

<style type='text/css'>
#show-cat{float:left;margin-right:20px;width:155px;height:520px;overflow-x:hidden;overflow-y:auto;line-height:18px}
#show-cat ul{margin:0;border-top:1px solid #ccc;padding:0}
#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:1px solid #ccc;border-left:1px solid #ccc;padding:0}
#show-cat ul li a{display:block;padding:10px}
#show-cat ul li a,#navi-cat a{background:#fff;color:#d80556;text-decoration:none}
#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:12px}
#show-cat ul li a:hover,#navi-cat a:hover{background:#ccc;color:#fff}
#show-post{float:left;width:60%}
#show-post ul li{list-style-type:none}
#navi-cat{padding:20px 0}
#navi-cat a{margin-right:10px;border:1px solid #ccc}
#navi-cat a,#navi-cat span{padding:5px 10px}
#navi-cat span{float:right}
</style>
<div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='https://dovaden2010.blogspot.com';cat_numb=10;cat_pre='Prev';cat_nex='Next';cat_remove=['Blogspot Sitemap','Blogspot-tips'];
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' &ndash; '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){for(var j=0;j<cat_remove.length;j++){if(cat[i].term==cat_remove[j]){cat.splice(i,1)}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>
<div style='clear:both'></div>

Điều chỉnh:

@ Chú ý quan trọng: Bạn chỉ được điều chỉnh code ngay trong bước này; bởi vì khi bạn nhấp Xuất bản, trang sơ đồ sẽ hoạt động.  Bạn thấy trang sơ đồ hoạt động không ưng ý, ví dụ kích thước khung sơ đồ không phù hợp với blog của bạn, bạn vào Thiết kế - Trang để điều chỉnh lại code thì trang sơ đồ sẽ không hoạt động! Nghĩa là sau khi xuất bản, bạn không thể chỉnh sửa lại code của trang sơ đồ.
          + Khắc phục: vào Thiết kế - Trang, xóa bỏ trang sơ đồ này, tạo trang mới và thực hiện lại từ bước 3.

*) width:155px;height:520px; là chiều rộng và chiều cao của khung sơ đồ nhãn, bạn có thể điều chỉnh tùy ý theo kích thước khung bài viết trong blog của bạn.

*) Thay https://dovaden2010.blogspot.com thành URL blog của bạn.

*) cat_numb=10; là số bài viết muốn hiển thị trong một lần xem theo nhãn, bạn có thể thay bằng số khác tùy ý, nhưng không nên hiển thị số bài viết quá nhiều.
*) ['Blogspot Sitemap','Blogspot-tips']; là tên các nhãn bạn không muốn hiển thị trong sơ đồ. Nếu muốn ẩn nhãn nào bạn chỉ cần thêm tên nhãn trong dấu ngoặc đơn và cách nhau bởi dấu phẩy; ví dụ: ['Blogspot Sitemap','Blogspot-tips','Blogspot comment','Blogspot post']; các bài viết thuộc nhãn bị ẩn sẽ không hiển thị trong sơ đồ vì bị ẩn theo nhãn.


5- Xuất bản trang và xem kết quả.

DVD chúc các bạn thành công!

dovaden2010