Pause Widgets: Widgets

Showing posts with label Widgets. Show all posts

How to Add Floating Facebook Like box To Blogger

Here we are again with this terrific widgets.

People, over the years use facebook like button but today i want to introduce you to an amazing facebook widgets. Slightly like our twtter, facebook, g+ float button Floating Facebook Likebox is a Slider that hides the Likebox inside a container and reveals it only when visitors hovers the cursor on the floating button.

The following steps will see you add this our amazing likebox into your blogger blog.

<script type="text/javascript">

//<!--

$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});

//-->

</script>

<style type="text/css">

.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8LLhoKVpQ9AgxuXEfT9EkCKhBUCODWFjtYcDGIhTM1cAzoRwYcUrpNSzW8_uqoaeJta7MrBt33kzsKQ27L4NNBknUVnZeUStuh1qU_utGvCAm7TlN8GPGRatiX-1wUZwAX62UxxyU5TRG/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}

.w2bslikebox div{border:none;position:relative;display:block;}

.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}

.w2bslikebox span a{color: #808080;text-decoration:none;}

.w2bslikebox span a:hover{text-decoration:underline;}

</style><div class="w2bslikebox" style=""><div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/reviewdunia/&width=245&colorscheme=light&show_faces=true& connections=9&stream=false&header=false&height=260" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 260px; width: 245px;background:#fff;"></iframe><span>Follow us on facebook:<a href="http://dailybloggiingtips.blogspot.com/"></a></span></div></div>

if you have not yet created a Facebook Username to your Fan Page then Create it, Once you create a username then replace
" https://www.facebook.com/reviewdunia"
With your Facebook Page address .
5. Click on save and we are done

jQuery is the most popular JavaScript library available today. With its features, jQuery has changed the way that millions of people write JavaScript. To use jquery, we need to host "jquery.min.js" file in our server or we can use a CDN like Google Hosted Libraries. But if you do not need to host jQuery as a external file, follow the steps below:

1.Login to your Blogger account and go to "Edit HTML" of your blog.

2.Scroll down to where you see this (or use Ctrl+F to find that code):

</b:skin>

3.Copy this code and paste it just after the </b:skin> tag .

4.Now save your template.

1.Login to your blogger dashboard and go to Layout --> Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below and click save.

<script language=javascript>
var as = 1;
var bs = 3;
function statusbar()
{
var msg  = "TYPE-YOUR-TEXT-HERE";

var msg1  = "\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\";
var msg2  = "||||||||||||||||||";
var msg3  = "//////////////////";
var msg4  = "------------------";
if(as > 4)
as = 1;
if(bs < 1)
bs = 4;
timer = window.setTimeout("statusbar()",100);
var sds = eval("msg"+as);
var sds2 = eval("msg"+bs);
var ss =sds+"  "+msg+"  "+sds2;
window.status = ss;
as = as+1;
bs = bs-1;
}
statusbar(100);
</script>

Now you are done.

If you want to add a text-area with the auto highlight its content when mouse-over, this simple tutorial will help you.

1.Login to your Blogger account and go to "Layout" of your blog.

2.Click on 'Add a Gadget' link from the section you need to add it.

3.Select 'HTML/JavaScript' and add the code given below and click save.

<textarea rows="5" cols="50" onfocus="this.select()" onmouseover="this.focus()" onclick="this.focus();this.select()">

Enter Your Content Here

</textarea>

Note : Remember to replace Enter Your Content Here with your real content.

Example:

<textarea rows="5" cols="50" onfocus="this.select()" onmouseover="this.focus()" onclick="this.focus();this.select()">

Tips for Bloggers for easy blogging and Making Money.blogger,blogspot tips and tricks.A dummies guide, templates,designs,widgets, JavaScript,HTML codes,SEO,Google AdSense,gadgets,how to monetize Blogger or blogspot blogs.

</textarea>

Note: If you don't want to add it as a Blogger widget, then you can add above code into "Edit HTML" of your blogger theme or into a post. If you are going to add it into a post, add it into post editor in HTML mode.

This tutorial explains how to display an advertisement under post title in a Blogger blog posts. To add a ad banner just below post title, first you need to go to "Edit HTML" page of your blog.

After that find this code (You will find it 2 times):

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

Now paste your advertisement code just below above code (you have to paste it twice, because above code available in 2 places).

Note: If you need to display your advertisement only in post pages, wrap your advertisement code like this:

<b:if cond='data:blog.pageType == "item"'>
Your Ad Code
</b:if>

Look at this image to understand it well:

Save your Blogger template.

This tutorial explains how to become links of your pagelist widget nofollow.

1. Login to your Blogger account and go to "Template"--> "Edit HTML" of your blog.

2. Now find your PageList widget code. (Note : You may also can find it by searching <b:widget id='PageList)

PageList widget code will look like this. But widget id (PageList1) can be different :

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
    <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <b:if cond='data:mobile'>
      <select expr:id='data:widget.instanceId + &quot;_select&quot;'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option>
          </b:if>
        </b:loop>
      </select>
      <span class='pagelist-arrow'>&amp;#9660;</span>

    <b:else/>
      <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
          <b:else/>
            <li><a expr:href='data:link.href'><data:link.title/></a></li>
          </b:if>
        </b:loop>
      </ul>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

3. Now put blue colored code ( rel='nofollow' ) as the example below into your Link list code.

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
    <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <b:if cond='data:mobile'>
      <select expr:id='data:widget.instanceId + &quot;_select&quot;'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option>
          </b:if>
        </b:loop>
      </select>
      <span class='pagelist-arrow'>&amp;#9660;</span>

    <b:else/>
      <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'><a expr:href='data:link.href' rel='nofollow'><data:link.title/></a></li>
          <b:else/>
            <li><a expr:href='data:link.href' rel='nofollow'><data:link.title/></a></li>
          </b:if>
        </b:loop>
      </ul>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Important : You must include the space before rel='nofollow' as the example above.

Now save your template and you are done.

Alexa.com provides traffic data, global rankings and other information on millions of websites. So Alexa rank is used to measure success of your website or blog. This tutorial will show you how to add a html form to your blogger blog to check alexa rank.

1.Login to your Blogger account and go to "Layout" of your blog.

2.Now click on 'Add a Gadget' link from the section you need to add it.

3.Select 'HTML/JavaScript' and add the code given below and click save.

<form method="get" action="http://www.alexa.com/data/details/traffic_details" target="_blank">
<input name="url" maxlength="255" size="35" type="url" placeholder="Enter an URL..."/>
<input value="Check Alexa Rank" type="submit"/>
</form>

It will look like this:

Adding meta tags you can get get more traffic from search engines like Google,Yahoo,Bing,etc. Especially the meta description is the most important one.

Meta tags are the tags which describes your site and tells the search engines what your site is all about. Adding meta tags is an important factor in SEO.(Search Engine Optimization).Meta tags allows search engines to index your web pages more accurately. In other words,Meta tags communicate with the search engines and tells more information about your site and make it index correctly and accurately.

We must add two main meta tags to the head section of the template.One is the Meta description which describes your site and another one is Meta Keywords which tells about your site keywords(what your site is all about)

Here is how to add meta tags to your blogger(blogspot) blog:

1.Go to "Template" --> "Edit HTML" of your blog.

2.Find this code:

<b:include data='blog' name='all-head-content'/>

3.Now add below code just after the above code.

<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>
<meta content='AUTHOR NAME HERE' name='author'/>

Look at the example below:

Replace,

DESCRIPTION HERE: Write your real blog description
KEYWORDS: Write the keywords of your blog
AUTHOR NAME: Write the author's name(Your name)

Now save your template. You have successfully added meta tags to your blogger blog.

This article explains how to add music,mp3,audio to your Blogger (blogspot) Blog :

" Music expresses feeling and thought, without language; it was below and before speech, and it is above and beyond all words. ~Robert G. Ingersoll "

Adding a nice music track to your blog may enhance the pleasure of reading your blog or annoy your visitors depending on the kind of blog you have. For example, if you have a music blog, adding some nice song tracks to your blog sidebar can make your visitors to stay longer which benefits you.
So, let's learn how to add mp3 to your Blogger Blog:

Step 1 : First, upload the music file to any free file hosting servers on the net. There are tons of sites that provide free music file hosting. Just google "Free music hosting". Once you upload, they will provide you with a direct link to that music file.
ex: the file looks something like this :


http://---------- .com/yourmusicfile.extension

(extension can be .mp3 or .wav or .mid or any other audio extension).
I uploaded a sample mp3 file to my server..


http://myblogtalk.com/uploads/billu.mp3

Step 2 : Here is the code you need to add music to your blog


<embed width="250" height="50" autostart="false" src="MUSIC FILE URL"/></embed>

width : width of the music player
height: height of the music player
autostart : you want the music to start playing automatically ? or leave it to visitors choice..? (values : false or true)
MUSIC FILE URL : the direct link to your music file
In this example, MUSIC FILE URL is


http://myblogtalk.com/uploads/billu.mp3

So, if you add that code, the output will be like this
(I used the autostart: false, so you have to click on the play button to start playing music)
Click on the Play button to test

If you use the autostart value: true, the music automatically plays.. but, it annoys many readers

Few more attributes :
loop : true (or) false
If you want to continue playing the same track again and again until the visitor click on the 'STOP' button (or until he/she leaves your site), set the value to 'true'.
If you want the music to stop once the track is completed, use 'false'

playcount : n (n= any positive number)
suppose.. if you put playcount: 2 , the music will play two times and stop

If you want to use these two more additional features.. the code look something like this:


<embed width="250" height="50" autostart="false" loop="false"playcount="2" src="MUSIC FILE URL"/></embed>

Now What ?
You can add the music player anywhere you want in your Blogger blog..
Sidebar : If you want to add in sidebar, go to Layout » Add a gadget » html/javascript
and paste the code and save it.

Blog Posts :
If you want to embed music file to any specific blog post..
Paste the code in 'Edit html' mode and save it.

Adding a nice Technorati Add to Favorites widget to your blog makes it easier for your readers to quickly fav you on technorati. So, here is how to add it to your Blogger blog.

Replace the yourblog.blogspot.com to your blog address and copy the button code you like and paste it in your template.
If you want in sidebar.. go to Layout » Add a gadget » html/javascript and paste the code and save it.

Type 1 :


<a href="http://technorati.com/favs?add=http://yourblog.blogspot.com"><img src="http://i40.tinypic.com/2yw8lma.jpg" alt="Add us to your technorati favorites" width="145" height="25" border="0" /></a>

Type 2 :


<a href="http://technorati.com/favs?add=http://yourblog.blogspot.com"><img src="http://i42.tinypic.com/nqe0lc.jpg" alt="Add us to your technorati favorites" width="145" height="25" border="0" /></a>

Type 3 :


<a href="http://technorati.com/favs?add=http://yourblog.blogspot.com"><img src="http://i44.tinypic.com/2utnl9u.jpg" alt="Add us to your technorati favorites" width="80" height="15" border="0" /></a>

This post explains how to add a Twitter Follower Counter/chicklet widget to your Blogger and Wordpress blogs.. like the feedburner counter

Similar to Feedburner Counter which counts your RSS Subscribers, Twitter Counter counts your Twitter Followers.

Default button :

Code :


<script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=username"></script>

Write your twitter account(username) in place of username

There are total of 4 colors to choose from.. You can find them here.

To add in Blogger :
Sign into Blogger » Layout » Add a gadget » html/javascript
paste the code and save it.

To add in Wordpress :
Sign into Wordpress > Widgets > Text
paste the code and save it.

This cool trick shows how to implement Google Adsense Revenue sharing feature in blogger(blogspot) blogs:

Do you run a blogger blog which is controlled by multiple authors ? Are you looking for an idea to share revenue with your co-authors? If so, then this nice Blogger trick solves all your problems.

First, What is Adsense Revenue Sharing ?

Suppose, you're the administrator of a blogger blog which has multiple guest authors. If you want to share the blog revenue with them, normally you divide the total revenue based on the Post count or Pageviews. But, most of the time it may not be accurate because CPC and CPM varies from post to post depending on the keywords,etc. So, it may not encourage the team members to post more stuff :(

But, with this cool trick, you can share the blog revenue with them more precisely because every author gets his own ad displayed in all the posts he/she does.

So, lets see how to add this feature to your blog..

For example, If your blog as 3 authors - John, Ricky and Britney

1. Sign into Blogger » Layout » Edit html

2. Tick the "Expand Widget Templates "

3. You can insert the ad anywhere you want in the post body.. In this example, I'll show you how to add it inside the blog post (between the post title and post body)

Find this line:

<p><data:post.body/></p>

and Paste the below code above that line


<b:if cond='data:blog.pageType == "item"'>



<b:if cond='data:post.author == "John"'>

PASTE THE AD CODE OF JOHN HERE

</b:if>



<b:if cond='data:post.author == "Ricky"'>

PASTE THE AD CODE OF RICKY HERE

</b:if>



<b:if cond='data:post.author == "Britney"'>

PASTE THE AD CODE OF BRITNEY HERE

</b:if>



</b:if>

<br/>

Replace the Names with your Blog authors (Case sensitive)

4. Don't Copy and Paste the Adsense Code directly in the template. First, Go to this Blogger Ad Code Converter Page and paste your adsense code in the box provided and click on "Convert Ad Code".
Now, copy that code and paste it in the template.
(Look at the screenshot below)

and Finally, SAVE THE CHANGES.

From now on, Each member of your blog can monetize their posts with their own adsense ads... Happy Blogging :)

Note: You can use the same hack to put other advertising networks aswell.. like adbrite,bidvertiser,etc.

Since Twitter is getting huge popularity these days, adding a cool Retweet Button to your Blogger blog posts can easily get you some decent amount of traffic and promote your content/products to large people in quick time. If you have tons of followers, then you can easily milk it.. ;)

So, here is how to add a nice Retweet button to your blogspot blog posts:

There are two versions of retweet buttons.. one is the default one (looks like digg button) and the other one is Compact version which can fit in small space..

The Code for the Default version is :


<script type="text/javascript">

tweetmeme_url = '<data:post.url/>';

</script>

<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>

and for Compact version is :


<script type="text/javascript">

tweetmeme_style = "compact";

</script>

<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

Here is how to add them to your blogger post..

If you want it to the left side of blog post..

Find


<data:post.body/>

And Paste this code BEFORE that line..


<div style="float:left;padding: 6px 10px 6px 0px;">

<script type="text/javascript">

tweetmeme_url = '<data:post.url/>';

</script>

<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>

</div>

If you want it to the Right Side of post..

adding retweet button on the right side of blog post

Find


<data:post.body/>

Add this code BEFORE that line..


<div style="float:right;padding: 6px 0px 6px 6px;">

<script type="text/javascript">

tweetmeme_url = '<data:post.url/>';

</script>

<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>

</div>

Note: In the above two cases, if you want Compact button instead of default style, Just simple replace the default style code with compact one (refer step 1)

Finally SAVE THE CHANGES!