Free Domain Registration Now

free domain registration for you now:


 
1. www.co.cc
2. www.freedomain.co.nr
3. www.dot.tk

4. hyperwebenable.com
- unlimited email name
- unlimited bandwidth
- free domain renewal
- no hidden fee
- tips and tricks that will help you improve your traffics and page rank

Cute Bookmarking style under posts

Get this cute bookmarking share style with titlepopup under your blog posts now for free. Just follow the instruction given and you will see the cute result below your blog posts...

Step #1

- Go to Layout > Edit HTML

Step #2

- Before you made any adjustment of your blog please save your blog template first!

Step #3

- tick on the Expand Widget Templates

Step #4

- Use Ctrl+F shortcut key and search for this ]]></b:skin> tag:

Step #5

- Paste this code above the  tag:

/* Bookmark with titlepopup by syafzpic.com */
#titlepopup{
position:absolute;
border:none;
background:#323232;/*titlepopup background color*/
padding:2px 5px;
color:#f2f2f2;/*titlepopup font color*/
z-index: 20;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 5px;
-moz-opacity: .87;
display:none;}   
.syafzpicc{opacity:0.45;}
.syafzpicc:hover{opacity:1;}

 

Step #6

- Once again, use Ctrl+F and search for this code:
<data:post.body/>

Step #7

- Paste this code below right after the <data:post.body/> code:

<div> <div style='background:#fbfafa; padding:9px; border:solid 3px #dedede; font-size:12px;'> <table border='0' cellpadding='0' cellspacing='0' width='auto'> <tr> <td> <img src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/syafzpicstyle5.png'/> </td> <td style='background:#ffffff; border:solid 2px #f1f1f1; padding:9px;' width='495'> <center> <!--Twitter--> <a class='titlepopup' expr:href='"http://twitthis.com/twit?url=" + data:post.url' rel='external nofollow' title='twit this post on twitter.com' target='_blank'> <img class='syafzpicc' style='border:none;' alt='Twitter' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/style5twitter.png'/> </a> <!--Digg--> <a class='titlepopup' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' title='Digg this post on digg.com'> <img class='syafzpicc' style='border:none;' alt='Digg' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/style5digg.png'/> </a> <!--Delicious--> <a class='titlepopup' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' title='del.icio.us.com' target='_blank'> <img class='syafzpicc' style='border:none;' alt='Delicious' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/style5delicious.png'/> </a> <!--Facebook--> <a class='titlepopup' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' title='Facebook.com' target='_blank'> <img class='syafzpicc' style='border:none;' alt='Facebook' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/style5facebook.png'/> </a> <!--Technorati--> <a class='titlepopup' expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' title='technorati.com' target='_blank'> <img class='syafzpicc' style='border:none;' alt='Technorati' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/style5technorati.png'/> </a> <!--Yahoo--> <a class='titlepopup' expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&t=" + data:post.title' title='Yahoo.com' target='_blank'> <img class='syafzpicc' style='border:none;' alt='Yahoo' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/style5yahoo.png'/> </a> </center> </td> </tr> </table> </div> </div>

Step #8

- Save your template and done!

Elegant pop up title for your link

Elegant link pop up title for your links in your blog...

------------- STEPS -------------

Step 1
- As usual, go to Layout > Edit HTML

Step 2
- Then use Ctrl+F shortcut key to find this ]]></b:skin> code tag

Step 3
- Paste this below code above the ]]></b:skin> code tag:

/* Titlepopup by syafzpic.com */ 

#titlepopup{
    background:#323232;/*titlepopup background color*/
    color:#f1f1f1;/*titlepopup font color*/

    padding:2px 5px;
    z-index: 20;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 5px;
    -moz-opacity: .87;

    border:none;
    display:none;

    position:absolute;

}    

Step 4
- Paste this script code link in your <head> area or just paste it above the </head>

<script src="http://s2.sigmirror.com/files/53531_qbkj8/jquery.js" type="text/javascript"></script>
<script src="http://s2.sigmirror.com/files/53732_zbfhp/nice_appears.js" type="text/javascript"></script>

Step 5
- Save your template

Step 6
- Just use this code in any link that you wanted the popup title to be appear

<a href="PUT URL HERE" class="titlepopup" title="PUT THE URL TITLE HERE ">URL Name Here</a>

• PUT URL HERE = Replace this with URL link, for example: http://blogging-style.blogspot.com
• PUT THE URL TITLE HERE  = Replace this with the pop up title, for example: Visit me again.
  
• URL Name Here = Replace this with the name of your URL, for example: Blogger Tips and Style  
  

----------------------- Finished ------------------------

Example link with title pop up code:
<a href="http://www.syafzpic.com" class="titlepopup" title="Visit me at syafzpic.com ">SyafzPic</a>

Result = mouse-over to this word, SyafzPic

Printer friendly

Just paste this code in your post HTML:

<a href="javascript:window.print()">Print</a>

Popular posts widget

Show your popular posts at the sidebar.
Go to Add a Gadget and choose the HTML/JavaScript. Copy and paste this code in it.

<script type="text/javascript">
start_views_num = 1;
limit = 5;
</script>
<script src="http://h41r3z4n.googlepages.com/MostViewed.js" type="text/javascript">
</script>

Check your site rank with Alexa

Find out your site rank with the alexa.com now

Browser safe font for web designers

Fonts make a big difference to the look and experience of the website. Usage of fonts requires sense of aesthetics and discretion. We have the liberty to use any font we want in an image but when we specify the fonts for the text on a web page, we need to ensure that we use only "browser safe" fonts.

Browsers support TrueType fonts and all operating systems come with sets of standard TrueType fonts that have been preinstalled. These preinstalled TrueType fonts are what we can say are "browser safe" fonts.

My recommendation is to specify at least three fonts from the following list in the style-sheet. Out of the three fonts specified, make sure that at least one of them is available in Macintosh and one for Windows. Please remember that multiword font names should be in quotes (example "Times New Roman").

So, here is a list of fonts that are preinstalled in Macintosh and Windows computers as they come out of the box. 

Windows OS

• Arial (Bold, Italic, Bold Italic)
• Arial Black
• Comic Sans (Bold)
• Courier New (Bold, Italic, Bold Italic)
• Franklin Gothic Medium (Italic) - as of Windows XP
• Georgia (Bold, Italic, Bold Italic)
• Impact
• Lucida Console
• Lucida Sans Unicode
• Marlett
• MS Sans Serif - as of Windows XP
• Palatino Linotype (Bold, Italic, Bold Italic)
• Symbol
• Tahoma (Bold)
• Times New Roman (Bold, Italic, Bold Italic)
• Trebuchet (Bold, Italic, Bold Italic)
• Verdana (Bold, Italic, Bold Italic)
• Webdings

 Mac OS

• American Typewriter (Bold)
• Andale Mono - Only installed in OS X if Classic is installed
• Apple Chancery
• Apple Symbols
• Arial (Bold, Italic, Bold Italic)
• Arial Black
• Arial Narrow (Bold, Italic, Bold Italic)
• Arial Rounded MT Bold
• Baskerville (Bold, Italic, Bold Italic)
• Big Caslon
• Brush Script MT
• Capitals - Only installed in OS X if Classic is installed
• Charcoal - Only installed in OS X if Classic is installed
• Chicago - Only installed in OS X if Classic is installed
• Cochin (Bold, Italic, Bold Italic)
• Comic Sans MS (Bold)
• Copperplate (Bold)
• Courier (Bold, Oblique, Bold Oblique) - Only installed in OS X if Classic is installed
• Courier New (Bold, Italic, Bold Italic)
• Didot (Bold, Italic)
• Futura (Sans-serif)
• Gadget - Only installed in OS X if Classic is installed
• Geneva
• Georgia (Bold, Italic, Bold Italic)
• Gill Sans (Bold, Italic, Bold Italic)
• Helvetica (Bold, Oblique, Bold Oblique)
• Helvetica Neue (Bold, Italic, Bold Italic)
• Herculanum
• Hoefler Text (Bold, Italic, Bold Italic)
• Impact
• Marker Felt
• Monaco
• New York - Only installed in OS X if Classic is installed
• Optima (Bold, Italic, Bold Italic)
• Palatino (Bold, Italic, Bold Italic) - Only installed in OS X if Classic is installed
• Papyrus
• Sand - Only installed in OS X if Classic is installed
• Skia
• Symbol
• Techno - Only installed in OS X if Classic is installed
• Textile - Only installed in OS X if Classic is installed
• Times (Bold, Italic, Bold Italic)
• Times New Roman (Bold, Italic, Bold Italic)
• Trebuchet (Bold, Italic, Bold Italic)
• Verdana (Bold, Italic, Bold Italic)
• Webdings - Only installed in OS X if Classic is installed
• Zapf Dingbats
• Zapfino  

Nice font for web design

Hey check this out!

Nice fonts for web designer:


1. Sketch Rockwell

Download

2. Grey Magus

Download


3. Kelly Script

Download

4. Bubbly Frog


Download

5. AB Exp


Download


6. Bleeding Cowboys


Download

7. Bauhaus

Download


8. Contempory

Download


9. Diavlo

Download


10. Comfortaa

Download




11. Forgotten Futurist


Download




12. Opticon One

Download



13. Lois Ann

Download




14. Grunge Serifia

Download

SyafzMagz and SyafzDesign

Fancy Bookmarking style below post

Hi... nice to meet all of you again.

In my older post, I had tell all of you about my first social bookmark share design. Today, I want to tell you my second social bookmark share design. This second design have more different than the first one (Please don't remove the copyright by syafzpic.com part). I don't want to waste any more time for the introduction session. Let's we proceed to the tutorial shown below...

Step 1.
- Use Ctrl+F and search for this  ]]></b:skin> tag. Paste this code above the ]]></b:skin> tag:

.syafzpicc {
opacity: 0.45;
}
.syafzpicc:hover {
opacity: 1;
}

Step 2.
- Then, use and search Ctrl+F for this <data:post.body/> code.

Step 3.

- Paste this code below the <data:post.body/> code:

<div> <div style='background:#9f3503; padding:9px; border:solid 3px #dedede; font-size:12px;'> <table border='0' cellpadding='0' cellspacing='0' width='auto'> <tr> <td> <img style='border:none;' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/sharethispostone_by_syafzpic.png'/> </td> <td style='background:#341709; border:solid 2px #2e2e2e; padding:9px;' width='495'> <center> <!--Twitter--> <a class='syafzpicc' expr:href='"http://twitthis.com/twit?url=" + data:post.url' rel='external nofollow' title='twit this post on twitter.com.' target='_blank'> <img style='border:none;' alt='Twitter' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/TwiTTer_syafzpic.png'/> </a> <!--Digg--> <a class='syafzpicc' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' title='Digg this post on digg.com.'> <img style='border:none;' alt='Digg' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/digg_32.png'/> </a> <!--Facebook--> <a class='syafzpicc' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' title='facebook.com.' target='_blank'> <img style='border:none;' alt='Facebook' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/facebook_32.png'/> </a> <!--Delicious--> <a class='syafzpicc' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' title='del.icio.us.com.' target='_blank'> <img style='border:none;' alt='Delicious' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/delicious_32.png'/> </a> <!--Stumble--> <a class='syafzpicc' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' title='stumbleupon.com.' target='_blank'> <img style='border:none;' alt='Stumble' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/stumbleupon_32.png'/> </a> <!--Technorati--> <a class='syafzpicc' expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' title='technorati.com.' target='_blank'> <img style='border:none;' alt='Technorati' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/technorati_32.png'/> </a> </center> </td> </tr> </table> </div> </div>


Step 4.
- Save your template and enjoy the elegant bookmarking share under your post.


Credits:
- syafzpic 

I hope all of you enjoy the tutorial and please leave a comment...

Nice bookmark under post

Hi...I'm SyafiqZaimi, Syarhanz's brother, nice to meet all of you.

Peace be upon to all of you. Today is a great day and I want to start it by posting something in my blog post.
Now, I want to show you my first social bookmark share design. I make it by my own and now I want to share it with my readers (please don't remove the copyright by syafzpic.com)... Like people always told, 'sharing is caring + loving'. To put that nice bookmark share on your blog, you just need to follow the steps given. You can see the example at the end of this post.

Step 1.
- Use Ctrl+F and search for this  ]]></b:skin> tag

Step 2.
- Then, use and search Ctrl+F for this <data:post.body/> code.

Step 3.

- Paste this code below the <data:post.body/> code:

<!-- syafzpic bookmark style 3. For more details please go to syafzpic.com --> <div> <div style='background:#341709; padding:9px; border:solid 3px #dedede; font-size:12px;'> <div> <img style='border:none;' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/lovethispostheader.png'/> </div> <table border='0' cellpadding='0' cellspacing='0' width='auto'> <tr> <td style='background:#9f3503; border:solid 2px #2e2e2e; padding:9px;' width='495'> <center> <!--Twitter--> <a class='syafzpicc' expr:href='"http://twitthis.com/twit?url=" + data:post.url' rel='external nofollow' title='twit this post on twitter.com.' target='_blank'> <img style='border:none;' alt='Twitter' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/TwiTTer_syafzpic.png'/> </a> <!--Digg--> <a class='syafzpicc' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' title='Digg this post on digg.com.'> <img style='border:none;' alt='Digg' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/digg.png'/> </a> <!--Furl--> <a class='syafzpicc' expr:href='"http://furl.net/storeIt.jsp?u=" + data:post.url + "&t=" + data:post.title' title='share with furl.com.' target='_blank'> <img style='border:none;' alt='Furl' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/furl.png'/> </a> <!--Delicious--> <a class='syafzpicc' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' title='del.icio.us.com.' target='_blank'> <img style='border:none;' alt='Delicious' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/delicious.png'/> </a> <!--Stumble--> <a class='syafzpicc' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' title='stumbleupon.com' target='_blank'> <img style='border:none;' alt='Stumble' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/stumbleupon.png'/> </a> <!--Technorati--> <a class='syafzpicc' expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' title='technorati.com.' target='_blank'> <img style='border:none;' alt='Technorati' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/technorati.png'/> </a> <!--Reddit--> <a class='syafzpicc' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' title='share with technorati.com.' target='_blank'> <img style='border:none;' alt='Technorati' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/reddit.png'/> </a> </center> </td> </tr> </table> </div> </div>

Step 4.
- Save your template and enjoy the elegant bookmarking share under your post.


Credits:
- syafzpic

I hope all of you enjoy the tutorial and please leave a comment...Enjoy the tutorial!

Add Shadow Effects

Hello and nice to meet all of you again readers. Now, you have come to the right time and right post because you will learn something special that rarely found in blogging. That special thing that I had said just now is "Adding Shadow Effect". For your information, we can add/put shadow effect at the texts or words that we wrote. If you want to learn how to do it, you just need to follow the four, fast easy steps below.






Step #1:
Log in to your blogger like usual using your blog ID. Go to your Layout and choose Edit HTML tab. Back up your template. Click at the Download Full Template. Tick at the Expand Widget Templates.

Step #2:

Use Ctrl+F and search for this ]]></b:skin> tag. Copy and paste this code above the ]]></b:skin> tag

.syafzpic-shadow {
color: #222;
font-size: 14px;
font-family: helvetica, tahoma, arial;
text-shadow: 0px 2px 3px #555;
}

Step #3:

Save template.

Step #4:

In every section you want this shadow effect to be worked, you just need to add this code:

<div class="syafzpic-shadow" >

PUT YOUR TEXT HERE

</div>

For example:

Example 1: without link

<div class="syafzpic-shadow" >

 Blogger Tips and Style

</div>

Example 2: with link

<div class="syafzpic-shadow" >

<a class="syafzpic-shadow" href="PUT TARGET LINK HERE"><strong>Welcome to MyBlog</strong></a>

</div>

You can replace the blue text above with your own text.Also do not forget to change the PUT TARGET LINK HERE with your target link(url).

For any question, please leave a comment...

Credits:
1. syafzpic.com

Redirected to Comment Form area

When you click the comment link, it will be redirected to the comment box in your blog post

Just paste the html link in the Edit HTML section in your post

<a href='#respond' rel='nofollow'>Leave a response</a>

 

Please leave me a response

Your Blog Value, Estimation and Information

Check your blog value, estimation and information. All of them can be done by following the two fast steps given below. Read this post clearly. Open your eyes bigger. But this post is very simple but I hope all of you are happy with it.

Step 1: Go to cubestat.com.

Step 2: Enter your House(Blog) URL and click at the Check button.

After you enter your URL and click at the Check button, you now can see your blog value, estimation and information. That's all for today. Always always comment my blog... 

If you are pleasure, please give me a comment.

Add a Light Translator to your blog

As blogger, we must always be wondered what will happen if visitors from other country with other language come to our blog. If we wrote article in the language that they did not understand, what will happen. The visitors will not visit our house(blog) again. This such things will not be happen to your blog after you follow the steps given below...

Step 1: Sign in to blogger as usual using your ID. Go to your Layout and choose Edit HTML tab. Back up your template. Click at the Download Full Template. Tick at the Expand Widget Templates.

Step 2: Use Ctrl+F and find ]></b:skin> tag. Above the  ]></b:skin> tag, paste this code:

.other-language {

font: bold 11px "Trebuchet MS", Arial, Helvetica, sans-serif;

color: #758D38;

width : 250px;

background: #F2F2F2;

}

Attention!!!

• You may change the colour code(758D38) with the colour code that you like.

Step 3: Click at the Save Template.

Step 4: Go to the Page Elements at the Layout and choose Add a Gadget. A small pop up window window will appeared. Between the choices, you must click at the HTML/JavaScript. A small pop up window will appeared again but this window has a content box. Paste this code in the content box appeared.

<small>Choose : </small>

<select onchange="if (this.value!='') window.open(this.value,'_blank')" class="other-language">

<option selected value="0"/> Other Language

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=sq&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Albanian

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=ar&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Arabic

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=bg&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Bulgarian

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=ca&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Catalan

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=zh-CN&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Chinese (Simplified)

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=zh-TW&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Chinese (Traditional)

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=hr&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Croatian

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=cs&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Czech

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=da&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Danish

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=nl&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Dutch

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=en&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> English

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=et&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Estonian

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=tl&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Filipino

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=fi&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Finnish

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=fr&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> French

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=de&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> German

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=el&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Greek

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=gl&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Galician

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=iw&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Hebrew

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=hi&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Hindi

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=hu&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Hungarian

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=it&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Italian

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=ja&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Japanese

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=ko&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Korean

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=lv&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Latvia

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=lt&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Lithuanian

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=mt&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Maltese

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=no&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Norwegian

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=fa&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Persian

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=pl&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Polish

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=pt&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Portuguese

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=ro&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Romanian

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=ru&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Russian

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=sr&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Serbian

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=sk&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Slovak

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=sl&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Slovenian

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=es&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Spanish

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=sv&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Swedish

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=th&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Thai

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=tr&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Turkish

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=uk&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Ukrainian

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=vi&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Vietnamese

<!-- Please Don't Change or Remove This Code -->

<option value="http://YOURBLOGNAME.blogspot.com"/>

<!-- Enjoy This  -->

</select>

<small><div style="text-align:right;">by <a href="http://translate.google.com" target="_blank">Google Translate</a></div></small>

Attention !!!

• Please change YOURBLOGNAME i in the code above with your blog name.
• You can delete language that you don't want or don't like. To do that, you only need to delete some code. For example:
  

1:  To delete Albanian, please delete:

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=sq&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Albanian

2: To delete Arabic, please delete:

<option value="http://translate.google.com/translate?hl=en&sl=id&tl=ar&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/> Arabic

Step 5: Save it. That's all for now. Thank You. Hope all of you enjoy this post. See you again. Bye2...

Please leave this post with a comment..Thanks..

Add Twitter Updates in your blog

Twit, twit, twit and hello friends. I opened the laptop and started the day by giving all of you such a brilliant tutorial so that you can use it while blogging. We actually can see our twitter update at our blog. I bet all of you must be wondered about how to do it. All can be answered after you follow the steps given below.
Please read and understand it clearly and I hope you will be enjoyed with the tutorials...



Step #1: Sign in to blogger.com as usual. Go to your Layout > Page Elements and click at the Add a Gadget. Between the choices, you choose the HTML/JavaScript. A blank box in a small pop up window will appeared.

Step #2. Copy and paste this code in the box appeared:

<div style="background:#f5f5f5; border:solid 3px #f2f2f2;">
<div id="twitter_div" style="background: url(http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/TwiTTer_syafzpic.png) top left no-repeat; padding-left: 50px;"><ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/syafiqzaimi"><strong>follow me on Twitter</strong></a>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/syafiqzaimi.json?callback=twitterCallback2&count=1" type="text/javascript"></script>
</div>

Attention!!!

• Replace the syafiqzaimi in the code above with your twitter ID.
• Replace the number 1 at the count=1 above to change the number of the Twitter updates

Step #3. Save it and you just need to view your blog.

If you are pleasure, please leave a comment  


Credits:
1. Twitter
2. syafzpic

Button for Facebook Share Count

  Hey guys, nice to meet you again. I did not post anything after a while. I was busy with other work but today I want to represent you with a nice tutorial. Do you know how many are your facebook share count? If you don't know, you need to read clearly to this post "Button for Facebook Share Count". You will have your own Button for Facebook Share Count now!




 
Step #1: Like always, you must login to blogger. Go to your layout and click at the Edit HTML tab. You need to backup your template by clicking at the Download Full Template. Tick at the Expand Widget Templates.

Step #2: Use Ctrl+F to find this line of code:

<div class='post-header-line-1'/>   or    <p class='post-header-line-1'/>    or    <data:post.body/>

Step #3: Below are example/choices Button for Facebook Share Count. Choose one of them and copy the code below it. You paste the code copied above the
<div class='post-header-line-1'/>   or    <p class='post-header-line-1'/>   or    <data:post.body/>

code.

Choices Given: Style 1 and Style 2...

Style 1:

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>  
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Style2:

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>  
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Step #4: Save the Template and the work is DONE. To see the result, you can open your blog page and see your Button for Facebook Share Count at your blog post.

I hope you all enjoy with this post. If you are pleasure, please leave a comment on this post. Bye. Hope you like this house(blog).

Scrolling Follow Bar for blogger

Add scrolling bar that always follow you when you scroll up and down the blog...



Step #1: As usual, you must login to blogger with your ID. You go straight to the Layout and choose Edit HTML.

Step #2: Use Ctrl+F and search for this </head> tag.

Step #3: Paste this code before the </head> tag:

<!--syafzpic bar start here-->

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'/>

    <script type='text/javascript'>

        $(function() {

            var offset = $(&quot;#syafzpic-bar&quot;).offset();

            var topPadding = 15;

            $(window).scroll(function() {

                if ($(window).scrollTop() &gt; offset.top) {

                    $(&quot;#syafzpic-bar&quot;).stop().animate({

                        marginTop: $(window).scrollTop() - offset.top + topPadding

                    });

                } else {

                    $(&quot;#syafzpic-bar&quot;).stop().animate({

                        marginTop: 0

                    });

                };

            });

        });

    </script>

<!--syafzpic bar end here-->

Step #4: Use Ctrl+F again to find this ]]></b:skin> tag. Paste this code above the ]]></b:skin> tag:

/************ syafzpic-bar ***********/
#syafzpic-bar ul { background: #eee; padding: 10px; }
li { margin: 0 0 0 20px; }
#syafzpic-bar { width: 190px; float: right; }

Step #5: Save the template.

Step #6: You go to the Page Elements at the Layout and choose Add a Gadget. In the small pop up window, you must click at the HTML/JavaScript. A small pop up window will appear again with it content box.

Step #7: Paste the code below in the content box appeared:

<div id="syafzpic-bar" style="background: #dedede; color:#000000; border: solid 2px #f2f2f2;">
<ul>
    <li><a href='Put Your Link Here'>Put Your Text Here</a></li>
    <li><a href='Put Your Link Here'>Put Your Text Here</a></li>
    <li><a href='Put Your Link Here'>Put Your Text Here</a></li>

    <li><a href='Put Your Link Here'>Put Your Text Here</a></li>

    <li><a href='Put Your Link Here'>Put Your Text Here</a></li>
</ul>       
</div>


Setup instruction:

• Put Your Link Here   =  Put your link at this area
• Put Your Text Here   =  Put your text here
  

 Example:

• Put Your Link Here   =  http://blogging-style.blogspot.com
• Put Your Text Here   =  Blogging Tips and Style
  

Example code with background:

<div id="syafzpic-bar" style="background: #dedede; color:#000000; border: solid 2px #fff000;">
<ul>
    <li><a href='http://www.syafzpic.com'>syafzpic</a></li>
    <li><a href='http://blogging-style.blogspot.com'>Blogging Tips and Style</a></li>
    <li><a href='http://www.blogger.com'>Login</a></li>

    <li><a href='http://www.flickr.com'>Flickr</a></li>

    <li><a href='http://www.twitter.com'>Twitter</a></li>

</ul>       

</div>    

Example code without background:

<div id="syafzpic-bar">
<ul>
    <li><a href='http://www.syafzpic.com'>syafzpic</a></li>
    <li><a href='http://blogging-style.blogspot.com'>Blogging Tips and Style</a></li>
    <li><a href='http://www.blogger.com'>Login</a></li>

    <li><a href='http://www.flickr.com'>Flickr</a></li>

    <li><a href='http://www.twitter.com'>Twitter</a></li>

</ul>       

</div>    

You can also put your chat box code in it.
Example of the follow bar with chat box code:

<div id="syafzpic-bar" style="background: #dedede; color:#000000; border: solid 2px #fff000;">

Put your chat box code in this area

      

</div>  

Step #8: Save it and Done!


Demo  |  Demo with Chat Box

Please leave me a comment... enjoy!

How to improve the loading time of your blog

Hello friends...
Do you know, image in your blog will make your blog more interesting?
But the present of images in your blog will make the loading time of your blog is longer.
The long time taken for the loading will make the readers uninvited to read your blog.
By using the jQuery Lazyload, the loading time of your blog will be improved.
The image in your blog will be loaded when you 'look' at them.
So, to improve the loading time of your blog, you have to make some adjustment to your blog.


Step 1: Login to Blogger.com

Step 2: Go to Layout > Edit HTML

Step 3: Find this <b:skin><![CDATA[/*  tag and paste this code above it. If you already put this code please ignore this code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

Step 4: Use Ctrl+F and search for this </head> code.

Step 5: Replace the </head> with this code:

  <script src='http://dl.getdropbox.com/u/1693834/javascript/lazyload.js' type='text/javascript'/>

<script type='text/javascript'>

    $(function() {

      $(&quot;.post img&quot;).lazyload({

        placeholder : &quot;http://i195.photobucket.com/albums/z105/dantearaujo/box.gif&quot;,

        threshold : 200

      });

    });

</script>

</head>

Step 6: Save your template and done.



Credits:

- The Lazyloader is inspired by  YUI ImageLoader.Utility by Matt Mlinac
- BloggerTuts
- Demo

  If you have any problem when installing the code, please leave a comment. You comment will be replied soon...

Show star rating in your Blogger posts

Add star rating to your blog posts now...
Star rating will show the rating of your posts given by readers...
Let us follow the easy steps below:

Step #1: Login to Blogger.com

Step #2: Go to Layout > Page Elements... Choose this:

Step #3:  Find this code line:

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

or

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

Step #4:
Replace the
<div class=''post-footer-line post-footer-line-1'> or  <p class='post-footer-line post-footer-line-1'> code with this code:

<div class=''post-footer-line post-footer-line-1'>
 <span class='star-ratings'>
 <b:if cond='data:top.showStars'>
 <div expr:g:url='data:post.absoluteUrl' g:background-color='22221f' g:height='42' g:text-color='c0c0b4' g:type='RatingPanel' g:width='280'/>
 </b:if>
 </span>

or this code

<p class=''post-footer-line post-footer-line-1'>
<span class=’star-ratings’> <b:if cond=’data:top.showStars’> <div expr:g:background-color=’data:backgroundColor’ expr:g:text-color=’data:textColor’ expr:g:url=’data:post.absoluteUrl’ g:height=’42′ g:type=’RatingPanel’ g:width=’180′/> </b:if> </span>

Step #5: Save your template and done!

How to Change blogspot.com to co.cc

 

GET YOUR OWN FREE DOMAIN NAME NOW www.YOURDOMAINNAME.co.cc !!!

Join for free:

• Go to this link and register now for free:  www.co.cc 
• How to setup with the Blogger, please refer to this link: http://www.co.cc/blogger/blogger.php

After the step had finished, you've to wait for 48 hours for your YOURDOMAINNAME.blogspot.com to be redirected to the new www.YOURDOMAINNAME.co.cc


Enjoy It!