Προσθέστε Sitemap Widget για το Blogger σε στυλ καρτέλες

   Αυτό το widget sitemap είναι σε εντελώς διαφορετική μορφή από άλλα πιο μεγάλα σε περιεχόμενο sitemap. Αυτό είναι σε στυλ καρτέλες και έγινε με νέους κωδικούς JavaScript, και το κάνει να δείχνει εντελώς μοναδικό και πολύ ελκυστικό. Δείτε εδώ ένα Live Demo. Αυτό το widget έχει δοκιμαστεί σε responsive template, και λειτουργεί πολύ καλά.
   Πώς να προσθέσετε και να ρυθμίσετε το Sitemap στο Blogger Blog; Ακολουθήστε τις οδηγίες και τα screenshots προσεκτικά για να το ρυθμίσετε στο blog σας τέλεια.
   1) Πρώτα Πηγαίνετε στο Blogger> Σελίδες

   2) Κάντε κλικ στο New Page "Blank Page"

   3) Τώρα επιλέξτε σελίδα "HTML"

4) Τώρα αντιγραφή τον κώδικα μέσα από το πλαίσιο και επικόλληση στη σελίδα σας.
<style> /*Sitemap ----------------------------------------------- */ #tabbed-toc{-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);background-color:#111;box-shadow:0 1px 3px rgba(0,0,0,.4);color:#333;margin:0 auto;overflow:hidden;position:relative;width:99%;} #tabbed-toc .loading{color:#FFF;display:block;font:normal bold 10px Arial,Sans-Serif;padding:5px 10px;} #tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li{list-style:none;margin:0;padding:0;} #tabbed-toc .toc-tabs{float:left;width:20%;} #tabbed-toc .toc-tabs li a{color:#ccc;cursor:pointer;display:block;font:normal bold 10px/28px Arial,Sans-Serif;height:28px;overflow:hidden;padding:0 12px;text-decoration:none;text-overflow:ellipsis;text-transform:uppercase;} #tabbed-toc .toc-tabs li a:hover{background-color:#444;color:#FFF;} #tabbed-toc .toc-tabs li a.active-tab{-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);background-color:#e74c3c;box-shadow:-2px 2px 2px rgba(0,0,0,.5);color:#FFF;margin:0 -1px 0 0;position:relative;z-index:5;} #tabbed-toc .toc-content,#tabbed-toc .divider-layer{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;background-color:#FFF;border-left:5px solid #e74c3c;box-sizing:border-box;float:right;width:80%;} #tabbed-toc .divider-layer{-moz-box-shadow:0 0 7px rgba(0,0,0,.7);-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);bottom:0;box-shadow:0 0 7px rgba(0,0,0,.7);display:block;float:none;position:absolute;right:0;top:0;} #tabbed-toc .panel{font:normal normal 10px Arial,Sans-Serif;position:relative;z-index:5;} #tabbed-toc .panel li a{color:#333;display:block;font-size:11px;font-weight:700;height:30px;line-height:30px;outline:none;overflow:hidden;padding:0 12px;position:relative;text-decoration:none;} #tabbed-toc .panel li time{color:#666;display:block;float:right;font-size:10px;font-style:italic;font-weight:400;} #tabbed-toc .panel li .summary{border-bottom:4px solid #275827;display:block;font-style:italic;overflow:hidden;padding:10px 12px;} #tabbed-toc .panel li .summary img.thumbnail{background-color:#fafafa;border:1px solid #dcdcdc;display:block;float:left;height:72px;margin:0 8px 0 0;padding:4px;width:72px;} #tabbed-toc .panel li:nth-child(even){background-color:#f1f1f1;color:#fff;font-size:10px;} #tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a{background-color:#333;color:#FFF;outline:none;} #tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time{background-color:#222;} @media max-width700px { #tabbed-toc{background-color:#fff;border:0 solid #888;} #tabbed-toc .toc-tabs,#tabbed-toc .toc-content{display:block;float:none;overflow:hidden;width:auto;} #tabbed-toc .toc-tabs li{display:inline;float:left;} #tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab{-moz-box-shadow:2px 0 7px rgba(0,0,0,.4);-webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);background-color:#111;box-shadow:2px 0 7px rgba(0,0,0,.4);color:#ccc;} #tabbed-toc .toc-tabs li a.active-tab{background-color:#DF1010;color:#fff;} #tabbed-toc .toc-content{border:none;} #tabbed-toc .divider-layer,#tabbed-toc .panel li time{display:none;} } </style> <div id="tabbed-toc"> <span class="loading">Loading...</span></div> <br /> <script type="text/javascript"> var tabbedTOC = { blogUrl: "http://tsokaroblog.blogspot.com/", containerId: "tabbed-toc", activeTab: 1, showDates: false, showSummaries: false, numChars: 200, showThumbnails: false, thumbSize: 40, noThumb: "", monthNames: [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ], newTabLink: true, maxResults: 99999, preload: 0, showNew: 7, newText: " - <i style='color:red;'>New!</i>" }; </script> <script src="http://yourjavascript.com/24184422821/tabbed-toc.js" type="text/javascript"></script>
   Αντικαταστήστε το http://tsokaroblog.blogspot.com/ με της δική σας ιστοσελίδας το URL. Μην ξεχάσετε να αφαιρέσετε το Διαβάστε περισσότερα » όλο το λινκ.
   5) Τώρα κάντε κλικ στο "Δημοσίευση". Τελειώσαμε.
   Ελπίζω φίλοι μου να φάνηκα χρήσιμος. Μην διστάσετε να αφήσετε ένα σχόλιο με τις εντυπώσεις σας η και τις απορίες σας. Ευχαριστώ για την επίσκεψη.

My Blogger Blog