Beautiful Sitemap or Table of Content For Blogger

Beautiful Sitemap or Table of Content For Blogger

18
data:blog.title
blogger sitemap

A Blog site become popular by their unique content. And if your site has more unique content then your Blog will be more popular. On the other hand, visitors love to see huge content in a site thus they get everything from one site. So Blogger should cover all types of topic thus visitors don't leave your site after landing within 1 or 2 minutes. There are many site those are designed horribly. Because site is not user friendly. And to make a site user friendly, your site must contain easy navigation and search options. But Blog visitors don't often like to search the content because some users hasn't any up-to-date idea about latest release. So in this case if they visit entire Blog site then they will  get an idea about the content. But this is not possible for all users. So to solve this issue Sitemap or Table of Content works like magic. because a visitor can see all content on any Blog at a time and they can search their preferred content.


Generally a Sitemap or Table of Content display the total number of posts in a site thus visitors can easily navigate to desired content. There are many Blog visitors those who don't like to view every post part by part and they feel interest by reading the Content headlines only. So Sitemap or Table of Content widget is ideal for those kinds of readers. In addition this sitemap has several benefits. Such as follows-

  • Visitors can see all posts at a glance.
  • Visitors can Easily navigate in any post.
  • Not any extra loading time required.
  • Your site will looks like professional
table of content

In this article I am going to share a beautiful Sitemap or Table of Content which is really professional. And it will load instantly. However don't worry about loading time because it will load instantly. Generally ideal place for sitemap is Blogger page. For this reason, I will show you about adding Sitemap or Table of Content in a Blogger page. So to add this Sitemap or Table of Content widget please follow the below steps-

Step 1 Sign in to your Blogger account and go to Dashboard

Step 2 From the Dashboard, click New page from Pages tab.

Step 3 After that now switch Compose view to HTML view and paste the below code.


HTML view


<style scoped="" type="text/css">
#bp_toc {background:#008CDB;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#FAFAFA;font-family:'Trebuchet MS';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;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:13px;
text-decoration:none;color:#aaa;font-family:'Trebuchet MS';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}
#comments {display:none;}
</style>
<div id="bp_toc" style="max-height:1200px;overflow:scroll;overflow-x:auto;">
</div>
<script src='https://cdn.rawgit.com/BloggerSpice/Sitemap/master/sitemap.js' type='text/javascript'></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

Customization

  • To adjust the page height please alter max-height:1200px with greater or lesser pixel number.
  • To change the table header and border color please change background:#008CDB;. you can get the color code from our Color Picker.
Step 4 And now simply click on Publish button from top right corner. 

Now check your Sitemap or Table of Content page and see this will show all the post's headline, Post date and label of your Blog. 
Beautiful Sitemap or Table of Content For Blogger
4 Stars stars - "Beautiful Sitemap or Table of Content For Blogger " A Blog site become popular by their unique content. And if your site has more unique content t...

Perhaps the best widget, is there any way to add some indication as loading ; https://googledrive.com/host/0Bzw23KZlrCi9cDdHX2RjdE81WmM/ajax-loader.gif


thank you

Hi Evaggelou, Most of the sitemap widget take longer time to load. I just tried to make it faster so didn't used any loading effect. If you use then widget will be slower to load. Thanks

রাব্বী ভাই এটা অসাধারন একটা পোস্ট। কিন্তু ভাই আমার এটা সমস্যা হয়েছে। তাই আপনার বুঝার সুবিধার জন্য লিংকটা শেয়ার করলাম। আশা করি সমাধান দিবেন। http://bloggingjogot.blogspot.com/2015/04/facebook-popup-onetime-like-box-for-blogspot.html

better one is here
nd Thanks for your beautiful article
Add Stylish Table of Content or Sitemap in Bloggers Blog (7 Types)

Ki problem vai bujhlam na? Ami to dekhlam shobkico thik ace?

Thanks Aziz for dropping your feedback.

@evaggelos evaggelou, to add some indication (loading)...

http://www.maz.website/2015/04/un-plan-de-votre-site-pour-blogger.html

Thanks,
Maz

Hi Maz, Nice Copy

Hi Mohammad. Thanks. Just a little customized, in french and with a loading fonction ;-)

Customization was pretty cool. Hopefully I will use that style in my next Sitemap widget. Thanks.

Thanx Mohammad, helps a lot, how can i just pull out the number of Posts on blog by modifying this code please ?, thanx for the help

Hi Pratik..Thanks for your comment. You can show the table of content on your Blog homepage. After creating this table of content just follow the tutorial from below link to set the table of content as your Blog homepage.

http://www.bloggerspice.com/2015/02/how-to-create-custom-landing-page-for-blogger.html

Thank You.

just say thank you :)

Welcome Tuan Le Minh and Thank you so much for your feedback. :dn

Hi Mohammad Fazle,

Could you tell me where do you host the script src?
This one https://googledrive.com/host/0B3jgs-7rv9eUNFdPU2RyeDZKakU was been 404. Need your help here..

Many thanks.

Hello Halih Anggoro Mukti,
Due to stop hosting service from Google Drive this widget was stopped working. I just hosted file on RawGit and updated this widget script. Now it will work. Thanks for your comment. :up

Thanks Mohammad Fazle,

You've helped me. BTW, one more question, how to change the text
DISPLAYING ALL ' + postTitle.length + ' POSTS
to be a normal letter case (I mean there will be Upper and lower case).

I ask your permission to modify the language to be Indonesian and re-hosted the script just for a preventive act. :sp

Many thanks.

Hi Galih Anggoro Mukti,
For changing the DISPLAYING ALL just locate below line and remove transform:uppercase;. now you can write text normally.

span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#FAFAFA;font-family:'Trebuchet MS';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}

for changing the Post title column length you can adjust the below 3 code line. First line is for Post title column width 250px.


.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}


Thank you. :yeh

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *