Skip to main content

HTML Sitemap Page कैसे बनाये or Blog में Add करे

आपको इस post में blog या site के लिए HTML Sitemap Page को बनाने और इसे blog में add करने के लिए बतलाऊंगा | Sitemap two types के होते है :


  1. XML Sitemap

  2. HTML Sitemap

XML Sitemap को आप एक small file का सकते है जिसमे हमारे blog या site का सारा content XML format में होता है | XML Sitemap हमारे blog के सारे content को Google Search Engine में Index करने में help करता है | इसके बारे में और अधिक जानकारी के लिए यह post पढ़े |


  • XML Sitemap कैसे बनाये Blog या Website के लिए ?

  • Blog के Sitemap को Google Search Console में Submit कैसे करे ?

  • Blogger Sitemap को Yandex Webmaster Tool में Submit कैसे करे ?

html sitemap page kaise banaye blog ke liye


HTML Sitemap में हमारे blog पर publish किये गए सारे post का list होता है | यह HTML format में होता है | अतः इसमें post का जो list होता है, उसको read कर सकते है | यह हमारे blogger post को search engine में index तो नहीं करता है परंतु इसकी मदद से आप अपने blog या site के pageviews को increase कर सकते है | क्योकि HTML sitemap में blog का सारा publish post एक जगह एक पेज पर show होता है |


इसके लिए आपको blog में HTML sitemap page को create करना है और फिर उसके बाद इस page के link को blog के menu bar में add करना है | इस link को जी भी visitors open करेगा, उन्हें आपके blog का सारा post एक page में दिखाई देगा |


मैंने पिछले post में Blogger Archive Page को बनाने के बारे में बतलाया था | इस पेज में भी सारा post एक place पर एक page पर show होता है | परंतु यह categories में show नहीं होता है |


इस post में मैं जिस sitemap page को बनाने के बारे में बता रहा हूँ , वह बहुत ही attractive है और 100 % यह आपके में blog में work करेगी | इसमें सभी post एक page में categories या label में show होगी | इससे visitors को आपके blog के सारे post को navigate करने में आसानी होगी | वे अपने पसंद और जरुरत के post को आसानी से search कर सकते है |


अब मैं आको बताना शुरू करता हौं कि blogger blog के लिए HTML Sitemap page कैसे बनाते है ?


HTML Sitemap Page कैसे बनाये blog के लिए ?


HTML Sitemap Page बनाने के लिए आप मेरे steps को follow करें :-


Step 1


सबसे पहले अपने blogger account में login करके blogger dashboard पर जाएं |


click-on-pages-new-pages


  1. Pages >> All पर click करें |

  2. New page पर click करें |

Step 2


अब page editor open होगा |


paste-html-sitemap-css-code-in-page-body-section-and-publish


  1. Title area में page का नाम अपने हिसाब से कुछ भी लिखे सकते है जैसे कि Sitemap, All Post, Archive etc.

  2. HTML पर click करके HTML mode को ON करे |

  3. Page के body section में नीचे दिया गया code को copy करके paste कर दे |

  4. Page setting में Don’t allow, Show HTML Literally, Use <br> tag के check box में tick करके Done पर click करें |

  5. Publish पर click करे |

HTML Sitemap Code


<div id = “tabbed-toc”> <span class = “loading”>
Loading, please wait for a moment…</span>
</div>
<br />
<script type = “text/javascript”>
var tabbedTOC = {
blogUrl: “http://www.newfeatureblog.com“, // Enter your blog URL
containerId: “tabbed-toc”, // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date showSummaries: false, // `true` to show the posts summaries numChars: 200, // Number of summary chars
showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 40, // Default thumbnail size
noThumb: “”, // A “no thumbnail” URL
monthNames: [ // Array of month names
“January”,
“February”,
“March”,”
April”,
“May”,
“June”,
“July”,
“August”,
“September”,
“October”,
“November”,
“December”
],
newTabLink: true, // Open link in new window. `false` to open in samewindow
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || “onload”)
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the “New!” mark in most recent posts or//define how many recent posts are to be marked by changing the number
newText: ” – <em style=’color: white;padding: 1px 5px;border-radius: 20px;background-color: #F00;’>New!</em>” // HTML/CSS for
//the “New!” text
};
</script>
<script src=”http://yourjavascript.com/51107864021/tabbed-toc-defaults.js” type=”text/javascript”>
</script>
<style>/*Sitemap  */
#tabbed-toc {
width: 99%;
margin: 0 auto;
overflow: hidden !important;
position: relative;
color: #222;
border: 0;
border-top: 5px solid #FC0204;
background-color: #1D1D1D;
-webkit-transition: all 0.4s ease-in-out;
}
#tabbed-toc .loading {
display:block;
padding:5px 15px;
font:normal bold 11px Arial,Sans-Serif;
color:#FFF;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
margin:0;
padding:0;
list-style:none;
}
#tabbed-toc .toc-tabs {
width: 24.8%;
float: left !important;
}
#tabbed-toc .toc-tabs li a {
display:block;
font:normal bold 10px/28px Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#ccc;
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer;
-webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .toc-tabs li a:hover {
background-color: #515050;
color: #FFF;
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#FFFC03;
color: #222;
position: relative;
z-index: 5;
margin: 0 -2px 0 0;
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
width: 75%;float: right !important;
background-color: #F5F5F5;
border-left: 5px solid#FFFC03;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:0; right:0;
bottom:0;
}
#tabbed-toc .panel {
position:relative;
z-index:5;
font:normal normal 10px Arial,Sans-Serif;
}
#tabbed-toc .panel li a {
display: block;
position: relative;
font-weight: bold;
font-size: 11px;
color: #222;
line-height: 2.8em;
height: 30px;
padding: 0 10px;
text-decoration: none;
outline: none;
overflow: hidden;
-webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .panel li time {
display:block;
font-style:italic;
font-weight:400;
font-size:10px;
color:#666;
float:right;
}
#tabbed-toc .panel li .summary {
display:block;
padding:10px 12px;
font-style:italic;
border-bottom:4px solid #275827;
overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px;
width:72px;
height:72px;
border:1px solid #dcdcdc;
background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
background-color: #DBDBDB;
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:#222;
color:#FFF;
outline:none;
-webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
background-color:#222;
}
@media (max-width:700px) {
#tabbed-toc {
background-color:#fff;
border:0 solid #888;
}
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float:none !important;
display:block;
}
#tabbed-toc .toc-tabs li {
display:inline;
float:left !important;
}
#tabbed-toc .toc-tabs li a,
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#222;
color:#ccc;
}
#tabbed-toc .toc-tabs li a.active-tab {
color:#000;
}#tabbed-toc .toc-content {
border:none;
}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
display:none;
}
}</style>

credit : code source


Customize Code


Code में http://www.newfeatureblog.com के स्थान पर आप अपने blog का URL लिखें | यदि आप free BlogSpot domain name का use करते है तो आपके blog का URL कुछ इस तरह का होगा : http://YourBlogName.blogspot.com | अगर आप custom domain name का use करते है तो URL कुछ इस तरह का होगा : http://www.YourBlogName.com |


Blogger HTML Sitemap कुछ इस तरह का show होगा | नीच screenshot देखें |


newfeatureblog-html-sitemap-page-demo


अब आप अपने Blogger stemap के link को blog के footer में add कर सकते है |


Blogger HTML Sitemap Page का Link Address कैसे पता करें ?


click-on-pages-and-copy-page-link-from-view-button


  1. Pages >> All पर click करे |

  2. जिस page का link चाहिए, उस page के view button पर cursor को ले जाकर link address को copy कर ले | अगर आपने mobile पर blog को open किया है तो view पर long press करके link को copy कर ले |

Blogger HTML Sitemap Page के Link को Footer में कैसे Add करे ?


Blogger HTML Sitemap page के link address को footer में add करने का मैं सबसे simple method बतलाता हूँ :-


Theme >> Footer वाला Add a Gadget >> Page >> tick sitemap page >> Save


ये भी पढ़े :


  • RevenueHits Ads Network पर Account बनाकर पैसा कैसे कमाये ?

  • RevenueHits पर Ads बनाकर Blog या Site में Add कैसे करे और paisa कमाएं ?

उम्मीद है कि आपको यह post पसंद आया होगा | Blogger HTML Sitemap page को बनाने में कोई भी problem आती है तो मुझे comment करें |


इस blog के सभी new post को direct अपने email पर पाने के लिए subscribe करें | अगर यह post आपको पसंद आया हो तो इसे facebook, twitter, google plus etc., जैसे social sites पर share करें |


The post HTML Sitemap Page कैसे बनाये or Blog में Add करे appeared first on New Feature Blog.

Labels:

Comments

Post a Comment

Popular posts from this blog

Linkedin Par Apna Account Kaise Banaye

Linkedin aaj ke jamane me ek famous professional social networking sites hai. Linkedin par aapko kitne hi million users mil jayenge jinki madad se aap apne ideas, knowledge ko increase kar sakte hai. Is site par aapko kitne hi professional log milege. Agar aap unke saath business karna chahte hai to yah site aapki bahut help karegi. Yah site aapko job search karne me bhi help karegi. Jyadatar business karne wale log is site par apne business ka promotion ke liye advertising karte hai. Jis tarah se blog ya website ka advertising facebook, twitter etc. par kiya jaata hai, usi tarah se linkedin par bhi aap apne blog ya website ka advertise kar sakte hai aur apni site ya blog ki traffic increase kar sakte hai. Read Also : Facebook पर Account कैसे बनाये ? Facebook पर Single Name Kaise Set करे : Easy Trick Ab hum sidhe apne point par aate hai aur aapko batana start karte hai ki linkedin par...
Post a Comment
Read more

Program Guidelines

Publishers participating in our program are bound by the terms and conditions available  at  http://www.media.net/legal/tos . In addition, all publishers must read and comply with the policies provided below. Media.net reserves the right to change the policies at any time without prior notice to the publisher. The publisher understands that it is their sole responsibility to keep themselves abreast of all policies available here. Media.net reserves the sole right to warn, or without notice, terminate any publisher that is found in violation of these policies. Media.net may make exceptions to any of these policies at their sole discretion. Program Guideline Our program is currently only open to website(s) with premium content that fulfill the criteria specified below: Contain significant amount of original content that is updated regularly and does not infringe any third party intellectual property rights Receive majority of their traffic from US / UK / Canada...
3 comments
Read more

11 Attractive Fast Loading Email Subscription Widget Ko Apne Blog Me Lagaye

Email subscription kisi bhi blogger ke blog ya website ki traffic ko badhane me bahut hi important role nibhati hai. Maine apni pichhli post me iske baare me batlaya tha ki email subscribe box kya hai aur isko blog me kaise lagate hai. Jab koi visitor blogger ke blog par lagaye email subscribe box me apna email dalkar subscribe karta hai to us visitor ke email par ek activation message aata hai. Activation message me link hota hai. Link par click karte hi visitor ke email par free email delivery ki service activate ho jaati hai. Matlab ab agar blogger koi bhi new post publish karega to visitor ko new post ki jaankari direct email par mil jaayegi. Iske baad visitor post ko padhne ke liye blog par visit karega jisse ki blogger ki traffic increase hogi. Yah maine aapko short me iske important ke baare me batla diya. Ab hum sidhe apne point par aate hai. Maine niche 11 email subscription widget ko diya hai. Aapko jo widget pasand aaye usko aap apne blog me lagaye. Widget me aapko kuchh...
Post a Comment
Read more