How To Add HTML/Java Script Color Picker In Blog

This tool is used to select a color and then convert into script language. This tool is useful for you who don't know kinds of color script



If you want to add this chart into your blog, you can follow the steps

Installation as usual
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 in the place

<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/103534220535816043845/colorpicker.xml&amp;up_save=1&amp;up_rgb=255%7C255%7C255&amp;up_basergb=255%7C0%7C0&amp;up_hex=FFFFFF&amp;up_indicator=0%7C0&amp;up_slider=0&amp;up_lastvalues=0%7C0&amp;synd=open&amp;w=325&amp;h=210&amp;title=HTML%2FJava+Script+Color+Picker&amp;border=http%3A%2F%2Fwww.gmodules.com%2Fig%2Fimages%2F&amp;output=js"></script>

5. Save it

If you want to modify the border, width, and length, you can go here

How To Set Backlinks Checker Tool In Blog

Do you know, what is backlinks? Backlinks are links to our blog or website. The number of backlins is one of indication of the popularity of that website. Usually backlinks is used to determine the PageRank of a website. But, do you know the number of your blog backlinks? If you don't know, you can following the steps and add thw tool into your blog, so you can check your backlinks.

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 in the place

<!-- iWEBTOOL - www.iwebtool.com - Backlink Checker -->
<form method="get" name="pageform" action="http://www.iwebtool.com/tool/tools/backlink_checker/backlink_checker.php"  target="pageframe" onsubmit="return validate(this);">
<table border="0" style="border-collapse: collapse" width="100%">
<tr>
<td width="956" height="91" valign="top">
<table style="border-collapse: collapse" width="100%" height="76" class="tooltop">
<tr>
<td>
<table border="0" style="border-collapse: collapse" width="100%" cellspacing="5">
<tr>
<td height="28" width="184"><b><font size="2">Your domain:
</font></b></td>
<td height="28" width="239">
<input type="text" name="domain" size="33"></td>
<td height="28" width="529">
<input type="submit" value="Check Now!" style="float: left"></td>
</tr>
<tr>
<td width="184" height="21">&nbsp;</td>
<td width="770" colspan="2" height="21" valign="top"><font size="1">(eg. full-tricks.blogspot.com.com)</font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="956">
<iframe name="pageframe" width="100%" height="530" class="toolbot" frameborder="0">
</iframe></td>
</tr>
<tr>
<td width="956">
&nbsp;</td>
</tr>
</table>
</form>
<script language="JavaScript">
function validate(theform) {
if (theform.domain.value == "") { alert("No domain provided"); return false; }
return true;
}
</script><p><a href="http://www.iwebtool.com/" target="_blank"><font size=1>Powered by iWEBTOOL</font></a></p>
<!-- iWEBTOOL - www.iwebtool.com - Backlink Checker -->

5. Finish? Save it now!
If you finish, the result is like this (only the image)

How To Install HTML Parser Tool In Blog

Usually, if you want to parse html, you will go to Centricle, Blogcrowds, or the other. Now, I found a trick to install the tool in your blog. This trick will install the tool into your blog. Before I give the steps, i will show the result



If you are inteterested, you just follow the steps
1. Log in to your blogger account
2. Go to Design>>>Page Elements>>>Add Gadget
3. Choose "HTM/Java Script"
4. Then, copy the code below and paste on it

<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/102462998830435293579/post-Code.xml&amp;up_grows=10&amp;up_conv1=1&amp;up_conv2=1&amp;up_conv3=1&amp;up_conv4=1&amp;up_conv5=1&amp;synd=open&amp;w=320&amp;h=200&amp;title=Post-Code%3A+code+converter&amp;border=http%3A%2F%2Fwww.gmodules.com%2Fig%2Fimages%2F&amp;output=js"></script>

5. Finish? Save it
Don't close first! I have important information! If you want to create your own, you can go here

How To Show Widget Only In "Home"

Actually, this trick is "sequel" of How To Show Widget Only In Next Page (Not in "Home"). So, what's the difference? The difference is this trick only show the widget in "Home". As an example, we will edit the "Get Free Banner!" widget. OK, you just follow the steps, if you want to try this trick.

1. Log in to your blogger account
2. Go to Design>>>Edit HTML>>>
3. Thick "Expand Widget Templates"
4. Then, search the code below
Tips : To speed up your search, you can use Ctrl+F or F3

<b:widget id='HTML3' locked='false' title='Get Free Banner!' type='HTML'>
<b:includable id='main'>


<!-- 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:includable>
</b:widget>

(becase we will edit "Get Free Banner!")

5. After that copy the code below

<b:if cond='data:blog.homepageUrl == data:blog.url'>

6. Paste under

<b:widget id='HTML3' locked='false' title='Get Free Banner!' type='HTML'>
<b:includable id='main'>

7. Then, copy the code below

</b:if>

8. And paste under

<b:include name='quickedit'/>

So the result will look like this

<b:widget id='HTML3' locked='false' title='Get Free Banner!' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<!-- 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>

9. If you finish, save it

NOTE : Can also be applied in other widgets

How To Show Widget Only In Next Page (Not in "Home")

In this post, i will share to you, a trick about how to show widget only in next page. Means the widget will not appear on the Home. So our blog will be seen quickly when opened on the first time. As an example, we will edit the "Get Free Banner!" widget. Immediately,  i will give you the steps.

1. Log in to your blogger account
2. Go to Design>>>Edit HTML
3. Thick "Expand Widget Templates"
4. Then search the code below
Tips : To speed up your search, you can use Ctrl+F or F3

<b:widget id='HTML3' locked='false' title='Get Free Banner!' type='HTML'>
<b:includable id='main'>

<!-- 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:includable>
</b:widget>

(because i will edit "Get Free Banner!")

5. After that, copy the code below

<b:if cond='data:blog.pageType == "item"'>

6. Paste under :

<b:widget id='HTML3' locked='false' title='Get Free Banner!' type='HTML'> 

<b:includable id='main'>

7. Then, copy the code below

</b:if>

8. And paste under 

<b:include name='quickedit'/>

So the result will look like this

<b:widget id='HTML3' locked='false' title='Get Free Banner!' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.pageType == "item"'>

<!-- 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>

9. If you finish , save it

NOTE : Can also be applied in other widgets

How To Delete Numbers In Labels

Hi, friend! If previously, i have posted  How to make labels on posts, now i will post the hack. In this trick, we will learn how to delete the numbers. OK, i will immediately explain this trick. For details, i will provide 2 ways.

First Way 

1. Log in to your bloger account

2. Go to Design>>>Page Elements>>>Labels

3. Click "Edit" in "Labels"

4. Then, empty "Show number of posts per label"

5. Save it

Second Way

1. Go to Design>>>Edit HTML

2. Thick "Expand Widget Templates"

3. Find this code : (<data:label.count/>)

4. Then delete the code

5. Save it

How To Add Page Loading Status Image In Blog

Now, i will teach you about page loading status. If our blog has long-time loading, our blog visitors will reduce, because they are tired to waiting our blog loading. Actually, this problem can be manipulated by placing page loading status image. So, our blog visitors will not be bored anymore. Now, if you want this trick, just follow the steps below.

1. Log in to your blogger account

2. Go to Design>>>Edit HTML

3. Then search this code : <body>

Tips : To speed up the search you can use Ctrl+F or F3

4. Replace <body> with code below

<body onLoad='init()'>
<div id='loading' style='position:absolute; width:100%; text-align:center; top:300px;'> <img border='0' src='https://sites.google.com/site/fullblogtricks/javascript-sama-edit-html/preloader.js?attredirects=0&d=1'/></div>

<script src='https://docs.google.com/uc?id=0BwXqkC35im9QMzQ1MTNiNjUtN2Q0Yy00YjM5LTliMzUtZWU0MGQ3YmVhYmZl&export=download&hl=en' type='text/javascript'/>

NOTE : Change the blue words with image URL

To facilitate you, I provides some pictures

http://i1002.photobucket.com/albums/af149/Imtikhan/Loading2.gif

http://i1002.photobucket.com/albums/af149/Imtikhan/Loading5.gif

http://i388.photobucket.com/albums/oo330/shadowxcelerated/Loading.gif

You can make your own image in Ajaxload

5. If you finish, save it and try by reload your blog

How To Activate Script In a Post

Maybe, new bloggers don't know how to activate script in a post. Usually, they only put the script as usual, then what's the different?

<marquee align="center" direction="right" height="70" scrollamount="2" width="100%">
Just Kidding 
</marquee>


If you learn this trick, you can activate the script like this

Just Kidding

Interested? Don't worry, you can follow the steps below.

1. Copy your script
2. Then in your post, click "Edit HTML"

3. Paste your script

4. Return to "Compose"

How To Change "Older Posts", "Newer Posts", And "Home" With Icon

H, friend! Now i will teach you about how to change "Older Posts", "Newer Posts", and "Home" with an icon. Usually "Older Posts", "Newer Posts", and "Home" located under our blog. The function is direct us to go to another page, either older posts page or newer posts page. Usually, the commands ("Older Posts", "Newer Posts", "Home") are only a word, therefore we will change the word into an icon. Now, if you want this trick, just follow the steps.

1. Log in to your blogger icon
2. Go to Design>>>Edit HTML
3. Thick "Expand Widget Templates"
4. Then find this code :

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>


<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>


<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>


</div>

5. Change the blue words with image script

<img border='0' src='ICON URL'/>


Examples :

<img border='0' src='http://robots1996.fileave.com/Beranda.png'/>

<img border='0' src='http://robots1996.fileave.com/Posting_lama.gif'/>

<img border='0' src='http://robots1996.fileave.com/Posting_lebih_baru.gif'/>


So like this :

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img border='0' src='http://robots1996.fileave.com/Posting_lebih_baru.gif'/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img border='0' src='http://robots1996.fileave.com/Posting_lama.gif'/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img border='0' src='http://robots1996.fileave.com/Beranda.png'/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img border='0' src='http://robots1996.fileave.com/Beranda.png'/></a>
</b:if>
</b:if>

</div>

6. If you finish, save it
NOTE : You can change the URL, with your own icon

How To Add 3 In 1 Share Toolbar By Apture For Blog

We give readers the power to search and explore rich content and media from the web without even leaving the page.

That's Apture motto. So, Apture want to help you to browsing easily. Therefore i will teach you how to put it on your blog. Before i give the steps, i will tell you about this toolbar features.

-Share on Facebook (with counter)
-Tweet for Twitter (with counter)
-Share via Email
-Search Box



And the steps below to add Apture Toolbar.

1. Go to Apture first
2. Enter your blog URL, then click "Start Now"

3. After that fill the form, and click "Create My Account"

4. Then you will get the code, copy the code (click "Copy Code to Clipboard")

5. Now, Log in to your blogger account
6. Go to Design>>>Edit HTML
7. Find this code : </body>
8. Paste the code from Apture above </body>
9. Save it