Create a Blogspot / Blogger Site Map Page Using Dynamic View

Dynamic View feature of Blogger provides a lot of awesome transition effects and many filters in many layouts for listing content from your blog. We take its advantages to create a cool site map page for your Blogger / Blogspot websites.

The idea is simple, Blogger provides Dynamic View feature on a separate URL on your site. So we will use that URL to load the Dynamic View in an iframe. Very simple, right?

Here is Demo of Blogger Site Map

Blogger Site Map Code

At first, create a static page on your blog and edit it in HTML mode.

Next, you will need to replace “YOUR_DOMAIN” text in below code then copy and paste it into your page content (in HTML mode)

<!-- 
Author: http://sneeit.com
URL: http://sneeit.com/create-blogger-site-map-dynamic-view/
Sneeit Blogger iFrame Sitemap :: sbis 
-->
<style type="text/css">
.sbis {
	overflow: hidden;
	position: relative;
	height: 565px;
	margin: 20px 0 40px 0;
}
.sbis iframe {
	display: block;
	width: 100%;	
	height: 680px;
	margin-top: -115px;
	margin-left: -10px;
	padding-right: 10px;
}
</style>
<div class="sbis">
	<iframe src="http://YOUR_DOMAIN/view/flipcard"></iframe>
</div>

You can also replace “flipcard” in the code to ONE of the following style to change the way of your site map layout:

• classic
• magazine
• mosaic
• sidebar
• snapshot
• timeslide

Notes

The dynamic view iframe will work on your blog if all of the following are true:

• Your blog is public. Your readers don’t need to sign in to view your blog. In the Dashboard > Settings > Basic > Blog Readers tab, you need to set your blog read to Public.
• Your blog has feeds fully enabled. In the Dashboard > Settings > Site feed tab, you have enabled either Full or Jump Break for your Post Feed.
• You have not disabled dynamic views. In the Dashboard > Settings > Formatting tab, the option for Enable Dynamic Views is set to Yes.

Welcome all comments for improving the code better. Thank you very much.

Thanks to wind.snow1 that contributed to the post.