How to Add the Tweet Box on a Blogger Blog

How to add the Tweet Box on a Blogger Blog? I had a question from Blyke yesterday, asking “how did you get that tweet box under bookmark widget after each post?”

Nice Question,Twitter box can serve to promote our article on Twitter. You can see the example on the bottom of this posting page, you can simply press the Tweet button, or just fill it with your own words. Remember, this is an optional widget and I wouldn't recommend to install it because the script can increases the loading-time. Therefore I'm doing trial for the next few days.

How to add the Tweet Box on a Blogger Blog
1. Go to the @AnyWhere Developers Page and create an Application there with your blog details.



Make Sure that you have checked the Read&Write Option when you Register your Application.

2. When you complete the signup process, you will get some JavaScript codes, with a unique API Key

Copy out the JavaScript from there(the code in the red box) as shown in this Screenshot.



3. Now Login to your Blogger Dashboard ,navigate to the Edit HTML Tab under Design and “Expand your Widget Templates”

4. Find This Code:

</head>

And paste the copied Twitter JavaScript just above that line and save the template.

5. Then Find this code:

<data:post.body/>

And immediately below <data:post.body/> code, paste the following JavaScript Code and save your template. (Editable parts are shown in red)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='bp_tweetBox'/>
<script type='text/javascript'>
bp_tweet_link=&quot;<data:post.url/>&quot;;
twttr.anywhere(function (T) {
T(&quot;#bp_tweetBox&quot;).tweetBox({
width: 560,
label: &quot;How was your day? Tell me something about your day.&quot;,
defaultContent: &quot;RT @jayceocorner <data:post.title/>&quot;+&quot; &quot;+bp_tweet_link
});
});
</script>
</b:if>

6. Done, and now you should see the Tweet Box on all of your post pages

Goodluck

How to Create Recent Comments Widget for Blogger

Purpose of recent comments is to be able or to find out who had just commented, and this plugin displays a list of the most recent comments to your blog in a highly customisable way.

Now follow this tutorial to make a recent comments widget:

1. Log in to your Blogger account
2. Navigate to Layout > Page Elements > Add a Gadget
3. Click on HTML/Javascript

copy and paste this code:

<script style="text/javascript" src="http://sites.google.com/site/jayceoyesta/jayce-o-design-studio/recents.comments.js"></script>
<script style="text/javascript">
var numcomments = 8;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://jayce-o.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

4. Replace http://jayce-o.blogspot.com with your own Blog address.
var numcomments = 8 is the number of total comments to display, You can customize this value according to your needs
5. Save your widget and you are done. (as easy as that)

How to Create Recent Posts Widget for Blogger

Adding recent posts widget in your blogger blog will allow your visitors to quickly find your latest posts, and it's fairly easy to install.


Creating Recent Posts Widget:

1. Log in to your Blogger account
2. Navigate to Layout > Page Elements > Add a Gadget
3. Click on HTML/Javascript

copy and paste this code:

<script style="text/javascript" src="http://sites.google.com/site/jayceoyesta/jayce-o-design-studio/recent.posts.js"></script>
<script style="text/javascript">
var numposts = 5;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://jayce-o.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

4. Replace http://jayce-o.blogspot.com with your own Blog address.
var numposts = 5 is the number of total posts to display, You can customize this value according to your needs
5. Save your widget and you are done. (as easy as that)

Good luck!

How to Make Table of Contents for Blogger Blog

To create the table of contents page / sitemap in your blog (Sorted by Labels) simply copy the following code and paste it in your blog Post.Click here to see the demo of this Hack.

<script style="text/javascript" src="http://sites.google.com/site/jayceoyesta/jayce-o-design-studio/table_of_contents_for_blogger.js"></script>
<script src="http://jayce-o.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

dont forget to replace http://jayce-o.blogspot.com with your own blog URL