TechPunia - A Blogger Guide

Add Outbrain Related Post to Blogger

2011-12-31T09:27:00.001-08:00

Actully while surfing a site I come to know a nice related post widgets. This wonderful Related Posts Widget by Outbrain. It is very good looking blogger Gadget which is very easy to add it on your blog.
The widget is available in two formats plain text and also with thumbnails as shown below.

You can also add feedback to your widget with star ratings or recommendations.

Once you select all the option scroll down and select Blogger from the list of blog platforms and click on the install option.

You can add this widget as you want to add on your blog by add widgets option. Once you click it the widget will be added on your blog. Now visit to your blog and check out the widget. It may happen that you wont see the widget on you blog immediately. Wait ofr some time and you will see the widget below the posts.

I hope that you found this post useful. Do check some of my popular posts.

How Can I add Mashable Social Widget to Blogger

2011-12-25T09:12:00.000-08:00

In this post today! I will tell you how to add beautiful social widgets to your blog. It is very simple and easy. Follow me and my steps thats I will tell you in this post. Most of the blogger want to add this widgets to their blogs. It is so simple to add this to blogger. Socail Widgets helps to the reader to share the post to as they want to share like Facebook, Diggs etc. This is a great idea as the blogger get many visitors to your social media profile form them and is a great way to increase your contacts on other networks with the help of your blog.

Let us know about How to add this beautifull widgets to the blogger. Open your blogger and click on the layout option. Click on Add a Gedget. Choose the HTML/Javascript option and paste the following code in it.

You have to change the username highlighted in red color with your username and also the feed burner ID for your blog. Now click on Save and check your blog.

Dont forget to like this post if this post helpful for you. ===>

How Can I add Share This Article to the Post - Blogger

2011-12-22T07:06:00.001-08:00

You must have seen this post and may be you will find this wonderful widget "Share this Article". In this post I will tell you about How to Add Share this Article to the post. It is very easy and simple to do. Firstly you have to log on to your blogger ID. After that please take a backup of your template.

To add this wonderful widget to you web page or blog click on Edit HTML and click on Expand Widget Templates. Now Search for the following code.

data:post.body

After this paste the following code just above it.

<b:if cond='data:blog.pageType == "item"'>
<div style='background-color:#f3f3f3; width:300px; height:200px; float:right'>
<br/><br/>
<div style='clear: both; text-align: center;'>
<h4 style='color: #208ACB; '><span style='font-size: x-large;'><b><b>Share This Article!</b></b></span></h4>

<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>

<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>

<div style='float:left; margin-left:3px;'>
<script type='text/javascript'>
digg_url="<data:post.url/>";
</script>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'/>
</div>
<a class='DiggThisButton DiggLarge'/>

<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>
</div>
</div>
</b:if>

Customization

1. You can change background. To change this change the value of this "background-color:#f3f3f3"

2. You can change the color of "Share This Article". To change please change the value of "color:#208acb".

3. You can also add the social bookmarking widget of your choice by adding the code above or below the tweetmeme or stumble upon code.

Now click on save template option and check your blog. I hope this post is useful to your blog.

How Can I Add Drop Down Menu to Blogger

2011-12-18T07:51:00.000-08:00

Today I will tell you how to install drop down menu for in the blogger. For this you have to follow 3 steps respectively. These 3 steps are very easy and simple to do and understand also can be added for any template by only these 3 steps:-

1st Step

Goto you blogger account select template and edit html option. After that click on the Expend Widgets option. Now you have to find the following code in the template.

]]></b:skin>

and paste the following code just above it

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}

#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}

#jsddm li a:hover {
background: #C8C8C8;
}

#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}

#jsddm li ul li {
float: none;
display: inline;
}

#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}

#jsddm li ul li a:hover {
background: #A3CEE5;
}

2nd Step

Now find </head> tag in the template and paste the following code just above it.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[

var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;

function jsddm_open()
  {  jsddm_canceltimer();
  jsddm_close();
  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
  {  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
  {  if(closetimer)
  {  window.clearTimeout(closetimer);
  closetimer = null;}}

$(document).ready(function()
  {  $('#jsddm > li').bind('mouseover', jsddm_open)
  $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;
  //]]>
  </script>

3rd Step

Now save your template and goto layout option. Add a gadget anywhere on the screen as you want add to the dropdown menu for your blog And choose ” HTML / JavaScript ” & Leave the title empty and at the content area paste the following code.

<ul id="jsddm">
  <li><a href="#">Home</a>
  <li><a href="#">Menu 1</a>
  <ul>
  <li><a href="#">Drop 1-1</a></li>
  <li><a href="#">Drop 1-2</a></li>
  <li><a href="#">Drop 1-3</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 2</a>
  <ul>
  <li><a href="#">Drop 2-1</a></li>
  <li><a href="#">Drop 2-2</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 3</a>
  <ul>
  <li><a href="#">Drop 3-1</a></li>
  <li><a href="#">Drop 3-2</a></li>
  <li><a href="#">Drop 3-3</a></li>
  <li><a href="#">Drop 3-4</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="#">AllBlogTools</a></li>
  </li></ul>

In the above code you will have to add links in the place of # as you want to appear and as you want to connect to your blog and finally save your gadget and place it where you want to add dropdown menu. Now its the time to check your blog goto view blog option and see the result. If you found this code usefull, then don't forget to like this post ====>

How Can I add Google +1 Button to Blogger

2011-12-16T06:07:00.000-08:00

Googel lauched the +1 button for websites. I will tell you how to add the +1 google button to your blogger blog. Google have made the process of adding this button to blog is very easy and simple. As well as code that you needed to add also very simple. Just follow the steps that I have given bellow in the post.

There are two procedure to add this button to the post:-

1. Manually

2. Automatically

As if you add this button to the post manually here is the procedure...

Please go to your layout option and then html option. After that select Expand Widget Template option. Now Search </body> in the template and add the following code just above it.

Now you will have to add the button code to your blog. Search data:post.body in the blog template and add the following code above or below it

Customization of this button:-

There are four types of buttons available. Mostly blogger have used medium sized button. If you want to change the type of the button then you have to change the value of size with the code of the button.

If you want the 1st button, then replace medium with small in the above code. I have already given the code for the second button. If you want 3rd button then remove size='medium' from the code given above. If you want the 4th and the biggest size button then replace medium with tall.

2. Automatically

You can add this button automatically by goto layout option and click on the edit option for Blog Post. Now you will see the list of option. Select the Show Share Button option.

However this option doesnt appear on some blogger blogs even when you select the option shown above. For the other blog you can add this button by mannually.

Now click on the save template option and check your blog. If you found this code useful then don't forget to like this post ====>

How Can I add Facebook Like Button to Blogger

2011-12-13T08:56:00.000-08:00

Most of the people want add facebook like button to their post I am also one of them. So friends don't worry when I am is here. Follow these post to add facebook like button to your post I have written for you. First of you have log on to your blogger and click on the template option from your blogger. After this click on the Edit HTML option and after that Expand Widgets....

Step 1 : How to Add it?

Now you have to find <div class='post-header-line-1'/> and paste the following code just after it.

Now what If you dont find the code above in your template, then try to find the following code.

How Can I Install Rupees New Symble to Blogger

2011-12-08T06:37:00.001-08:00

Peole who want to canvert thier Rs symble to new symble of Rupees that is...

Before you start the work, make a backup of your template. To start edting click on Layout and click on Edit HTML option...

To convert Rs to this symble please paste this code to just after the <Head> tag:-

<script src='http://cdn.webrupee.com/js' type='text/javascript'/>

Now Save your template and Refresh your blog.

How Can I remove Navbar from the Blogger

2011-12-08T01:36:00.001-08:00

Many people want to remove Navbar from thier blog and they try many ideas and follow many steps. We have also a step in which you will remove Navbar from your blog...

Before you start the work, make a backup of your template. To remove it click on Layout and click on Edit HTML option...

Now select Expand Widget Templates. After selecting it, goto tempate's CSS section of the blog and paste the red colored code as it is showes in the following coding.

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

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Rounders
Designer: Douglas Bowman
URL:      www.stopdesign.com
Date:     27 Feb 2011
Updated by: Blogger Team
----------------------------------------------- */

#navbar-iframe {
   display: none !important;
}

/* Variable definitions
====================
   <Variable name="mainBgColor" description="Main Background Color"
             type="color" default="#fff" value="#ffffff">
   <Variable name="mainTextColor" description="Text Color" type="color"
             default="#333" value="#333333">
=========================================================================================

Now Save your template and Refresh your blog.

How Can I remove Subscribe to: Posts (Atom)‏

2011-12-08T00:41:00.001-08:00

Many people tried thier level best for removing Subscribe to: Post(Atom) from thier blogger but they wont find any option to remove this line.

Hear we have steps to remove this line from the blog so try this:-

Before you start the work, make a backup of your template. To remove it click on Layout and click on Edit HTML option...

Now select Expand Widget Templates. After selecting it, search for the following code in the template

" <b:include name='feedLinks'/> "

after find this line remove it and save your template. Refresh your blog and now the Subscribe to: Posts (Atom) link wont be there on your blog.