Wednesday, April 30, 2008

How to add a DIGG button on every post

This simple Blogger template hack will put a DIGG button to every post.

Step 1. Under Settings Tab click on Edit HTML
Step 2.
Put a check on Expand Widget Templates










Step 3. Search for the code <p><data:post.body/></p>









Step 4.
Copy the code below and paste it above
<p><data:post.body/></p>





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

<script type='text/javascript'>

digg_url="<data:post.url/>";

</script>

<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>

</div>


If you want your button to be placed on the right just changed the value of margin-left and replace it with margin-right.

Monday, April 21, 2008

How to Add a Blogger Search Box

This simple Blogger Tweak will enables you to add a blogger search box that will help your readers search for a certain topic on your blog.

The main advantage of using this kind of search box is that the results will display on the body of your blog not unlike Google's search box that will open another window for search results.





<p align="left">

<form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get">

<strong>NAME OF YOUR BLOG<br/></strong>

<input id="b-query" maxlength="255" name="q" size="20" type="text"/>

<input id="b-searchbtn" value="Search" type="submit"/>

</form></p>



OUTPUT:






Remember to change YOUR BLOG URL to the URL or web address of your Blog. Also, change the NAME OF YOUR BLOG to that which you want to call your site. For instance, if your Blog Name is long, you may want to write something like “Search Here” or “Search this site”.

You can also change the “Search” button to say, “Hit” or “Go”, by changing the Value.

Save the code and refresh your page. If you want a longer or shorter search box, you can play around with the size.

If you change the width size="30" and value="Go" it will give you this


Saturday, April 19, 2008

How to Add Recent Comments

If you are using Google's Blogger, you will be wondering why Blogger can't be a bit more like WordPress or TypePad. While Blogger is incredibly easy to use, it's a bit more difficult to customize. But with a bit of work, you can tweak your Blogger site to near-perfection.

here is a code that you can use if you want your blog to have a recent comments widget. Just copy and paste the code below.


<script src="http://h1.ripway.com/slavezero23/blogger-widget.js">
</script>

<script>
var numposts = 20;
var showpostdate = true;
var showpostsummary = false;
var numchars = 100;
</script>
<script src="http://YOUR BLOG
URL/feeds/comments/default?orderby=published
&alt=json-in-script&callback=rp">

</script>


var numposts = 20; ---> number of comments shown
var showpostdate = true; ---> set this "true" if you want to show the date fo the comment
var showpostsummary = false; ---> if set to "true" this will also display the summary of the comment
var numchars = 100; ---> maximum character of comments shown

Friday, April 18, 2008

How to add Google Translator

Are your foreign readers having problem reading your english written posts? then this code will help you and your readers translate everything on your page in different languages. Inserting this Google Translator will also help boost your readership across the globe.

This code will add a Google translator just like mine. Just Copy and paste the code below.





<p align="center">

<a href="javascript:var t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection &&document.selection.createRange&&document.selection.createRange().text));var e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=en|ar&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=en|ar&tbb=1&ie='+e;};">

<img border="0" width="24" src="http://i215.photobucket.com/albums/cc129/boysakto69/_arabic_s.png" height="24" title=" Arabic "/></a> <a href="javascript:var t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection &&document.selection.createRange&&document.selection.createRange().text));var e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=en|de&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=en|de&tbb=1&ie='+e;};"><img border="0" width="24" src="http://img170.imageshack.us/img170/8593/germanshb7.png" height="24" title="German"/></a> <a href="javascript:var t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection &&document.selection.createRange&&document.selection.createRange().text));var e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=en|pt&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=en|pt&tbb=1&ie='+e;};">

<img border="0" width="24" src="http://i215.photobucket.com/albums/cc129/boysakto69/_portuguese_s.png" height="24" title="Portuguese"/></a>

<a href="javascript:var t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection &&document.selection.createRange&&document.selection.createRange().text));var e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=en|zh-CN&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=en|zh-CN&tbb=1&ie='+e;};">

<img border="0" width="24" src="http://i215.photobucket.com/albums/cc129/boysakto69/_chinese_s.png" height="24" title="Chinese"/></a>

<a href="javascript:var t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection &&document.selection.createRange&&document.selection.createRange().text));var e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=en|it&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=en|it&tbb=1&ie='+e;};">

<img border="0" width="24" src="http://i215.photobucket.com/albums/cc129/boysakto69/_italian_s.png" height="24" title="Italian"/></a>

<a href="javascript:var t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection &&document.selection.createRange&&document.selection.createRange().text));var e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=en|ru&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=en|ru&tbb=1&ie='+e;};">

<img border="0" width="24" src="http://i215.photobucket.com/albums/cc129/boysakto69/_russian_s.png" height="24" title="Russian"/></a>

<a href="javascript:var t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection &&document.selection.createRange&&document.selection.createRange().text));var e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=en|ja&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=en|ja&tbb=1&ie='+e;};">

<img border="0" width="24" src="http://i215.photobucket.com/albums/cc129/boysakto69/_japanese_s.png" height="24" title="Japanese"/></a>

<a href="javascript:var t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection &&document.selection.createRange&&document.selection.createRange().text));var e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=en|es&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=en|es&tbb=1&ie='+e;};">

<img border="0" width="24" src="http://i215.photobucket.com/albums/cc129/boysakto69/_spanish_s.png" height="24" title="Spanish"/></a>

<a href="javascript:var t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection &&document.selection.createRange&&document.selection.createRange().text));var e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=en|fr&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=en|fr&tbb=1&ie='+e;};">

<img border="0" width="24" src="http://i215.photobucket.com/albums/cc129/boysakto69/_french_s.png" height="24" title="French"/></a>

<a href="javascript:var t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection &&document.selection.createRange&&document.selection.createRange().text));var e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=en|ko&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=en|ko&tbb=1&ie='+e;};">

<img border="0" width="24" src="http://i215.photobucket.com/albums/cc129/boysakto69/_korean_s.png" height="24" title="Korean"/></a><span style="vertical-align: super"></span></p>



I manually save and upload all flag images to my photobucket account for faster loading and stability.

Thursday, April 17, 2008

How to add Recent Posts

You wanted to show to your readers your latest posts but you can't because your blog host doesn't the option to do that, Blogger unlike wordpress unfortunately doesn’t a widget to display your recent posts. Blogger doesn’t do things for you that easily but thanks to this post displaying recent posts in your Blogger blog is just as easy.

here are the easy steps to do that.

step 1. Go to Layout --> Page Elements

step 2. Add a Page Element

step 3.
Select HTML/JavaScript

step 4. Copy and paste the code below (replace "your blog url" with the url of your blog)




<script src="http://h1.ripway.com/slavezero23/blogger-widget.js">
</script> <script>var numposts = 10;
var showpostdate = true;
var showpostsummary = false;
var numchars = 100;
</script>
<script src="your blog
url/feeds/posts/default?orderby=published
&alt=json-in-script&callback=rp"></script>



step 5. Save and enjoy your recent post widget ^_^