Add Floating Facebook Like and Retweet Counters To Your Websites

Since it is weekend so I thought lets  play with some CSS again. [a href="http://developers.facebook.com/docs/reference/plugins/like/" target="_blank"]Facebook Like Button[/a] and retweet counter by [a href="http://help.tweetmeme.com" target="_blank"]tweetmeme[/a] are the two most widely used social media widgets without which you can’t call a blog a blog. Both these buttons along with [a href="http://stumbleupon.com" target="_blank"]Stumble Upon[/a] bookmarking button can let your readers circulate/share your tutorials and articles with their interested collegues and friends connected to them via these social networks. With a little HTML spiced with CSS we succeeded in creating a floating widget that will include these three buttons and will stay fixed at the middle lift side of your websites. The widget settings can surely be changed to align it to the right, bottom or left if you wish. You can also add more buttons to it if you wish like [a href="http://digg.com" target="_blank"]DIGG[/a] for instance.  See a demo first,

[a name='more'][/a]

 

[a href="http://zailab.blogspot.com" target="_blank"]Live Demo[/a]

 

How To add Floating Facebook Like, Retweet and Stumble Upon Counter to Blogger?

  1. Go To Blogger > Design
  2. Select HTML/JavaScript Widget from anywhere (Position doesn’t matter)
  3. Inside it paste the code below,

    <div style="display:scroll; position:fixed; top:40%; left:2%; border: 1px dotted #E8E8E8; padding:0px 0px 0px  5px; height:220px; width:53px ">
    <table cellpadding="1px" cellspacing="0">
    <tr>
    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;"> 
    <div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/>
    </td>
    </tr>

    <tr>
    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">
    <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
    </td>
    </tr>

    <tr>
    <td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">

<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="mybloggertricks">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </td>
    </tr>

    </table>
    </div>

 

     4.    Simply replace mybloggertricks with your twitter username.

     5.    Save your widget and you are Done!

 

See your blog to find a light and beautiful widget hanging at left side of your blog. Hope you like it! :)

Source: http://www.mybloggertricks.com/2011/04/add-floating-facebook-like-and-retweet.html

Why I Blog?

blogger-boy For the past two months, I've desired for just one thing, "free time"! Yeah, you got it right, I have been giving my exams but finally, they have ended. Now I'm staring at the the plenty of free time I've got and and wondering why, in the first place, I ever wanted it? I slept, read, watched movies, did shopping and everything I wanted to do but still have a lot of free time in reserve. May be this is the only thing that is "free" and in excess these days.

I would stop boring you now and come to the point straight and that is, why do I blog? and the answer is, "I don't know!". When I was a student, I used to write poems and my friends suggested I should write on a broader platform but being an introvert, I discarded the suggestion. But today, when I have nothing else to do, I decided to try my luck here i.e The Blogosphere. Talking about myself won't be a great idea so I would rather stick to the topic i.e. "Why PEOPLE blog?" The reasons, in my view, are few and simple which are as follows:

[a name='more'][/a]

 

1. They are bored and jobless (?)

jobless Yeah, there are some people like me who blog just because they have nothing else to do ;)

 

 

 

2. They want to be heard

loud speaker This,in my view,is the basic idea behind blogging. A part of us humans have always wanted to be heard when our emotions and fears go unnoticed by the fast moving world around us. We look for a way to gain attention from these so-called busy people in a way which suits them. A small appreciation to our work satisfies us a great deal and there's a feeling that we really exist.

3. Socializing experience

socializing Another advantage of blogging and online interaction is broadening of vision and making new contacts at the cost of 1k per month ( :P ) I've spent around 3-4 years writing on different forums and meeting people from all walks of life and beliefs and for me its been a great learning experience.

4. Bloggers are learners

learners No blogger would ever want any information shared on his/her blog to be challenged by a reader so bloggers are always careful while mentioning even trivial information and do a lot of research on a subject before writing about it. As a result, their knowledge increases with time and gives them another reason to get addicted to the idea of blogging.

Ps: you can show off your knowledge in front of friends and earn some wow's too ;)

5. Means of earning money

earning-money-thumb18720563 Once you've become a successful blogger,you have a very high likelihood of making good money which is the basic necessity of every human being. The best thing about earning money through this medium is that there is no age limit.You can earn at an age of 12 years and keep earning even if you're 70. So, all those people out there who have words waiting to be said, its time to speak your heart out in this cyber world even if you're just another common person like me.

This is it for now. I'll be back soon with some peculiar but golden tips on blogging. See ya around. :)


Fatima Masood Khuwaja

About the Guest Author:

Fatima is a keen learner and socializing person. She has recently completed her MBBS Degree and now a days during her leisure time she writes about her random rumblings at [a rel="nofollow" href="http://dr-fmkh.blogspot.com/"]My World![/a]

Source: http://www.mybloggertricks.com/2011/04/why-i-blog.html

Add Customized PayPal Donate Button Below Blogger Posts

How To Get the PayPal Donate Button Code?

Kindly follow these steps,

  1. Log into [a href="http://www.paypal.com" target="_blank"]PayPal[/a]
  2. Click The Merchant Services Tab and then select Donate Option under Create Button

Paypal--1

 

    3.  Then Fill the form with relevant details as shown below. Leave step-2 and step-3 as default.

Paypal---2

     4. Hit Create Button

     5.  Click Remove code protection Link in order to simplify the code. Its completely safe even this way.

paypal--3

       6.  Copy the code and jump to the next part of the tutorial below.

 

How to add Customized PayPal Donate Button To [a href="http://blogger.com" target="_blank"]Blogger[/a]?

Note:- Before adding the customized code shared below to blogger if you wish to try it on MBT HTML Editor and customize the look then its not a bad idea. :)

As usual I have tried my best to keep it simple. So here we go,

  1. Go To Blogger > Design > Edit HTML
  2. Back up your template
  3. Check the Expand Widget Templates box
  4. Search for data:post.body
  5. Just below it paste the code below,

<b:if cond='data:blog.pageType == &quot;item&quot;'>

  <table border='0' cellpadding='2' cellspacing='0' width='590'><tbody>
      <tr>
        <td><div style='border:5px solid #37BD07; padding:5px 10px; margin-right:5px;'>  <br/> PASTE PAYPAL DONATE BUTTON CODE RIGHT HERE
</div> </td>

        <td>
          <p align='justify'><font color='#2FAA2F'><em><strong>Respected Readers:</strong></em></font>
                  <br/><em>WRITE YOUR SHORT REQUEST MESSAGE HERE</em></p>
       </td>
      </tr>
    </tbody></table>
</b:if>

Replace PASTE PAYPAL DONATE BUTTON CODE RIGHT HERE with your PayPal code that you got earlier. And replace WRITE YOUR SHORT REQUEST MESSAGE HERE with something that may catch reader’s attention. You can get an idea from my request message.

  6. Save your template and visit your blog and see it hanging in action :)

How To Customize The Code?

  • To Change the width of the widget change the value width='590'
  • To Change the border size and colour change border:5px solid #37BD07

Please not that if PayPal is not available in your countries then you can use Donate button of any Online account that you may have. If you needed any help just let me know. If this tutorial helped you a little then kindly consider contributing a small donation. :)

Source: http://www.mybloggertricks.com/2010/12/add-customized-paypal-donate-button.html

Multi Column Footer Widget For Blogger –The Hot!

Multi-Column-Footer Widget For Blogger


<div style='clear: both;'/>
</div> </div>

      6.   Save your template and you are done!

Now go to Page Elements and add your widgets to the newly added Footer Widget that will look something like this,

image

3.  Or if you wish to add an extra column then add the code below just above <div style='clear: both;'/>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar#' preferred='yes'>
</b:section>
</div>

Remember that lowerbar# refers to the column number. So if you want to add a fifth column then simply replace  lowerbar# with lowerbar5.

After you have added the fifth column then remember to change width: 23%; with width: 17%; 

You will repeat step 3 for as many columns as you wish to create. But three and four and five columns are a standard. Increasing them will make things look ugly.

 

Wishing you all a Happy New Year 2011 full of love, joy and just Happiness. Peace and blessings :)

Source: http://www.mybloggertricks.com/2010/12/multi-column-footer-widget-for-blogger.html

How to link text and Image in Blogger posts?

How To Link Images Within Blogger Posts?

Click this text –> [a href="#image"]Take me to the Image at Top[/a]

Such a link will link texts to images. So lets do it.

1.    First enclose the image with this code,

<a name="Image-Name"><img src="Image Link Goes Here"/></a>

Replace Image Link Goes Here with URL of image where it is saved.

2.    Now we need to create a text that will link the image. Use this code,

<a href="#Image-Name">Jumping Text</a>

Simply replace Jumping Text  with a text that will take you to the image.

In my case I have replaced Jumping Text with Take me to the Image at Top

How to link One Image To Another Image in Blogger Posts?

Here you just need to use an image instead of a Jumping text. For example click the jumping image below and it will take you to the image at top left,

[a href="#image"]images[/a]

Liked it? Now follow these easy steps,

1.   First enclose the landing image with this code,

<a name="Image-Name"><img src="Image Link Goes Here"/></a>

Replace Image Link Goes Here with the URL of your landing image.

2.  Now create a Jumping image using this code,

<a href="#Image-Name"><img src="Jumping Image Link Goes Here"/></a>

Just replace Jumping Image Link Goes Here with the Image URL of the jumping image.

 

 

 

Hope you will find it unique and useful. Let your readers jump within your posts. :) [a href="#"]Take me Up![/a]

Source: http://www.mybloggertricks.com/2011/01/how-to-link-text-and-image-in-blogger.html

How to Customize Layout of Facebook Profile Page?

new-facebook-layout[a href="http://www.facebook.com" target="_blank"]Facebook[/a] is the next giant after Google in every aspect. As the site’s popularity keeps on increasing so do new ways of making perfect use of this Mega Giant social media network. Facebook’s new layout/look has annoyed many users and some users including me still prefers the old layout. The Facebook team recently announced that the new Profile page Layout can not be changed and this is how every user profile will look like. That’s surely a sad news but no worries any longer because there is one thing really exciting about this new layout and that is the horizontal photo Tag stream. Using this photo stream combined with your Profile Picture you can create your own personalized layouts, all different, attractive and simply Cool!

 

 

This is how a normal Facebook Layout looks like,

facebook-profile page

 

and this is how I changed mine,

[a href="http://www.facebook.com/mybloggertricks" target="_blank" rel="Customize Facebook Profile Page"]new-facebook-layout[/a]

 

There are many online tools that lets you create images of required sizes that may fit into your profile page but I tested all and none could give a quality output so I rather used Photoshop and created them myself. Though it requires one to have some basic knowledge of Photoshop. I will write a detailed post on how to create your own personalized Facebook Layouts using Photoshop but first I want to know how much curious you are to know it? Tell me if you would love a detailed post on how to customize the Facebook profile page using Photoshop? Bloggers using Facebook should surely give a personal touch to their fan pages and profile pages because readers love it! :)

Source: http://www.mybloggertricks.com/2011/01/how-to-customize-layout-of-facebook.html

Create a Cute Subscription Form

Do let me know if you needed any help in customizing the widget.

Source: http://www.mybloggertricks.com/2011/01/create-cute-subscription-form.html
 
Play : Agame | Y8 Games | Y3 Games
Copyright © 2011. Blogger Tips And Tricks 2012 - All Rights Reserved

Proudly powered by Blogger