Thủ thuật blogspot Làm sitemap siêu đẹp cho blogspot
Bước 1: Thêm đoạn code này trước thẻ :skin 1:
2: /*Sitemap
3: ----------------------------------------------- */
4: #tabbed-toc {
5: width:99%;
6: margin:0
7: auto;
8: background-color:#111;
9: -webkit-box-shadow:0 1px 3px
10: rgba(0,0,0,.4);
11: -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
12: box-shadow:0 1px
13: 3px
14: rgba(0,0,0,.4);
15: overflow:hidden;
16: position:relative;
17: color:#333
18: }
19: #tabbed-toc .loading {
20: display:block;
21: padding:5px 10px;
22: font:normal
23: bold 10px Arial,Sans-Serif;
24: color:#FFF
25: }
26: #tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li
27: {
28: margin:0;
29: padding:0;
30: list-style:none
31: }
32: #tabbed-toc .toc-tabs {
33: width:20%;
34: float:left
35: }
36: #tabbed-toc .toc-tabs li a {
37: display:block;
38: font:normal bold 10px/28px
39: Arial,Sans-Serif;
40: height:28px;
41: overflow:hidden;
42: text-overflow:ellipsis;
43: color:#ccc;
44: text-transform:uppercase;
45: text-decoration:none;
46: padding:0
47: 12px;
48: cursor:pointer
49: }
50: #tabbed-toc .toc-tabs li a:hover
51: {
52: background-color:#444;
53: color:#FFF
54: }
55: #tabbed-toc .toc-tabs li a.active-tab
56: {
57: background-color:#e74c3c;
58: color:#FFF;
59: -webkit-box-shadow:-2px 2px 2px
60: rgba(0,0,0,.5);
61: -moz-box-shadow:-2px 2px 2px
62: rgba(0,0,0,.5);
63: box-shadow:-2px 2px 2px
64: rgba(0,0,0,.5);
65: position:relative;
66: z-index:5;
67: margin:0 -1px 0 0
68: /*
69: cursor:text;
70: */
71: }
72: #tabbed-toc .toc-content,#tabbed-toc .divider-layer
73: {
74: width:80%;
75: float:right;
76: background-color:#FFF;
77: border-left:5px
78: solid
79: #e74c3c;
80: -webkit-box-sizing:border-box;
81: -moz-box-sizing:border-box;
82: box-sizing:border-box
83: }
84: #tabbed-toc .divider-layer
85: {
86: float:none;
87: display:block;
88: position:absolute;
89: top:0;
90: right:0;
91: bottom:0;
92: -webkit-box-shadow:0
93: 0 7px rgba(0,0,0,.7);
94: -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
95: box-shadow:0
96: 0 7px rgba(0,0,0,.7)
97: }
98: #tabbed-toc .panel {
99: position:relative;
100: z-index:5;
101: font:normal
102: normal 10px Arial,Sans-Serif
103: }
104: #tabbed-toc .panel li a
105: {
106: display:block;
107: position:relative;
108: font-weight:700;
109: font-size:11px;
110: color:#333;
111: line-height:30px;
112: height:30px;
113: padding:0
114: 12px;
115: text-decoration:none;
116: outline:none;
117: overflow:hidden
118: }
119: #tabbed-toc .panel li time
120: {
121: display:block;
122: font-style:italic;
123: font-weight:400;
124: font-size:10px;
125: color:#666;
126: float:right
127: }
128: #tabbed-toc .panel li .summary {
129: display:block;
130: padding:10px
131: 12px;
132: font-style:italic;
133: border-bottom:4px solid
134: #275827;
135: overflow:hidden
136: }
137: #tabbed-toc .panel li .summary img.thumbnail
138: {
139: float:left;
140: display:block;
141: margin:0 8px 0
142: 0;
143: padding:4px;
144: width:72px;
145: height:72px;
146: border:1px solid
147: #dcdcdc;
148: background-color:#fafafa
149: }
150: #tabbed-toc .panel li:nth-child(even)
151: {
152: background-color:#f1f1f1;
153: font-size:10px;
154: color:#fff
155: }
156: #tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc
157: .panel li a:hover time,#tabbed-toc .panel li.bold a
158: {
159: background-color:#333;
160: color:#FFF;
161: outline:none
162: }
163: #tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time
164: {
165: background-color:#222
166: }
167: @media (max-width:700px) {
168: #tabbed-toc
169: {
170: background-color:#fff;
171: border:0 solid #888
172: }
173: #tabbed-toc .toc-tabs,#tabbed-toc .toc-content
174: {
175: overflow:hidden;
176: width:auto;
177: float:none;
178: display:block
179: }
180: #tabbed-toc .toc-tabs li {
181: display:inline;
182: float:left
183: }
184: #tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab
185: {
186: background-color:#111;
187: color:#ccc;
188: -webkit-box-shadow:2px 0 7px
189: rgba(0,0,0,.4);
190: -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
191: box-shadow:2px 0
192: 7px rgba(0,0,0,.4)
193: }
194: #tabbed-toc .toc-tabs li a.active-tab
195: {
196: background-color:#DF1010;
197: color:#fff
198: }
199: #tabbed-toc .toc-content {
200: border:none
201: }
202: #tabbed-toc .divider-layer,#tabbed-toc .panel li time
203: {
204: display:none
205: }
206: }
Bước 2: Tạo trang mới sitemap.html, thêm đoạn code như sau
1:
2: <div id="tabbed-toc">
3: <span
4: class="loading">Loading...</span></div>
5: <br
6: />
7: <script type="text/javascript">
8: var tabbedTOC =
9: {
10: blogUrl: "http://longluxi.blogspot.com/", //
11: Blog URL
12: containerId: "tabbed-toc", // Container
13: ID
14: activeTab: 1, // The default active tab index (default:
15: the first tab)
16: showDates: false, // `true` to show the
17: post date
18: showSummaries: false, // `true` to show the
19: posts summaries
20: numChars: 200, // Number of summary
21: chars
22: showThumbnails: false, // `true` to show the posts
23: thumbnails (Not recommended)
24: thumbSize: 40, // Thumbnail
25: size
26: noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png",
27: // A "no thumbnail" URL
28: monthNames: [ // Array of month
29: names
30:
31: "January",
32:
33: "February",
34:
35: "March",
36:
37: "April",
38:
39: "May",
40:
41: "June",
42:
43: "July",
44:
45: "August",
46:
47: "September",
48:
49: "October",
50:
51: "November",
52:
53: "December"
54: ],
55: newTabLink: true, //
56: Open link in new window?
57: maxResults: 99999, // Maximum
58: post results
59: preload: 0, // Load the feed after 0 seconds
60: (option => time in milliseconds || "onload")
61:
62: sortAlphabetically: true, // `false` to sort posts by published
63: date
64: showNew: 7, // `false` to hide the "New!" mark in
65: most recent posts, or define how many recent posts are to be
66: marked
67: newText: " - <em
68: style='color:red;'>New!</em>"
69: text
70: };
71: </script>
72: <script src="https://googledrive.com/host/0B2H3MJwpj5ZVNkJwaVF3SEV4cjg/tabbed-toc.js"
73: type="text/javascript"></script>
Đăng nhận xét Blogger Facebook