How to Make Blog Fast and Faster

Make Blog Faster

Hi, friends! Advance, I've posted about a trick to solve How to Make Blog Fast. That's Boost Blog Speed with CSS Compressor. But, now I will discuss some problems to make blog faster. Who don't want their blog become light, surely all of bloggers want it because our visitors can browse our blog easier.

Based on my experience, there are some tricks to make blog fast :

• Picture
Did you know, pictures with large size can make our blog become slower. So, it's better for you to decrease the use large-size picture. Both in template and also posts. You can use Photoshop Save for Web & Device trick.

• Widget
Over usage widget was one of problems which makes blog become slower. Especially if the widget contains heavy scripts. It's good for you to delete some widgets which unuseful such as clock, music player, pet, games, and so on. Use useful widget such as related posts, most popular articles, or maybe Google Friend Connect.

• CSS and Javascript
As we knew, CSS and javascipt can make our blog become good looking. But the side effect is it can make our blog become slowly. So you should decrease the usage or compress it for your blog. To compress Javascript, you can use Javascript Compressor.

Epilog How to Make Blog Fast and Faster: I think good blog should have a good looking and fast loading. But, don't reduce your creativity on blog. Stay blogging!

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