Top 5 Paid to Review Websites

Do you know, what is Paid to Review (PTR). PTR is a kind of making money online. The rule is very easy, you only write an article based on the advertiser order, then the advertiser will measure your article and you will get money. Easy right? So, I think, Paid to Review is the best way to make money online. How not? Only by wrote on our blog that based advertisers order, we can get $5-$500 per post!

Usually PTR websites use PayPal. Why? Because, you can transfer your money to local bank easily. Actually, there are many PTR websites with different fee. So, I will share to you about, top 5 paid to review websites.

• www.reviewme.com
• www.blogsvertise.com
• www.sponsoredreviews.com
• www.buyblogreviews.com
• www.lodlaunch.com

OK, that' all friends! Just grab your keyboard and earn much money!

How to Add Contents Slider

Usually, on some templates we found a contents slider. Sure, that widget contains some blog posts that added some jQuery. Many bloggers said, that contents slider caused blog to be heavy. But, some bloggers also said the contents slider makes blog become beautiful and elegant. So, it's up to you to try contents slider or not. Now, if you want to know how to add contents slider for your blog, just follow the steps below. See the demo HERE.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the jQuery below, and paste above </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script>$(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    });</script>

4. Then add the CSS code below, and paste above ]]></b:skin>

#featured{
    width:400px;
    padding-right:250px;
    position:relative;
    height:250px;
    background:#fff;
    border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
    position:absolute;
    top:0; left:400px;
    list-style:none;
    padding:0; margin:0;
    width:250px;
}
#featured ul.ui-tabs-nav li{
    padding:1px 0; padding-left:13px;
    font-size:12px;
    color:#666;
}
#featured ul.ui-tabs-nav li span{
    font-size:11px; font-family:Verdana;
    line-height:18px;
}
#featured .ui-tabs-panel{
    width:400px; height:250px;
    background:#999; position:relative;
        overflow:hidden;
}
#featured .ui-tabs-hide{
    display:none;
}
#featured li.ui-tabs-nav-item a{/*On Hover Style*/
    display:block;
    height:60px;
    color:#333;  background:#fff;
    line-height:20px;
    outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
    background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
    background:url('images/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
    background:#ccc;
}
#featured ul.ui-tabs-nav li img{
    float:left; margin:2px 5px;
    background:#fff;
    padding:2px;
    border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
    position:absolute;
    top:180px; left:0;
    height:70px; width: 400px;
    background: url('images/transparent-bg.png');
}
#featured .info h2{
    font-size:18px; font-family:Georgia, serif;
    color:#fff; padding:5px; margin:0;
    overflow:hidden;
}
#featured .info p{
    margin:0 5px;
    font-family:Verdana; font-size:11px;
    line-height:15px; color:#f0f0f0;
}
#featured .info a{
    text-decoration:none;
    color:#fff;
}
#featured .info a:hover{
  text-decoration:underline;
}

Customize :
The red text can replace with selected image
The blue text can replace with transparent image
5. Just click Save Template
    After that, go to Page Elements --> Add Gadget. Choose "HTML/JavaScript"
    Try to place this contents slider under your blog title or tabs.
6. Copy the code below, and paste on it

<div id="featured" >
    <ul class="ui-tabs-nav">
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
    </ul>
    <!-- First Content -->
    <div id="fragment-1" class="ui-tabs-panel" style="">
        <img src="images/image1.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
        </div>
    </div>
    <!-- Second Content -->
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="images/image2.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
        <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
        </div>
    </div>
    <!-- Third Content -->
    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="images/image3.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >35 Amazing Logo Designs</a></h2>
        <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
        </div>
    </div>
    <!-- Fourth Content -->
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="images/image4.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
        <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
        </div>
    </div>
</div>

Customize :
The red text are the title of blog posts.
The blue text are the description or snippet of the blog posts
The green text are the image of the post
The pink text are the posts link (address)
7. Click Save

How to Add "Reply" in Blogger Comment Box

Add "Reply" in blogger comment box function to facilitate the reply for every comment on our blog. So, between the visitors and the author can discuss each other. Based on the title, this trick only can do in blogger comment box. So, if you've modified blogger comment box, you, can't do this trick. Well, to shorten the time, just follow how to add "Reply" in blogger comment box.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Check in the "Expand Widget Templates" box
4. Find this code

<dd class='comment-footer'>

But, if you didn't find that code, try to find this code

<b:include data='comment' name='commentDeleteIcon'/>

5. Then, copy the code below, and paste under one of the code above.

<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=Your Blog ID&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=
%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,
height=450&quot;); return false;'><img alt='Reply To This Comment' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-5qHcg66wRyoTR4khkQTHvAq8MN1dRGHOahaXaP9n6GOtutdJ6Qztp4rirwnLVwidvQUHNf6OugWFDJcsE7ieZiSfEZftmwmg8eb1O8F41s0OY16v8QHQms8D9AZ-GyH9iLRkT2l3f6I/s1600/reply.gif'/></a>

Customize:
Your Blog ID can replace with your blog ID, the location of your ID is in the address bar
http://4.bp.blogspot.com/_mWrR0gomZ0/TIIfWolwWgI/AAAAAAAAARE/nwiHJLeqSVw/
s1600/reply.gif is the "Reply" button, you can change with your own.
6. Finish! Just click Save Template

Blogger Release New Version Interface ?

Hi, Bloggers? Do you know, Blogger release new version interface ? Actually some steps had begun little by little since 2010.  Do you not realize it? Start from Template Designer, Real-time Stats, Spam Filter. And now in 2011, Blogger will make bigger changes. They will release the new version interface . Let's watch the video below.



Blogger said in the official blog.

The new design is not only cleaner and more modern, but it also uses Google Web Toolkit, delivering the latest in web technology.

So, we're really hope, blogger can release the stylish but with more less time loading too. If, you want to know some changes. Let's see the screenshot below.

Current Post Editor

New Version

Current Dashboard

New Version

New Blogger Navbar

So, we just wait. What blogger team do for the new version interface.

How To Create Automatic Table of Contents

Now we will discuss about How To Create Automatic Table of Contents. Usually, if we have many blog posts, we will hard to set all of the blog posts. Beside that, some SEO practitioners said, table of contents (Sitemap) can accelerate the process of indexing the new article. This table of contents is sorted by the labels. So, it looks interesting. Now, if you want to know how to create automatic table of contents, just follow the steps below.

1. Log in to your blogger account
2. Go to Posting --> New Post
3. Then click "Edit HTML"
4. Copy the code below, and paste on it

<script src="https://docs.google.com/uc?id=0BwXqkC35im9QMzEyZWMxMzMtOGFjOC00MjQ1LWJmYzEtZDBjYTc2OTkxYTZj&
export=download&hl=en">
</script>
<script src="http://full-tricks.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

Customize :
full-tricks.blogspot.com is my blog address, so replace with your own blog address

5. Just click Publish Post

How to Remove Quick Edit Icon

Quick Edit in Blogger is symbolized by plier and screwdriver. Maybe for some bloggers, Quick Edit are common. But, some also consider this a disturbing thing. Actually, Quick Edit will not appear, if we are not currently logged on blogger account. By the way, Can we remove Quick Edit Icon? Sure, It's easy. Just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above ]]></b:skin>

.quickedit{
    display:none;
    }

4. Just click  Save Template , Easy right?

How to Change Blog Title with Post Title

Hello, friends! Do you ever think about how to change blog title with post title? If you have, you're lucky today. Because we will discuss about How to Change Blog Title with Post Title. Many bloggers said, it can raise our blog SEO. For the details, you can read the explanation below.

Now you can check this, for example here is a blog with Blog Title as "Comutricks" and a blog Post Title "How to Boost Download Speed"
By Default, the Post title appears like this:

Comutricks : How to Boost Download Speed

But, after you followed this trick, the title will look like this

How to Boost Download Speed | Comutricks  

The second title looks better as the subject matter of the blog post. This is also good for search engine optimization. So, if you want to know how to change blog title with post title, just follow the steps below.

1. Log in to your blogger acccount
2. Go to Design --> Edit HTML
3. Find this code

<title><data:blog.title/></title>

What? If you didn't find that code, try to find this code

<title><data:blog.pageTitle/></title>

4. Then, replace one of the code above, with code below.

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title> </b:if>

5. Finish! Just click Save Template

Text Hover Effect with Shadow

We know what is link hover. So, text hover is almost same with link hover. The difference only, if link hover has a web address, but if text hover doesn't have a web address. Actually the trick of Text Hover Effect with Shadow is very simple. Try to put your mouse on the text below.

Full Blog Tricks provides many blogger tricks, blogger hacks, and blogger widgets. We also give you many SEO tips to increase your blog performance in Search Engine.

To make this text hover, you just need the script below.

<style type="text/css">
#rachmath:hover .rachma, #rachmath.hover_effect .rachma {text-shadow: 0 0 10px #000}
</style>
<div id="rachmath">
<div class="rachma" id="rachmath">
WRITE YOUR TEXT HERE
</div>
</div>

Customize :
#000 is the color of the shadow, you can change the color.
WRITE YOUR TEXT HERE is the place where you can put your text

Finish! Simple right?

How to Add Labels with Thumbnail

Finally, I've found a great trick for share to you. That's How to Add Labels with Thumbnail. With this trick, you can display some your blog posts based by the label on the homepage. So, your visitors will see many posts that neatly aranged in one page. Let's see the example of labels with thumbnail.

Now, if you want to know how to add labels with thumbnail, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Then, check in the "Expand Widget Templates" box
4. Copy the code below, and paste above ]]></b:skin>

/*** Featured Categories ***/
     img.label_thumb{
        float:left;
padding:5px;
border:1px solid #8f8f8f;
background:#D2D0D0;
margin-right:10px;
height:55px;
width:55px;
}
     img.label_thumb:hover{
background:#f7f6f6;
}
     .label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
adding: 0;
}
     ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:10px;
}
    .label_with_thumbs a {}
    .label_with_thumbs strong {}

5. After that, copy the code below and paste above </head>

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrfAtGqRQyI5Zh58Kq_lWIQStJHDpWqbVWWoG4L4EWfTLduSm7pKra_9_m1agrrNUke8XlcG0Kjxjw4DcFhmY8g-Yvf5YZ_knWgQFY8UxrtqRMJnrhP_eb5C7Vz2tWkcoe5uwC_Vc_DdGd/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

6. OK, just click Save Template

How to Add Related Posts with Thumbnail

Hi friends! . Previously, I've posted about How To Make Related Article In Blog. Now, I will post about How to Add Related Posts with Thumbnail. If you don't know what is related posts with thumbnail, you can see under Full Blog Tricks posts. There are some posts title with thumbnail (reduced-size versions of pictures). The function of related posts is to increase our blog pageviews. Interested? Just follow the steps below.

1. Log in to your blogger account.
2. Go to Design --> Edit HTML
3. Check in the "Expand Widget Templates" box
4. Copy the code below, and paste above </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

5.  Then find this code

<div class='post-footer-line post-footer-line-1'>

But, if you didn't find that code, try to find the code below

<p class='post-footer-line post-footer-line-1'>

6. After that copy the code below, and paste under one of the code above

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Customize :
var maxresults=5; is the maximum result of the related posts that shown in every post
var relatedpoststitle="Related Posts"; is the title of the related posts

7. If you've finished with your settings, just click Save Template

How to Add Recent Posts with Slide Show

Hi, friends! Previously, I've posted about How to Make Headline New In Blog, Now I will posted about How to Add Recent Posts with Slide Show. This trick will show some recent posts of your blog with cool and stylish slide show. You can view the demo HERE. So, do you want to add recent posts with slide show into your blog? OK, I will share the trick. Just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Choose HTML/Java Script
4. Copy the code below, and paste on it

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='JavaScript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://full-tricks.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

=> Change full-tricks.blogspot.com with your blog address
5. Then, just click Save

Easy Way to Get Free 25 Backlinks Every Day!

PageRank is the most important thing of SEO. PR can be built with backlinks. But, maybe hard to get many unique backlinks. So, in this post, I will share to you about Easy Way to Get Free 25 Backlinks Every Day! Maybe, it's  impossible. But, it's real. You can get many backlinks in Social Monkee. So, join with Social Monkee now! Just click the picture below, and just one step to get many backlinks!


Social Monkee promise can submit to social bookmarking sites automatically with easily. Firstly, you have to sign up. It's very easy, just fill the form on the home page.

Then if you've finished, click on the "Submit Form", and click verification link in your email. And your account actived.

How to Get Free Backlinks?

To get free backlinks, there are 2 methods. The first is using Mozilla Firefox Add-ons. And the second method is manually in your dashboard account.

Now, we will learn get free backlinks manually in the dashboard account. Follow the steps below.

1. Log in to your Social Monkee account
2. Click on the "Download Firefox Plugin / Submit to sites"
3. Then fill the form with the article that you want to submit

URL : Fill with the article address that you want to submit, for example :
http://full-tricks.blogspot.com/2011/03/how-to-add-preloader-status-in-blog.html
Title 1 : Fill with the article title, for example : How to Add Preloader Status In Blog
Title 2 : Fill with title variations, for example : Add Preloader Status In Blog
Title 3 : Fill with other title variations, for example : How to Add Preloader Status
Description 1 : Fill with snippet of the article
Description 2 : Fill with snippet variations of the article
Description 3 : Fill with other snippet variations of the article
Tags 1 : Fill with the article tags, for example : preloader status, blogger tricks, blogger hacks
Tags 2 : Fill with other the article tags, for example : blogspot tricks, blogspot hacks, preloader trick
Tags 3 : Fill with other the article tags varitations, for example : blog tricks, blog hacks, preloader hacks
Category : Choose the article category

4. If you finish with the form, click "Submit"

Check the reports

If you want to know, your article link has been submitted, you can click "Reports" tab. Then at the bottom, see the table of your links which has been submitted. Click "View Report"

Then, you can see the list of links for your article. For example, How to Add Preloader Status In Blog

Great friend! You have submitted to 25 DoFollow Social Bookmarking! So, it's easy way to get free 25 backlinks every day!

How to Make Three Column Footer In Blog

Maybe, you ever see three colum footer in blog. With this style, you can add more widgets. Usually this column filled with followers widget (Google Friend Connect), recent posts, recent comments, or Ads. But you can fill with other widgets. Before you make three column footer in blog, I recommend you to backup your template first, because we will make some changes. Now, if you want to know how to make three column footer in blog, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above ]]></b:skin>

/* -----   LOWER SECTION   ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#333434;
}
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;
}
#lowerbar-wrapper {
     border:1px solid #DEDEDE;
       background:#fff;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word;
       overflow: hidden;
}
       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
      margin: 0px 0px 10px 0px;
       padding: 3px 0px 3px 0px;
       text-align: left;
       color:#0084ce;
        text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;
       border-bottom:3px solid #0084ce;
}
.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}
.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px dotted #ccc;
}

=> Change the background color of this widget
=> Adjust this width value in accordance with the width of your blog.
=> That are the background colour and width of the three columns where the widgets are added.
=> Change the color of the title
=> Change the font size and family
=> Change the thickness, style and colour of the border that appears at the bottom of the title
=> Change the size, style and colour of the border that appears below links.
4. Then copy the code below, and paste above </body>

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

5. Save your template now. Then check in the Design --> Page Elements

How to Add Preloader Status in Blog

Previously, I've posted about How To Add Page Loading Status Image In Blog. But, many people said "It doesn't work." or "The image cannot stop". So, I will post the almost the same trick, that's How to Add Preloader Status in Blog. It's very attractive I think. Why? Because, when you open the blog, you can find a loading status with the animation. Still curious? View the demo HERE. And, if you want to know How to Add Preloader Status in Blog, you can follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above </head>

<script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'/>
<script src='http://blogger-loader.googlecode.com/files/queryLoaderpre.js' type='text/javascript'/>

4. Still on the same page, find </body> and add the code below above </body>

<script>
    QueryLoader.selectorPreload = &quot;body&quot;;
    QueryLoader.init();
</script>

5. And the last, find ]]></b:skin>, and copy the code below, then paste above ]]></b:skin>

.QOverlay {
    background-color: #000000;
    z-index: 9999;
}

.QLoader {
    background-color: #CCCCCC;
    height: 1px;
}

.QAmt {
    color:#FF530D;
    font-size:50px;
    font-weight:bold;
    line-height:50px;
    height:50px;
    width:100px;
    margin:-60px 0 0 -50px;
}

Customize :
=> #000000 is the background color, you can change the code in here
=> #CCCCCC is the loading bar color
=> #FF530D is the loading percentage (number) font color
6. Now, you can click  Save Template

How to Add Auto Refresh In Blog

The function of this trick is to refresh our blog every some minutes. What for? Because, if we refresh the blog, we can see the blog update. Now, if you want to know how to add auto refresh in blog, you can follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste under </head>

<meta content='300' http-equiv='refresh'/>

=> 300 means, the blog will refresh every 300 seconds

4. Save it now.

How to Remove Blogger Navbar

Usually, if we're using original blogger template, our blog will added blogger navbar automatically. But, many bloggers instead want to remove blogger navbar. The reason are it looks bad or not really needed. So, they want to remove blogger navbar. But, how to remove blogger navbar. You can follow the easy steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above ]]></b:skin>

/* CSS to hide navigation bar */

#navbar {
height:10px;
visibility:hidden;
display:none;
}

4. Save your template.

NOTE : This trick only a knowledge! Because if you want to remove blogger navbar, that's break the blogger TOS (Terms of Service)

How to Add Horizontal Menu for Blogger

Previously, I've posted about How To Make Vertical Navigations Menu With CSS, now I will posted about How to Add Horizontal Menu for Blogger. Actually the steps are same, the difference only in style. This horizontal menu is very attractive with fresh CSS design. I give you 10 choice, so you can choose your horizontal menu. Before I will gve you the code, I will tell you the steps.

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Then, choose HTML/Java Script
4. Copy the code under the horizontal menu picture and paste on it. If you want to change the links, you can edit the code like this

<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>

for example :

<li><a href="http://full-tricks.blogspot.com/"><span>Home</span></a></li>

5. Save now. Below, are example of horizontal menu for blogger :

<style> #tabsI { float:left; width:100%; background:#EFF4FA; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #DD740B; } #tabsI ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li { display:inline; margin:0; padding:0; } #tabsI a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA6_eDUD1SPBA-hNWR-o-TPQAYooyYeJT8u3JlCq4fMwbL4n2naJJJ2Eu2x9zplFzLxKojYfBRNfKL3Ah9JfkuwXzpAe-f7eOpHLtgSgh4xL6F81TqDy7DnIDUWwg7vFMreo6BrkrKATE/s1600/tableftI.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsI a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje8PzxHGogeL9HvCVAT_G2jDgbGzEpVqh-O3i4DpiPnx2mHszMa-z38CPSpjoIm4bNTebfXXdCgn51dHHTX9pErni0KI5Dri2EP_jkt-89U9eHPb9-PHsXueKlj56fdoLJNzz8jGrl6PM/s1600/tabrightI.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; } #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span { background-position:100% -42px; } </style> <div id="tabsI"><ul><li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul></div>

<style> #tabsF { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabsF ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li { display:inline; margin:0; padding:0; } #tabsF a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix1_-wW_cyHwnUNXc5-O5usXlhSMSIDeDP3kB4oPemmc1Mn8VciNHD6MC2CW9QAEN9qSqfxrEZ31SyAzKrRI-IlwpTcyYgQJgR5C1b3WQb53mu6PSYNPoaThxEe8bdqRcgIhUbO0-a3jM/s1600/tableftF.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsF a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHBkRZKKi7zyTD7uWUpAFetWZ4lQXXEgzBz_pFMiGv9xKGVC-BEHZzJOCba6r46eY5sEvL8Wn7YI9PKz5xwQzPsHOdPcXFepP8qWx0kGGeUHLyxKcWrFYt5k_i9DLy_WGbr5R3iqo9Wq0/s1600/tabrightF.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsF a span {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; } #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span { background-position:100% -42px; } </style> <div id="tabsF"><ul><li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul></div>

<style> #tabs6 img { border: none; } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabs6 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs6 li { display:inline; margin:0; padding:0; } #tabs6 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggtnmzcarSRLIfRQ9OnoxbEinkO0co3na8bpRxMJnoAXgzLZXATPTE93GqpIplILks5zrg9nSaIrfTOOmAmzmCEsZPa62rXSxKzT5PlgjNlCyYvkb91zwFB5QzRitjNKwS1NN8OEAzlIE/s1600/tableft6.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs6 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHn1RbeIvE7yKpI_7hnnKOEqEZAKYOGn4-XQdwF7GGzA9eWhupfxKBPCK8X3rKY_2BY2s0QGryecCnl_-boQ7l0Yh5OwaB9xpg96dudaqLh2_aTq6ulOnijUv8gN8jEpvml0yw1zemNac/s1600/tabright6.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs6 a span {float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; } #tabs6 #current a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; } </style> <div id="tabs6"><ul><li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul></div>

<style> #navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } </style> <div id="navcontainer"><ul id="navlist"><li><a href="#"><span>Liddddnk 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Linddddkdd 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Linddddk 7</span></a></li> </ul></div>

<style> #tabsJ { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #24618E; } #tabsJ ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsJ li { display:inline; margin:0; padding:0; } #tabsJ a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9RBYgjxqlrY5nFHzUIEN9-Nn2MlBh33-ksnHsJQMwRtfGPFIY73P8360YgH5yNcoEfEaA-A8ydYs16CmKVJTB3rb5YQcp1JvU6hWsesEiwEZ6GJbk3DcjOVCcieT7IYk10In-mt2v9us/s1600/tableftJ.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsJ a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw7Txc34n17VgXfr74yEVGZIU5uMwBfDiVxtc-Oowy-NT2_FOZkOLHTo2rpmqRKEPOIikMKo5qeVqCjzbx7pjGXxMvhE5MmrCUC2Ba0kJXFnxky2lnYy-TghBgdfmg_fkzqM8f3mfibf8/s1600/tabrightJ.png) no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsJ a span {float:none;} /* End IE5-Mac hack */ #tabsJ a:hover span { color:#FFF; } #tabsJ a:hover { background-position:0% -42px; } #tabsJ a:hover span { background-position:100% -42px; } </style> <div id="tabsJ"><ul><li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul></div>

<style> #tabs4 img { border: none; } #tabs4 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6B78A9; } #tabs4 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs4 li { display:inline; margin:0; padding:0; } #tabs4 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh20J4-6xGsLnn1BKayV9C7vH0SAEhm5l_rNkhmt5qWPyJhPU-3dRGxTq9Tq8YFZ81oXniTq-qia9sbRB5KSOqI2wI891wAwmoxWz35YDvXEeezMLRRHx64sqsbycvpQ6DGrzgFQhPL9L8/s1600/tableft4.gif) no-repeat left top; margin:0; padding:0 0 0 7px; text-decoration:none; } #tabs4 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjueLStRTaqqv_Mx-Q9Wzn5J-FelBn5JE8tMztSjRHhcHrAjuzdp_-Slqf21mrBytru6TMcS8KPvvFoIM0mNr8nGpvptgzj4xB4bAkX9IHbopgPF3VlburB0bshhyht3eZ2l53UOs_AMk/s1600/tabright4.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#6B78A9; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs4 a span {float:none;} /* End IE5-Mac hack */ #tabs4 a:hover span { color:#6B78A9; } #tabs4 a:hover { background-position:0% -42px; } #tabs4 a:hover span { background-position:100% -42px; } #tabs4 #current a { background-position:0% -42px; } #tabs4 #current a span { background-position:100% -42px; } </style> <div id="tabs4"><ul><li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul></div>

<style> .container { width: 500px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpAT0JHHghwrcyUcZ-8N0_Qh0GlRNL46Fshz-7vXE51LP5k_95gk1XV3mR2IN-Uu4jJVq-LfiM-Ub5FJKFXUNAKL6KhT7oudP_22H7QhT1xVyZpw-NrWL8apnxggNLOWz4LOorpJ2wZRc/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <div class="container"><ul id="nav"><li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul></div>

<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style> <div id="navcontainer"><ul id="navlist"><li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul></div>

<style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjnv7qgdNgbBxTN3r_DV3Z-JfIHamD2l6-9hfpry8xf20-wiSMckaziB4zpxr_mpeq8w_TZPuaWsp5tMufdePNKgwUthXVgT2vEdXg4TzgPeIndrknk7ODHyd7DfC9g24_PNigSGVFImY/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT7uAKU66HWTaHOSt3yIS2tWca-DyCbuNKuvf4NM9bGIFruFdUls-7_6XCqfUWUUshqGzwsDEqfEGOZ9VVV2k2d52ltcYfj5GrPgP0FdcyBm3QqE6qNtcEzQ1hSftxylkW4IWbri44rNg/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id="tabsE"><ul><li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul></div>

<style> #tabsD { float:left; width:100%; background:#FCF3F8; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #F4B7D6; } #tabsD ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsD li { display:inline; margin:0; padding:0; } #tabsD a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUAWIINcD1OhCv-L0HRGIKhoe3_iv8gJsgub41qM96Q8vPoMJiXS6thVLkyuxKeUdXFojy367YkjG5QP9AdxYvxdYwLln3jC436u5G8LnpCgGfDyE205cPiVWy2ZWPDaGCObQHfmmBdfo/s1600/tableftD.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsD a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgoyxUtycFcNZD7vvwEtdhAGSWXfKx7Z9N9UBfkhIoLBMaoHu9WYUiSbBzU3j0hyphenhyphenWTTQHEI-KWI-IhTFKrBDKys9TMHj7UoYU6EiEa34f7Xhvu46xQ6mfE62Cr8yYPu_PmTBeQlQpDa_0/s1600/tabrightD.png) no-repeat right top; padding:5px 15px 4px 6px; color:#C7377D; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsD a span {float:none;} /* End IE5-Mac hack */ #tabsD a:hover span { color:#C7377D; } #tabsD a:hover { background-position:0% -42px; } #tabsD a:hover span { background-position:100% -42px; } </style> <div id="tabsD"><ul><li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul></div>

OK, that's all friend. Hopefully useful... ^_^

Show The Total of Followers In RSS, Twitter, and Facebook

This widget is very useful. The function of this widget is to show the total of followers in RSS, Twitter, and Facebook. This widget is very simple. Even, this widget doesn't use Java Script. Just use CSS and HTML. But, if you're using this widget, You've to update this widget manually. So, you have to be diligent to update the total of followers in RSS, Twitter, and Facebook. So, if you want to show the total of followers in RSS, Twitter, and Facebook in your blog, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Choose HTML/Java Script
4. Copy the code below, and paste on the place.

<style>
.rss-mbt {
    background: url(http://1.bp.blogspot.com/_7wsQzULWIwo/S7wwAxlnAsI/
AAAAAAAAC_g/9s74YaAwpls/s800/RSS1.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 20px;
}
.twitter-mbt {
    background: url(http://3.bp.blogspot.com/_7wsQzULWIwo/S7wv1yUhrdI/
AAAAAAAAC_Y/_yw-vTwlc7g/s800/TWITTER1.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 20px;
}
.facebook-mbt {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnoMmAgQ5EGqFE0XRjMCqwD9c_xXSw3zJCvl_YI7yF58A9WcOGlLMNKSAdOILrpk5f_uCI4q6YEKVwz3i4V61WciWn9RzgFmMZ9K6-klIiTVw-EdcRxBonXNYQ1L6lGsQ8CNp5-jcWhb4/s800/FACEBOOK1.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 20px;
}
.follower-rss, .follower-twitter, .follower-facebook {
    font-family: Georgia,  sans-serif, Times;
    font-size: 1.1em;
        font-style:italic;
        color:#289728;
}
.follower-rss span {
    font-size: 1.9em;
    font-weight: bold;
        font-style:italic;
        color:#FFB93C;  
}
.follower-twitter span {
    font-size: 1.9em;
    font-weight: bold;
        font-style:italic;
        color:#6DB6E6;  
}
.follower-facebook span {
    font-size: 1.9em;
    font-weight: bold;
        font-style:italic;
        color:#3889BA;  
}
</style>
<div class="rss-mbt">
<div class="follower-rss"> <span>515</span> loyal readers
</div>
<a href="YOUR RSS FEED URL" rel="nofollow">RSS feed</a>
| <a href="YOUR RSS EMAIL FEED URL" target="_blank" rel="nofollow">E-mail</a>
</div>
<div class="twitter-mbt"><div class="follower-twitter"><span>1058</span> followers</div>                          
<a href="YOUR TWITTER URL" target="_blank" rel="nofollow" title="I definitely follow you back">Follow us on Twitter!</a>
</div>                    
<div class="facebook-mbt">                      
<div class="follower-facebook"><span>260</span> followers                            </div>                          
<a href="YOUR FACEBOOK FAN PAGE URL" target="_blank" rel="nofollow">Join us on Facebook!</a>
</div>

=> You have to update the number of the followers
5. Save now

How to Add Flying Twitter Bird to Follow The Cursor In Blog

Do you have a twitter account? If you have, you can mix it in your blog. But, usually the widget to follow on the twitter only an image. So, in this post, I will make a difference. The twitter image is a bird that can fly and follow the cursor. It's very wonderful. The steps to add flying twitter bird in blog is very easy. You just need 5 steps! Add flying twtter bird in blog now!

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Choose "HTML/Java Script"
4. Copy the code below, and paste on the place

<script type="text/javascript" src="http://techgyo.com/wp-content/FlyingTwitbird/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3",
"h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/techgyo";var tweetThisText = "Twitter - techGyo http://www.techgyo.com/";tripleflapInit();
</script>
<a id="theBird" href="http://twitter.com/YOUR TWITTER ACCOUNT" target="_blank" style="display: block; position: absolute; width: 64px; height: 64px; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; z-index: 947; left: 0px; top: 587px; background-position: 0px 0px; background-repeat: no-repeat no-repeat; "></a>
<a id="theBirdLtweet" href="http://twitter.com/home?status=Twitter%20-%20techgyo%20http%3A//www.techgyo.com/" target="_blank" title="tweet this" style="position: absolute; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; width: 58px; height: 30px; z-index: 951; left: 49px; top: 583px; display: none; opacity: 0; background-position: -64px 0px; background-repeat: no-repeat no-repeat; "></a>
<a id="theBirdLfollow" href="http://twitter.com/techgyo" target="_blank" title="follow me" style="position: absolute; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; width: 58px; height: 20px; z-index: 952; left: 54px; top: 613px; display: none; opacity: 0; background-position: -64px -30px; background-repeat: no-repeat no-repeat; "></a>

5. Save it now! Easy right to add flying twtter bird in blog?

How to Set The Location of Read More

Previously, I've posted about How To Change Read More With An Icon / Button. Now, I will posted about how to set the location of read more. Why I posted about how to set the location of read more? Because many bloggers can't set the location of read more. Whereas, the trick is very easy. You just add some script. For the details, you can follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Check in the "Expand Widget Templates" box
4. Find your read more button URL, for example :

<img border="0" src="https://lh4.googleusercontent.com/-IZgq6Z2Kz8M/TXB8F8lMlEI/AAAAAAAAAPA/cfMaqkz24Rc
/s1600/readmore_button.png"/>

5. Then,  if you want to place the button on the right, use this code

<p align="right"><img border="0" src="https://lh4.googleusercontent.com/-IZgq6Z2Kz8M/TXB8F8lMlEI/AAAAAAAAAPA/cfMaqkz24Rc
/s1600/readmore_button.png"/></p>

=> You can change the align with left.
6. Save it now