Tóm tại Sitemap (sơ đồ) là một tiện vô cùng quan trọng là một giải pháp vời của một Blogger … Nó không khác gì một cuốn sách có MỤC LỤC, MỤC LỤC sẽ nói lên toàn bộ nội dùng của cuốn sách đó, người sẽ quyết định có ĐỌC hay là KHÔNG ĐỌC.
Vậy việc tạo 1 Sitemap (sơ đồ) chuyện nghiệp là một điều vô cùng quan trọng và hôm nay Windows2it sẽ giúp bạn là đều đó @! Ở bài viết này Windows2it sẽ đưa ra 2 phong cách cho các bạn lựa chọn.
/* Skin for Blogger Tabbed Layout TOC */
#tabbed-toc {
margin: 0 auto;
background-color: #FFFFFF;
border: 4 px dashed rgb( 48 , 167 , 229 );
-webkit-box-shadow: 0 1 px 3 px rgba( 0 , 0 , 0 ,. 4 );
-moz-box-shadow: 0 1 px 3 px rgba( 0 , 0 , 0 ,. 4 );
box-shadow: 0 px 1 px 10 px rgba( 0 , 0 , 0 , 0.55 );
overflow: hidden;
position: relative;
color: #333;
}
#tabbed-toc .loading {
display:block;
padding: 5 px 10 px;
font:normal bold 10 px/normal Helmet,Freesans,Sans-Serif;
color:white;
}
#tabbed-toc ul, #tabbed-toc ol, #tabbed-toc li {
margin: 0 0 ;
padding: 0 0 ;
list -style:none;
}
#tabbed-toc .toc-tabs {
width: 20 %;
float :left;
}
#tabbed-toc .toc-tabs li a {
display:block;
font:normal bold 10 px/ 28 px Helmet,Freesans,Sans-Serif;
height: 28 px;
overflow:hidden;
text-overflow:ellipsis;
color: #434B50;
text-transform:uppercase;
text-decoration:none;
padding: 0 12 px;
cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
background-color:rgba( 110 , 193 , 255 , 0.68 );
color:white;
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color: #6EC1FF;
color:white;
-webkit-box-shadow:- 2 px 2 px 2 px rgba( 0 , 0 , 0 ,. 5 );
-moz-box-shadow:- 2 px 2 px 2 px rgba( 0 , 0 , 0 ,. 5 );
box-shadow:- 2 px 2 px 2 px rgba( 0 , 0 , 0 ,. 5 );
position:relative;
z-index: 5 ;
margin: 0 – 1 px 0 0 ;
/* cursor:text; */
}
#tabbed-toc .toc-content, #tabbed-toc .divider-layer {
width: 80 %;
float : right;
background-color: white;
border-left: 2 px dotted #30A7E5;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#tabbed-toc .divider-layer { float :none;
display:block;
position:absolute;
top: 0 ;
right: 0 ;
bottom: 0 ;
-webkit-box-shadow: 0 0 7 px rgba( 0 , 0 , 0 ,. 7 );
-moz-box-shadow: 0 0 7 px rgba( 0 , 0 , 0 ,. 7 );
box-shadow: 0 0 7 px rgba( 0 , 0 , 0 ,. 7 );
}
#tabbed-toc .panel {
position:relative;
z-index: 5 ;
font:normal normal 10 px/normal Helmet,Freesans,Sans-Serif;
}
#tabbed-toc .panel li a {
display: block;
position: relative;
font-weight: bold;
font-size: 14 px;
color: #434B50;
line-height: 40 px;
height: 35 px;
padding: 0 12 px;
text-decoration: none;
outline: none;
overflow: hidden;
}
#tabbed-toc .panel li time {
display:block;
font-style:italic;
font-weight:normal;
font-size: 10 px;
color: #666; float :right;
}
#tabbed-toc .panel li .summary {
display:block;
padding: 10 px 12 px 10 px;
font-style:italic;
border-bottom: 4 px solid #275827;
overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail { float :left;
display:block;
margin: 0 8 px 0 0 ;
padding: 4 px 4 px;
width: 72 px;
height: 72 px;
border: 1 px solid #dcdcdc;
background-color: #fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
background-color: #CAE6F2;
}
#tabbed-toc .panel li a:hover, #tabbed-toc .panel li a:focus, #tabbed-toc .panel li a:hover time, #tabbed-toc .panel chúng tôi a {
background-color: #333;
color:white;
outline:none;
}
#tabbed-toc .panel chúng tôi a:hover, #tabbed-toc .panel chúng tôi a:hover time {
background-color: #222;
}
@media ( max -width: 700 px) {
#tabbed-toc {
border: 2 px solid #333;
}
#tabbed-toc .toc-tabs, #tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float :none;
display:block;
}
#tabbed-toc .toc-tabs li {
display:inline;
float :left;
}
#tabbed-toc .toc-tabs li a, #tabbed-toc .toc-tabs li a.active-tab {
background-color: #224C19;
-webkit-box-shadow: 2 px 0 7 px rgba( 0 , 0 , 0 ,. 4 );
-moz-box-shadow: 2 px 0 7 px rgba( 0 , 0 , 0 ,. 4 );
box-shadow: 2 px 0 7 px rgba( 0 , 0 , 0 ,. 4 );
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color:white;
color: #333;
}
#tabbed-toc .toc-content {
border:none;
}
#tabbed-toc .divider-layer, #tabbed-toc .panel li time {
display:none;
}
}var tabbedTOC = {
blogUrl: “http://www. chúng tôi /” , containerId: “tabbed-toc” , activeTab: 1 , showDates: false, showSummaries: false, numChars: 200 , showThumbnails: false, thumbSize: 40 , noThumb: “https://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png” , monthNames: [ “January” , “February” , “March” , “April” , “May” , “June” , “July” , “August” , “September” , “October” , “November” , “December” ], newTabLink: true, sortAlphabetically: true, showNew: 7 , }; #bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;} span.toc-note {padding: 20 px;margin: 0 auto;display:block;text-align:center;color: #ffcfcc;font-family:’Open Sans’;font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;} .toc-header-col1 {padding: 10 px;background-color: #f5f5f5;width:250px;} .toc-header-col2 {padding: 10 px;background-color: #f5f5f5;width:75px;} .toc-header-col3 {padding: 10 px;background-color: #f5f5f5;width:125px;} .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size: 13 px; text-decoration:none;color: #aaa;font-family:’Open Sans’;font-weight:700;letter-spacing: 0.5px;} .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { · Thay chúng tôi thành tên miền của bạn · 2 phong cách trên mình đều để Demo trực tiếp trong bài cho các bạn tham khảo luôn · Ở 2 phong cách trên mình đã gộp cả 3 đoạn HTML, CSS và JS chỉ thực hiện trực tiếp trên 1 trạng chuyên biệt không cần phải chỉnh sửa template New! About Quang Mến : Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@!