शुक्रवार, 16 जनवरी 2015

How to Install This Sitemap Widget in Blogger Blog?


Smart Blogging Methods


Posted: 14 Jan 2015 12:49 AM PST

3 Responsive Sitemap Widgets for Blogger

Sitemap Page is Very Important in Blogger.it helps to Increase your Blog Page Rank.There are Lot Pro Bloggers Used this Method to increase their Page rank and Ranking.But Bascially Page rank Depends on Quality Back links and Internal Backlinks of the Blog Posts.This type of Widgets Helps to Reduce the Bounce Rate.the Internal linking is the Main Role of the Page rank System.it helps to Increase your Crawl rate in Google.

Advantages By Using this Sitemap Widget

  • Increase the Google Page rank.
  • Build the Quality Incoming Backlinks.
  • Increase your Crawl Rate in Google.
  • Improve Alexa Ranking.
  • Reduce the Blog Bounce Rate.
  • Help Readers to Read the all post in your Blogger Blog.

How to Install This Sitemap Widget in Blogger Blog?

  • Go to Blogger Dashboard
  • Go to Pages
  • Create New Page
  • Set the Sitemap as the Page Title and Page url Like this http://yourdomain.com/p/sitemap.html
  • In the Page Editor Select Html Compose Mode
  • Paste your Sitemap Code and Click Save Publish Button.
  • Successfully the Sitemap Page Installed in your Blogger Blog

3 Responsive Sitemap Widgets On your Blogger Blog

Follow the Above Method to Add Sitemap Page in your Blogger Blog

Style 1

View Demo

Table Of Contents Widget For Blogger

<div id="bp_toc">  Loading TOC. Please wait....</div>  <script src="http://bloggergadgets.googlecode.com/files/blogtoc_orig.js" type="text/javascript"></script>  <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script>  <style>  #bp_toc {  border: 0px solid #000000;  background: #ffffff;  padding: 5px;  width:500px;  margin-top:10px;  }  .toc-header-col1, .toc-header-col2, .toc-header-col3 {  background: #ffd595;  color: #000000;  padding-left: 5px;  width:250px;  }  .toc-header-col2 {  width:75px;  }  .toc-header-col3 {  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:80%;  text-decoration:none;  }  .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {  font-size:80%;  text-decoration:underline;  }    .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {  padding-left: 5px;  font-size:100%;  }  </style>

Style 2 Responsive Sitemap Widget for Blogger

View Demo
<div id="sbm-sitemap">  <script src="https://googledrive.com/host/0B-P4_Fs3S76ydURacVd6TlJyWW8" type='text/javascript'></script>  <script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>  </div>  <style type="text/css">  #sbm-sitemap > a {display: none;}  .post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }  .post-archive h4 { border-bottom: 2px 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: 1px solid #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: #555; color: #fff; }  @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>

Style 3 Tabbed Table of Contents for Blogger

View Demo
<link rel="stylesheet" href="http://dte-project.googlecode.com/svn/trunk/tabbed-toc-skin.css" type="text/css" media="screen" />  <div id="tabbed-toc"><span class="loading">Loading...</span></div>  <script type="text/javascript">  var tabbedTOC = {  blogUrl: "http://mysbmtestlab.blogspot.com/",  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, // Thumbnail size  noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // 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?  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  newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text  };  </script>  <script type="text/javascript" src="http://dte-project.googlecode.com/svn/trunk/tabbed-toc.js"></script>
  • In the Above Script Find this Line blogUrl: “http://mysbmtestlab.blogspot.com/”, Replace it with your Blog Url
If you Need any Help While Installing this Widget Please Feel Free to Comment Here i will help you.
Share this Article with your Friends in Facebook,Twitter and Goolge+.
The post 3 Responsive Sitemap Widgets for Blogger appeared first on Smart Blogging Methods.
Posted: 13 Jan 2015 07:30 PM PST

Add Tabbed Email Subscription Box In Blogger Blog

Hello Everyone This is My First Article Related to Email Subscription.Add Tabbed Email Subscription Box In Blogger Blog.Now a Days Email Marketing is Very Important in Blogging.Email Blogging Helps to Increase Our Blog Visitors by the Visitors Subscribe to our Blog Mail Updates When we Update the New Posts they recieve the Email Update From our Blog.Lot of Pro Bloggers Get High Number of Visitors From Email Marketing Only.
Add Tabbed Email Subscription Box In Blogger Blog.It Comes with two Tabs which one tab has links to Facebook, Twitter, Google plus and the other tab has the RSS Email Subscription box.Work Perfectly in all Browsers.its not affect your website Loading Speed.This widget Attracts your Blog Visitor’s and Helps to Increase your Readers and Subscribers.

How to Install this Widget in Bl0gger Blog?

  • Go to Blogger Dashboard
  • Go to Template
  • Choose Edit Html
  • Use CTRL+F to Find ]]></b:skin>  Tagg
  • Now Paste this Below Css Code Just above the ]]></b:skin> Tagg
/* Tabbed Subscribe NOW */  #mbl_subscribe_tabs {color:#333;font-family:ProximaNovaRgRegular,"Helvetica Neue",Arial,sans-serif;font-size:14px;margin:0 auto 0;padding:0;border-top:2px solid #333;}  #mbl_subscribe_tabs a,a:visited{color:#5A7A9B;text-decoration:none;}  #mbl_subscribe_tabs small{font-size:11px;} ul{padding:0;margin:0;} img{padding:0;margin:0;} img a{padding:0;margin:0;}  #mbl_subscribe_tabs{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;clear:both}  #mbl_subscribe_tabs .list-block{background:#fff;padding:5px;margin:0;width:241px;-webkit-border-radius:0 4px 4px;-moz-border-radius:0 4px 4px;border-radius:0 4px 4px}    /* For Internet Explorer */  html>body hr{margin-right:0;width:100%;height:1px;background-color:#ddd;border:none;background:#ddd}  /* For Gecko-based browsers */  html>body hr{} /* For Opera and Gecko-based browsers */  ul{list-style:none}  #mbl_subscribe_tabs{padding:7px;margin:0 0 15px 0;background:#ccc;width:251px}  #mbl_subscribe_tabs ul li a{border-bottom:1px dotted #eee;padding:5px 0;display:block;margin:3px 5px;font-size:12px;}  #mbl_subscribe_tabs ul li a:hover{background:#f8f8f8;color:#222}  #mbl_subscribe_tabs .nav{overflow:hidden}  #mbl_subscribe_tabs .nav li{padding:0;float:left;margin:0 5px 0 0}  #mbl_subscribe_tabs .nav li.last{margin-right:0}  #mbl_subscribe_tabs .nav li a{margin:0;display:block;border:none;padding:4px 7px;color:#333;text-align:center;clear:both;background:#bbb;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}  #mbl_subscribe_tabs .nav li a:hover{color:#fefefe;}  #mbl_subscribe_tabs li a.current{background:#fff;color:#222;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}  #mbl_subscribe_tabs li a.current:hover{background:none;}  #mbl_subscribe_tabs .nav li a.current:hover, #mbl_subscribe_tabs .nav li a.current:hover:focus{background:#fff;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;color:#333}  #mbl_subscribe_tabs .nav li a:hover, #category_tabs .nav li a:focus{background:#777;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}    /* Sidebar Tabs*/  .subscribe-button {width:70px; height:30px;background:#507aa5;display:inline-block;padding:4px;color:#fff;text-decoration:none;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:none;cursor:pointer;margin:0;}  .emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 130px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-right:5px; margin-top:2px;}  .subscribe-button:hover{background:#515151}  .rssemail {line-height:140%;padding:2px}  /* Category Tabs*/  #category_tabs{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;clear:both}  #category_tabs .list-block{background:#fff;margin:0;width:241px;overflow:hidden;padding:5px;-webkit-border-radius:0 4px 4px;-moz-border-radius:0 4px 4px;border-radius:0 4px 4px}  #category_tabs{padding:7px;margin:0 0 15px 0;width:251px;clear:both;background:#ccc}  #category_tabs ul{list-style:none}  #category_tabs ul li a{float:left;padding:3px 7px;display:block;margin:3px;font-size:12px;background:#f7f7f7;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px}  #category_tabs ul li a:hover{background:#587898;color:#fff}  #category_tabs .nav{overflow:hidden}  #category_tabs .nav li{padding:0;float:left;margin:0 5px 0 0}  #category_tabs .nav li.last{margin-right:0}  #category_tabs .nav li a{margin:0;display:block;border:none;padding:4px 7px;color:#333;text-align:center;clear:both;background:#bbb;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}  #category_tabs li a.current{background:#fff;color:#222;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}  #category_tabs li a.current:hover{background:none;}  #category_tabs .nav li a.current:hover, #category_tabs .nav li a.current:hover:focus{background:#fff;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;color:#333}  #category_tabs .nav li a:hover, #category_tabs .nav li a:focus{background:#777;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}    /* Sprites */  .rss-sidebar,.twitter-sidebar,.digg2,.fbook-sidebar,.ff-sidebar{padding:1px 0 2px 23px}  .rss-sidebar,.twitter-sidebar,.fbook-sidebar,.ff-sidebar {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP5dRkoYHncYgOpXARvAE5gYfXVK_68cLmTK0EjZD9YUNaXDg2ZfqXc2BFYRMjupjp6FGnGjAkZ6r32-bFlpdXSv3rdzYMtddO4vbKvEuIqi-lrQtbtG3ylbFhnnXNB_eN1fRsZbjhbnI/s1600/sprites.png) no-repeat top left}  .fbook-sidebar,.s-facebook{background-position:0 -76px !important}  .ff-sidebar{background-position:0 -114px !important}  .rss-sidebar,.s-rss{background-position:0 -506px !important}  .twitter-sidebar{background-position:0 -711px !important}
  • Now Find </head> Tagg
  • Just Paste the Below Code Just Above the </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=3.4.2' type='text/javascript'/>    <script src='http://widgets.mskian.com/blogger-widgets/tab.js' type='text/javascript'></script>
  • Now Final Step Add Tabbed Widget Box in Blogger Blog
  • Now go to Layout
  • Choose add a Gadget Choose HTML/JAVASCRIPT
  • Now Paste the Below HTML Code in the HTML/JAVASCRIPT  Box
<div id="mbl_subscribe_tabs">  <ul class="nav">  <li><a href="#subscribe" class="current">Subscribe &amp; Follow</a></li>  <li><a href="#emailrss">RSS via Email</a></li>  </ul>  <div class="list-block">  <ul id="subscribe" class="test">  <li><a rel="nofollow" href="http://feeds.feedburner.com/smartbloggingmethods" title="Follow us via RSS"><span class="rss-sidebar">RSS Feed <span class="grey">- 33344 Subscribers</span></span></a></li>  <li><a rel="nofollow" href="http://plus.google.com/+smartbloggingmethodsguide" title="Follow us on Google+"><span class="ff-sidebar">Google+ <span class="grey">- 2707 Followers</span></span></a></li>  <li><a rel="nofollow" href="http://twitter.com/sbmguide" title="Follow us on Twitter"><span class="twitter-sidebar">Twitter <span class="grey">- 41371 Followers</span></span></a></li>  <li><a rel="nofollow" href="http://www.facebook.com/smartbloggingmethods" title="Follow us on Facebook"><span class="fbook-sidebar">Facebook <span class="grey">- 20318 Likes</span></span></a></li>  </ul>  <ul id="emailrss" class="hide">  <li class="rssemail">To recieve our RSS updates via email, enter your email address below &amp; click subscribe.</li>  <li> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=smartbloggingmethods', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="smartbloggingmethods" name="uri" type="hidden" /><input value="Submit" class="subscribe-button" type="submit" /></form> </li>    </ul>  </div>  </div>
  • Now Click Save Button.
  • Successfully Tabbed Email Subscription Box Installed In Your Blogger Blog.

From the Editor’s Desk

  • Find http://feeds.feedburner.com/smartbloggingmethods and Replace it with your Rss Feed Url
  • Find http://plus.google.com/+smartbloggingmethodsguide and Replace it with your Goolge+ page or Profile Url http://www.facebook.com/smartbloggingmethods and Replace it with your Facebook Page Url
  • Find http://twitter.com/sbmguide and Replace it with your Twitter Account Url
  • Find
  • In the Rss Subscribe Email Box  Just Find the Below Code n(‘http://feedburner.google.com/fb/a/mailverify?uri=smartbloggingmethods’ 
  • Remove the Smartbloggingmethods and replace with your Rss Feed Page User name
  • Now Find the <input value=”smartbloggingmethods   Replace with your Rss Feed Page user Name.

If you Need Any Help while Installing this Widget Please Feel free to Comment Here i will Help you.
Share this Article with your Friends in Facebook,Twitter and Goolge+.
The post Add Tabbed Email Subscription Box In Blogger Blog appeared first on Smart Blogging Methods.

कोई टिप्पणी नहीं:

एक टिप्पणी भेजें

fly