Blogging Trainings

Add Floating Share Buttons Widget For Blogger Blogspot

This widget will allow your visitors to share your blog posts on social networks such as google+, facebook, twitter ...

The design is very attractive widget with animation from top to bottom and encourages readers to share your article easily by clicking on one of these buttons.
we spend now to install this widget

Go To Blogger > Design

Choose a HTML/JavaScript widget

Paste the following code inside it,

<style>

/*-------All Blogger Tools------------*/

#floatdiv {

position:absolute;

width:94px;

height:229px;

top:0;

left:0;

z-index:100

}

#mbtsidebar {

border:1px solid #ddd;

padding-left:5px;

position:relative;

height:220px;

width:55px;

margin:0 0 0 5px;

}

</style>

<div id="floatdiv">

<div id="mbtsidebar">

<table cellpadding="1px" cellspacing="0">

<tr>

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

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like>

</td>

</tr>

<tr>

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

<g:plusone size="Tall" expr:href="data:post.url">

</g:plusone></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="allbloggertool1">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

</td>

</tr>

<tr>

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

<p style=" font-size:10px; text-align:center; color:#ddd;"><a style="color:#ddd;" href="http://all-blogger-tools.blogspot.com/" target="_blank">Widgets</a></p>

</td>

</tr>

</table>

</div>

</div>

<script type="text/javascript">

// JavaScript Document



</script>

Replace allbloggertool1 with your Twitter username.

PS: If you have already added the Google +1 Button somewhere in your blog then you need to add this code Just above

</head>

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

Now you are done.

We have great collection of Best tricks and tutorials, Bloggingtrainings.blogpsot.com is a Blog Providing with Blogger widgets, help, blogger tips, blogger tricks, hacks, Blogger Gadgets,Plugins and Blogger resources with great skills and templates.practical SEO Tips and all things Blogging,is about Blog tricks & tips, Traffic generation, Backlinks, Search engine optimization, Web designing, E money, Social media, Facebook tricks,Blogging Discussion, Tips & Tricks,logging tips, tricks, how-tos, news, tools and resources, bloggingtrainings.blogspot presented in easy to understand tutorials.Keep visiting us if any links is not working or you want sme more help, then keep looging at bloggingtrainings.blogspot.com.or contact us 0323-7591466.

In this tutorial we will see how to add like and send buttons on your blogger blog.
This code combined the Like and send button into a single plugin, making it more easy to add both the buttons with a single code.

Go To Blogger > Design > Edit HTML

Click "Expand widgets templates box"

Search for <data:post.body/>

and now if you wish to add the plugin just below your post titles then add the giant code below just above <data:post.body/> or if you wish that the plugin may appear at the end of your posts then paste the following code just below <data:post.body/>

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="true" layout="button_count" width="450" show_faces="false" font=""></fb:like>

Save and you are done.

Freelancing is make money if you work for people online who want a certain job done.
the skill-set will be yours to input, but we can provide you with a list of the top platforms where you can find jobs. These are freelancing websites that happen to be some of the best. Now, every freelancing website will tell you it's the "number one" freelancing website, but don't you fall for that. Leave the job of picking the best such sites up to us.

1. Elance

elance is the best freelancing website without a doubt. It is a U.K based website that started in 1998. Not only is it the oldest and most popular, but is also the most highly paying website. Contractors are looking for their work to be done professionally, and they'll pay good money for it. No matter what sort of freelance work you're looking for, you'll most probably find it here. There are more than 1.5 million contractors registered with Elance! And they post more than 60k jobs per month!

So many job options, and Elance's reliability and surety of payment via various methods verily make it the best freelancing website in the world! Elance does not charge you anything for signing up. But there is a paid package that unlocks many privileges for you. But my advice is, get a free membership, and work your way into the premium one.

2. oDesk

oDesk is number two only because it isn't just as well known as Elance. But I don't think that's fair to the site. Quality-wise, it is one of the best websites. You can look for any sort of work at oDesk. I personally have some writing job experience at oDesk, and it was amazing. I was a beginner, and I didn't know my way around. oDesk made it so easy for me. And I got picked for the job so easily that I was amazed.

oDesk has all the features that Elance has. But there's got to be a reason why it isn't number one itself, right? Well, there is one. oDesk is slightly lower paid than Elance. Average rates for the same kind of jobs are lower on oDesk than on Elance, but still higher than many other websites. It's a slight difference though. Apart from that, oDesk is great. Indeed a must try for beginners.

3. Freelancer

like Elance, Freelancer is also one of the oldest freelancing platforms. It is very popular, and has more than 3.6 million users! And it has a total job count of more than 1.6 million! It is a good paying website, with most of the Elance and oDesk features. It has some of the best payment options, which is useful for people who don't have PayPal access in their country.

4. ScriptLance

Now here's an underdog that's made its way into the top 5. And rightly so! Compared to Elance, it's a very small platform. But it is dedicated to the Programming and IT field. So if you are looking for coding or other computer-related jobs, then this might be the thing for you! The fact that this is a small website makes it easier for you to get a job!ScriptLance charge only a 5% on all your earnings, which is the lowest by far! Plus, there's no sign up or registration fee. Better yet, it has an affiliate program that gives you bonuses whenever one of your friends join the site through you.

5. Fiverr

Fiverr is a different sort of Freelancing website. For one, it's the workers who post jobs they are willing to do, and not the hirers posting what they want done. For another, jobs can only cost $5, one dollar from which goes to Fiverr.. Be that as it may, Fiverr is a very unique website, probably one of its kind. It is a micro-freelancing site, which has mini-jobs called gigs. Workers post gigs they are willing to do. Contractors then order that gig. It is best for getting your freelancing career started. Not only will you find professional jobs here, you will also find some of the most ridiculous jobs and skids you ever saw in your life! It's a must try website, especially for beginners. So get ready to be amazed by Fiverr!

6. Guru

I think the name speaks for itself here. Guru really is a freelancing platform guru. It is also one of the most popular freelancing websites like Elance or oDesk. And it has many similar features. The only downside though, is that if you have a free account with them, then you get a very limited number of bids you can use per month. Kind of a mood killer for such a big website. But overall, it is a very good website. You can always try out other sites while working on this one. So sign up now and utilize your bids!

7. vWorker

vWorker is another very reputable freelancing website. It is best known for its highly scrutinized screening process, which ensures that you only get jobs relevant to your own skills. This saves a lot of time and effort, and if you want to hire, it will provide you with highly relevant people who can do the job well. A must try for all freelancers.

8. 99 Designs

This is a design-oriented freelancing website. Contractors post design contests of various types, such as logo designing, page designing etc. Freelancers need to submit their designs. The best design wins the contest, and bags a lot of money. This is sort of time consuming, and a bit risky especially for new freelancers. But if you are a good artist, and if you have the potential, then you can walk off with lots of money in your pocket. Interested?

9. GetACoder

As the name suggests, this website is related to programming, web development, and other IT related jobs. This is one of the oldest such websites. It has thousands of active contractors. So if you are into programming and such stuff, then this might be the thing for you. It pays really well too.

10. crowdSPRING

This website is very similar to 99 Designs. It works in a similar way too. But it pays more! Only problem though, is it is somewhat hard to get selected because there is a lot of competition. Still, it made it to out top 10 list.

Well, there goes out list of the top 10 freelancing websites! If you've got questions regarding freelancing, then feel free to ask in the comments section below. It's good to see you guys again :). Have a good day :). Oh, and do share your freelancing experiences with us. If you quit your job for freelancing, did you find freelancing worth the risk? And if you know of any better freelancing website, then do tell us about it. Cheers!

random posts Random Posts Widget For Blogger

If you’re using Blogger (blogspot), you can see that there is no random posts widget for Blogger blogs. So I make this widget for this purpose. The widget will show a number of posts (which can be modified) in a random order. This is a good way for Blogger users to suggest more content to visitors.

To add random posts widget to Blogger, go to “Dashboard” → “Layout”, click on “Add a gatget” and select type HTML/Javascript. Then paste the following code into the widget content:


<div id="random-posts"></div>
<script type='text/javascript'>
function getRandomPosts(json) {
    var maxEntries = 10;
    var numPosts = json.feed.openSearch$totalResults.$t;
    var indexPosts = new Array();
    for (var i = 0; i < numPosts; ++i) {
        indexPosts[i] = i;
    }
    indexPosts.sort(function() {return 0.5 - Math.random()});
    if (maxEntries > numPosts) {
        maxEntries = numPosts;
    }
    var container = document.getElementById('random-posts');
    var ul = document.createElement('ul');
    for (i = 0; i < maxEntries; ++i) {
        var entry = json.feed.entry[indexPosts[i]];
        var li = document.createElement('li');
        var a = document.createElement('a');
        a.title = entry.title.$t;
        for (var j = 0; j < entry.link.length; ++j) {
            if (entry.link[j].rel == 'alternate') {
                a.href = entry.link[j].href;
                break;
            }
        }
        a.appendChild(document.createTextNode(entry.title.$t));
        li.appendChild(a);
        ul.appendChild(li);
    }
    container.appendChild(ul);
}
</script>
<script src='/feeds/posts/summary?alt=json-in-script&callback=getRandomPosts&max-results=999999' type='text/javascript'></script>

To change the number of random posts will be shown, change the value of maxEntries in the 4th line (the default value is 10).


var maxEntries = 10;

After that, save the widget and refresh your blog, you’ll see the random posts right in your blog.

syntax highlighter Howto Install SyntaxHighligher In Blogger

SyntaxHighlighter helps a developer/coder to post code snippets online with ease and have it look pretty. SyntaxHighlighter is developed in Javascript by Alex Gorbatchev. SyntaxHighlighter is the most popular script for syntax highlighting and widely used by many blogs, websites. It has many wonderful features like: view source code in plain text, copy to clipboard, valid XHTML, … SyntaxHighlighter supports many languages and has bunch of themes.

Install SyntaxHighlighter In Blogger

Installing SyntaxHighlighter In Blogger is easy, just open your template and paste the following code right before the close tag </head>:


<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

SyntaxHighlighter supports many languages, each language has its own javascript file. To install syntax highlighting for more languages, you can view list of supported languages, get the javascript’s file name and include it with the following syntax:


<script src="http://alexgorbatchev.com/pub/sh/current/scripts/LANGUAGE_FILE_NAME.js" type="text/javascript"></script>

There’re many themes for SyntaxHighlighter, too. To change theme, go to the homepage and get the file name for theme and change this line:


<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>

into:


<link href="http://alexgorbatchev.com/pub/sh/current/styles/THEME_FILE_NAME" rel="stylesheet" type="text/css"></link>

Howto Use SyntaxHighlighter

To highlight code, just wrap it into a pre tag with the following syntax:


<pre class="brush: js">
// Your code here
</pre>

Notice the class="brush: js". It defines the language for syntax highlighting, in this situation: JS – Javascript. To know more about brushes, you can see a list of them on the homepage.

The second important note is the code inside pre tag must be escaped (< and > must be changed into < and >). There’re many online tools for blogger to do that, one of them is Code Converter.

Using pre tag is the traditional way. Another way to highlight code is using script tag:


<script type="syntaxhighlighter" class="brush: html"><![CDATA[
// Your code here
]]></script>

The benefit of this method is ability to place virtually anything inside the CDATA without having to escape anything, so this allows for a straight ‘cut and paste’ experience from your favorite text editor.

If you need more information about SyntaxHighlighter or more configuration, please go to thehomepage. You can see SyntaxHighlighter in action here, at Deluxe Blog Tips. It’s really pretty and I’m feel good with it.

Auto Readmore Script Improved for blogger

The auto readmore script is first created by AnhVo at vietwebguide.com (the website is not available now). Based on this idea, I create a new auto readmore script with more options:

Add default thumbnail image when posts don’t have any images.
Option to turn off auto readmore for some first posts.
Option to turn on/off auto readmore for homepage and label page.

How to install

Go to Dashboard → Layout → Edit HTML, check Expand Widget Templates. Find </head> and insert this code before:


<script type="text/javascript">
var summaryConf = {
    showImage: true,
    imgFloat: 'left',
    imgWidth: 120,
    imgHeight: 90,
    defaultThumb: 'http://rilwis.googlecode.com/svn/trunk/hontap/images/no-thumb.jpg',
    words: 65,
    wordsNoImg: 80,
    skip: 0,
    showHome: true,
    showLabel: true
};
</script>
<script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/summary.min.js"></script>

After that, find this line in your template:


<data:post.body/>

Replace with:


<span expr:id='data:post.id'><data:post.body/></span>
 
<b:if cond='data:blog.pageType == "index"'>
    <script type='text/javascript'>summary("<data:post.id/>")</script>
<b:else/>
    <b:if cond='data:blog.pageType == "archive"'>
        <script type='text/javascript'>summary("<data:post.id/>")</script>
    </b:if>
</b:if>

That’s all! You can refresh your blog and see how it works.

How to change options

The options are very easy to change. It’s declared in the first part of script above. These are their meanings:

showImage: do you want to show thumbnail? If yes, set it true, if no, set it false.

imgFloat: there are 3 values of this option: 'left' – float thumbnail to the left, 'right' – float thumbnail to the right and 'no' – no thumbnail float. Note the quotes around values.

imgWidth and imgHeight: thumbnail size.

defaultThumb: default thumbnail URL, used when posts don’t have any images.

words và wordsNoImg: number of words shown in summary when have thumnail and no thumbnail.

skip: skip some first posts, don’t apply auto readmore for them. If this option is set to 0, all posts are applied auto readmore.

showHome and showLabel: allow or not auto readmore for homepage and label page. true is allowed, false is not.

Adjust these options to fit your blog and enjoy!

Blogging Trainings

Add Floating Share Buttons Widget For Blogger Blogspot

New Like and Send Buttons of facbook for blogger

Best Freelancing Website To Make Money From Home

1. Elance

2. oDesk

3. Freelancer

4. ScriptLance

5. Fiverr

6. Guru

7. vWorker

8. 99 Designs

9. GetACoder

10. crowdSPRING

Superb Advanced Blogger Template

Random Posts Widget For Blogger free

Install Syntax Highligher In Blogger

Install SyntaxHighlighter In Blogger

Howto Use SyntaxHighlighter

Auto Readmore Script Improved for blogger

How to install

How to change options

Advertisement

Labels

Popular Posts

Books Categories

Ad

visitors

Template Information

Test Footer 2

Template Information