Techie Blogger » Blogger widget

Page Navigation Hack for Blogger – bugs fixed

Michael — Sat, 17 Oct 2009 18:40:37 +0000

The most awaited Page navigation script with bugs fixed is released. I have received lots of comments on the bugs of Page navigation hack. Although I was busy with my studies , I do spent sometime in fixing the errors. But i was not successful in fixing the errors of Page Navigation hack. It’s Abu Farhan, a fella blogger, who has fixed the errors and made this wonderful page navigation hack available to blogger once again. So blogger is no longer going to be bad when compared to WordPress. Still more features to come , now I invite other coders and developers to create more features which are available to only wordpress before. Without making much fuzz i would like to present you the code.

Regarding Installation you can follow any of the two methods mentioned here :

Installation instructions

Since blogger doesn’t support uploading javascript files it becomes very difficult to add huge codes like below. This will certainly increase your site loading time. So i have included the JavaScript to my own server. Just add the following code to your blogger template.

Go to layout section of your blog and then navigate to EDIT HTML subtab.

There search for tag. Add the following code immediately above it.

The script gets the number of posts to be displayed using a variable named “numofpost”. After getting the number of posts this script uses a ” for loop ” to display only the number posts mentioned by the author.

I have set the number of posts to be 8. If you want to change the number of posts to be displayed then change the number in the text shown in red.

Installation Instructions

You can either install this widget in the sidebar or add this below the posts. First i will explain how to add this as a widget in the sidebar.

Adding the code in the sidebar is very simple. Just follow the below instructions.

Go to Layout section of your blog.
Then in the sidebar select ” Add a gadget ” option.
choose ” HTML / JAVASCRIPT” widget in that list.
Now add the above code in that widget and click save.

That’s you have successfully installed the random posts widget for blogger sidebar.

Adding random posts widget below posts

I have seen few who are showing the random list of posts below their posts. It’s also a good script placement which can increase your pageviews.

To add the code , just follow the above instructions.

Go to Layout Section
Navigate to EDIT HTML subtab
Now check expand widgets option
Search the
Now add the following code immediately below it

Random posts

If you want to add custom CSS to this link list , then add the following code above

Now you can see a beautiful Random posts appearing below the posts in your Blog.

hope you like this Random posts widget and hack, If you need any other modifications then do let me know via comments.

Add paypal donation button to blogger and wordpress blogs

Michael — Thu, 30 Jul 2009 18:54:39 +0000

Rather than advertising revenue some websites depend on donations from users to run their sites. Although there are few online paypal button code generator websites available, I would like to explain how to generate paypal donation button script manually using your own paypal account. In order to create a donation button in paypal you need to have paypal account of any type (personal , business or merchant).

Creating the code for Paypal donation button

In order to create the paypal donation button script, just login to your paypal account.Then navigate to Merchant services sub page. There under ” PayPal Website Payments Standard ” , you can see a link to ” Donations” page. Click that “donations” link.

Now in that page , edit the paypal button code to suit your template. You can also have your own paypal donations button image. You can use some online paypal button creation websites to create a paypal donation button , then upload those images to your blog. In that paypal donation button customization page , enter that image url.

Then you can also customize the paypal donations script over there itself. I have explained them in my video tutorial for this hack.
So now we will have the paypal donation button script with us. Copy and paste the script somewhere in notepad.

VIDEO TUTORIAL to create paypal donation button

Online paypal donation button script generators

You can also generate the paypal donation button script using the following online paypal code generators.

Enter your paypal account details there and finally you will have the code ready to add in your blog/wesbite.

The above sites are some of the paypal button creators which i have found so far. If you any other then please let me know using comments.

ADDING PAYPAL DONATION BUTTON TO BLOGGER BLOGS

To add the paypal donation button to your blogger blogs , Go to layout section of your blogger blog. Then add a HTML/JAVASCRIPT widget using “add a gadget” option in the layout page. Paste the paypal donation button code you generated either via the online paypal button creator or from the paypal website itself there. Then click save , Now you can see a cool paypal donation button on your website.

if you want to add the paypal donation button below post of your blogger blog, then navigate to the EDIT HTML subtab in the layout section.
Then click “Expand Widget Templates” option in that page. Now search for this tag

and add the paypal donation button code immediately below that line.

Now you can see a beautiful paypal donation button in your blogger blog.

ADDING PAYPAL DONATION BUTTON TO WORDPRESS

In order to add the paypal donation button code to your wordpress blog , Go to Themes appearance/presentation tab. Then navigate to WIDGETS option available there.
Add either a text widget or HTML widget and paste the paypal button code there.

If you want to add the paypal donation button below post in wordpress too , then navigate to EDITOR option in APPEARANCE. IN editor page search for single.php page. There place the paypal donation button code immediately below the “the_content” whole tag line.

Conclusion :

I hope that you guys will like this tutorial for adding paypal donation button. Placing a donation button in your blog can help you to earn some extra income.

P.S: This is my first video tutorial for blogger users. I have created a new youtube channel for uploading blogger tutorials over there. Hope you guys will support me for that.

Subscription Box widget for Blogger Users

Michael — Fri, 17 Jul 2009 15:56:24 +0000

Are you still using the old subscription box provided by FeedBurner.com ? Do you admire when some famous wordpress sites have custom subscription box with background images and custom CSS ? Want to know how to do that , then here is a tutorial for all Novice Blogger users and designers. With this tutorial you can add subscription box to your blogger blog.

Just Follow this step by Step procedure to create newsletter subscription box widget for Blogger with your own custom CSS.

Creating a Feedburner Account

Step 1 :

First we need to have one feedburner account in order to create a subscription form widget.

Register an account in Feedburner.com and then go to Publicize Page , there select Email subscription option in left sidebar. In that click activate button below.

Step 2 : So now you have your own feedburner account. In that code search this tag ” feedid= ” after this there will be 7 digit number save it in a text file .

Step 3 : Adding code and CSS

I am going to share my own feedburner code with you guys. And i will explain all the codes which you need to modify.

First let’s add the CSS required for this subscription box.

/*... Subscription ..*/
div#subscribe {
float : left;
width : 350px;
height : 94px;
background : url('http://techieblogger.com/wp-content/uploads/2009/07/subscribebgcopy-1.jpg') no-repeat;
background-color : #ffffff;
overflow:hidden;
}

#subscribe a {
font-weight : normal;
color : #64666b;
border:none;
}
#subscribe a :hover {
font-weight : normal;
color : #64666b;
border:none;
}

div#subscribe img {
float : right;
margin-top : 6px;
}
#subscribeform {
float : left;
margin : 0;
padding : 0;
padding-left : 72px;
}
#subscribeform .subscribeinput {
float : left;
border : 0;
width : 188px;
height : 19px;
background : url('http://i422.photobucket.com/albums/pp302/bloggeracs/input.jpg') no-repeat;
font : 11px Verdana;
color : #c6c6c6;
margin-top:10px;
padding-top : 5px;
padding-left : 5px;
margin-left : 9px;
}
#subscribeform .subscribesubmit {
float : left;
border : 0;
margin-left : 5px;
margin-top:10px;
}

To add this code in your template , Go to Edit HTML page of your Blogger template. Then search for this tag ]]> .
And add the CSS codes above that tag.

Subscription Box code

Now let’s add the HTML code to sidebar.

To add this code to sidebar , use the option ” Add a Gadget” in layout section of your blogger template and add HTML/Javascript Blogger widget.

Customizing the Subscription Box Code

As I have told early that the code above is from my own blog. So you need to edit few things to make it compatible for your blog.

Just edit the text in red with your own Feedburner subscription links and details.

Customizing the Appearance of the subscription form

First let me discuss the code i have used in my blog and then I will explain how to customize it.

div#subscribe {
float : left;
width : 350px;
height : 94px;
background : url(‘http://techieblogger.com/wp-content/uploads/2009/07/subscribebgcopy-1.jpg‘) no-repeat;
background-color : #ffffff;
overflow:hidden;
}

This is the div element which is going to contain the subscription box.
In this you can change the width and height of the widget to suit your blog. You can also change the background image of the subscription box as well.

#subscribe a {
font-weight : normal;
color : #64666b;
border:none;
}
#subscribe a :hover {
font-weight : normal;
color : #64666b;
border:none;
}

div#subscribe img {
float : right;
margin-top : 6px;
}

This codes control the display setting of the text and image shown in the subscription box widget.

#subscribeform {
float : left;
margin : 0;
padding : 0;
padding-left : 72px;
}
#subscribeform .subscribeinput {
float : left;
border : 0;
width : 188px;
height : 19px;
background : url(‘http://i422.photobucket.com/albums/pp302/bloggeracs/input.jpg‘) no-repeat;
font : 11px Verdana;
color : #c6c6c6;
margin-top:10px;
padding-top : 5px;
padding-left : 5px;
margin-left : 9px;
}
#subscribeform .subscribesubmit {
float : left;
border : 0;
margin-left : 5px;
margin-top:10px;
}

In this the #subscribeform code defines where the subscription form box to be placed. If the box is misaligned in your blog then edit the text in red there.

.subscribeinput : This code defines the width of the input area of the subscription box. Just replace the codes in red to suit your blog.

.subscribesubmit : This code controls the CSS settings of the submit button. You can find the URL of the submission button in the widget code. Change the code in red to suit your blogger template.

Hope I have explained the CSS and Feedburner subscription box code to the fullest. With this basic knowledge you can create your own feedburner subscription box.

If you had came across any good looking subscription box in any website then let me know. I will send you the code to add in your own blog and i will also explain that code as well.

Google translation Flags Widget for Blogger Blog

Michael — Tue, 02 Sep 2008 15:25:00 +0000

Now with Google translation widget you can translate english to 24 other languages like Arabic , Bulgarian , Chinese ( simplified and traditional) , Croatian , Czech , danish , Dutch , Finnish , French , German , Greek , Hindi , Italian , Japanese , Korean ,Norwegian , Polish , Portuguese ,Romanian , Russian , Spanish and Swedish. I hope no one might have seen such a huge list anywhere. This Widget is powered by Google. This Google translation Widget helps your readers to read the article in their own regional language.

You can add this widget either in sidebars or below each post.

Code for Google Translation Widget :

l=en&ie=UTF8′); return false;” title=”Google-Translate-English to Japanese BETA”>

Customizing the code to your language : In this widget i wrote coding to translate WebPage in English to other languages. If you want to use this widget to translate your regional language to other foreign Language , then you need to customize the script.

I am going to explain How to change text from Arabic to English. Do the same to translate from one particular language to other languages.

_blank” rel=”nofollow” onclick=”window.open(‘http://www.google.com/translate_p?u=’+encodeURIComponent(location.href)+’&langpair=en%7Car&hl=en&ie=UTF8′); return false;” title=”Translate English to Arabic“>Translate English to Arabic” width=”24″ src=”http://i263.photobucket.com/albums/ii150/mohamedrias/Arabic_Flag.png” height=”18″ title=”Translate English to Arabic“/>

The Text in green represents your web page language code. Since My Blog is in English i am using en ( english ) code. You need to change that code to your blog Language.

Language Codes :

Arabic = ar ; Bulgarian = bg ; Chinese Simplified = zh-CN ; traditional Chinese = zh-TW ; Croatian = hr ; Czech = cs ; Danish = da ; Dutch = nl ; Finnish = fi ; French = fr ; German = de ; Greek = el ; Hindi = hi ; Italian = it ; Japanese beta = ja ; Korean = ko ; Norwegian = no ; Polish = pl ; Portuguese = pt ; Romanian = ro ; Russian = ru ; Spanish = es ; and lastly Swedish = sv .

The text in red represents the language to which the web page is going to be translated. So put the respective language code there.

Add Google Translation hack as a Widget

Login to your Blogger Account then navigate to Layout section of your blog . then add a HTML / Javascript page element and copy and paste the code above there. And save the widget.

that’s it you have successfully added the Google translation flag in your Blog.

Adding Google translation Flags below Blogger posts

To Add Google translation Widget below each post in blogger , Login to your blogger account and navigate to Layout section of your blog. then go to EDIT HTML subtab and put a check on Expand Widgets box.

Now search for this code

and paste the following code below that line.

border: 1px solid rgb(153, 153, 153); padding: 5px; margin: 15px; background-color: rgb(255, 248, 175);‘>

Translate This post to your regional

Language

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Car&hl=en&ie=UTF8'); return false;" title="Translate English to Arabic"><img border="0" style="cursor:pointer; cursor:hand;" alt="Translate English to Arabic" width="24" src="http://i263.photobucket.com/albums/ii150/mohamedrias/Arabic_Flag.png" height="18" title="Translate English to Arabic"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cde&hl=en&ie=UTF8'); return false;" title="Translate English to German"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to German" src=&

;quot;http://i263.photobucket.com/albums/ii150/mohamedrias/_german_s.png" height="18" title="Translate English to German"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cru&hl=en&ie=UTF8'); return false;" title=" Translate English to Russian BETA "><img border="0" style="cursor:p

ointer; cursor:hand;" width="24" alt="Translate English to Russian BETA " src="http://i263.photobucket.com/albums/ii150/mohamedrias/_russian_s.png" height="18" title=" Translate English to Russian BETA "/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Csv&hl=en&ie=UTF8'); return false;" title="Translate English to Swedish"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Swedish" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Swedish_Flag.png" height="18" title="Translate to Swedish"/></a>
<div style="display:none;">
<small><a href="http://rias-techno-wizard.blogspot.com" target="_blank">Grab this widget</a></small></div>

Change the line in red to suit your Tempate.

Now you can see a beautiful Google translation Widget in your blog below each post.

I hope this hack will be very useful for all bloggers. if you need any help , please ask me in comment section. i can even provide help through google talk. Add mohamedrias1103@gmail.com to your gtalk account.

Google translation Widget for Blogger – Translate any website in English to 25 other languages

Michael — Tue, 02 Sep 2008 13:47:00 +0000

Now with Google translation widget you can translate english to 25 other languages like Arabic , Bulgarian , Chinese ( simplified and traditional) , Croatian , Czech , danish , Dutch , Finnish , French , German , Greek , Hindi , Italian , Japanese , Korean ,Norwegian , Polish , Portuguese ,Romanian , Russian , Spanish and Swedish. I hope no one might have seen such a huge list anywhere. This Widget is powered by Google. This Google translation Widget helps your readers to read the article in their own regional language.

You can add this widget either in sidebars or below each post.

Code for Google Translation Widget :

10px 10px 10px 10px;text-align:center;”>

=”http://i187.photobucket.com/albums/x307/Mafishioso/_japanese_s.png” height=”18″ title=”Translate English to Japanese BETA”/>

I am going to explain How to change text from Arabic to English. Do the same to translate from one particular language to other languages.

In the above example , the text in red is used to open links in new page.

text in green is your language code ( web pages language ).

Arabic = ar ; Bulgarian = bg ; Chinese Simplified = zh-CN ; traditional Chinese = zh-TW ; Croatian = hr ; Czech = cs ; Danish = da ; Dutch = nl ; Finnish = fi ; French = fr ; german = de ;
Greek = el ; hindi = hi ; Italian = it ; Japanese beta = ja ; korean = ko ; Norwegian = no ; Polish = pl ; Portuguese = pt ; Romanian = ro ; Russian = ru ; Spanish = es ; and lastly swedish = sv ;.

please replace the text in green to your language. My blog is in English so I have kept ” en ” there.

text in Red :

Text in red is the language code to which you are going to translate. Please change the code in red to your destination language.

Text in violet :

It’s the title tag , when we hover over the images the title tag will shown.

I hope i have explained everything in the code.

How to Add this to Sidebar

If you want to add this widget in your sidebar please login to your blogger account. Navigate to Layout section of your Blog. Add a HTML / Javascript page element and paste the code above there.

That’s it you have successfully added Google translation Widget to your sidebar.

Adding Google translation widget below Each post in Blogger

To add Google translation Widget below each in blogger . Go to EDIT HTML page. There put a check in Expand Widgets box. now search for this code

now add the Google translation Code below that line.

Now you can see a beautiful Google translation Widget in your blog below each post.

Outbrain Post Rating Widget for Blogger

Michael — Wed, 06 Aug 2008 10:57:00 +0000

Today I am going to write about an interesting Post Rating widget developed by Outbrain.com . This Post Rating Widget is available for all blogging services like WordPress.com , blogger , typepad , drupal , etc . A Similar Post rating widget is developed by draft.blogger.com and is found here at Star Rating Widget

Advantages of this Post rating Widget :

1. Know your readers opinion about the post

2. Drive More traffic ( Outbrain has a feature called Recommended Posts which is embedded within rating Widget , So outbrain users who have enabled this feature will show your post . )

3. We can also display Most Popular posts with this post Rating Widget.

How to Add This Widget to your Blogger Blog ?

It’s very simple . Visit http://www.outbrain.com and register an account ( to track traffic and details ). While registering , check this box (Yes – I want to install the outbrain widget and/or access my blog’s reports ) .

After this step , claim your blog by filling your blog Details and click continue. A new tab/ window will open and just choose your blog . outbrain will install the widget automatically.

Configuring Post Rating Widget

Sign-in to your Outbrain account and click manage Blogs tab on left side and then navigate to Setting sub-tab.

Now customize the widget to your wish. If you check ( Best Recommendations box ) you will get posts from other blogs below your Post Rating Widget like this .

If you choose Most Popular Posts box then the widget will Most rated Posts above the rating Widget.

I hope I have given you much details on Adding this Outbrain Post rating Widget for blogger. If you have any problems let me know. Very soon I will post how to add this Outbrain Post rating Widget Manually , without registering Outbrain .

Thanks for reading………..

Page Navigation Menu Widget for Blogger

Michael — Fri, 01 Aug 2008 01:27:00 +0000

Yesterday I wrote How to add Page Navigation Menu hack by editing your blogger template. Now today I would like to use a different method to add this Page Navigation Menu to our Blogger Blog. Most Bloggers will prefer this method to add Page navigation Menu , because this method is very easy than editing Blogger Template.

Let us see how to add this Page Navigation Menu Widget :

step 1 : Login to your Blogger account and Navigate to Layout Section . Now click Add Page Element link there.

Step 2 : In that Page Element window , choose HTML / JAVASCRIPT .

Step 3 : Now add this Javascript in that window.

After Adding this Javascript you need to drag and drop the widget below the Blog Posts main widget. See this screen shot

In the code above you can edit the lines in red to your wish .

1 : var pageCount = 5;

The digit in red represents number of posts to be shown in single page. Change the digit to show as many pages you want.

for example :

In my blog I have put that value as 2 . In each page you can see only 2 posts .

2 : var displayPageNum = 3;

here the digit in red represents number of pages to be listed.

For example :

In my blog I have chosen 3 , then 3 pages will be shown.

Now save your template .
That’s it now we have added Page Navigation menu widget to our blog successfully .

I hope you guys will feel this method is easier than the last one.

Add Search form to Blogger Beta Template

Michael — Wed, 30 Jul 2008 06:32:00 +0000

At first Adding search form to blogger was difficult but now Blogger Accessories has made it easier. We can add search form to blogger in three method . But in this post I am going to concentrate only on Adding custom search form . Custom search form means you can modify the search form look by adding simple CSS style.

Step 1 : Log in to your blogger template and go to Layout section .

Step 2 : Now click Add Page Element , in the List select Add HTML / JAVASCRIPT and paste the below code thereand save .

Now see your blog , there you can see a beautiful search form widget like this ,

I hope you like this hack . you can also add custom search submit buttom , background , etc.

I will tell you How to add Custom CSS to this search Form tomorrow in my next post .

Techie Blogger » Blogger widget

Page Navigation Hack for Blogger – bugs fixed

Installation instructions

Installation Instructions

Adding random posts widget below posts

Random posts

Add paypal donation button to blogger and wordpress blogs

Creating the code for Paypal donation button

VIDEO TUTORIAL to create paypal donation button

Online paypal donation button script generators

ADDING PAYPAL DONATION BUTTON TO BLOGGER BLOGS

ADDING PAYPAL DONATION BUTTON TO WORDPRESS

Conclusion :

Subscription Box widget for Blogger Users

Creating a Feedburner Account

Step 3 : Adding code and CSS

Subscription Box code

Customizing the Subscription Box Code

Customizing the Appearance of the subscription form

Google translation Flags Widget for Blogger Blog

Google translation Widget for Blogger – Translate any website in English to 25 other languages

Related Posts Widget For Blogger – Bugs fixed

Outbrain Post Rating Widget for Blogger

Page Navigation Menu Widget for Blogger

Add Search form to Blogger Beta Template