Sitelinks are some links that are showing below site in search engines. Its not just in Google search results but in Bing, Yahoo and also in Yandex. There is no idea how to get sitelinks, even Google says that sitelinks are automatically generated links to help visitors reach important pages of your site. Also you have no control over which page you want in sitelinks and also there is no code which can do it. You might be thinking that if nothing is known about sitelinks, how am I going to get it for my site ? Well, the answer is simple you will get it as I got them ! What Are Google Search Result Sitelinks: Above is the sceenshot of sitelinks of my blog. If you search "101helper" oon Google you will see the sitelinks live. These are featured links from my blog and are shown to visitors to help them reach deeper pages or help them to reach the content of interest on a site. Note that sitelinks never remain the same they change time to time and we have no control over it. Goog...
Sitemap shows all posts of a blog in one page. It is very important for a blog as it contains all post and visitors can find posts easily. Sitemap is categorized on the basis of labels/categories so it indexes all posts under a specific label which helps users to find what they are searching for. Since blogger doesn't have any built-in sitemap therefore it can be added in a blog only from other blogs. Sitemap is important for seo also because once your blog's sitemap is indexed by search engines, visitors could find it easily and reach posts which increases your blog traffic too and in other words it is a navigation page which makes your blog's navigation more clear. I have previously shared a simple sitemap for blogger which shows posts in a list form you can see it here.
This sitemap also works as the simple sitemap but it has a cool and stylish look! You can take a look at my blog's sitemap. Moreover you can set a 404 page error and redirect visitors to your sitemap so if a visitor could not find a post which he is looking for he could read another post or find the post in sitemap which he is searching for.
How to add stylish sitemap in blogger:
Follow below steps to add stylish sitemap in your blog.
(1). Go to blogger dashboard.
(2). Click on pages in the menu on left side.
(3). Create a new page by clicking on New page.
(4). Give a title to your page "Sitemap".
(5). Below title switch to Html and paste the below code into it.
<style type="text/css">
#abt-sitemap > a {display: none;}
.post-archive { width: 140%; padding: 20px 0; text-transform: capitalize; }
.post-archive h4 { border-bottom: 3px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }
.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}
.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }
.ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #CCC; font-size: 14px; line-height: normal; outline: 3px double #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; }
.ct-columns-3 p a:hover { background: #3d85c6; color: #fff; text-decoration:none; }
@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }
</style>
<div class="content section" id="content">
<div class="widget Blog" id="Blog1">
<div class="blog-posts hfeed masonry">
<div class="date-outer">
<div class="date-posts">
<div class="post-outer">
<div class="post hentry">
<div class="post-header">
<div class="post-header-line-1">
</div>
<span style="display: none;">
<span class="post-author vcard">
</span>
</span>
</div>
<div class="post-body entry-content" id="post-body-8394154168444705692">
<div id="abt-sitemap">
<script src="//rawgit.com/101Helper/docs/master/stylish-sitemap.js" type="text/javascript"></script>
<script src="http://www.101helper.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
(6). Replace http://www.101helper.blogspot.com with your blog link.
(7). Publish the page and open it to see stylish sitemap of your blog.
Note: If you haven't labeled your posts then this sitemap won't work, so label your posts while writing a post otherwise you will see an empty sitemap or an empty page.
Note: If you haven't labeled your posts then this sitemap won't work, so label your posts while writing a post otherwise you will see an empty sitemap or an empty page.
Customization:
To change background color of tabs when hovered by mouse replace background: #3d85c6 with desired color code.If you have any question ask me in comments or contact me. Follow and subscribe to get latest updates in your inbox. Share this post with others and help 101Helper grow.
Search tags: Sitemap for blogger, adding sitemap in blogger, how to add sitemap to a page in blogger, Stylish sitemap for blogger, 101Helpe blogger tutorials.
Comments
Post a Comment