Best CPM for Alternative Online Earning

Alternative Earning

Hi, Bloggers! Have you tried Internet Marketing? What kind of internet marketing did you use? Pay per Click, Paid to Affiliate, Paid to Review, or maybe CPM? No matter what did we use, the main is our earning, right?

One of the easiest internet marketing is CPM. CPM or Cost per Millions is advertising network which paid us (As a publisher) per 1000 impressions in our blog which have been installed the CPM ads. CPM is good for you who want to get dollar from internet with blog easily. Especially the blog has a high traffic, so you can get more dollar a day.

Now, Full Blog Tricks will share for you some Best CPM for Alternative Online Earning.

• BlueAdvertise
BlueAdvertise or DEX Platform is a standardized direct banner media exchange platform for publishers.  BlueAdvertise helps to monetize publisher's websites, blogs , cms's and social websites with network CPM ads.  BlueAdvertise is an easy to use platform that accepts many international publisher.

• Smowtion
Smowtion is a technology company specializing in the Ad-Network business. Smowtion is focused on developing products and solutions for the online advertising industry, helping them to target quality audiences. Smowtion also works with over 150,000 publishers worldwide, using the same optimization processes to help them obtain a higher eCPM and present visitors the most appropriate ads.

• Tribal Fusion
Tribal Fusion is a digital marketing solutions company that drives superior results at all levels of the purchase funnel.  Tribal Fusion is built around dedicated vertical teams that leverage their industry-specific knowledge of “what works” to create fully customized advertising solutions to help companies capitalize on opportunities at every level of the consumer decision process.

3 best CPM above are based on my observation from friends and some blogs reviews. Actually the main things of CPM are TOTAL TRAFFIC and TRAFFIC SOURCE (Country). Because the price of 1000 visitors from US and 1000 traffic from Indonesia are different. So try to get more traffic from US, because the best CPM earning is from US.

OK, I think enough here for this best CPM article. Hopefully this tips are useful for you. Good luck and have a nice day!

Blogger Free Images Hosting Tip

Blogger Free Images Hosting

Hi, guys! Usually when we have a TLD (Top Level Domain) and use paid hosting, we will save any files into our hosting. Whereas, the hosting has limited place. So, we have to spare place by limit the uploading some files such as picture, script, CSS, etc. But, I think tha's not true. Because it can limit our creativity in blogging activity. So, how to solve it?

You can save your picture files in a free hosting such as Blogger. Wait, How? Use Blogger as a free image hosting? Yups, that's correct. In Blogger Free Images Hosting Tip, I will share to you how to use Blogger free images hosting.

1. Create a static pages at [Posting --> Edit Pages --> New Page]
2. Upload your images normally at this page
3. Then after your images have been finished in upload, right-click your mouse. Choose "Copy link address"
4. Hoopla! You've gotten the image link. You can paste the link address wherever you want.

NOTE: DON'T "PUBLISH" THIS PAGE, JUST "SAVE" IF YOU'VE FINISHED

So easy right to practice Blogger Free Images Hosting Tip. Hopefully this tips are useful for you...

How to Add Related Posts on Sidebar

Related posts Blogger

Hi, friends! Advance, I've written some tricks about related posts. They're How To Make Related Article In Blog and How to Add Related Posts with Thumbnail. Then, what will we disquss now? That's How to Add Related Posts on Sidebar. Actually the function are similar with them. But, in this case the related posts are in sidebar. So, it can contain more articles and have a good look. Now, How to Add Related Posts on Sidebar? Just follow the steps below!

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Backup first your template, because we'll make some changes.
4. Click on "Expand Widget Templates"
5. Copy and paste the code below above </head>

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

6. Find (Ctrl + F) some code which looks like this

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>

7. Then change with this code

<b:if cond='data:post.labels'><data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><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&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

Customize:

• max-results=10 is the number of related posts will be display, you can change the number.

8. Click
9. Then, go to Design --> Page Elements --> Add Gadget, then choose "HTML/Java Script". Add the code below.

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

10. Write Related Posts as the name of the widget. Click if you finished
11. To show the widget only in next page (not in homepage), go back to Design --> Edit HTML, click on "Expand Widget Templates"
12. Find (Ctrl + F) Related Posts,  and add some blue code. So the code will be like this

<b:widget id='HTML7' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>

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

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

15. Click

Just do How to Add Related Posts on Sidebar patiently, and you will be done!

Buy Super Cheap Domain for 99 Cent

Buy cheap domain

Hi, Bloggers! Nice to meet you again! Previously, I've posted about 10 Secret Tips To Get High Traffic. Now I will share a tips, that's Buy Super Cheap Domain for 99 Cent. Yes, you can buy super cheap domain now on Domain.com. So, how to buy super cheap domain? Just follow me!

1. Go to Domain.com fanspage on Facebook
2. Then, click the facebook like button.
3. After that, click on "Authorize to see friends who are fans"
4. Fill your email in the 3rd steps.
5. Click "Get a Coupon"

After recommended 4 friends to register on Domain.com, you can buy super cheap domain. The domains which allowed to buy by this coupon are

• .com
• .net
• .org
• .biz
• .us

The domain age which registered by this coupon is only 1 year. So if you bought a domain from this tricks, you must extend your domain at the next year with normal price. What are you waiting for now?

THIS PROMO DIDN'T LAST LONG, LET'S BUY SUPER CHEAP DOMAIN NOW!

Automatic Link Source in Every Article when COPASTed

Hi, guys! How are you today? OK, now we will try a "cunning trick". That's Automatic Link Source in Every Article when COPASTed. What's the effect, guys? It will add automatic link source when the article has been copied. Hhmm... maybe it can muffle some plagiarisms.

DEMO - COPY SOME OF THE ARTICLE, AND PUT ON THE NOTEPAD

How add automatic link source? 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 </head>

<script type='text/javascript'>
function addLink() {
    var body_element = document.getElementsByTagName('body')[0];
    var selection;
    selection = window.getSelection();
    var pagelink = "<br/><br/> Original from: <a href='"+document.location.href+"'>"+document.location.href+"</a><br/>Copyright Full Blog Tricks"; // change this if you want
    var copytext = selection + pagelink;
    var newdiv = document.createElement('div');
    newdiv.style.position='absolute';
    newdiv.style.left='-99999px';
    body_element.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);
    window.setTimeout(function() {
        body_element.removeChild(newdiv);
    },0);
}document.oncopy = addLink;
</script>

Customize:

• You can change Original from: and Full Blog Tricks with your words

4. Click

Add Slant Images Effect for Blogger

Hi, friends! Now, I will post about an image effect for blogger, thats's Add Slant Images Effect for Blogger. The effect is when you put your cursor on the image (which has added slanted effect), the image will be zooming and slanting at the moment.

• DEMO - Put your cursor on the picture above

How can I add slant images effect for my blog? Just follow the step below, friend!

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

.FBT-slant:hover{
-moz-transform:rotate(22.5deg) scale(1.20);
-webkit-transform:rotate(22.5deg) scale(1.20);
}

4. Click

To activate this effect, just use the class. Look at the example code below (the red-code is the class)

<img class="FBT-slant" src=" http://4.bp.blogspot.com/-oQKkFPiX0uo/Tk5rq8E6Z1I/AAAAAAAAAf4/njtG_1q_tSU/s1600/blogger_batik_by_mardee.png" />

OK, thats's all, friend. Hopefully useful...

Animated Label with jQuery

Did you know, jQuery Link Nudging? Now we will add jQuery Link Nudging in Label. What is the effect? So, when you put your cursor on one of the label, the label will be move to the right. The  You can try in this page (Try on "Labels"). Looks nice right? Now, if you wanna try Animated Label with jQuery, 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 </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 450;
$(document).ready(function() {
$('a.linknudge, .Label ul li a').hover(function() {
$(this).animate({
paddingLeft: '20px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
});</script>

4. Click

So easy right, to add Animated Label with jQuery?

Cool Search Box with New Google Style

Google has updated their appearance, including their search box. I think this Search Box is very nice with some. So better for us to try create Cool Search Box with New Google Style. Below is the difference of the search box.

New Google Search

Google Search for Blogger

OK, let's see the . Looks nice right? Now if you want to create cool search box with new google style, 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>

/* div container containing the form */
#searchContainer {
margin:20px;
}

/* Style the search input field. */
#field {
float:left;
width:200px;
height:27px;
line-height:27px;
text-indent:10px;
font-family:arial, sans-serif;
font-size:1em;
color:#333;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-right:none;
}

/* Style the "X" text button next to the search input field */
#delete {
float:left;
width:16px;
height:29px;
line-height:27px;
margin-right:15px;
padding:0 10px 0 10px;
font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;
font-size:22px;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-left:none;
}
/* Set default state of "X" and hide it */
#delete #x {
color:#A1B9ED;
cursor:pointer;
display:none;
}
/* Set the hover state of "X" */
#delete #x:hover {
color:#36c;
}
/* Syle the search button. Settings of line-height, font-size, text-indent used to hide submit value in IE */
#submit {
cursor:pointer;
width:70px;
height: 31px;
line-height:0;
font-size:0;
text-indent:-999px;
color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMSICqpSswoTslZ5wpHtYPHmjkwHXlGAXmshZLDVavVcppO2KAzI9wdx8_38nW03Z7WH6CPM5zsljk0I3SXAyvwEDBgv1RkniOV9d_7jcQhffC59kDw1zzBdZdJilWy2hmOJI924JxfKql/s1600/ico-search.png) no-repeat #4d90fe center;
border: 1px solid #3079ED;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
/* Style the search button hover state */
#submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMSICqpSswoTslZ5wpHtYPHmjkwHXlGAXmshZLDVavVcppO2KAzI9wdx8_38nW03Z7WH6CPM5zsljk0I3SXAyvwEDBgv1RkniOV9d_7jcQhffC59kDw1zzBdZdJilWy2hmOJI924JxfKql/s1600/ico-search.png) no-repeat center #357AE8;
border: 1px solid #2F5BB7;
}
/* Clear floats */
.fclear {clear:both}

=> Adjust the width with your blog

4. Copy the code below, and paste above </head>

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
// if text input field value is not empty show the &quot;X&quot; button
$(&quot;#field&quot;).keyup(function() {
$(&quot;#x&quot;).fadeIn();
if ($.trim($(&quot;#field&quot;).val()) == &quot;&quot;) {
$(&quot;#x&quot;).fadeOut();
}
});
// on click of &quot;X&quot;, delete input field value and hide &quot;X&quot;
$(&quot;#x&quot;).click(function() {
$(&quot;#field&quot;).val(&quot;&quot;);
$(this).hide();
});
});
</script>

5. Click

Adding New Google Search Box
1. Go to Design --> Page Elements --> Add Gadget
2. Choose "HTML/Java Script"
3. Add the code below

<div id="searchContainer">
<form name="SUYB" action="/search" method="get">
<input type="text" id="field" id="s" name="q"/>
<div id="delete"><span id="x">x</span></div>
<input type="submit" name="submit" id="submit" value="Search" />
</form>
</div>

4. Click

Change Image Just with Scroll

Hi, friends! Now, I will post about a trick. That's Change Image Just with Scroll. The effect is when you put  your cursor on the picture and scroll the mousewheel, the picture will be change. Let's see the DEMO. Now if you want to try this 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"

<img id="slideshow" src="PICTURE-1" />

<script type="text/javascript">
var myimages=[
"PICTURE-1",
"PICTURE-2",
"PICTURE-3",
"PICTURE-4",
"PICTURE-5"
]
var slideshow=document.getElementById("slideshow")
var nextslideindex=0
function rotateimage(e){
var evt=window.event || e
var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta
nextslideindex=(delta<=-120)? nextslideindex+1 : nextslideindex-1
nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>myimages.length-1)? 0 : nextslideindex
slideshow.src=myimages[nextslideindex]
if (evt.preventDefault)
evt.preventDefault()
else
return false
}
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel"

if (slideshow.attachEvent)
slideshow.attachEvent("on"+mousewheelevt, rotateimage)
else if (slideshow.addEventListener)
slideshow.addEventListener(mousewheelevt, rotateimage, false)
</script>

=> You can replace the images that will be change
=> The image of PICTURE-1 must be same with PICTURE-1
4. Click SAVE

OK, that's all friends... Hopefully usefull :D

Add Floating Spoiler Menu

Hi, guys! Now, we will try to add floating spoiler menu. This spoiler menu is difference with others. We don't need to click the button to display the menu. Just put your cursor on this menu, and the menu wil be slide out. Want to see the DEMO? Now, if you wanna add floating spoiler menu into your blog, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Chose "HTML/Java Script"
4. Add the code below

<style text-type="CSS">
#bmenu{
position:fixed;
right:5px;
center:0px;
background-color:#000;
border-radius:10px;
-moz-border-radius:10px;
border:1px solid #FFF;
width:202px;
height:20px;
color:#FF0606;
transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}

#bmenu h3{
margin:0;
padding:0;
text-align:center;
cursor:pointer;}

#bmenu ul{
border-radius:10px;-moz-border-radius:10px;
border:2px solid #FFf;
background-color:#FF0606;
margin:15px 0;
padding:0 15px;}

#bmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{
color:#000;
text-decoration:none;
font-size:14px;}

#bmenu li a:hover{
color:#fff;}

#bmenu:hover{
z-index:5;
height:175px;
</style>

<div id="bmenu">
<h3>
TITLE</h3>
<ul>
<li><a href="#">FBT-1</a></li>
<li><a href="#">FBT-2</a></li>
<li><a href="#">FBT-3</a></li>
<li><a href="#">FBT-4</a></li>
<li><a href="#">FBT-5</a></li>
</ul>
</div>

Customize:
=> The position of floating spoiler menu
=> The title of this menu
=> The title and link location

5. Click SAVE

Magic Image! Move Image Freely

Hi, friends! Now, we are gonna make a crazy trick. That's Magic Image! Move Image Freely. Freely? Yups... you and your visitors of your blog can move images wherever. Left, right, top, or bottom. It's up to you. Curious? See the DEMO. OK, now if you wanna try Magic Image! Move Image Freely, just follow the steps below.

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

.FBT_magic img { cursor: move;}

4. Then, copy the code below and paste above </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&quot;div.FBT_magic img&quot;).draggable();
});
</script>

5. Click SAVE TEMPLATE

Now if you wanna use this effect, just use this code

<div class='FBT_magic'><img src='PICTURE-URL'/></div>

OK, That's all friend... Hopefully useful...

Fastest and Easiest Way to Build Navigation Menu

Hi, Bloggers! Now, we're gonna try novelty. That's the fastest and easiest way to build navigation menu. How? We just use CSS Menu Generator. I think, it's very useful software for the beginners. Btw, why I said the software is easiest and the fastest?

Easiest : Because we will use software, so we won't modify the code one by one
Fastest : The code will be display directly after we set its navigation

This software has 3 basic featres. So, what's the features of CSS Menu Generator?

• HorizontalMenu
• Vertical Menu
• Dropdown Menu

Below is the screenshot of CSS Menu Generator

So, what are you waiting for? Just dowonload this software. Click the link

• CSS Menu Generator (760 KB)

How to add into blogger? Just:
1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Choose "HTML/Java Script"
4. Get the code, and add it
5. Click SAVE

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

Slide Out Panel with jQuery and Rounded Corner

Hoahmm.... Hi, friends! Wait for a new trick? OK, now we will create Slide Out Panel with jQuery and Rounded Corner. The effect is when we click the panel, it will slide out, and show some links or somtehing. Maybe this trick remind us to How To Make Floating Widget. But, if the previous trick doesn't use jQuery. Wanna see the DEMO? Now, if you want to create Slide Out Panel with jQuery and Rounded Corner, 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>

#container {
clear: both;
margin: 0;
padding: 0;
}

#container a{
float: right;
background: #9FC54E;
border: 1px solid #9FC54E;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}

#container a:hover{
float: right;
background: #a0a0a0;
border: 1px solid #cccccc;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}

.content {
font-style:normal;
font-family:helvetica, arial, verdana, sans-serif;
color:#ffffff;
background:#333333;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
margin: 30px 0 50px;
padding: 15px 0;
}

.content p {
margin: 10px 0;
padding: 15px 20px;
}

.panel {
position: absolute;
top: 250px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: absolute;
text-decoration: none;
top: 250px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirX7-7stc4O5HJx4K89XxwKfnaaLXdhsxU92BegXhghI8urpintXQMVn57Alsc7JBLvqulfrTzwi8yizvNfFYkFWSLUQN7wWOzDJUaGVQcbVZIwIR5GTyxnFgPoFQ-KNFdw0UqWHnPw-w/s320/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.trigger:hover{
position: absolute;
text-decoration: none;
top: 250px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirX7-7stc4O5HJx4K89XxwKfnaaLXdhsxU92BegXhghI8urpintXQMVn57Alsc7JBLvqulfrTzwi8yizvNfFYkFWSLUQN7wWOzDJUaGVQcbVZIwIR5GTyxnFgPoFQ-KNFdw0UqWHnPw-w/s320/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.active.trigger {
background:#222222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwpXqQR4sfOAUUiKYnF_5iSWjoWyXRxXRZcxHtNFV67CE6szkrfEWxhquC0oQaksrrXd-gU04vSUOLxtvQGo2xxNUhR4TZZCkUjDnLz1d6j1lQvNbQ6A2ZzTfB3DktreBv1GXWidfGJ8Q/s320/minus.png) 85% 55% no-repeat;
}

.columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}

.colleft{
float: left;
width: 130px;
line-height: 22px;
}

.colright{
float: right;
width: 130px;
line-height: 22px;
}

ul{
padding: 0;
margin: 0;
list-style-type: none;
}

ul li{
padding: 0;
margin: 0;
list-style-type: none;
}

4. Then copy the code below, and paste above </head>

<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.trigger&quot;).click(function(){
$(&quot;.panel&quot;).toggle(&quot;fast&quot;);
$(this).toggleClass(&quot;active&quot;);
return false;
});
});
</script>

5. Then, click SAVE TEMPLATE
6. Now, go to Page Elements --> Add Gadget, choose "HTML/Java Script"
7. Then, add the code below

<div class="panel">

<h2>Choose the categories:</h2>
<div style="clear:both;"></div>
<div class="columns">
<div class="colleft">

<h3>Full Blog Tricks-1</h3>

<ul>
<li><a href="#" title=" FBT1">FBT1</a></li>
<li><a href="#" title=" FBT2">FBT2</a></li>
<li><a href="#" title=" FBT3">FBT3</a></li>
<li><a href="#" title=" FBT4">FBT4</a></li>
<li><a href="#" title=" FBT5">FBT5</a></li>
</ul>
</div>

<div class="colright">

<h3>Full Blog Tricks-2</h3>

<ul>
<li><a href="#" title=" FBT1">FBT1</a></li>
<li><a href="#" title=" FBT2">FBT2</a></li>
<li><a href="#" title=" FBT3">FBT3</a></li>
<li><a href="#" title=" FBT4">FBT4</a></li>
<li><a href="#" title=" FBT5">FBT5</a></li>
</ul>
</div>
</div>

<div style="clear:both;"></div>
</div>
<a class="trigger" href="#">Find More!</a>

=> Customize first the links
8. Click SAVE

Glowing Navigation Menu with jQuery for Blogger

Hi guys! Today, we will try to create Glowing Navigation Menu with jQuery for Blogger. Maybe this trick is almost similar with Hide Show Social Bookmarks with Hover. But, I think Glowing Navigation is better. Want to see the DEMO? OK, now if you want to try Glowing Navigation Menu with jQuery for Blogger, just follow the steps below.

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

.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
#kwick5 a{background-position:-760px 0}
#kwick5 a:hover{background-position:-760px -50px!important}
#kwick6 a{background-position:-950px 0}
#kwick6 a:hover{background-position:-950px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block
}

4. Then copy the code  below, and paste above </head>

<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery-1.2.3.js' type='text/javascript'/>
<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery.kwicks-1.5.1.js' type='text/javascript'/>
<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>

5. Click SAVE TEMPLATE
6. Now, go to Design --> Page Elements --> Add Gadget, choose "HTML/Java Script"
7. After that, add this code

<div class='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'><a href='#' title='Home'>Home</a></li>
<li id='kwick2'><a href='#' title='Contents'>Blog</a></li>
<li id='kwick3'><a href='#' title='About'>About</a></li>
<li id='kwick4'><a href='#' title='Futures'>Portfolio</a></li>
<li id='kwick5'><a href='#' title='Contact us'>Contact</a></li>
<li id='kwick6'><a href='#' title='Recomended links'>Resource</a></li>
</ul>
</div>
</td>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 190,
duration: 800,
easing: 'easeOutQuint'
});
});
</script>

=> You have to customize the URL first
8. Click SAVE

Easier and Faster to Edit Blogger Favicon

Hi, friends! Did you know? Blogger just release a new feature. What is that? Favicon Editor! Yups.. the function is for Easier and Faster to Edit Blogger Favicon. I think it's very nice feature. We just need little steps to edit our blog favicon. But, where is Favicon Editor place? You can find on Design --> Page Elements.

Then, how to add the favicon? You just click "Edit" on Favicon menu. The, you can upload you favicon file (a file with .ico). Just share some tips, you can get a file with .ico in http://www.favicongenerator.com/. Firstly, upload you picture, and FaviconGenerator will be generate into .ico. So, we just waiting what is Blogger next update...

Show Random Posts with Thumbnail Display

Hi, Bloggers! Are you ready to learn a new tricks? OK, now I'm gonna share you about Show Random Posts with Thumbnail. Maybe, this trick almost similar with previous trick, How to Add Labels with Thumbnail. But, in these trick, you just need little code. Need a DEMO? You can see the demo at the bottom of my blog. Now, if you want to add Show Random Posts with Thumbnail Display into your blog, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Then, add the code below

<style text-type="CSS">
img.label_thumb {
float:left;
padding:3px;
background:#CCC;
border:1px solid #A4A4A4;
width:100px;
height:75px;
margin-right:10px;
margin-top:10px }

img.label_thumb:hover {
opacity:0.8;
filter:alpha(opacity=80);
-moz-opacity:0.80;
-khtml-opacity:0.8 }
</style>

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<div>');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='';}
document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');
if(i!=(numposts-1))
document.write('');}
document.write('</div>');}
//]]>
</script>

<script type='text/javascript'>var numposts = 4;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Hacks?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

=> The blue code is the number of the post that you want to show
=> The green code is the name of the blog label (The alphabet must be same)

4. Then, click SAVE TEMPLATE

White Navigation with Shadow and Rounded Corner

Hi, bloggers! Now, I'm gonna post about White Navigation with Shadow and Rounded Corner. This navigation is difference with other navigation. Because this navigation is floating. This navigation also has some effect, they are Shadow and Rounded Corner. Want see the DEMO? Now, if you want to add White Navigation with Shadow and Rounded Corner, just follow the steps below.

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

<!-- zFPmenu START -->
<div id='zfpm_div' style='display:none;'>
<div id='zfpm_upperBox'>

Add ads, text message, etc.

</div>
<ul id='zfpm_ul'>
<!-- Your menus start -->
<li><a href=''>YOUR MENU-1</a></li>
<li class='dir'><a href=''>YOUR MENU 2 (containing submenu)</a>
   <ul>
      <li class='dir'><a href=''>YOUR SUBMENU 2.1 (containing sub-submenu)</a>
         <ul>
            <li><a href=''>YOUR SUB-SUBMENU 2.1.1</a></li>
            <li><a href=''>YOUR SUB-SUBMENU 2.1.2</a></li>
         </ul>
      </li>
      <li><a href=''>YOUR SUBMENU 2.2</a></li>
      <li><a href=''>YOUR SUBMENU 2.3</a></li>
   </ul>
</li>
<!-- Your menus end -->
</ul></div>
<script type='text/javascript'>
var zfpm_colorTheme = &#39;light&#39;
var zfpm_shareBox = &#39;no&#39;;
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://zfpmenu.googlecode.com/svn/trunk/js/zfpmenu.js' type='text/javascript'/>
<!-- zFPmenu END -->

=> Customize first the code
4. Click SAVE TEMPLATE

Google Plus One for Blogger

Google has releases a new application! Yups, that's Google Plus One (+1). I've tried on my blog. You can see on this page. By clicking Google +1 button, it's similar you speak "This is cool" or "You have to see it". Maybe +1 that you gave can help your friends, people, or maybe your blogging mates on internet find the best stuff when they search. Now, how to add Google Plus One for Blogger? It's very simple, just follow the steps below.

Choose the model of Google Plus One button

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: 'en-US'}</script>
<div><g:plusone size="standard" expr:href="data:post.url"/></div>

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: 'en-US'}</script>
<div><g:plusone size="tall" expr:href="data:post.url"/></div>

Add into your blog
1. Go to Design --> Page Elements --> Add Gadget
2. Choose "HTML/Java Script"
3. Add one of Google Plus button code for Blogger.
4. Click SAVE

Or, maybe you want to add on every blog posts? Follow the steps below.
1. Go to Design --> Edit HTML
2. Check in the "Expand Widget Templates" box
3. Add one of Google Plus button code for Blogger above <data:post.body/> (choose the second if you're using Read More")
4. Click SAVE TEMPLATES

So, easy right, to add Google Plus One for Blogger???

Simple Fog Effect for Blogger Image

Maybe you are boring with the image on your blog. Because the image does't has any effect. Now we will add some effect to your image. That's Simple Fog Effect for Blogger Image. Usually fog effect can be called with "Blur". The effect is when you put your cursor on the image, the image will be foggy. See the demo




Nice right? OK, if you want to try Simple Fog Effect for Blogger Image, just follow the steps below.

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

.FBT-blur img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}
.FBT-blur:hover img {filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;border:0;}

4. Click SAVE TEMPLATE

Then to "call" the effect just add some code, so the image code will be like this

<a class="FBT-blur" href="http://full-tricks.blogspot.com/"><img alt="blogger icon" border="0" src="http://3.bp.blogspot.com/-a0b5TxNurp8/TeW6QAGDFVI/AAAAAAAAAaU/MBH8_54AreY/s200/fullblogtricks-blogger-icon.jpg" /></a>

So easy right?

Full Blog Tricks is Ready for Mobile

As you know, many of people have started using mobile. So, it's not impossible for people to open our blog by their phone. And maybe you think, the appearance on mobile is bad. But throw away your mind, the appearance on mobile is clean and ease. Its just contains some lines. One page contains 5 post (shorten). OK, just see the DEMO. Looks nice right? The trick s very very easy... You just follow the tricks below.

Add this code beside your link

?m=1

So, the link will be like this

http://full-tricks.blogspot.com/?m=1

OK, that's all friend... Very easy right. So, Full Blog Tricks is Ready for Mobile now. Hopefully useful... ^_^

Create Curved Objects on Blog

Have you see a curved object on my blog? Like this...

Full Blog Tricks

Above is one of the variations of curved objects or can be called "BORDER-RADIUS". With border-radius, our blog will look flexible. Unfortunately, border-radius can't support on Internet Explore. Now, we will learn and try to create curved objects on blog. The curved objects are separated by the browser.

Mozilla Firefox

<div style="background-color:#ccc; -moz-border-radius:5px; border:1px solid #000; padding:10px;">FULL BLOG TRICKS</div>

<div style="background-color:#ccc; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border:1px solid #000; padding:10px;">FULL BLOG TRICKS</div>

<div style="background-color:#F5F6CE; -moz-border-radius-topright:30px; -moz-border-radius-bottomright:30px; border:5px solid #000; padding:10px;">FULL BLOG TRICKS</div>

Safari

<div style="background-color:#A9D0F5; -webkit-border-top-left-radius:30px; -webkit-border-bottom-right-radius:30px; border:5px solid #38610B; padding:10px;">FULL BLOG TRICKS</div>

<div style="background-color:#F5D0A9; -webkit-border-top-left-radius:50px; -webkit-border-top-right-radius:50px; border:5px solid #38610B; padding:10px;">FULL BLOG TRICKS</div>

Opera 10.5

<div style="background-color:#F5F6CE; border-radius:30px; border:5px solid #38610B; padding:10px;">FULL BLOG TRICKS</div>

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

Meteor Shower on My Blog!!!

Now, we will try to make an effect. That's Meteor Shower on My Blog. This effect is very interesting. When you open your blog (has added this effect) you blog will be get meteor shower. Very nice right? OK, now if you want to add meteor shower on your blog, just follow the steps below. Want to see the DEMO?

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

<script language="javascript">
nd_mode="meteor";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_top";
</script>
<script language="javascript" src="http://www.netdisaster.com/js/mynd.js">
</script>

5. Click SAVE

• Want make other effects? Visit Netdisaster now

Floating Social Bookmarks with Mouseover

Now, I will post about Floating Social Bookmarks with Mouseover. You have seen many kinds of Social Bookmarks style. There is floating, under the post, or maybe on sidebar. So, we will add the floating Social Bookmarks. Just see the DEMO. Interested? Follow the step below, to add into your blog.

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Choose "HTML/Java Script"

<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#eeeeee;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.96;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color:#CAE3F2;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6GF0ggLUIWc1jP0RdQbi6yiOsSo0j1itWz7CaAb7Lms24Xq8pB6gx8Za0ax_EL-gfl0yCbrZJsvCYOJj7KunDS1GszwGYD4dhtMj7040z4-zDqJ7nvSHszAdxK0TA0cqaVG1_vGPOek9z/s400/rss_64x64.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoLcGomG2R5-e-BC6Tsy7WuHZuQFcLAjjc0YJn9DmUd3YyQWbT7Sqaud4t8ubScjWUfAjL9saMxN5yaB64O_TruMK076HW7htAglx-XXquw4_kR4SqaoeuUFOjI67f878muegAqrDPnGbb/s400/facebook_64x64.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4GSzFhU-4pB_lFMSogppJjSdKrmDLaazBpY7_ysc4tKI8UHBxF3BVbc7suuKCMBUxfDvv3NgSfjOzrK86PTko-CMg0RrgXuSEETMIYcsTCG4jGMUnQszCFRPmOTFr79ly7BDcHJTFa4j6/s400/twitter_64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4hL0E9irtxRvS5uPXL1N_RemZXAzT5j3Z8gM2O6V3gUtwPg0kALGS2KdkC83GLjPx7oFyXOOsJgOUT_DVabvUo4IiTdOeEp2R0crT0s8KEn6uLPPg2qVkiA-r-NT2861McqPwlfBIhyphenhyphenGf/s400/google_64x64.png);
}
ul#navigation .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg8sOqEwBOBRHaQa2JTpaOd4aZP41rTCFTGr-YOl271n_05nh1uruWnTk48X_al_9SPLYFxeXThHZOYtnMtFVbE4Vls2ewyTvuWEfPp1-78cCAi4V07_9dV_5fZub0qv0Si-yGdByd6zyU/s400/yahoo_64x64.png);
}
</style>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});

$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>

<ul id="navigation">
<li class="rss"><a href="http://YOUR-BLOG.blogspot.com/atom.xml">RSS Feed</a></li>
<li class="facebook"><a href="FACEBOK-PROFILE">Facebook</a></li>
<li class="twitter"><a href="TWITTER-ACCOUNT">Twitter</a></li>
<li class="googlebookmarks"><a href="https://www.google.com/bookmarks/">Google</a></li>
<li class="e-mail"><a href="YAHOO!-ACCOUNT">Yahoo!</a></li>
</ul>

4. Then, add the code below
5. Click SAVE TEMPLATE

1, 2 Award for Full Blog Tricks

Hmmmm.... Didn't feel has been more than 6 months, this blog is created. We have posted more than 100 blogger tricks, hacks, and widgets. Even SEO tips. There have been many comments to Full Blog Tricks. Thank you to all of commentators. Their comments are very useful. Has become a habbit of blogger to give award to other blog. And there are some blog which gave us an award. This is 1, 2 Award for Full Blog Tricks. They are:

Best Friend Award

From: Acernoval

Top Commentator Award

From: Ladida Cafe

Once again, thank you for all Full Blog Tricks readers. Without you, We are nothing....

Hide Show Social Bookmarks with Hover

Hi, friends! How are you? Now we gonna try to create Hide Show Social Bookmarks with Hover. This Social Bookmarks have very nice effect. When we put our cursor, the social bookmarks will be slide and show the hidden-text. This is the picture

Need a DEMO? Now, if you want to try hide show social bookmarks for 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. Then add the code below, don't forget to customize the links

<div id="Layer3">
<ul id="menu">
<li>
<a href="#nogo"><img src="http://www.bbcaudiobooksamerica.com/Portals/0/delicious_48.png" alt="Delicious" width="60" height="60" title="Delicious" />
<span><br />
<b class="h2">Delicious</b><br />
Add to delicious
</span>
</a>
</li>
<li>
<a href="#nogo"><img src="http://www.bbcaudiobooksamerica.com/Portals/0/twitter_icons_48.png" alt="Twitter" width="60" height="60" title="Twitter" />
<span>
<br />
<b class="h2">Twitter</b><br />
Retweet the Article
</span>
</a>
</li>
<li>
<a href="#nogo"><img src="http://twitter.richardebyrd.com/xhtml/assets/images/social/mixx_logo_48.png" alt="Mixx" width="60" height="60" title="Mixx" />
<span><br />
<b class="h2">Mixx</b><br />
&nbsp Mixx it
</span>
</a>
</li>
<li>
<a href="#nogo"><img src="http://twitter.richardebyrd.com/xhtml/assets/images/social/rss-icon.png" alt="RSS" width="60" height="60" title="RSS" />
<span><br />
<b class="h2">Dreamcss </b><br />
Subscribe Us
</span>
</a>
</li>
<li>
<a href="#nogo">
<img src="http://twitter.richardebyrd.com/xhtml/assets/images/social/Google.png" alt="Google" width="60" height="60" title="Google" />
<span><br />
<b class="h2">Google</b><br />
Bookmark the Article
</span>
</a>
</li>
<li>
<a href="#nogo"><img src="http://www.bbcaudiobooksamerica.com/Portals/0/facebook_48.png" alt="Facebook" width="60" height="60" title="Facebook" />
<span><br />
<b class="h2">Facebook</b><br />
Add to Facebook
</span>
</a>
</li>
<li>
<a href="#nogo"><img src="http://twitter.richardebyrd.com/xhtml/assets/images/social/stumble-upon.png" alt="Stumble Upon" width="60" height="60" title="Stumble Upon" />
<span><br />
<b class="h2">Stumble Upon </b><br />
&nbsp Review or thumb-up
</span>
</a>
</li>
</ul>
</div>
<style text-type="CSS">
#menu {
margin:0;
padding:0;
width: 50em;
height: 4.5em;
overflow:hidden;
}
#menu li {
display:inline;
list-style-type:none;
}
#menu li a {
display:block;
float:left;
text-decoration:none;
margin:0;
}
#menu li a img {
opacity:0.7;
margin:0.5em;
border:0;
float:left;
}
#menu li a span {
display:none;
}
#menu li a:hover {
background:transparent;
}
#menu li a:hover span {
width:10em;
color:#aaa;
display:block;
cursor:pointer;
float:left;
}
#menu .h2 {
margin:0 5px;
padding:0;
color:#fc0;
font-variant:small-caps;
font-size:1.25em;
border:0;
}
</style>

5. Click SAVE TEMPLATE

Add Blogger Sign In Form on Blog

All Bloggers that use blogspot as the hosting, must be sign in first in blogspot to go to their account. They must go to Blogger. Then they enter the email and password, and finally they can access their account. But, have you think "I wanna add blogger sign in form on blog..."? But, how? You just follow the steps on these trick. Want to see the DEMO? OK, now if you want to add blogger sign in form on 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. Then, add the code below

<div style="border:1px solid #C3D9FF;">
<form id="gaia_loginform" action="https://www.google.com/accounts/ServiceLoginAuth" method="post" onsubmit="return(gaia_onLoginSubmit());">
<div id="gaia_loginbox">
<table class="form-noindent" cellspacing="3" cellpadding="5" width="100%" border="0">
<tr>
<td valign="top" style="text-align:center" nowrap="nowrap" bgcolor="#e8eefa">
<input type="hidden" name="ltmpl" value="start" />
<div class="loginBox">
<table id="gaia_table" align="center" border="0" cellpadding="1" cellspacing="0">
<tr>
<td colspan="2" align="center">
<font size="-1">Sign in with your</font>
<table>
<tr>
<td valign="top">
<img src="https://www.google.com/accounts/google_transparent.gif" alt="Google" />
</td>
<td valign="middle">
<font size="+0"><b>Account</b></font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" align="center">
</td>
</tr>
<tr id="email-row">
<td nowrap="nowrap">
<div align="right">
<span class="gaia le lbl">Email:</span>
</div>
</td>
<td>
<input type="hidden" name="continue" id="continue" value="https://www.blogger.com/loginz?d=http%3A%2F%2Fwww.blogger.com%2Fhome&a=ADD_SERVICE_FLAG" />
<input type="hidden" name="service" id="service" value="blogger" />
<input type="hidden" name="naui" id="naui" value="8" />
<input type="hidden" name="fpui" id="fpui" value="2" />
<input type="hidden" name="skipvpage" id="skipvpage" value="true" />
<input type="hidden" name="rm" id="rm" value="false" />
<input type="hidden" name="dsh" id="dsh" value="-5001523091454835929" />
<input type="hidden" name="ltmpl" id="ltmpl" value="start" />
<input type="hidden" name="alwf" id="alwf" value="true" />
<input type="hidden" name="alinsu" id="alinsu" value="0" />
<input type="hidden" name="ltmpl" id="ltmpl" value="start" />
<input type="hidden" name="timeStmp" id="timeStmp" value=''/>
<input type="hidden" name="secTok" id="secTok" value=''/>
<input type="hidden" name="GALX" value="EmaSfmXjlk8" />
<input type="text" name="Email" id="Email" size="18" value="" class='gaia le val' />
</td>
</tr>
<tr>
<td></td>
<td align="left">
<div style="color: #666666; font-size: 75%;">ex: pat@example.com</div>
</td>
</tr>
<tr id="password-row" class="enabled">
<td align="right" nowrap="nowrap">
<span class="gaia le lbl">Password:</span>
</td>
<td>
<input type="password" name="Passwd" id="Passwd" size="18" class="gaia le val" />
</td>
</tr>
<tr>
<td> </td>
<td align="left">
</td>
</tr>
<tr id="rememberme-row" class="enabled">
<td align="right" valign="top">
<input type="checkbox" name="PersistentCookie" id="PersistentCookie" value="yes" checked='checked' />
<input type="hidden" name='rmshown' value="1" />
</td>
<td>
<label for="PersistentCookie" id="PersistentCookieLabel" class="gaia le rem">Stay signed in</label>
</td>
</tr>
<tr>
<td>
</td>
<td align="left">
<input type="submit" class="gaia le button" name="signIn" id="signIn" value="Sign in" />
</td>
</tr>
<tr id="ga-fprow">
<td colspan="2" height="33.0" class="gaia le fpwd" align="center" valign="bottom">
<a href="https://www.blogger.com/forgot.g" target=_top>Can't access your account?</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<input type="hidden" name="asts" id="asts" value="" />
</form>
<script>
var gaia_loginForm;
if (document.getElementById) {
gaia_loginForm = document.getElementById("gaia_loginform");
} else if (window.gaia_loginform) {
gaia_loginForm = window.gaia_loginform;
}
var gaia_emailHasKeypress = false;
if (gaia_loginForm && gaia_loginForm.Email) {
gaia_loginForm.Email.onkeypress = function() {
gaia_emailHasKeypress = true;
}
}
function gaia_setFocus() {
if (gaia_loginForm) {
if (gaia_loginForm.Email && !gaia_loginForm.Email.value) {
gaia_loginForm.Email.focus();
} else if (gaia_loginForm.Passwd && !gaia_emailHasKeypress) {
gaia_loginForm.Passwd.focus();
}
}
}
gaia_setFocus();
</script>
<form id="gaia_universallogin" action="https://www.google.com/accounts/ServiceLoginAuth" method="post" onsubmit="return(gaia_onLoginSubmit());">
<input type="hidden" name="continue" id="continue" value="https://www.blogger.com/loginz?d=http%3A%2F%2Fwww.blogger.com%2Fhome&a=ADD_SERVICE_FLAG" />
<input type="hidden" name="service" id="service" value="blogger" />
<input type="hidden" name="naui" id="naui" value="8" />
<input type="hidden" name="fpui" id="fpui" value="2" />
<input type="hidden" name="skipvpage" id="skipvpage" value="true" />
<input type="hidden" name="rm" id="rm" value="false" />
<input type="hidden" name="dsh" id="dsh" value="-5001523091454835929" />
<input type="hidden" name="ltmpl" id="ltmpl" value="start" />
<input type="hidden" name="alwf" id="alwf" value="true" />
<input type="hidden" name="alinsu" id="alinsu" value="0" />
<input type="hidden" name="ltmpl" id="ltmpl" value="start" />
<input type="hidden" name="ltmpl" id="ltmpl" value="start" />
</form>
</div>

5. Click SAVE TEMPLATE

Moving Down Background for Blogger

Now, I will share about Moving Down Background for Blogger. This trick is very unique. Why? Because the blog background will move without scrolling. So I called this "Unique Background". Want to see the DEMO? OK, now if you want to try Moving Down Background for Blogger, 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 </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(function(){

// ***
// Scrolling background
// ***

// height of background image in pixels
var backgroundheight = 4000;

// get the current minute/hour of the day
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();

// work out how far through the day we are as a percentage - e.g. 6pm = 75%
var hourpercent = hour / 24 * 100;
var minutepercent = minute / 30 / 24 * 100;
var percentofday = Math.round(hourpercent + minutepercent);

// calculate which pixel row to start graphic from based on how far through the day we are
var offset = backgroundheight / 100 * percentofday;

// graphic starts at approx 6am, so adjust offset by 1/4
var offset = offset - (backgroundheight / 1);

function scrollbackground() {
// decrease the offset by 1, or if its less than 1 increase it by the background height minus 1
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// apply the background position
$('body').css("background-position", "50% " + offset + "px");
// call self to continue animation
setTimeout(function() {
scrollbackground();
}, 70
);
}

// Start the animation
scrollbackground();
});
//]]>
</script>

4. Then try to find

body {

just copy this code and put under body {

background:url(http://lh6.ggpht.com/_dfnTVAxeWMI/SrFV2ZgHUvI/AAAAAAAACU8
/yP_7acjnv5U/bgscroll.jpg);

5. Click SAVE TEMPLATE