World Blog Free 4U

Sunday, 19 May 2013

Recent post is widget which will display the latest post of the blog. As you can see in many blogs. Usually these types widgets are placed in the sidebar of the blog. So we need a different from other's blog, here it is. This recent post widget will show the latest post with thumbnail and description as tooltip when moueover on the thumbnail. It had fade effect. Well lets try simply with steps mentioned below.

Live Preview

LATEST POST

1. Blogger > Layout > Add Gadget > HTML/JavaScript

2. Add the following code in it and Save it.

<style type="text/css">
#post-gallery {
  width:304px;
  margin:0px auto;
  font:normal 11px Arial,Sans-Serif;
  color:#494848;
  padding:8px;
  background-color:#17B986;
  -webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
#post-gallery h2 {
  font:20px Arial,Sans-Serif;
  color:white;
  text-shadow:0px 3px 2px black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#48D;
  text-align: center;
}
#post-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('http://softglad.at.ua/images/loading.gif') no-repeat 50% 50%;
  width:72px;
  height:72px;
}
#post-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}
#post-gallery .rp-item .rp-child {
  position:relative;
  top:10%!important;
  left:10%!important;
  z-index:1000;
  width:200px;
  background-color:white;
  border-top:5px solid #FA7C19;
  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
  opacity: 0.9;
}
#post-gallery .rp-item .rp-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#FA7C19;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle     = "Latest Post",       // Widget Title
    numposts    = 20,      // The number of thumbnail / posts to display
    numchar     = 200,      // Number of characters in the description tooltip
    rcFadeSpeed = 600,      // Speed of the effect. fadeIn () tooltip appears
    pBlank      = "http://softglad.at.ua/images/no-img.png",      // Image that show up if the post doesn't have a image
    blogURL     = "www.worldblogfree4u.blogspot.com";       // Your Blog Address

</script>

<script src="http://softglad.at.ua/widgets/post-gallery.js" type="text/javascript"></script>

Replace www.worldblogfree4u.blogspot.com with your blog url. numposts is the number of thumbnails / posts that you want to display. numchar is the number of characters in the description tooltip. rcFadeSpeed is the speed of the fade effect.

I hope you like this widget and comment it if there is any mistake. Spread out this widget to your friends.

Saturday, 18 May 2013

ADD Animated Labels Style For Blogger

Today i am going to give you a wonderful widget called Flash Animated Label Cloud Widget. This is a fully flash widget with wonderful effects. This is a easy customizable widget and automatically extracts labels from your blog. This has been a very popular plugin at WordPress. Your blog will surely get a good look with this tutorial. So in this post you will learn how to add this super cool widget to blogger blogs and customize it as per your needs. So lets get on to the tutorial!

How To Add Flash Label Cloud Widget

1. Go to Layout>Add a Gadget
2. From there add a “HTML/JAVASCRIPT” gadget.
3. Copy the code bellow and paste there.

<p style="display:none;">Flash Labels by <a href="http://www.allbloggingtools.com/"><b>All Blogging Tools</b></a></p>

</div>

Don’t Forget to make these changes.

** Change http://www.allbloggingtools.com/ by your site url and also the name
** Label color “000000″ change to the color you want.
** Hover color “333333″ change to the color you want.
** Background color “FFFFFF” Change to the color you want.
**size 12 Change to the text size suiting your blog’s sidebar links.
** Height(250) and width(300) Change to the height and width your sidebar suits.

4-Save the widget…that’s all go back to your home page and see the difference.
I expecting some comments about this blog and at last have a nice day..

Earn Money With Auto Surf Money

First Create Account on Auto Surf Money

This is Used To Adversting

Banners

Refferals

Then Earn Money

Happy Earninng

Friday, 17 May 2013

Earn Money with ADF.ly

For those who are new to Adf.ly, it is a url shortening service, you can earn money by sharing links. When ever somebody clicks on your Adf.ly link a 5 second ad will be displayed, if he/she views the ad you will earn money.

Join Adf.ly Now.

My Experience with Adf.ly:

I will tell you all things inside out where nobody else will tell you unless you sign up for an account at Adf.lysite and participate actively in their forum. Here I will cover all important points for you to get familiar with.

First of all it is most likely that anyone will join Adf.ly is to earn money. Let me tell you about earning withAdf.ly. If you join Adf.ly your first earnings start from $0.000000. Note, that there are 6 digits after the period. So you don’t even get $0.01 cent for 20 ad views while other advertising sites are paying at least$0.04 to $0.10 for full page ad view. If you are a beginner you have to work hard to get paid $5 which is minimum payout. But there are success stories, established people are doing great. They are earning good amount from Adf.ly.

Even if you have a site getting decent traffic, your website traffic stats may differ with Adf.ly stats. I mean Adf.ly stats will show you low page views when compared with website stats. The reasons for this are stated below.

The following activities by any user visiting your site will not give you any Adf.ly views.

1. It’s possible that your visitor doesn’t have cookies enabled. No cookies, no view.

2. If flash is disabled, this doesn’t count as well.

3. If your visitor didn’t view the ad for 5 seconds, then it won’t count.

4. Your visitor didn’t click the Adf.ly link. Copy paste methods in the url don’t count.

5. If people visiting your site are using addons like “NoScript” and “Ads Fight”, views will not count.

When you look on the Adf.ly home page they explicitly state that you can earn more than $4.00 / 1000 visitors to your links. But as per my experience you can hardly earn $1.00 / 1000 visitors. It all depends on the countries your views are coming from. See the Publisher Rates, the average cost per view.

Things you should never do with your Adf.ly Account:

Try Avoiding the following activities…

1. Never use Bots or any other program for sending fake traffic.

2. Never post your Adfly links on Adult sites/forums.

3. Never derive traffic to Adfly links from PTC(paid to click) sites.

4. Never put Adf.ly Website Entry script on PTC,Adult sites or on sites that get traffic from paid sources.

5. Never try to create more than one Account From the same Computer.

6. Never try to double shrink an Adfly link(For eg. shrinking first with q.qs domain and secondly with adfly one)

7. Never ask your friends or anybody else to click on your Adfly links.

8. Never link to illegal content.

9. Never use spam.

These were some of the Adfly Rules that you should obey. These Activities may result in account Ban.

How to make money with Adf.ly and Twitter:

This method is very popular on the Internet. So I am not going into too much detail. To get started you need 3 of these Twitter account, Twitter feed account and Adf.ly account.

First select a site in your favorite niche and copy their post feed url. Paste the post feed url in Twitter feed account, click on “Advanced Settings” button and go to “Shorten link through” in the drop down menu select “custom”. Now go to your Adf.ly account copy the “api key” and “uid” on the tools page. Which looks in this format.

http://api.adf.ly/api.php?key=############&uid=######&advert_type=int&domain=adf.ly&url=http://somewebsite.com

Now paste your key and uid in this link (replace the # with your key and uid)

http://api.adf.ly/api.php?key=###########&uid=######&domain=adf.ly&url=%@

Now copy this link and paste it in Twitter feed account where it says “Custom endpoint:”. Now when ever new posts are published on your favorite website that posts will be tweeted to your Twitter account with shortened Adf.ly url. @Lawlpopz implemented this method effectively, look at his Twitter account, urls are shortened with Adfly.

Get Started Happy earning

Thursday, 16 May 2013

Social Media Share Side Bar Widget

Vertical Social Media Sharing Buttons Widget For Blogger

logging becomes interesting when people share your content on different social media sites and other websites with friends. In order to share your content on social media sites by visitors; you need to add some beautiful and smashing social sharing widgets. If your widget is looking attractive and catches people's attention then your content might get shared by visitors. For this purpose, there has been a huge number of Blogger widgets and plugins by different designers. Today, I would like to share a floating social sharing widget with you which scrolls down automatically when visitors scroll down the page. You can see this widget on my blog. The same widget I'm sharing with you.

The Benefits of This Widget:
There are many advantages you can get by using this widget on your blog. The first benefit is that you can have all social sharing buttons in a single widget and also one can send your content to someone via email by using this widget. The second benefit is that this widget don't have loadable JavaScript or jQuery codes so it can easily be loaded by browser and also it scrolls down automatically and user can observe sharing your content somewhere, while visiting your blog.

How to Add Social Media Floating Widget to Blogger?
The process of adding this widget to your blog is simplest. You need just to follow below steps:

Complete The Following Steps:-

1. Open Blogger
2. Go to Layout
3. Add a Gadget
4. Add HTML/JavaScript
5. Copy the below code and Save

<div <!–sidebar floating share buttons code start–>

<style>
#pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#000000;padding:0 0 2px 0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>

<div id='pageshare' title="Share This With Your Friends">

<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>

<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>

<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>

<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>

<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>

<br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://topclassfun.blogspot.com/2013/01/vertical-social-media-sharing-buttons.html">[Get This Widget]</a><font></font></div></div>

<!–sidebar floating share buttons code end–></!–sidebar></!–sidebar>

6. Save Arrangement

Customization

The floating is set to left side of your blog, if you want set it for right side of your blog then simply change the bolded float:left property to float:right.

Wednesday, 15 May 2013

ADD Pop Out Social Sharing Sliding Widget For Website

HOW TO ADD POP OUT SOCIAL BOOKMARKING WIDGET WITH SMOOTH JQUERY HOVER EFFECT?

Step 1: Adding Jquery JavaScript Plugin (Ignore this step if your blog have already a Jquery Plugin)

1. Go to Blogger Dashboard > Design tab > Edit Html
2. Search for </head> tag
3. Add below line of code Before </head> tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

Step 2: Adding Widget Code

1. Now search for <head>
2. Paste this code just below it and save your template. Note: Google +1 button only works when you disable default share buttons in "Blog Posts" widget

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

Use below Widget Generator to Generate code & Add Directly to Blogger.

Step 3: Or Add Code manually by selecting code given below.

ADD This Code For Automatically

ENJOY :) SAY THANKS :)