MBS

How To Submit Sitemap To Google Webmaster Tools

Submitting sitemap is one of the best SEO tactics to be successful in your blogging career. This is your gateway to generate organic traffic to your blog via search engines like Google. As a guide through it, you must have to submit a sitemap to Google Webmaster Tools because this time Google is the best search engine company followed by Bing, Yahoo, Ask.com and AOL . This is a great tool that would help you maximize the full potential of your site. It is useful for bloggers and webmasters to get their blog or website easily index by the Google. Everytime you update your blog/site with a new posts, your sitemap helps to index it easily in search engines.

Recommended For You! How To Make Sitemap Page to Blogger For Your Readers?

Submitting Sitemap To Google Webmasters Tool Step

Step 1. Login to your Google account and go to Google webmaster tools.
Step 2. Click on the blog title for which you want to add sitemap.

Step 3. Click Sitemaps button as shown in the screenshot below.

Step 4. Click on the Add/Test Sitemap button

Step 5. Then fill in the blank field the code below.

atom.xml?redirect=false&start-index=1&max-results=500

Step 6. Finally, click the Submit Sitemap button then refresh the page and Congratulations!

Note: The above sitemap will work only for 500 posts. Now if you have a posts published which is more than 500 in your blog, then you have to add one more sitemap. Don't worry because the whole process is just the same but at this time you have to add another set of code specifically in step no. 6 above. Please copy the code below,

atom.xml?redirect=false&start-index=501&max-results=500

Google will check the sitemap you have submitted and begin indexing your site as soon as it determines the sitemap has no errors. For additional information, please visit Google Support on how to submit sitemap to Google Webmastertools.

That's all friends and don't forget to drop your comments below to further enhance this article. Peace And Have A Blissful Day!

Adding Fancy CSS3 & JQuery Lavalamp Menu For Blogger

In my previous tutorial, I shared to you how to add drop down menu and it is useful especially if you have many clutters that disturb the eyes of your readers. Today , I'm going to share a menu bar which I hve learnt across my research in the web. I believe you will find it more interesting than before.This trick uses an amazing CSS3 & jQuery lavalamp .You can use this menu in six (6) different colors by just changing the div class word in the HTML code.This menu is originally designed by In side signs and Helperblogger made it bloggerized to work perfectly with any blogger templates. With no so much word, let's us now go to the tutorial and see how to add this menu to your blogger blog.

How to Add Fancy CSS3 & jQuery Lavalamp Menu For Blogger

Step 1. Adding the Script

A. Go to your Blogger Dashboard >> Template Click
B. Hit the Edit HTML button
C. Find or Control F the code below in your template

</head>

D. After finding the above code, place the code below code just above the code in Step 1 C.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.helperblogger.com/lavalamp-menu.js" type="text/javascript"></script>

If you have already added a jQuery library to your blog then delete the highlighted code in orange)

Step 2. Adding Cascading Style Sheet (CSS)

A. Look for the code below

]]></b:skin>

B. Add the following code below just above the code in Step 2 A.

/*LAVALAMP MENU BY http://www.mybloggersnipers.blogspot.com/ STARTS here*/

.lavalamp { position: relative; border: 1px solid #d6d6d6; background: #fff; padding: 15px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); border-radius : 10px; -moz-border-radius : 10px; -webkit-border-radius : 10px; background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204))); background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204))); height: 18px; font-family: calibri;
}
.magenta { background : rgb(190,64,120); background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91))); background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91))); border: 1px solid #841144;
}
.cyan { background : rgb(64,181,197); background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187))); background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187))); border: 1px solid #2f8893;
}
.yellow { background : rgb(255,199,79); background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43))); background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43))); border: 1px solid #c08c1f;
}
.orange { background : rgb(255,133,64); background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24))); background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24))); border: 1px solid #c04f11;
}
.dark { background : rgb(89,89,89); background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54))); background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54))); border: 1px solid #272727;
}
.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{ color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.40);
}
.lavalamp a { text-decoration: none; color: #262626; line-height: 20px;
}
.lavalamp ul { margin: 0; padding: 0; z-index: 300; position: absolute;
}
.lavalamp ul li { list-style: none; float:left; text-align: center;
} .lavalamp ul li a { padding: 0 20px; text-align: center;
} .floatr { position: absolute; top: 10px; z-index: 50; width: 70px; height: 30px; border-radius : 8px; -moz-border-radius : 8px; -webkit-border-radius : 8px; background : rgba(0,0,0,.20); -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out;
}
/*LAVALAMP MENU BY http://www.mybloggersnipers.blogspot.com/ ENDS here*/

C. You may now save your template Step 3. Adding this widget on your blog A. Now go back to your Blogger Dashboard B. Click Lay-out button >> Add a Gadget. Choose HTML/JavaScript C. Copy the code below and paste it inside the empty space and drag it below Header section.

<div class="lavalamp dark">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Free Templates</a></li>
<li><a href="#">Recipes</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
<div class="floatr"></div>
</div>

Replace # with your (URL) link Replace Home, About, Contact. etc. with your link text which you want to appear on the menu.
If you want to change background color of the menu then replace <div class="lavalamp dark">

with one of the code below.

<div class="lavalamp dark">
<div class="lavalamp magenta dark">
<div class="lavalamp cyan">
<div class="lavalamp yellow">
<div class="lavalamp orange">

D. Click Save Arrangement

Take Care Friends!

How to change the image of the header in blogger

As you scroll over on different blogs, you simply captivated with their different and stylistic designs specially on the header section. So what comes into your mind, a change of your own, or a sort of modification of what you have placed on it.If you really have the zest and intention to enhance your header. Go! Bear in mind, new become an apple of the eyes. So let's do the process.

Change The Image of The Header In Blogger

Note. You have to prepare you new image and text design before you can jump to its modification. You can use Photoshop or Microsoft Power Point.

Step 1. Go to Blogger Dashboard

Step 2. Click Layout

Step 3. Look for the header and click " edit "

Step 4. Click remove and then click " choose file "

Step 5. Click the desired image for your header from the folder where you saved it.

Step 6. Click " Have description placed after the image ".

Step 6. Click " Save "

Step 7. Click " view blog "

Step 8. If your satisfied with your new header, click " save arrangement ". That's it.

Take Care Buddies!

How to Add Expandable Recent Comments Widget In Blogger

Building blocks frame your house, while finishing makes it more appealing. Today, I will share to you another trick on how to make your recent comments more attractive and professional look. I would say that the code that I am going to share with you is abstracted from helplogger and I made some changes in order to present it in a more fascinating manner. This Expandable Recent Comments widget is a very accessible for it can be collapsed or expanded through your user's interaction, so that now, we don't have to click on the commenter or post title link in order to see the content of a comment. The expanding content of the comment can be shown or hidden by clicking on the plus/minus icon or by hitting the "Show all" or "Hide all" button at run time.

Adding The Expandable Recent Comments Widget to Blogger

Step 1. Log in to your Blogger dashboard
Step 2. Hit the Layout button
Step 3. Click on "Add a Gadget" link
Step 4. In the pop-up window, scroll down and click on the HTML/JavaScript widget
Step 5. Copy and paste the code below and paste it inside the empty box

<style type="text/css" media="screen">
.row-aa { background: #f2f2f3; }
.row-bb { background: #F8F5F1; }
.row-div {
margin:0px;
padding:5px;
}
.comment-header {
font-size:0.9em;
// border:1px solid #E0E0E0;
// background-color:#F3F3F3;
padding:4px;
margin-top:10px;
margin-bottom:5px;
}
.comment-box {
margin:0px;
padding:0px;
font-size:0.9em;
height:500px;
overflow:auto;
}
.comments1 {
// background: #F3F3F3;
padding:3px;
border-left:1px dashed #A6A6A6;
color: #888888;
font-style: italic;
padding-top:4px;
margin-bottom:5px;
}
.comment-footer {
text-align:center;
font-size:0.9em;
padding:4px;
margin-top:5px;
}
</style>

<div style="text-align: center" class="comment-header"><input class="comment-button" id="commshowall" type="button" onclick="if (this.value == 'Show all') { unfold_all(this); this.value='Hide all'; } else { fold_all(this); this.value='Show all'; }" style="width:8em;font-size:1em;font-family:Verdana,sans" value="Show all" /></div>

<div class="comment-box">
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/expandable-recent-comments.js"></script>
<script type="text/javascript" src="http://mybloggersnipers.blogspot.com/feeds/posts/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentposts">
</script>
<script type="text/javascript" src="http://mybloggersnipers.blogspot.com/feeds/comments/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentcomments">
</script>
</div>

Do few changes:

Replace http://mybloggersnipers.blogspot.com with your blog/site address.

Replace 1px (font size) with your own desired font size, bigger number means bigger size of the font

Replace dashed with your desired border styles, click link to see different border styles.

Replace #A6A6A6 with another hexadecimal color that would most fit your blog's theme.

And lastly, change the phrase Hide all and Show all with another synonyms related to that phrase.

Step 6. Save your widget and tha's it!

Good Day Friends !

How to add media sharing buttons below every post title

For an easy way of sharing your desired information to the internet community. It is then necessary to put media sharing widget on your blog.

A widget today is an enhance version of the sharing widget we earlier shared. It includes popular social networking buttons like Twitter, Facebook Like, Google Plus +1, Add this and Stumbleupon. I am using it in my blog as you can see. We will also customize here the Add This button and will add blog title inside it. You can easily customize it to change the background colors and widget overall look. It can be added to both Blogger and Wordpress. It has a big impact in accumulating blog traffic through the shares made by these buttons which will circulate in social media and help you enjoy a long lasting referenced traffic. Lets start adding these valuable buttons to your blog.

Add Social Sharing Buttons Below Post Titles

Here is the method for blogspot blogs. If you are using Wordpress then you may please add the code shared below inside your template by going to template section.

Please follow the steps below if you use Blogger. Go To Blogger > Design > Edit HTML Backup your template Click on the box at top right that says "Expand Widget Templates" Then search for Just above it paste the following code,

<b:if cond='data:blog.pageType == "item&quot;'> <div style='background:#FEE6E6; border:1px solid #ddd; -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px; padding:5px; box-shadow: 3px 3px 3px #CCCCCC;'> <table border='0'> <tr>
<td>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/> <b:if cond='data:post.isFirstPost'> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'> </script> </b:if> </td>
<td>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100& action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:0px; width:100px; height:20px;'/> </td>
<td><div style='margin-right:25px;'>
<script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=1&r=" + data:post.url'/></div> </td> <td><div style='margin-right:5px;'> <g:plusone expr:href='data:post.url' size='medium'/> </div> </td>
<td>
<div class='addthis_toolbox addthis_default_style '> <a class='addthis_counter addthis_pill_style'/> </div> <script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de3b2d654f56f28' type='text/javascript'/> <script type='text/javascript'> var addthis_config = { ui_cobrand: "MYBLOGGERSNIPERS", ui_header_color: "#ffffff", ui_header_background: "#0080FF" } </script>

</td> </tr> </table></div> </b:if><br/>

Do these changes:

To change the background color of the container edit #FEE6E6

Replace MYBLOGGERSNIPERS with your blog title so that it appears on the add this button upon mouse hover. As shown below:

5. Note: skip this step if you have already added a Google+ button somewhere in your blog. Search for ]]></b:skin> and just below it paste the following code:

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>

6. Save your template.

Then see your blogs and look what's appearing on post pages and not on the homepage. If you want to show it even on your homepage then just delete the two blue lines from the code above.

I am so grateful to mybloggertricks for the ideas about this post.

Take Care Friends!

How to add widgets on both sidesof Blogger header

Another tricks in blogging is observable in some professional blogs where there are more than one widget found in the header section. In this particular application of css codes pushed some newbe to ask how to put it in their blog header. Or some readers asked how to add a widget on each side of the header as pictured below, while others asked how to place multiple widgets on the right side of the header. This tutorial will cater those questions. It will show you how to add your desired number of widgets in the header area, and arrange them in such a way that it's done horizontally.

It’s an improved version of my previous tutorial on similar customization: Add banner, Adsense or search box in header, as it doesn’t require the addition of a new widget container i.e. section.

1. Please unlock the header section

Maybe you've been through a lot of testings on how to apply this trick. However you cannot add widgets to the header section in Layout because it is locked. Blogger by default limits the header section to only one widget (the header).

Fortunately we can unlock it so easily. Go to Template > Edit HTML > Proceed and look for this line thru control F:

<b:section class="header" id="header" maxwidgets="1" showaddelement="no"></b:section>

Replace the above code with this:

<b:section class='header' id='header' maxwidgets='' showaddelement='yes'>

What the new code does, is removing the widget count limit, and adds the Add-A-Gadget link in the section.

2. Add widgets and get the IDs

Go to Layout page and add in your widgets via Add-A-Gadget. Arrange them according to how you want them to appear on the actual blog. The topmost widget here will appear farthest to the left on the blog, and the bottom one will appear farthest to the right.

Once the widgets are saved, check the widget IDs by following this tutorial: How to find Blogger a widget ID. You need to know the IDs so you can address the widgets individually when styling them in the next step.

3. Add CSS code

Now you’ve done adding the widgets in the header, but they are stacked on top of each other. In this step you will make the widgets appear side by side, add margins or paddings etc. Note: The horizontal layout will not be reflected in Layout page i.e. the widgets will still appear to be stacked vertically.

1.Go to Template > Customize > Advanced > Add CSS, enter the code below and press Enter key. Or you can paste it right before ]]></b:skin> in Edit HTML.

.header .widget {
border: 1px solid;
display:inline-block;
*float: left;
height: 200px;
overflow: auto;
margin: 10px 5px !important;
vertical-align: top;
}

.header #Header1 {
width: 50%;
}

.header #widgetID1, .header #widgetID2 {
width: 20%;
}

1. Change the widget ID with the widget ID you get in previous step. Pay attention to the width property -you can set the widths to any values as long as the sum of all the widths, padding, margins and borders of the widgets do not exceed the width of the header section. Otherwise the rightmost widget will be pushed below the rest of the widgets.

2. See the preview pane while doing the adjustment, your aim is for the widgets to align nicely as pictured above.

3. Click Apply To Blog button when it's done.

My gratefulness is extended to bloggersentral for the information about blogging.

Enjoy Friends!

How to change the image and color of the blockquote

It was said that common are obsolete.The very reason why people travel to different places to look for new. In the blogger world, it seems to be parallel to this concept because readers consider new as something that is helpful, in terms of ideas and implementations. As we consider this, we also need to look at in a more vivid horizon which we always consider that our patience and hard work will very soon turn into money. Like applying an advertising company, specifically the adsense, considers new as one of their bases for your application's approval. This tutorial will show you how to change the color and background of your blockquote. So, let's do it.

Changing the Background Image and Color of a Blockquote

Step 1. Go to Blogger > Layout > Edit HTML

Step 2. Backup your template
Step 3. Search for .post blockquote and delete it along with all its occurrences. In most templates the codes look like this,

.post-body blockquote { line-height:1.3em; }
OR
.post blockquote{ etc etc etc }

If you cannot find that code then it's Okay.

Now look for ]]></b:skin> and just this ]]></b:skin> , paste the code of your favorite blockquote. Try this example below;

.post blockquote {
margin : 0 25px;
padding: 58px 28px 38px 18px;
background :#F2F2F2 url(place the url of your image here) no-repeat 580px 5px;
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;
color : #000000;
border: 8px dotted #A9A9A9;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Note: Just always remember that a background element is followed by a word url. The six digit value is the background color and image link is inserted in place of bold text in this part-> url(place your image Link here) .Click this link on "how to upload image and get its url".

Step 4.After customizing, it's time to save your preview your template to see the interesting new change.

Step 5. Save your new view template.

God Bless
You Always!