Stop PC Crashes with WinZip System Utilities

Enter your email address:

Showing posts with label Widgets. Show all posts
Showing posts with label Widgets. Show all posts

Tuesday, January 3, 2012

ADD ME ON GOOGLE PLUS WIDGET

Many readers asked me about a way to increase their Google Plus Readers. I suggest them to keep a widget as Add me on Google Plus. Widgetplus is providing such a wonderful widget, and hoping that Google will soon announce its official Google Plus Widget. Follow these few steps and increase your Google Plus friends.

How to Add Google Plus Widget on your blog and website

  1. Login to your Google Plus profile page. At the URL in your browser address bar, you can see a digit, which is your Google Plus ID (the numbers after the G# ). Copy it
    https://plus.google.com/u/0/stream?tab=G#…………………/posts
  2. Now go to widgetplus.com and click “Get widget” button. Then you will get a screen as given below in the picture. Paste your Google+ ID, select the width and click on Get Code.ADD ME ON GOOGLE PLUS WIDGET
  3. Copy the HTML code
  4. Now login to Blogger, go to Design and then Page Elements. Click on Add a Gadget. Select HTML/Javascript and paste the code in that box. Then save.

Tuesday, May 31, 2011

ADD COMBINED LIKE AND SEND FACEBOOK BUTTON

The Like button of Facebook lets a user share your content with friends on Facebook. When the user clicks the Like button on your site, a story appears in the user's friends' News Feed with a link back to your post. The Send Button allows users to easily send content to their friends. People will have the option to send your URL in a message to their Facebook friends, to the group wall of one of their Facebook groups, and as an email to any email address. While the Like Button allows users to share content with all of their friends, the Send Button allows them to send a private message to just a few friends. Then how about add a combined button of Like and send a post.

How to add Facebook combined like and send button to your blog

FACEBOOK BUTTON

STEP A
Log in to Blogger Account, go to Layout -> Edit HTML and check the box "Expand Widget Templates". Now, find any of this code in your  template.(Please make a backup copy of your template before doing any editing)

<div class='post-header-line-1'/>

OR

<div class='post-header-line'/>

STEP B
Then immediately after the above given code, paste the code given below.Please copy all code that is given in  red color.

<!--FACEBOOKCOMBINEDBUTTON-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:4px;margin-top:-4px;'><div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<fb:like font='' href='' layout='standard' send='true' show_faces='true' width='450'>
</fb:like></div><!--FACEBOOKCOMBINEDBUTTON-CODESTOPS—>

 

Something to edit:

  • You may change the position of this button by changing the right to left or center.

After pasting the code, check the preview of blog to see the position of counter  button. Then Save the template. If you feel any issues, please ask by commenting here.

Happy Sending…..

  

More Buttons to Add:

Thursday, April 28, 2011

USE YAHOO PIPES TO MAKE WIDGETS FOR BLOGS

Yahoo Pipes is a free online service that lets you use feed types such as json, xml, rss, and atom to regenerate data using a visual editor. Pipes helps you to create feeds from web sites that don't have an RSS/XML. Pipes will help you to provide your own web projects, or publish and share your own web service without writing a code. Pipes is also very useful as its visual editor allows you to drag pre-configured modules onto its canvas and wire them together. In short, Yahoo pipes works with the help of a Yahoo Pipes editor which is a JavaScript authoring tool that lets you create and edit Pipes in an intuitive visual interface.

The main advantage of Yahoo pipes is that you can use simple commands that can be combined together to create output that meets your needs as to combine many feeds into one, then sort, filter and translate it, geocode your favorite feeds and browse the items on an interactive map, power widgets/badges on your web site, grab the output of any Pipes as RSS, JSON, KML, and other formats.

Know Yahoo Pipe Editor

Yahoo Pipes editor is a JavaScript authoring tool that lets you create and edit Pipes in an intuitive visual interface. The editor consists of the following three panes, Library pane on the left hand side lists available modules, saved Pipes, then Canvas pane in the center is the main work area for assembling Pipes and Debugger which is a resizable pane at the bottom which lets you inspect Pipe output at various stages in your Pipe. You can build and then edit Pipes by moving modules onto the Canvas from the Library pane and wiring them together with your mouse. Just check out what yahoo says about Yahoo Pipes.

Yahoo pipes

Library

The Library pane shows a list of all of the available modules (you can see this same list, with a description of what each module does, in the module documentation.) Modules are grouped by functionality:

Sources are data sources (such as Yahoo Search) that return an RSS feed

User Inputs are input fields that your Pipe's users can fill in at runtime

Operators are basic features like foreach, sort, count, and filter

Url contains modules for building and manipulating URLs

String contains modules for handling strings

Date contains modules for manipulating dates

The Library also holds a list of your favorite Pipes from other users, and your saved Pipes. You can use these subPipes as building blocks within new Pipes just like you would use a module. This lets you build useful complex components that can be reused across multiple projects.

To add a module or subPipe to your Pipe, drag it over to the canvas or click on the arrow to the right of the module name to have the editor place it on the canvas for you.

 

The Canvas

The canvas is the main work area for assembling and testing your Pipe. You can drag modules around and arrange them in whatever way looks good to you, or ask the editor to auto-arrange everything by clicking the Layout button.

Double-clicking the title bar of any module will collapse the module by hiding all its parameters, while double-clicking again (or clicking the maximize box in the corner) will restore the module to its full size. This can be useful when working with Pipes that have many components.

To make your Pipe work, you'll need to wire modules together. You can do this by clicking the output terminal of any module, then clicking on the input terminal of the module you want to feed that data to. The editor will flash compatible terminals in orange to indicate which connections are permitted. You can mouse over the terminals of any module to see what kind of data that terminal expects to emit or receive.

To sever a connection between modules, click on either of the terminals at the end of a wire (a small scissors icon will appear).

Many modules have configurable parameters and input fields. You can fill these in like regular form fields, or supply them with appropriately typed input wired in from another module. Use the User Input modules to let users supply their own input to the Pipe at runtime.

A subPipe is a Pipe from your saved Pipes list that you drag onto the Canvas. A subPipe behaves just like a regular module, with the addition of an "open" link. Clicking on this link opens a new tab in the editor where you can edit the subPipe on the fly. Click the title tabs in the toolbar to toggle back and forth between editing your main Pipe and subPipes.

 

The Debugger

The debugger pane shows the contents of the Pipe immediately downstream from the currently selected module (shown in orange). To see the final output of your Pipe, select the output module itself. You may occasionally need to click 'Refresh' to make sure the debugger is showing the latest data from your Pipe.

You can use the debugger to inspect each segment of your Pipe to make sure it is behaving as expected. The debugger will show the titles of each item in a feed; click on the small triangle to the left of each item title to examine its contents in more detail.

Saving and Running Your Pipe

Once you've finished editing your Pipe, you should save it using the button in the upper right corner of the canvas pane. You'll be prompted to give your Pipe a name, and you can also choose to make the Pipe public by publishing it. Publishing makes your Pipe visible to everyone, and will allow people to clone a copy for their own use.

Once the Pipe is saved, you will see a link that says, "Run Pipe...". You can also run it by going back to your Pipe list page ("My Pipes") and selecting it from the list.

Source: Yahoo

More to read:

Thursday, March 31, 2011

ADD POPUP WINDOW GADGET IN YOUR BLOG

An email came from one of my readers, about a way to add a popup window in the sidebar. She suggested that this must be like a Gadget to be added anywhere in the blog, especially on the sidebar. Her another preference was to link the popup so that it will open her another blog. These requirements looked quite interesting for me. Here is the code that I send to her last week. Hopes that this will work good for you too. Any trouble, please feel free to ask me.

How to add a popup window gadget in your blog

POPUP GADGET Login to your Blogger Account, Go to Dashboard, then click on Design. Now click on Add a Gadget and select “HTML/JavaScript”. Copy the below given code given in red colors and Save. The customization of the below script is given down to the code.

<script language="javascript">
var popupWindow = null;
function positionedPopup(url,winName,w,h,t,l,scroll){
settings =
'height='+h+',width='+w+',top='+t+',left='+l+',scrollbars='+scroll+',resizable'
popupWindow = window.open(url,winName,settings)
}
</script>
<p><a href=
http://businessvartha.blogspot.com onclick="positionedPopup(this.href,'myWindow','500','300','100','200','yes');return false">My Favorite Blog</a></p><a href="http://lnk.co/popupgadget"/><span style="font-size: 80%">Grab this</span></a>

How to customize the code of Popup window:

Change  http://businessvartha.blogspot.com to the URL of the link that you want to exhibit inside the popup window. You can exhibit a picture or another blog by giving that URL at this place.

Change  My Favorite Blog to any text of your choice. This will be displayed on your blog in which any click will show a popup to linked URL.

*Please remember that this is a positioned popup.

More to Read:

Friday, February 18, 2011

ADD FOLLOW BY EMAIL GADGET IN YOUR BLOG

Want more followers for your blog? Here is a simple and much effective way of following a blog. “ Follow by Email Gadget” by Google Blogger. Inviting a visitor to follow your blog through Email, with this marvelous widget is one of the best SEO process that a blogger can do. Another important feature of this widget is that, it will automatically create a “Feedburner Feed”, if not yet created. I am very sad on another matter that my post for  CREATING AND PUBLICIZING A FEEDBURNER FEED is no more necessary for my readers.

How to add “Follow by Email gadget”

To add the Follow by Email gadget, Login to your Blogger dashboard, click the Add a Gadget link from the Design/Page Elements tab, and then select the Follow by Email gadget form the list. Then Save.Then the readers visiting your blog can then just enter their email address and click Submit.

FOLLOW BY EMAIL GADGET

Important matters to note:

1. If you already have a Feedburner Feed address, then please give that address while adding and configuring this Gadget as it is shown in the picture given below. Place your original Feedburner Feed address in the space given. (shown by black arrow in the picture)FOLLOW BY EMAILL WIDGET

2. You can view the statistics of your blog feed by logging into your FeedBurner account.

Cool: Isn’t it?

More to read:

  • businessvartha: MONETIZE BLOG FEED USING FEEDBURNER

    20 Jan 2010 ... Create a Feedburner account and syndicate your feed. ... Go to www.feedburner.com, login with your Google ID and password. ...
    businessvartha.blogspot.com/.../monetize-blog-feed-using-feedburner.html

  • businessvartha: ADD FEEDBURNER ACCOUNT TO YOUR BLOG

    20 Jan 2010 ... After you create a Feedburner account, blogger can make sure all feed traffic for your blog content goes to your FeedBurner feed. ...
    businessvartha.blogspot.com/.../add-feedburner-account-to-your-blog.html

  • businessvartha: ANALYZE BLOG FEED USING FEEDBURNER

    20 Jan 2010 ... form found on feedburner homepage after your login.If you like to publish a podcast with your Blogger feed, check the "I am a podcaster" box ...
    businessvartha.blogspot.com/.../analyze-blog-feed-using-feedburner.html

  • businessvartha: PUBLICIZE BLOG FEED USING FEED BURNER

    20 Jan 2010 ... Follow the below given steps to create a Feedburner account and syndicate your feed. If you already created this, then please proceed to ...
    businessvartha.blogspot.com/.../publicize-blog-feed-using-feed-burner.html

  • businessvartha: CONVERT YOUR BLOG AS A WIDGET

    7 May 2010 ... Follow the below given steps to create a Feedburner account and syndicate your feed. If you already created a Feed Burner account, ...
    businessvartha.blogspot.com/2010/05/convert-your-blog-as-widget.html

  • businessvartha: OPTIMIZE BLOG FEED USING FEED BURNER

    20 Jan 2010 ... Go to www.feedburner.com, login with your Google ID and password. ... LINK SPLICER – This service adds a new item to your FeedBurner feed ...
    businessvartha.blogspot.com/.../optimize-blog-feed-using-feed-burner.html

Tuesday, January 4, 2011

ADD NAVIGATION OR MENU TABS IN BLOGGER BLOGS

You have seen some beautiful Tabs on the header portion of our blogs.  These Tabs helps a reader to reach specific pages or posts in the blog itself. Many websites are providing hacking codes for making such a Navigation or Menu tab in Blogger Blog. But in this post I will explain a very simple method to display such Tabs. Only two conditions you had to fulfill to get this Navigation Menu on your blog. One condition is that, you must be using Blogger Template and other condition is that you must never forget to “Follow Us and submit this post to your Facebook, Twitter and Digg.

How to Add Navigation or Menu Tabs in a Blogger Template

Login to your Blogger Account> Go to Dashboard > Design> Page Elements. After reaching Page Elements look for “ Add a Gadget” tab down to the Header of your blog.

Have a look at the picture given here. Click on “ Add a Gadget”.

NAVIGATION MENU

After Clicking on “ Add a Gadget” select “ Link List”. Clicking on ‘Link List” will take you to Configure Link List. As you can see in the picture given below, type the URL of the page or post of your blog in the section “ New Site URL”. As an example, I have given my blog address there.

Now give a name for that URL at “New Site Name” . Please remember that this name will appear in the top section of the header bar as Navigation Menu Tab. So you must select appropriate name that will catch the attention of the visitor and guide him through the blog posts.

NAVIGATION WIDGET

After typing the URL at “ New Site URL” and naming it in “ New Site Name”, click on “ Add Link.Then Save. Now you can see that beautiful Navigation or Menu tab appeared under your blog header.

Similarly, you may add more URL in this widget and add link.

Points to remember:

  • Never fill the area “ Title”, while configuring this Gadget, Link List.
  • If there is no “Add a Gadget” option under the Header, ( as described with the first picture ) then you may keep this Gadget by selecting “Add a Gadget” in sidebar of you blog. The names will appear vertically as Menu or Navigation bar.

Any doubts, please feel free to comment and ask us.

More to Read:

Tuesday, December 7, 2010

ADD EVENT GADGET TO INVITE YOUR VISITORS

Event gadget is a Free Gadget provided by Google Friend Connect to promote an event to your community. The members and readers  of your site can get details about the event (including images and video), see a map, indicate whether they will attend, and see who else has responded. Viewers can join the event and see who else has joined the event.Events can be added to a member's Google Calendar with a single click. If a blogger conducting an online appearance, this Gadget is an ideal one to coordinate between your readers and members of the blog.

Picture courtesy: Google

How to Add the Event Gadget:

1. Go to Google Friend Connect. Login with your Google account linked with your blog. If have not yet started with GFC, then you had to Signup and add the blog.

  2. You will see all your blogs listed in left sidebar under 'Sites'. The total numbers of members who are following your blog through Google Friend Connect is also given there.

3. Click your Blog Title and it will expand to show submenu below it.

4. Click on 'Gadgets' link and Search for “Event Gadget”

5. Click on 'Event Gadget' link or ‘Get This Gadget’ link.

6. You will reach a page of Options to choose the Page, and fill in your Event's Title and Description. Choose the start and end dates and the Time Zone. Fill in the Location, address and Media URL which is link of the picture or logo of your event.Then select the gadget's size that fit your blog sidebar.

7. Click Generate Code button.

8. Copy the code given there.This is the HTML code of the Event Gadget.

9. Then Login to your blogger account – Click on Layout/Design  – Page Element – Add Gadget – HTML / JavaScript. Paste the Code you copied in the above step in the box. Click on Save. Preview your blog and then rearrange the position of the Gadget.

 

More to Read

Wednesday, October 20, 2010

ADD SNOW EFFECT TO YOUR BLOG

Only two more months to Christmas. How about adding a snow fall in your blog. Please note that the script that is given here, is not mine and the credit is already given. Readers are expected not to make any changes. This code will help to create an elegant look to your blog by creating a simple snowfall across your blog. You can add it as a Gadget and it works in almost all popular browsers. Kindly follow the instructions given there to add the snowfall in your blog.

SNOWFALL WIDGET

How to add Snowfall widget

STEP A
Login to your blogger account – Layout/Design  – Page Element – Add Gadget – HTML / JavaScript

STEP B

Now copy the below given code and paste it in the ‘HTML / JavaScript’ box and save. Then drag that widget to the side bar and again click on Save button on the right hand top of that page.

 

Please note that kindly avoid any editing in the code.

More to add:

Thursday, October 14, 2010

ADD POPULAR POSTS WIDGET IN YOUR BLOG

Google rocking with another marvelous widget that help bloggers to exhibit popular posts of their blog in their blog. This widget brings out  the way to automatically find and display your blog’s posts that have the most page views. You can choose whether to display image thumbnails or post snippets in addition to the post title. You can also choose the time window to be used for calculating page views and the number of posts you’d like to display.

How to add popular posts widget widget

  • Login to your DashBoard,
  • Go to Design/Layout
  • Go to Page Elements.
  • Then click on  “Add a Gadget”.

You can see the “Popular Posts” Gadget over there. Click on it and start simple configuration according to your requirement.

POPULAR POSTS WIDGET You can select the time period and select to show the Popular pages as an image thumbnail, or as a snippet. A display of up to 10 results can be considered as an excellent feature of this Gadget.

Happy blogging……………….

More to blog..

Wednesday, October 6, 2010

ADD BLOG STATISTICS GADGET FOR YOUR BLOG

I was very eager to find a best traffic statistics button that can display the total number of visitors in my blog on daily, weekly or all time basis. Thanks to Google for developing and adding such a marvelous Blog Statistics counter for a blogger. This Blog’s Stats gadget lets you show off page view data for your blog, with a handful of configuration options that are easily controlled. You can choose from a variety of styles and display options to suit your blog. There is an option to let you select the time window to be used for calculating page views.

How to add blog statistics gadget for your blog.

Login to your DashBoard, Design/Layout and go to Page Elements. Then click on  “Add a Gadget”. You can see the “Blog Stats” Gadget over there. Click on it and start simple configuration according to the template of your blog. You can select the time period in which the statistics gadget deliver results about the traffic on your blog. The style options can also be changed either as Black Transparent or White Transparent.

Blog statistics Gadget

Happy blogging

More to Read

Wednesday, September 15, 2010

NEW COMMENT YOU BACK BLOGGERS AND BADGES

More bloggers are now joining on “Comment you back” mission. Some bloggers are really very aggressive in commenting back on blogs. But some others always not commenting back . Due to lack of time I too fall into second category, hopes that my dear blogging friends will forgive this. From this time onwards, we have decided to make a criteria in announcing the updated list of comment you back bloggers. Hereafter we will list according to the commenting back activity and display our Comment You Back badge in their blog.

AUTOMATIC COMMENTSPlease remember that after displaying the below given badges on your blog, then you  must initiate commenting on these blogs. Then as per the underlying principle, they will comment you back on your latest post. We have added some new Badges at the end of this post which may help you to give a unique look for your blog. An incredible way to announce that you are an active blogger and very keen to comment back on those bloggers who are leaving a comment on your posts.

 

ACTIVE BLOGGERS WHO LOVE TO COMMENT YOU BACK

BLOG URL

PR

STATUS

http://www.aksindiblog.com

3

VERY ACTIVE

http://artbytomas.blogspot.com/

3

VERY ACTIVE

http://www.sarahg26.com/

2

VERY ACTIVE

http://thetimebi.blogspot.com/

3

VERY ACTIVE

http://styleuplife.blogspot.com

3

VERY ACTIVE

http://survivingireland.blogspot.com/

2

VERY ACTIVE

http://intaskz.blogspot.com/

0

VERY ACTIVE

http://catmtnt.blogspot.com/

2

VERY ACTIVE

http://cooltribeblog.blogspot.com

1

VERY ACTIVE

http://www.bookshive.com

0

ACTIVE

http://mayamurofushi.blogspot.com

2

LESS ACTIVE

http://ofcourseyes.blogspot.com

3

LESS ACTIVE

http://businessvartha.blogspot.com

3

LESS ACTIVE

Want to get added in this table? New list publishing soon

Keep this “COMMENT U BACK” widget in your blog and comment on this post. We will add your name in new list.

 CLICK HERE FOR OUR PREVIOUS BADGES-

 

new7

NEW COMMENT U BACK BADGES GIVEN BELOW

 

SIZE : 125 X 125

 

 

SIZE : 250 X 120

 

 

SIZE : 125 X 375

 

SIZE : 125 X 125

 

How to add “Comment U Back” widget?

Login to your Blogger account, “DashBoard”> “Layout”> “Add a Gadget”> ”HTML/JavaScript”. Then copy the above given HTML code of any one Badge of your choice and paste it inside that box. Save. You can see these marvelous badges in your blog. This will work as an identity between bloggers who love to comment back.

 

More to Read:

Monday, August 30, 2010

ADD FLOATING SOCIAL MEDIA SHARE COUNT WIDGET IN YOUR BLOG

Our previous posts explained the ways to add share count buttons of various social media services like, Facebook, Reddit, ReTweet, Digg, Google Buzz, Google Wave, StumbleUpon etc. I have seen a new idea of keeping all these buttons as a single widget in many blogs. Here I am explaining a method to keep some of  these as a single widget that is floating near the post layout. You can select any other desired share count buttons of your choice and include in this widget. This submit & count button will display the submission count of URL of the displaying page.

How to Add Floating Social Media Share count buttons in your blog

FLOATING SOCIAL MEDIA SHARE COUNT BUTTON   (Look at this picture to see a sample on the left side of the post layout)

  1. Login to your Blogger account
  2. Go to Design/Layout
  3. Go to Page Elements
  4. Click on Add a Gadget
  5. Click on HTML/Javascript
  6. Copy the code given below in red colors and paste it in the box. (Please note that some part of the code is given in blue colors for easy identification while customizing. Please copy everything including this.).Save and drag it to under the “BlogPosts”. Then Save the Template. You may make some changes in the code for customizing it, according to steps given at the end of this post.

<!-- floating page sharer Start -->
<style>
#pageshare {position:fixed; bottom:80px; margin-left:610px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:transparent;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
</style>
<div title="Get this at businessvartha.blogspot.com">
<div id='pageshare'><div class='sbutton' id='su'><a href="http://businessvartha.blogspot.com/2010/08/add-floating-social-media-share-count.html
" target="_blank"><img src="http://i655.photobucket.com/albums/uu277/businessvartha/Picture2.png" border="0" alt="SHARE COUNT BUTTON" /></a>
</div><div class='sbutton'><a title="Post to Google Buzz" class="google-buzz-button" href="
http://www.google.com/buzz/post" data-button-style="normal-count"></a>
<script type="text/javascript" src="
http://www.google.com/buzz/api/button.js"></script>
</div><div class='sbutton' id='rt'><script type='text/javascript'>
tweetmeme_style = &#39;large&#39;;
</script>
<script src='
http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
<div class='sbutton'><script badgetype='square' src='
http://d.yimg.com/ds/badge2.js' type='text/javascript'><data:post.url/></script>
</div>
<div class='sbutton' id='digg'><script src='
http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='su'><script type='text/javascript'>url=&quot;<data:post.url/>&quot;; </script><script src='
http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</div></script></div><!-- floating page sharer End --></div></div>

 

Some changes to customize the above code:

1.  Position of the Share count Widget:

bottom:80px

You can change the position vertically by changing the “80px” to the height from the bottom of your choice.

margin-left:610px

The horizontal position of the widget can be controlled by changing the value from 610 to desired value. It is better to fix the Gadget near so close to the post layout .

2. Background color of the Widget

In the above code, back ground color is given as transparent that can be changed to #CCCCCC or any color code as given in the table below.

COLOR CODE FULL

3. Adding more Social Media Buttons

If you want to add more social media buttons in the widget, simply subscribe my Feed and email me. I will send you the whole pack of code. Contact me using the contact form given in the header.

More Additives for your blog:

Sunday, August 1, 2010

ADD REDDIT SHARE COUNT BUTTON IN YOUR BLOG POSTS

We are continuously bringing out the codes for different social media share count buttons such as, Google Wave Buttons, Retweet Buttons, Stumble Upon Buttons, Google Buzz buttons, Digg Buttons and Facebook share buttons. (Scroll down to get the code of all these social media share count buttons) In this post, we are bringing you the code of Reddit Share count buttons. Reddit is a source for what is new and popular on the web. Voting on favorite reddit will lift good posts up in the front page and thereby providing more traffic to your blog or website.

How to add Reddit share count buttons to your blog


Log in to Blogger Account, go to Layout, Edit HTML and check the box "Expand Widget Templates". Now, find any of this code in your  template. (Please make a backup copy of your template before doing any sort of editing)

<div class='post-header-line-1'/>

OR

<div class='post-header'/>

  
Then immediately after the above given code, paste the code given below. You may select any one of the below given Reddit share count button. Then copy and paste the code given there.

Reddit  Button Large

REDDIT BUTTON

<!--REDDITBUTTONCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:2px;margin-top:-4px;'><script src='http://reddit.com/static/button/button2.js' type='text/javascript'/></div><!--REDDITBUTTONCOUNTER-CODESTOPS-->

 

Reddit  Button Small

REDDIT BUTTON SMALL

<!--REDDITBUTTONCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:2px;margin-top:-4px;'><script src='http://reddit.com/static/button/button1.js' type='text/javascript'/></div><!--REDDITBUTTONCOUNTER-CODESTOPS-->

 

Reddit Button Compact

REDDIT BUTTON COMPACT

<!--REDDITBUTTONCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:2px;margin-top:-4px;'><script src='http://reddit.com/static/button/button3.js' type='text/javascript'/></div><!--REDDITBUTTONCOUNTER-CODESTOPS-->

Customization of code:

  • You can change the position of this button by changing the right to left or center.

After finishing the pasting of the code, check the preview of your blog. In the preview you can see whether the position of the Counter button is correct or not. Any problems? feel free to ask me..

More Buttons to Add:

ADD CONTINUOUS SCROLLING IMAGE WIDGET IN YOUR BLOG

One of the most renowned celebrity, Maya, Japanese model, actress,and writer, recently added a image slider widget in her blog. This widget displayed many beautiful photos of her achievement as World Super Model 2010, with links to her individual posts. This widget showed images one by one scrolling from one side to other. You may add the same widget to your blog, preferably under the header and link it to specific posts. This will attract the visitors and force them to travel through more posts. 

Want to see a demo? Click on the picture belowSCROLLING IMAGE 

How to add continuous Scrolling Image widget

STEP A
Login to your blogger account – Layout  – Page Element – Add Gadget – HTML / JavaScript

STEP B

Now copy the below given code and paste it in the ‘HTML / JavaScript’ box and save. Remember to change YOUR POST URL with the URL of  the post which you want to link the scrolling image. Also change YOUR IMAGE URL with the URL of the image which you want to scroll and display. The direction of the scrolling is coded as left. This direction can be changed either to right, or down according to your choice. It is better that you place this widget under the header of your blog.

<!—continuous scroll codes by businessvartha.blogspot.com -->
<marquee class="html-marquee" direction="left" behavior="scroll" scrollamount="8" onmouseover="this.stop();" onmouseout="this.start();" ><a href="YOUR POST URL" target="_blank"><img src="YOUR IMAGE URL"/></a></marquee><p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://businessvartha.blogspot.com/2010/08/add-continuous-scrolling-image-widget.html
"/><span style="font-size: 60%">Get this Widget</span></a>
</p></!—continuous scroll codes end>

 

Other options to add in this widget:

In some templates, there is not much space under the header. In such cases it is ideal to give a box in which the image will scroll according to the direction you choose. But you must fix the size of the picture according to the box you are designing. 

If you wish to add a box to include your scrolling image widget, then the below given code must be added just between the first and second line of the above given code.

<style type="text/css">
.html-marquee {height:120px;width:900px;background-color:000000;border-width:4;border-style:dotted;border-color:000000;}
</style>

Areas to edit:

The border color and border style can be changes in this part of the code, border-width:4;border-style:dotted;border-color:000000. The border-style can be changed from dotted to dashed or solid to get different style for the border. The height, width and color of the box, can be changed in this part of the code according to . height:120px;width:900px;background-color:000000.

Code to add continuous Scrolling Image widget in a box

<!—continuous scroll codes by businessvartha.blogspot.com --><style type="text/css">
.html-marquee {height:120px;width:900px;background-color:000000;border-width:4;border-style:dotted;border-color:000000;}
</style>
<marquee class="html-marquee" direction="left" behavior="scroll" scrollamount="8" onmouseover="this.stop();" onmouseout="this.start();" ><a href="YOUR POST URL" target="_blank"><img src="YOUR IMAGE URL"/></a></marquee><p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://businessvartha.blogspot.com/2010/08/add-continuous-scrolling-image-widget.html
"/><span style="font-size: 60%">Get this Widget</span></a>
</p></!—continuous scroll codes end>

If you have any doubt related to the installation or customization of this widget, please feel free to ask us.

Happy blogging………

More widgets to add

Thursday, July 22, 2010

ADD STUMBLEUPON SHARE COUNT BUTTON IN YOUR BLOG POSTS

Stumbleupon is another website where we can share our blog posts or the posts which we like with our friends. Stumblers are considered to be a major arm in discovering and sharing great websites. Stumbleupon button or Stumble it buttons are very helpful for a blogger to provide an option for an easy one click submission of posts to share with others. Stumble It buttons are available in many sizes. Here in this post, I would like to share some of the popular, cool Stumble It share count buttons for your blog. If you feel that the post is useful, don't hesitate, Stumble It. 

How to Add Stumble It count buttons to your blog posts

STEP A
Log in to Blogger Account, go to Layout -> Edit HTML and check the box "Expand Widget Templates". Now, find any of this code in your  template. (Please make a backup copy of your template before doing any sort of editing)

<div class='post-header-line-1'/>

OR

<div class='post-header-line'/>

 

STEP B
Then immediately after the above given code, copy and paste the code given below. You may select the code of any one of the two StumbleUpon Counters. If you want code of more smaller StumbleUpon counter, then please comment here.

Something to edit:

  • Change the position of this button by changing the right to left or center.

 

Large StumbleUpon counter

stumbleupon counter button large

<!--STUMBLEUPONCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:4px;margin-top:-4px;'><script type='text/javascript'>url=&quot;<data:post.url/>&quot;; </script><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div><!--STUMBLEUPONCOUNTER-CODESTOPS-->

 

Small StumbleUpon counter

stumbleupon counter button large

<!--STUMBLEUPONCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:4px;margin-top:-4px;'><script type='text/javascript'>url=&quot;<data:post.url/>&quot;; </script><script src='http://www.stumbleupon.com/hostedbadge.php?s=2'/></div><!--STUMBLEUPONCOUNTER-CODESTOPS-->

After pasting the code, just look to preview the blog and check whether the button appearing on the correct place. If you feel any trouble, ask me.

More Buttons to Add:

ADD RETWEET COUNT BUTTON IN YOUR BLOG IN YOUR BLOG POSTS

Another count button that help to know how many readers retweet your post and publish that number automatically near your post. This is one of the best  button to prompt your readers to share your post using tweetmeme buttons. This buttons are available in two size, one is compact or small and other is large. Both buttons will display how many retweets happened to particular posts. While clicking on this button, readers of your blog post will be taken to a Tweet submission page automatically. 

Add Retweet count buttons to your blog posts

STEP A
Log in to Blogger Account, go to Layout -> Edit HTML and check the box "Expand Widget Templates". Now, find any of this code in your  template. (Please make a backup copy of your template before doing any sort of editing)

<div class='post-header-line-1'/>

OR

<div class='post-header-line'/>

 

STEP B
Then immediately after the above given code, copy and paste the code given below. You may select the code of any one of the two Retweet Counters.

Something to edit:

  • You may change the position of this button by changing the right to left or center.

 

Small Retweet counter

 RETWEET COUNTER SMALL

<!--RETWEETCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:4px;margin-top:-4px;'><script type='text/javascript'>
tweetmeme_style = &#39;compact&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div><!--RETWEETCOUNTER-CODESTOPS-->

 

Large Retweet counter

 RETWEET COUNT BUTTON LARGE

<!--RETWEETCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:4px;margin-top:-4px;'><script type='text/javascript'>
tweetmeme_style = &#39;large&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div><!--RETWEETCOUNTER-CODESTOPS-->

 

Once you finish adding the code, click on preview to check whether the counter button is appearing on right place. Then save the template. If you feel any trouble, please comment and ask here.

 

More Buttons to Add:

ADD FACEBOOK SHARE COUNT BUTTON IN YOUR BLOG POSTS

Many bloggers email me asking about how to add social media icons sharing buttons which shows the total number of  sharing occurred for a specific post. This will help you and your readers to assess how many readers shared and what is the potential of an advertisement based on a post in your blog. I will explain one by one in my future posts about how to add a share count button for, Facebook, Retweet, Digg, StumbleUpon and Google Buzz.

Read this post and share it in Facebook ……

How to add Facebook share count buttons to your blog

STEP A
Log in to Blogger Account, go to Layout -> Edit HTML and check the box "Expand Widget Templates". Now, find any of this code in your  template. (Please make a backup copy of your template before doing any editing)

<div class='post-header-line-1'/>

OR

<div class='post-header-line'/>

 

STEP B
Then immediately after the above given code, paste the code given below. You may select any one of the two Share count button, copy and paste the code given after the image

Box Counter

FACEBOOK SHARE COUNT BUTTON LARGE

<!--FACEBOOKBOXCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:4px;margin-top:-4px;'><a name='fb_share' type='box_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></div><!--FACEBOOKBUTTONCOUNTER-CODESTOPS-->

 

Small Button counter

FACEBOOK SHARE COUNT BUTTON SMALL 

<!--FACEBOOKBUTTONCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:4px;margin-top:-4px;'><a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><!--FACEBOOKBUTTONCOUNTER-CODESTOPS-->

Something to remember:

  • You may change the position of this button by changing the right to left or center.

After pasting the code, check the preview of blog to see the position of counter  button. Then Save the template. If you feel any issues, please ask by commenting here.

Happy Sharing…..

More Buttons to Add:

ADD GOOGLE BUZZ SHARE COUNT BUTTON IN YOUR BLOG POSTS

Google Buzz helps net riders to share interesting articles, videos, posts and images with one button click. Google now announced official Buzz button that shows the total number of Buzz on specific posts in your blog or website. Here in this post, I would like to share the code of two Google Buzz share count buttons, Small and Large buttons. Whenever a visitor click on this button, it will automatically pick the URL of your post for quick sharing through Buzz. If you like this post, buzz it now…

How to add Google Buzz share count buttons to your blog

STEP A
Log in to Blogger Account, go to Layout -> Edit HTML and check the box "Expand Widget Templates". Now, find any of this code in your  template. (Please make a backup copy of your template before doing any sort of editing)

<div class='post-header-line-1'/>

OR

<div class='post-header-line'/>

 

STEP B
Then immediately after the above given code, copy and paste the code given below. You may select the code of any one of the two Google Buzz Counters.

 

Small Buzz counter

GOOGLE BUZZ SMALL COUNTER

<!--GOOGLEBUZZCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:4px;margin-top:-4px;'><a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="small-count" data-locale="en_IN"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script></div><!--GOOGLEBUZZCOUNTER-CODESTOPS-->

 

Large Buzz counter

GOOGLE BUZZ LARGE COUNTER

<!--GOOGLEBUZZCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:4px;margin-top:-4px;'><a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count" data-locale="en_IN"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script></div><!--GOOGLEBUZZCOUNTER-CODESTOPS-->

Something to edit:

  • You may change the position of this button by changing the right to left or center.

Once you finish pasting the code, then click on preview to see where the button appears. If is is in correct position as you desired, then save the template. Still got some problems? ..Ask me…

More Buttons to Add:

ADD DIGG THIS SHARE COUNT BUTTON IN YOUR BLOG POSTS

As you know Digg is one of the major content sharing website in internet.  After our Facebook Share count button, we would like to present the code of  Digg this share count buttons for a blog post. Digg This button is of three types, Compact, Medium and Large. We recommend our readers to add the Medium button as we did in our blog. You may select the one button of your choice as described below. If you love this post, please don’t forget to Digg This.. Happy Digging…

How to add Digg This share count buttons to your blog

STEP A
Log in to Blogger Account, go to Layout -> Edit HTML and check the box "Expand Widget Templates". Now, find any of this code in your  template. (Please make a backup copy of your template before doing any sort of editing)

<div class='post-header-line-1'/>

OR

<div class='post-header-line'/>

 

STEP B
Then immediately after the above given code, paste the code given below. You may select any one of the three Digg This count button, copy and paste the code given there.

Compact Digg This Button

 DIGG THIS COMPACT BUTTON

<!--DIGGTHISBUTTONCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:4px;margin-top:-4px;'><script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script><a class="DiggThisButton DiggCompact"></a></div><!--DIGGTHISBUTTONCOUNTER-CODESTOPS-->

 

Medium Digg This Button

 DIGG THIS MEDIUM BUTTON

<!--DIGGTHISBUTTONCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:4px;margin-top:-4px;'><script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script><a class="DiggThisButton DiggMedium"></a></div><!--DIGGTHISBUTTONCOUNTER-CODESTOPS-->

 

Large Digg This Button

 DIGG THIS LARGE BUTTON

<!--DIGGTHISBUTTONCOUNTER-CODESTARTS-http://businessvartha.blogspot.com--><div style='float:right;padding:4px;margin-top:-4px;'><script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script><a class="DiggThisButton DiggLarge"></a></div><!--DIGGTHISBUTTONCOUNTER-CODESTOPS-->

Something to remember:

  • You may change the position of this button by changing the right to left or center.

Check the preview of your blog, when you finish the pasting of the code. In the preview you can see whether the position of the Counter button is correct or not. Any problems? feel free to ask me..

More Buttons to Add:

Blog Widget by LinkWithin