Fancy Comment form for blog

Hey... it is a nice day today. Maybe some of you wondering where did I go yesterday. I have some work to do yesterday, that why I haven't made some updates in for my house(blog). But today I have something to tell all of you.
We always wanted to have a great looking comment area below our post isn't it?
So, today I will show  you how to make it comes true...

You can choose any type of comment form that you like and I will tell you the advantage of each style.


Type 1: Disqus

- Free sign up

-Seek out social comments and mentions from places such as Twitter, FriendFeed, Digg, and YouTube, then display them with your comments.

- Disqus Comments also lets your readers choose their identity, with Facebook Connect, OpenID, or Twitter Sign-in, when they leave a comment.
- Bring lively, real-time chatter onto your page with real-time posting and updating
- Every time someone leaves a comment, they can easily share the discussion happening on your site to friends and followers
- Features such as multi-site moderation, multiple moderators, bulk actions, and automated decisions
- features cutting-edge semantic technology that helps you automatically recognize offensive posts and keep the discussion civilized.
- can encourage verified commenter profiles — real comments from real people


Type 2: IntenseDebate

- You can reply  directly to a specific comment and receive alert for replies and new comments.
- Furthemore, you can also give respond and moderate comment via email service...
- Moreover, it enable your users to see with whom they are debating and give your readers an identity.
- the best comment will be shown at the front
- The auto filter comment by keyword, email and IP addresses, help you to prevent unwanted keywords, ban user who are using the specific email and IP addresses, from posting in your comment posts
- It is also allow you to assign admins to manage the same blog or website.
- The IntenseDebate allow your readers to post comments using services like OpenID, Facebook, and Twitter.
- If the readers doesn't have any user account, they can choose to sign up for an IntenseDebate  profile or simply comment without one as a Guest.

Hope you like it. Please leave me a respond below...

How to be a good blogger

Before I start talking about this post, I want to ask for apologize to all this blog reader and visitor as I  didn't post anything since 11 January 2011. I really want to post on something but I had a lot of things to do for a few months.

As we all know that Bloggers nowadays are very active visiting blog and blogwalking to promote their blog and website. This is not a problem but if we do it wrong, this can bring to problem. I bet that majority of bloggers are using chat box so that the blogwalker and also the visitor can write on something about the site or chat with the other blogger.

But there is a problem occur here. Plenty of bloggers nowadays like to visit on other people blog but not to read post. After they load other people's blog, firstly they will look whether the blog has chat box or not. If there is a chat box, they will leave a message so that the blogger owner or other blogger will visit their blog.

And if there is no chat box, they will just leave the blog and visit others blog. For me, this is not nice. If we are on other people's blog, why not we take a little bit time to read the post and leave on comment on the post. I guarantee that the owner of the blog that you have leave comment on his post, he will felt that he has been appreciated.

I can bet that you will felt like been appreciated if other blogger make comment on your post especially a good and nice comments. If a bad comment were given, that's alright. At least you can fix on your mistake of posting...

Below are other examples or ways to be a good blogger:

1. If you want to leave a comment on other blogger's blog or website, you must ensure that you make a nice comment so that spam can be avoided.
2. If you want to leave a comment so that the blogger can fix the mistake on the post, make sure that your comment is not cynical so that the comment will not categorized as spam.                                             
3. When you want to make comment or leave message on chat box, you cannot make such a long message to avoid spam and give comfort  to other blogger. 
4. Been a loyal follower. A follower must always follow on update made by the blog you had follow. This is one the way to be a loyal follower. I don't say that there is no loyal follower out there but nowadays, it is so difficult to find a loyal follower.It is up to you. Maybe some of you think that being a loyal follower is not important but I want to said, "to be a good blogger you must need this characteristic".
5. When you want to leave message on the chat box, make sure that you don't make consecutive  comments like below :-

That's all for today...Thank you for reading.

Easy Tooltip Style Effects

DEMOhttp://syarhanz-demo.blogspot.com/

1. First, paste this code link in the <head> area or above the </head> tag

<link href='http://s2.sigmirror.com/files/56534_xo9yn/tooltipseffect.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://s2.sigmirror.com/files/56535_7ovxx/tooltipseffect.js' type='text/javascript'/>
<script src='http://s2.sigmirror.com/files/56536_gwjrt/efsio.js' type='text/javascript'/>

2. Finally, click the save button. Finished !

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