Tutorial: How to add "JOIN TO THIS SITE" widget by Google to BLOGGER

1. Go to dash board of your Blog.

2. Click on layout tab.

3. Click on add gadget button.

4. Now go to 2nd option ie MORE GADGETS at left side you can see as below.

5. Now in search box type "join this site widget by google". and give enter.

6. Select this option.

You are done.

Tips: 
Make sure you have logged into your blog which you want to add this widget.

Hope you like this post.

Read more...

Tutorial:How to add "you might also like" widget to Blogger

Hi everyone 

Today will give instructions on how to add "you might also like" or  "You may also like" widget on Blogger's Blog.

Step 1: Go to linkwithin.com

Step 2: Fill up all the fields like email, Bloglink, platform and click on get widget.

Step 3: Now click on install widget at top next new window will open.

Step 4: Select your blog name. If you have more blogs click on which blog you want to add widget.

Step 5: Click on add widget.

Step 6: Go back to your blog it will be installed you can see at right side near add widget below. Its better you place it below Blog posts frame.

Your done...!!!!!!!

Read more...

Tutorial:How To Add The Drop Down Menu in Blogger

Create a Simple Drop Down Menu In Blogger Blog

1. Go to dash blogger dashboard.
2. Click on template -> edit html. (back up your template)
3. use ctrl F to find ]]></b:skin> and paste the below code.

===========================

/*----- Drop Down Menu BY www.realcombiz.com----*/

#rbnavbar {
    background: #2a2626;
    width: 100%;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #7f7777;
        height:35px;
}

#rbnav {
    margin: 0;
    padding: 0;
}
#rbnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#rbnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:35px;
}
#rbnav li a, #rbnav li a:link, #rbnav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
       
}
#rbnav li a:hover, #rbnav li a:active {
    background: #6c6464;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
       
   
       
}
#rbnav li {
    float: left;
    padding: 0;
}
#rbnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#rbnav li ul a {
    width: 140px;
}
#rbnav li ul ul {
    margin: -25px 0 0 161px;
}
#rbnav li:hover ul ul, #rbnav li:hover ul ul ul, #rbnav li.sfhover ul ul, #rbnav li.sfhover ul ul ul {
    left: -999em;
}
#rbnav li:hover ul, #rbnav li li:hover ul, #rbnav li li li:hover ul, #rbnav li.sfhover ul, #rbnav li li.sfhover ul, #rbnav li li li.sfhover ul {
    left: auto;
}
#rbnav li:hover, #rbnav li.sfhover {
    position: static;
}
#rbnav li li a, #rbnav li li a:link, #rbnav li li a:visited {
    background: #6c6464;
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
   
}
#rbnav li li a:hover, #rbnavli li a:active {
    background: #2a2626;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

==============================

• To change the color of your background menu, simply edit  #2a2626.

• To change the background color of the menu on mouse hover, then edit #6c6464

• To change the background color of the drop down menu, edit #6c6464.

• Click "SAVE TEMPLATE" when you are done with your editing.

Note: click here  to see html codes for colors.

4 . To add as gadget.

     Go to dash board of your Blog.

     Click on layout tab.
     Click on add gadget button.

5. Select html/java script option.

6. add this code.

======================================

<div id='rbnavbar'>
      <ul id='rbnav'>
        <li>
          <a href='#'>Home</a>
        </li>
        <li>
          <a href='#'>Contact</a>
       </li>
        <li>
          <a href='#'>About</a>
       </li>
        <li>
          <a href='#'>Blogging</a>
        </li>
  <li>
           <a href='#'>Services</a>
            <ul>
                <li><a href='#'>Sub Page #1</a></li>
                <li><a href='#'>Sub Page #2</a></li>
                <li><a href='#'>Sub Page #3</a></li>
                <li><a href='#'>Sub Page #4</a></li>
                <li><a href='#'>Sub Page #5</a></li>
              </ul>
        </li>
         <li>
          <a href='#'>Create This ></a>
        </li>
      </ul>
    </div>

========================================

• Replace all occurrence of # with the link/url of each 

       page you want to point the menu to.

• Replace all text highlighted in green  sub page #1  

      with the title of each menu.

• Click "Save"  Your done.

Thanks to  www.realcombiz.com for giving clear instruction on this.

Read more...

Tutorial:How to add recent posts widget with image

1. Go to dash board of your Blog.

2. Click on layout tab.

3. Click on add gadget button 

4. Select html/java script option.

4. Give name to title as recent posts or anything u like.

5. copy the below code and paste it onto content.

=======================================


<div id="hlrpsb">
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj81jdnQ9sZEXAeJG6BtVcWquNdqJ9dOZg8jTIrH4IKnVkC9buFXBMcBVrcKW3rep5304U2rbNpW9vCDamAr6F0JXtCnt9sPXqYDn__fIRytmkpaYu8soXusVb174LbnJw4sIJGZPwzCR3A/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsb { }
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }

</style>

=======================================

6. Now change the red color highlited code to ur blog address.
Note: Dont alter anything else.

7. Save it and see the changes on your blog by refreshing.
Your done..!!!!

Hope it helped you all.
Leave us ur comments or queries.

Read more...