Full Blog Tricks

How to Make Blog Fast and Faster

noreply@blogger.com (Naufal Aminur Rahman) — Sat, 07 Jan 2012 06:24:00 +0000

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

Widget

CSS and Javascript

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

noreply@blogger.com (Naufal Aminur Rahman) — Sat, 17 Dec 2011 11:59:00 +0000

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

Smowtion

Tribal Fusion

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

noreply@blogger.com (Naufal Aminur Rahman) — Fri, 09 Dec 2011 04:55:00 +0000

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

noreply@blogger.com (Naufal Aminur Rahman) — Wed, 07 Dec 2011 09:17:00 +0000

Buy Super Cheap Domain for 99 Cent

noreply@blogger.com (Naufal Aminur Rahman) — Wed, 07 Dec 2011 08:10:00 +0000

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

noreply@blogger.com (Naufal Aminur Rahman) — Fri, 02 Sep 2011 02:22:00 +0000

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

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>

Customize:

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

4. Click

Add Slant Images Effect for Blogger

noreply@blogger.com (Naufal Aminur Rahman) — Sun, 21 Aug 2011 02:59:00 +0000

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)

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

Animated Label with jQuery

noreply@blogger.com (Naufal Aminur Rahman) — Sat, 16 Jul 2011 07:10:00 +0000

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>

4. Click

So easy right, to add Animated Label with jQuery?

Cool Search Box with New Google Style

noreply@blogger.com (Naufal Aminur Rahman) — Sat, 09 Jul 2011 23:19:00 +0000

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(http://4.bp.blogspot.com/-GX7E4j3jwR0/ThMXKjuQ9VI/AAAAAAAAEsE/rJE5Ip1qDEg/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(http://4.bp.blogspot.com/-GX7E4j3jwR0/ThMXKjuQ9VI/AAAAAAAAEsE/rJE5Ip1qDEg/s1600/ico-search.png) no-repeat center #357AE8;
border: 1px solid #2F5BB7;
}
/* Clear floats */
.fclear {clear:both}

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

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

4. Click

Change Image Just with Scroll

noreply@blogger.com (Naufal Aminur Rahman) — Wed, 06 Jul 2011 00:52:00 +0000

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

noreply@blogger.com (Naufal Aminur Rahman) — Sun, 03 Jul 2011 07:59:00 +0000

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

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

noreply@blogger.com (Naufal Aminur Rahman) — Mon, 27 Jun 2011 04:21:00 +0000

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>

5. Click SAVE TEMPLATE

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

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

Fastest and Easiest Way to Build Navigation Menu

noreply@blogger.com (Naufal Aminur Rahman) — Thu, 23 Jun 2011 12:48:00 +0000

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

noreply@blogger.com (Naufal Aminur Rahman) — Sat, 18 Jun 2011 02:19:00 +0000

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(http://2.bp.blogspot.com/_qHkYFLlP0Ms/SvJqelIzLFI/AAAAAAAAAKo/a6py-YJ9UOY/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(http://2.bp.blogspot.com/_qHkYFLlP0Ms/SvJqelIzLFI/AAAAAAAAAKo/a6py-YJ9UOY/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(http://4.bp.blogspot.com/_qHkYFLlP0Ms/SvJqhwz89bI/AAAAAAAAAKw/A9pygIXoy-g/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>

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

noreply@blogger.com (Naufal Aminur Rahman) — Fri, 17 Jun 2011 01:51:00 +0000

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>

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

noreply@blogger.com (Naufal Aminur Rahman) — Sat, 11 Jun 2011 07:13:00 +0000

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

noreply@blogger.com (Naufal Aminur Rahman) — Fri, 10 Jun 2011 04:26:00 +0000

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

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

noreply@blogger.com (Naufal Aminur Rahman) — Sat, 04 Jun 2011 23:18:00 +0000

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>

<div id='zfpm_div' style='display:none;'>
<div id='zfpm_upperBox'>

Add ads, text message, etc.

</div>
<ul id='zfpm_ul'>

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

</ul></div>
<script type='text/javascript'>
var zfpm_colorTheme = 'light'
var zfpm_shareBox = 'no';
</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'/>

=> Customize first the code
4. Click SAVE TEMPLATE

Google Plus One for Blogger

noreply@blogger.com (Naufal Aminur Rahman) — Sat, 04 Jun 2011 10:41:00 +0000

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

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

noreply@blogger.com (Naufal Aminur Rahman) — Wed, 01 Jun 2011 04:26:00 +0000

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

So easy right?

Full Blog Tricks is Ready for Mobile

noreply@blogger.com (Naufal Aminur Rahman) — Mon, 30 May 2011 08:31:00 +0000

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

noreply@blogger.com (Naufal Aminur Rahman) — Sun, 29 May 2011 01:22:00 +0000

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

noreply@blogger.com (Naufal Aminur Rahman) — Sat, 28 May 2011 04:11:00 +0000

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

5. Click SAVE

Want make other effects? Visit Netdisaster now

Floating Social Bookmarks with Mouseover

noreply@blogger.com (Naufal Aminur Rahman) — Fri, 27 May 2011 07:59:00 +0000

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"

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

1, 2 Award for Full Blog Tricks

noreply@blogger.com (Naufal Aminur Rahman) — Thu, 26 May 2011 13:49:00 +0000

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