Tuesday, December 14, 2010

How Install Wibiya Toolbar Multi Function Widget

0 comments
Many of my readers are asking for the fixed widget,which i am having at the bottom of my blog.It is by far best widget with useful features for a blog and is available in different colors to suit your blog.Best part is,its very easy to add and customize,The simple thing you have to do is just go to wibiya.com and sign up your blog there.Then they will get you approve your blog in 3-4 days and you will be ready to get codes for this widget from there site.You can select on the which features you want in your blog from below list and also select color of widget to suit your blog.

Features Of Wibiya Widget

1. Translator

2. Posts Navigator (Recent Article and Random Article)

3. Community via Facebook

4. Twitter Widget

5. RSS Subscribers Bar

6. Sharing Bar

7. Blog Searches

8. Photo Gallery

9. Live Notifications

10. Facebook Fan Page

11. Games (HeyZap)




Now How to get this widget.Just go to Wibiya.com

Then click on the Getit now button.



Now give your details and request an invite.



Then you will get an message from them.



Just wait for getting approved your blog for some days and after approve they will send you the invite to your email,just use that invite to activate your account and get that widget codes.

How to install widget from your account now.

Now When you receive invitation,then click on the invitation link from your mail and login to your wibiya account.

Fill in the details they are asking for.

Then you will go through 4 steps Process.

1.Create A Account 2. Select A Theme 3. Select Your Apps 4. Get It Now.

Just In step 1 Give the desired Information they asked For.

In Second Step Select the theme i.e color for widget which suits your blogger template.As while choosing theme at the right you have an option of Choosing toolbar icon.Use bloggers or any other you like.



In Third Step Select The Applications you want in your widget.As i have written all application at the beggining of the post.

In fourth Step You will get page like below.Just select the paltform and allow the popup to open in your browser as it will directly give you add a widget option in one step.As many readers have problem in getting codes of the widget, so its the easy one.



And after adding widget Just Hit Done.And you are to your dashboard Page with all stats for your widget and also a notifier option is there to set an message for your visitor whenever he comes to your blog.You can set it if you want.



Problem Users Facing To Implement In Blogger

1.In Getting Codes For Blogger


In The Fourth Step When You Select The Platform To Install the widget, There are four options.
1.Wordpress
2.Blogger
3.Typepad
4.Other Sites

Just when we click for blogger a new window opens for one click add a widget to blog.So for this you have to allow pop ups.If you are still not getting codes just select option for typepad or last option then you will get the script and place it in your Html/javascript widget of your blog.

And for wordpress you will get the download link for plugin just download it and install it.

2.Slowing Down Of Blogger



As one of reader didn't used it because of slowing down the loading of blogger.As for this the dror cedor from wibiya.com gave a simple solution to it as you can read his comment here.

What exactly you have to do is that how to start the loading of widget after blog gets loaded.For this here is the simple solution.

The code which you will get to be placed in blogger will be like this.


<script src='http://toolbar.wibiya.com/toolbarLoader.php?toolbarId=XXXX' type='text/javascript'></script>


Now what you have to do is just add &pl=1 in your link after you toolbar id as i have assumed here to be XXXX and make whole code look like below :-


<script src='http://toolbar.wibiya.com/toolbarLoader.php?toolbarId=XXXX&pl=1' type='text/javascript'></script>


What i have done is just added red part in link. By adding this the widget will load only after when the blog gets loaded, which will not effect the loading of blogger.

*Note:-If you are adding the script in widget its ok.But if then you adding in blogger codes it will not accept the script after making changes.So just make it code friendly from this Encode tool.

I checked this and really it had no effect on loading speed of my blog now.

I hope now you will have now no problem in installing the widget.

Scroll Bar Widget For Blogger

0 comments
Scroll Bar Widget For Blogger i.e to add a scrolling bar to sidebar of blogger text or labels if list is too long.This scroll bar helpful if you have so many categories or want many posts to be seen in short space.

Lets Make a Scrolling Bar menu for your Blog

First of all sign in your blog and go to Layout section. Now you have to click on Add a Page Element Where you want to add the scrolling bar widget.

Click Image To enlarge



Select HTML JAVASCRIPT to add the page element .

Now You have to add some html codes to his page element to show of the scroll bar menu widget to the sidebar of your blogger.


<div class="widget-content">
<ul style="height:150px;width:150px; overflow:auto; ">

<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li><span style="font-weight:bold;"></span>

</ul></div>




Copy this codes and paste it to page element and save it.

Now preview your blog.

You can change your links and text in the codes to show of yours links and posts.

Note:-In the codes you can edit height and width in red to adjust it to your blog.

Recent Posts Widget For Blogger

0 comments
More then 5 Recent Posts Widget For Blogger. As recent posts can easily be added via feedburner or google.Or with feed widget provided by blogger.I will tell you all different methods here on how to add recent posts widget to blogger with all techniques.You can use the one you like or suit your blog.

How to add 5 recent posts with feed widget.

Click LAYOUT > ADD A GADGET > FEED

Then type your feed url and save it will show upto your only 5 recent posts.


How to add more than 5 Recent Posts Widget For Blogger using script.


Click LAYOUT > ADD A GADGET > HTML/JAVASCRIPT

Now add the code from below to it and save it.

<script style='text/javascript' src='http://blogergadgets.googlecode.com/files/recentpostswidgetv1.js'></script><script style='text/javascript'>var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;</script><script src='http://yourblogname.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts'></script>

As now just replace red codes in above codes with your script url and the number 5 is the no of posts to be displayed and last red is your blog url.nuchars=100 is for post desription.

Another Method To add more than 5 Recent Posts Widget For Blogger using feedburner.To read about it just visit this post.

Drop Down Menu For Blogger

0 comments
Drop Down Menu For Blogger as everybody would like it in the blog more enough i have found thousands of people searching it on internet.Then i thought of having an tutorial on it. What is Drop Down Menu ? Its Just and widget where one choose an option and click the menu he like , then new window will open with the option selected. Below is the demo of it.



Now how to make this drop down menu.

Just GO To ,

LAYOUT > ADD PAGE ELEMENT > HTML /JAVASCRIPT

Add the below codes to it and Save It.


<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
size=1 name=menu>

<option>- Your Title - </option>

<!-- change the links with your own -->

<option value="http://yourlink.com">Title One</option>

<option value="http://yourlink.com">Title second</option>

<option value="http://yourlink.com">Title Third</option>

<option value="http://anshuldudeja.blogspot.com">blogger widget</option>

</select></form>


* Change the links and text in red according to your blog menu.

You can increase the options in codes to increase your drop down menu links.

Width of drop down menu depends on the length of the titles you using in them.

Numbered Page Navigation hack for Blogger (New & Error free)

0 comments
Page Navigation hack is now also available in bloggers. As you may be viewing the numbered menu widget below the posts to visit the latest or previous posts. as these widgets are only provided in wordpress blogs or hosted blogs.But now his hack has been made available in bloggers also with the help of Mohammad Rias who always come out with these hacks.
 
Let us see how to add this Page Navigation Menu Widget :

Login To Your Blogger And Then Click On Settings And Navigate To Layout Section.

Then Click On Edit/Html.

Now Find for ]]></b:skin> tag and place below codes before it.


.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}


Now search for </body> and place the below codes before it.


<script style='text/javascript'>
var pageCount=5;
var displayPageNum=2;
var upPageWord=&quot;Previous&quot;;
var downPageWord=&quot;Next&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var home_page_url=location.href;function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
//]]>
</script>


In the above code you can find the below written word and can change its value from 5 to any you want.

1 : var pageCount=5;

*where 5 is the the number of post that apppear in another page you will visit.

2: var displayPageNum=2;

Alerts-LCD Text-Headlines-Notice Widget For Blogger

0 comments
Alerts widget for the blogger,ie to display all the alerts the owner needs to display to its readers,that may be helpful to him or her readers.The text would be displayed as an LCD text screen with different designs,fonts.and sizes you want for your blog.I loved using this widget as this is very beautiful text screen.

First of all visit the Demo Blog to check how it looks.

Different Designs and styles



Just if you liked this widget and like to add it in your blog.Visit this site Lcd Text Generator.

Just go there select the design there then you will be sent to page to write the text you want to display and modify the color of text.Do it and get codes for it.

After copying the codes from there Go To Your

Blogger LAYOUT > Page elements >Add a page Element > Add HTML/Javascript

Place your codes and Save it.You have done.Now view it in your blog,Isn't it looking Nice.

Enjoy this Widget !! ...sengihnampakgigi

How Add Google Chat Widget In Bloggger

0 comments
Google Talk Gadget is a web based version of Google Talk and allows you chat with your friends on your web browser like Firefox, Internet Explorer etc. No download required.Your can add Google talk Gadget to your Blogger blog as a page element in very easy one step to your blog sidebar and after signing in you will be able to chat with all your friends.So isn't it great.

You are not currently logged into Google Talk.
Sign In

Don't worry if you don't have a Google Talk account, signing up is easy!
Create an account now
 
If your friends are mostly online on yahoo then you can also add yahoo messenger chat in your blog.

Now read on how to add google chat widget.

Just Go To Dashboard > Layout > Page Elements > Add a element > Html/Javascript

And add the below codes to it and save it.

<iframe width="234" frameborder="0" src="http://talkgadget.google.com/talkgadget/client?fid=gtalk0&relay=http%3A%2F%2Fwww.google.com%2Fig%2Fifpc_relay" height="350"></iframe>


Change width and height in above codes in red to adjust your chat box size.
Enjoy Chatting Now !!

Monday, December 13, 2010

Related Posts Widget With Thumbnail Preview For Blogger

0 comments
Related Posts Widget With Thumbnail Preview For Blogger,as we all use related posts hack to show of the related posts in particular category below our posts as this helps our readers to move through our pages easily.The basic difference is that this widget adds thumbnail from that particular posts as of previous related posts widget just show of the link to post.

You can see how the thumbmnails will look in the widget in below picture.




Image and Post Source:-Techknowl

How to install this widget in blogger.

Just visit Linkwithin.

Give your Email adress,blog address and select suitable blog platform and grab the widget code.

Now You will get install widget button click it,if you are logged in to blogger it will intsall widget directly or login in new window else you just get the codes and add codes manually in your sidebar in html/javascript page element.

Followers

Blogumulus by Roy Tanck and Amanda Fazani
Free Blogger Tips, Hacks, Widgets, Templates and more