Sitemap mới tuyệt đẹp cho blogspot

Hôm nay Cenz xin giới thiệu thêm 1 sitemap bắt mắt kèm theo hiệu ứng hover cho các độc giả đến blog bạn sẽ có một pha bắt mắt .

1.Chức năng:

Gọi label ra sau đó ---> liệt kê từng bài viết có trong label đó.
Nếu bạn là chính tác giả của blog thì sẽ giúp cho bạn dễ tìm các đăng cũ của mình
Giúp độc giả tìm dễ dàng hơn

2.Thực hiện:

Nếu chưa biết tạo trang thì hãy
Vào trang quản lí blog của bạn và làm theo hướng dẫn ở phần trên:


Đọc phần hướng dẫn trong file download. Hoặc xem trực tiếp phía dưới:

Tiếp tục đặt tên trang là sitemap và ta copy đoạn code sau vào:

<style type="text/css">
/* ============================= */
Css sitemap - widget   
/* ============================= */

ol#daftar-isi-widget
{
width:100%;
list-style:none;
margin:0 auto;
}

li.daftar-isi
{
width:44.555555598%;
margin-right:2.5%;
float:left;
list-style:none;
}

p.daftar-isi-label a
{
color:#888;
font:40px arial,sans serif;
display:block;
clear:both;
text-transform:uppercase;
padding:10px 0 0;
}

.daftar-isi-link
{
position:relative;
display:block;
font:16px Arial, Helvetica, sans-serif;
color:#ddd;
background:#222;
border:1px solid #222;
box-shadow:inset 0 2px 6px #000000;
text-decoration:none;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-webkit-transition:all .3s ease-out;
-moz-transition:all .3s ease-out;
-ms-transition:all .3s ease-out;
-o-transition:all .3s ease-out;
transition:all .3s ease-out;
margin:9px 0;
padding:7px 4px 7px 26px;
}

.daftar-isi-link:before
{
content:"\2729";
position:absolute;
left:-18px;
top:-2px;
background:#161616;
border:4px solid #333;
font-size:15px;
color:#444;
text-shadow:0 -1px 1px hsla(0,0%,0%,.8);
box-shadow:0 2px 3px rgba(0,0,0,.7);
-moz-box-shadow:0 2px 3px rgba(0,0,0,.7);
-webkit-box-shadow:0 2px 3px rgba(0,0,0,.7);
height:30px;
width:30px;
line-height:2em;
text-align:center;
font-weight:bold;
-moz-border-radius:2em;
-webkit-border-radius:2em;
border-radius:2em;
-webkit-transition:all .3s ease-out;
-moz-transition:all .3s ease-out;
-ms-transition:all .3s ease-out;
-o-transition:all .3s ease-out;
transition:all .3s ease-out;
}

.daftar-isi-link:hover:before
{
content:"\2714";
border:4px solid #C6EB04;
float:right;
-webkit-transform:rotate(360deg) scale(0.847) skew(1deg) translate(0px);
-moz-transform:rotate(360deg) scale(0.847) skew(1deg) translate(0px);
-o-transform:rotate(360deg) scale(0.847) skew(1deg) translate(0px);
transform:rotate(360deg) scale(0.847) skew(1deg) translate(0px);
}
</style>

Và copy tiếp phần còn lại :

<!-- START SITEMAP-->
         <script style="text/javascript" src="http://cenzgz.appspot.com/js/sitemap.js"></script>
         <script src="http://www.yourblog.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
         </script>
      <!-- END SITEMAP-->

Thay yourblog bằng tên blog của bạn hoặc thay http://www.yourblog.com thành tên miền blog của bạn. Nếu bạn muốn lưu trữ code tránh bị die thì hãy . Lưu ý là độ rộng trang càng lớn , code trình bày càng đẹp mắt

Tải về

Demo