How to add social sharing button after below the post title.

How to add social sharing button after below the post title.

At first login your blog with your blog ID.

Go to Design>Edit HTML

Expand Widget Templates.

Search for <data:post.body/> using Ctrl+F.

Place the following code just above it.

<!--GOOGLE+1-TWEET-FACEBOOK-STUMBLE-STARTS-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div style='padding:4px;'>

<table border='0'>

<tbody><tr>

<td>

<div style='margin-right:10px;'>

<a class='twitter-share-button' data-count='horizontal' data-via='mybloggertips' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

</div>

</td>

<td>

<div style='margin-right:10px;'>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:0px; width:100px; height:20px;'/>

</div>

</td>

<td>

<div style='margin-right:10px;'>

<g:plusone expr:href='data:post.url' size='medium'/>

</div>

</td>

<td><div style='margin-right:10px;'>

<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>  

<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>

</div>

</td>

<td>

<div style='margin-right:10px;'>

<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/>

</div>

</td>

</tr>

</tbody></table></div>

</b:if>

<!--GOOGLE+1-TWEET-FACEBOOK-STUMBLE-STOPS-->

Click Save template. You are done.

Read More

How to add different type Facebook like button in your blog.

Today I discuss how to add different types of Facebook like button in your blog. Now facebook is the leeding social site. You can see that, my blog has a Facebook like button at the end of a post and another just below the post title. Some days ago I discuss, how to add Facebook like button in your bog but today I discuss about different type of facebook like button. Facebook like button allow visitor to like your post so that other facebook friend can see this. Facebook like button helps you to increase traffic to your blog. 

There are three type of Facebook like button are shown in below

   

You can add any of them in your blog.

At first login your bolg with your Blogger ID,

Step 1. Go To Dashboard > Choose blog > Template > Edit HTML > Check "Expand Widget Template".

Step 2. Search (Ctrl+F) for <data:post.body/> and immediately before it place the following code:

Standard Facebook like button.

Code:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=standard&amp;show_faces=false&amp;width=400&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=30&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:400px; height:30px;'/> </b:if>

Facebook like button with box count on top.

Code:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=63&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:50px; height:63px;'/>
</b:if>

Facebook like button with box count at side.

Code:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=95&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=25&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:95px; height:25px;'/>
</b:if>

Step3:

Now save the template. You are done.

Read More

How to add beautiful twitter bird in your blog.

Now social networking are played an important role to increase visitor to your blog and now Twitter is the second most popular social networking site. So you can use Twitter to increase traffic in your blog just add twitter follow me button. But today I will discuss about how to add twitter “Follow me” and “Tweet This” flying bird in your blog. It is one of the most attractive twitter widget which works on javascript,the animated flying bird goes to every corner of your blog when page is scroll up or down,it generally follow the cursor (mouse),it has a "tweet this" "follow me" link attach to it and this widget is compatible with all browsers.

To add this twitter bird follow those below steps:

Login your blogger account using your Id.

Go to Design>Edit HTML.

Back up your template first.

Now find </body> using Ctrl+F.

Paste the following code just above </body>

Code:

 

<!--Flying twiter bird code Start-->

<script src='http://bloggerblogwidgets.googlecode.com/files/way2blogging.org-tripleflap.js' type='text/javascript'>

 </script>

 <script type='text/javascript'>

 var twitterAccount = &quot; royaltech999 &quot;;

 var tweetThisText = &quot; <data:blog.pageTitle/> : <data:blog.url/> &quot;;

 tripleflapInit();

 </script>

<!--Flying twiter bird code end-->

Replace royaltech999 with your twitter username.

Save the template and go to your page to see beautiful twitter bird.

Read More

How to backup or download your blog template?

It is very important to backup or download your template before any experiment with your blog template or change the design of template. You can download your blog template very easily.

At first login your blogger account with your Id. 

Go to Design then click Edit HTML tab.

Click Download full template.

You can rename it when you save the template.

Now the question is ‘how to restore this template when need it?’

It’s simple. Go to Design>Edit HTML. Click Browse button and select your template file from your hard disk then click Upload.

Read More

How to add related post at the end of your blog post?

1.      Log in your blogger blog.

2.      Click on Design.

3.      Click on Edit HTML.

4.      Click  Expand Widget Template.

5.      Download template before change it.

6.       Find the code   <data:post.body/>

7.      Paste the below orange code after   <data:post.body/>

If you add facebook share button, like button or addthis button then paste the code just after those code.

<!--related post started-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='similiar'>

<div class='widget-content'>

<h2>Related post</h2>

<div id='data2007'/><br/><br/>

<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;

var maxNumberOfPostsPerLabel = 5;

var maxNumberOfLabels = 3;

maxNumberOfPostsPerLabel = 5;

maxNumberOfLabels = 3;

function listEntries10(json) {

var ul = document.createElement(&#39;ul&#39;);

var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?

json.feed.entry.length : maxNumberOfPostsPerLabel;

for (var i = 0; i &lt; maxPosts; i++) {

var entry = json.feed.entry[i];

var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {

if (entry.link[k].rel == &#39;alternate&#39;) {

alturl = entry.link[k].href;

break;

}

}

var li = document.createElement(&#39;li&#39;);

var a = document.createElement(&#39;a&#39;);

a.href = alturl;

if(a.href!=location.href) {

var txt = document.createTextNode(entry.title.$t);

a.appendChild(txt);

li.appendChild(a);

ul.appendChild(li);

}

}

<!--Bloggertrix.com-->

for (var l = 0; l &lt; json.feed.link.length; l++) {

if (json.feed.link[l].rel == &#39;alternate&#39;) {

var raw = json.feed.link[l].href;

var label = raw.substr(homeUrl3.length+13);

var k;

for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);

var txt = document.createTextNode(label);

var h = document.createElement(&#39;b&#39;);

h.appendChild(txt);

var div1 = document.createElement(&#39;div&#39;);

div1.appendChild(h);

div1.appendChild(ul);

document.getElementById(&#39;data2007&#39;).appendChild(div1);

}

}

}

function search10(query, label) {

var script = document.createElement(&#39;script&#39;);

script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;

+ label +

&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);

script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);

document.documentElement.firstChild.appendChild(script);

}

var labelArray = new Array();

var numLabel = 0;

<b:loop values='data:posts' var='post'>

<b:loop values='data:post.labels' var='label'>

textLabel = &quot;<data:label.name/>&quot;;

var test = 0;

for (var i = 0; i &lt; labelArray.length; i++)

if (labelArray[i] == textLabel) test = 1;

if (test == 0) {

labelArray.push(textLabel);

var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?

labelArray.length : maxNumberOfLabels;

if (numLabel &lt; maxLabels) {

search10(homeUrl3, textLabel);

numLabel++;

}

}

</b:loop>

</b:loop>

</script>

</div>

</div>

</b:if>

<!--related post end-->

8.      Save the template and you are done.

Now see your blog.

Read More

How to add AddThis button in your blog post?

Add addthis button in at the end of your blog post to increse visitor in your blog. It's simple. just follow those below steps to add this......

1.      At first login blogger.con with your Id.

2.      Click Design then click Edit HTML tab.

3.      Click Expand Widget Template.

4.      Download your template before edit it.

5.      Now find <data:post.body/> using Ctrl+F.

6.      Paste the following code after <data:post.body/>

<!-- AddThis Button BEGIN -->

<div class='addthis_toolbox addthis_default_style addthis_32x32_style'>

<a class='addthis_button_preferred_1'/>

<a class='addthis_button_preferred_2'/>

<a class='addthis_button_preferred_3'/>

<a class='addthis_button_preferred_4'/>

<a class='addthis_button_compact'/>

<a class='addthis_counter addthis_bubble_style'/>

</div>

<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4e09e0ec5016d3ef' type='text/javascript'/>

<!-- AddThis Button END -->

7.      Click Save Template. You are done.

Read More

How to add facebook share button at your blog post?

It’s a very useful button for your blog. Facebook share button helps visitor to share your post in his/her wall or any group. This button helps you to get more traffic in your blog.

To add facebook share button in your post, follow those steps.

Login blogger.com with your id.

Click Design then click Edit HTML.

Click Download Full Template.

Click Expand Widget Templates. Page will atomically refresh.   

Find the following using Ctrl+F.

 <data:post.body/>

Paste the below code after <data:post.body/>.

<!-- Facebook Share Button Start-->
<div style='float: left; padding: 5px; '>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='TYPE OF BUTTON'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<!-- Facebook Share Button End -->

If you already add facebook like button at the end of the post body the paste the code just between <data:post.body/>. And facebook like button code.

Click Save Template.

Now you are done.

Can’t  forget to download template before edit template.

Read More

How to add Facebook like button after blog post title?

In previous post we discuss about’ how to add facebook like button after blog post?’. Some are want to add this button after post title. In the post I will discuss ‘ how to add facebook like button after post title?’. Now you follow those steps to add like button.

1.     At first log in your blogger account .

2.     Click on Design.

3.      Click Edit HTML.  

4.     Backup your template.

5.     Check the "Expand Widgets Templates" Box.

6.     Search <data:post.body/>

7.     Paste the Below code before <data:post.body/>.

<!--Facebook like button  start-->

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px;'/>

<!--Facebook like button end-->

8. Save your template and you are done!

Read More

How to add Facebook like button at the end of your blog post?

Now facebook is the most popular social networking site. You can socialize your post or your blog using facebook.

 You can add facebook like button at the end of your post so that visitor can like your post and with other. To add facebook like button at your blog post, follow those steps.

1.     At first log in your blogger account .

2.     Click on Design.

3.      Click Edit HTML.  

4.     Backup your template.

5.     Check the "Expand Widgets Templates" Box.

6.     Search <data:post.body/> using Ctrl+F.

7.     Paste the Below code just after  <data:post.body/>.

<!--Facebook like button  start-->

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px;'/>

<!--Facebook like button end-->

8. Save your template and you are done!

Read More

How to change blogger template?

Today I will discuss about how to change template of your blog at blogger.com.  Before you change your template, you need to download a good template for your blog. You can download a template from another site. You can download template from here. After download a template you can change your template.

At first login your blogger.com with your id.

After login dasboard will appear.

Click  Design. Then click Edit HTML.

Now download your old template. To download your template click download full template.

Click browse button and choose your template.

 Then click upload.

After click blogger will show an error message. It will look like this following picture.

Then click Keep Widgets.

And you have done.

Read More

How to add video to your blog post?

You can add video to your blog post. At first put your cursor where you want to see your video. To add video in your post click on Film script icon in post editor toolbar.

A pop up window will appear.

You can upload your video from your computer of add video from youtube. Remember that blogger support MPEG, AVI, quick time video, windows media video and it must be less than 100MB. Select your video and then click Upload. 

Read More

How to add link in your post?

When you are writing your post in post editor then you can add a link with another site or other page in your blog. At first highlight or select the text you want to make a link, and then click on Link button from the above toolbar.

A pop up window will appear.

Paste or write your web address. Click Ok.

If you want to the linked site will appear in a new page or new tab then check “Open this link in a new window.” before click Ok.   

Click here to show a demo if link.

Read More

How do you add image in your blog post?

You can add image in your post by clicking Add Picture Button. Add picture button looks like a formatted image. When you’re writing your post in post editor then you can add image in your post. At first put cursor where you want to add image then click on Add Picture Button from the above toolbar.

After then click on button a window will pop up.

 Here you can upload image or choose a image from picasa or add image from any website. At last select image and click on Add Selected.

Read More

How to add label in your post?

When you are writing your post in post editor then you’ll see Label: at the below of your post editor. You’ll also see a textbox at right side of Label. You can add your label in this textbox or click on Show All to show label those you’ve added previously and select one or more of them.

Now publish your post.

Read More

How do you post in your blog?

At first log in your account. Then click on NEW POST.

Then you'll see your post editor.

Add a title of your post in title textbox.
Now write your post. You can change the format of your post using above toolbar.
You can view your post before publish. If you want to click on PREVIEW.
At last cluck on PUBLISH POST.

To view your post click View Post.

Read More