tag:blogger.com,1999:blog-55402885473038143932024-02-26T23:09:27.052-08:00Blogger Tips and StyleIt is all about blogging tips and style... html problems, improving your site tips and othersSyarhanhttp://www.blogger.com/profile/10578010648350539420noreply@blogger.comBlogger84125tag:blogger.com,1999:blog-5540288547303814393.post-23983509621074764492011-12-31T09:16:00.000-08:002014-01-17T23:15:12.411-08:00Fancy Comment form for blog<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/_KIuDFnyM-FM/S1COSo1YeZI/AAAAAAAAAT8/6ypAlZ53Pyw/s1600-h/example_syafzpic_comment_form.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_KIuDFnyM-FM/S1COSo1YeZI/AAAAAAAAAT8/6ypAlZ53Pyw/s320/example_syafzpic_comment_form.jpg" height="238" width="320" /></a></div>
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.<br />
We always wanted to have a great looking comment area below our post isn't it?<br />
So, today I will show you how to make it comes true...<br />
<br />
You can choose any type of comment form that you like and I will tell you the advantage of each style.<br />
<br />
<br />
<span style="color: #990000; font-size: large;"><b>Type 1</b></span><span style="font-size: large;"><b>: </b></span><span style="color: blue; font-size: large;">Disqus</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.disqus.com/"><img border="0" src="http://3.bp.blogspot.com/_KIuDFnyM-FM/S1CO8R0jhlI/AAAAAAAAAUM/EGUDrHFSCsE/s320/disqus-logo.png" /></a></div>
<br />
- Free sign up<br />
<div>
-Seek out social comments and mentions from places such as Twitter,
FriendFeed, Digg, and YouTube, then display them with your comments. </div>
-
Disqus Comments also lets your readers choose their identity, with <b>Facebook Connect</b>, OpenID, or <b>Twitter Sign-in</b>, when they leave a comment.
<br />
- Bring lively, real-time chatter onto your page with real-time posting and updating<br />
- Every time someone leaves a comment, they can easily share the discussion happening on your site to friends and followers<br />
- Features such as multi-site moderation, multiple moderators, bulk actions, and automated decisions<br />
- features cutting-edge semantic technology that helps you automatically
recognize offensive posts and keep the discussion civilized.<br />
- can encourage verified commenter profiles — real comments from real people<br />
<br />
<br />
<b style="color: #990000;"><span style="color: #990000; font-size: large;">Type 2</span></b><span style="font-size: large;"><b>:</b></span> <span style="color: blue; font-size: large;">IntenseDebate</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.intensedebate.com/"><img border="0" src="http://1.bp.blogspot.com/_KIuDFnyM-FM/S1CRhfW9V_I/AAAAAAAAAUU/Q3aAFhiFozY/s320/intensedebate-logo.png" /></a></div>
<br />
<br />
- You can reply directly to a specific comment and receive alert for replies and new comments.<br />
- Furthemore, you can also give respond and moderate comment via email service...<br />
- Moreover, it enable your users to see with whom they are debating and give your readers an identity.<br />
- the best comment will be shown at the front<br />
- 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<br />
- It is also allow you to assign admins to manage the same blog or website.<br />
- The IntenseDebate allow your readers to post comments using services like <b style="color: #134f5c;">OpenID</b>, <b style="color: #073763;">Facebook</b>, and<b> <span style="color: #134f5c;">Twitter</span></b>.<br />
<b>-</b> If the readers doesn't have any user account, they can choose to sign up for an <a href="http://www.intensedebate.com/">IntenseDebate</a> profile or simply comment without one as a Guest.<br />
<br />
<br />
<br />
<br />
<div style="color: #93c47d;">
<b>Hope you like it. Please leave me a respond below...</b></div>
Syarhanhttp://www.blogger.com/profile/10578010648350539420noreply@blogger.com29tag:blogger.com,1999:blog-5540288547303814393.post-87974086678691438542011-06-08T00:43:00.000-07:002014-01-30T16:33:44.496-08:00How to be a good blogger<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-u9WGszFmOGg/Te8nCWTnSuI/AAAAAAAAAZk/kF63X82TI-M/s1600/aaaaass.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://1.bp.blogspot.com/-u9WGszFmOGg/Te8nCWTnSuI/AAAAAAAAAZk/kF63X82TI-M/s1600/aaaaass.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
<br />
<br />
<br />
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.<br />
<br />
As we all know that <span style="background-color: yellow;">Bloggers nowadays are very active</span> 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.<br />
<br />
But there is a problem occur here. <span style="background-color: #f9cb9c;">Plenty of bloggers nowadays like to visit on other people blog</span> 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.<br />
<br />
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.<br />
<br />
I can bet that <span style="background-color: #d5a6bd;">you will felt like been appreciated if other blogger make comment on your post </span>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...<br />
<br />
Below are other examples or ways to be a good blogger:<br />
<br />
<ol>
<li style="background-color: yellow;">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.</li>
<li style="background-color: cyan;"><span style="background-color: cyan;">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. </span></li>
<li style="background-color: yellow;">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. </li>
<span style="background-color: white;">
</span>
<li style="background-color: cyan;">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".</li>
<li style="background-color: yellow;"><span style="background-color: yellow;">When you want to leave message on the chat box, make sure that you don't make consecutive comments like below :-</span></li>
</ol>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-AnWqBx1Ue0o/Te8BNHDgf0I/AAAAAAAAAZg/-ftn6CeSZ0M/s1600/aaa.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-AnWqBx1Ue0o/Te8BNHDgf0I/AAAAAAAAAZg/-ftn6CeSZ0M/s1600/aaa.JPG" /></a></div>
<br />
<div style="color: blue;">
<span style="font-size: large;">That's all for today...Thank you for reading.</span></div>
<ol style="color: blue;">
</ol>
<br />
<br />Syarhanhttp://www.blogger.com/profile/10578010648350539420noreply@blogger.com5tag:blogger.com,1999:blog-5540288547303814393.post-66001119068294118192010-02-15T05:19:00.000-08:002010-02-15T05:19:58.618-08:00Easy Tooltip Style Effects<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/_KIuDFnyM-FM/S3F4PzN2CmI/AAAAAAAAAYI/CyjfXNrjYos/s1600-h/tiptool.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_KIuDFnyM-FM/S3F4PzN2CmI/AAAAAAAAAYI/CyjfXNrjYos/s320/tiptool.PNG" /></a></div>
<br />
<br />
<a href="http://syarhanz-demo.blogspot.com/"><b style="color: purple;"></b></a><b style="color: purple;">DEMO<a href="http://syarhanz-demo.blogspot.com/">http://syarhanz-demo.blogspot.com/</a> </b><br />
<br />
1. First, paste this code link in the <b><head></b>
area or above the <b></head></b> tag<br />
<br />
<div style="background-color: #fff2cc;">
<link
href='http://s2.sigmirror.com/files/56534_xo9yn/tooltipseffect.css'
media='screen' rel='stylesheet' type='text/css'/><br />
<script
src='http://s2.sigmirror.com/files/56535_7ovxx/tooltipseffect.js'
type='text/javascript'/><br />
<script
src='http://s2.sigmirror.com/files/56536_gwjrt/efsio.js'
type='text/javascript'/></div>
<br />
2. Finally, click the save
button. Finished !Syarhanhttp://www.blogger.com/profile/10578010648350539420noreply@blogger.com14tag:blogger.com,1999:blog-5540288547303814393.post-85767265660354072592010-01-27T02:33:00.000-08:002010-01-27T02:33:53.264-08:00Free Domain Registration Now<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/_KIuDFnyM-FM/S1_AYQq__8I/AAAAAAAAAWs/7CD8iQveop0/s1600-h/free+domain.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_KIuDFnyM-FM/S1_AYQq__8I/AAAAAAAAAWs/7CD8iQveop0/s320/free+domain.png" /></a><br /></div>
<br />
free domain registration for you now:<br />
<br />
<br />
<br />
<span style="font-size: large;">1. <a href="http://www.co.cc/">www.co.cc</a></span><br />
<span style="font-size: large;">2. <a href="http://www.freedomain.co.nr/signup_basic.php">www.freedomain.co.nr</a></span><br />
<span style="font-size: large;">3. <a href="http://www.dot.tk/en/index.html?lang=en">www.dot.tk</a></span><br />
<span style="font-size: large;">
<br />
4. <a href="http://hyperwebenable.com/">hyperwebenable.com</a></span><br />
- unlimited email name<br />
- unlimited bandwidth<br />
- free domain renewal<br />
- no hidden fee<br />
- tips and tricks that will help you improve your traffics and page rank<br />Syarhanhttp://www.blogger.com/profile/10578010648350539420noreply@blogger.com10tag:blogger.com,1999:blog-5540288547303814393.post-92057409215452685702010-01-27T01:53:00.000-08:002010-01-27T02:10:56.922-08:00Cute Bookmarking style under posts<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_KIuDFnyM-FM/S1_xuhI8EvI/AAAAAAAAAW8/-Yy9z47XSPE/s1600-h/style5thumbnail.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/_KIuDFnyM-FM/S1_xuhI8EvI/AAAAAAAAAW8/-Yy9z47XSPE/s320/style5thumbnail.png" /></a><br /></div>
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...<br />
<br />
<br />
<br />
<br />
<style>
/* 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;}
</style>
<br />
<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>
<br />
<div style="color: purple;">
<b>Step #1</b><br />
</div>
- Go to <b><span style="color: #660000;">Layout</span>
> <span style="color: #660000;">Edit HTML</span></b><br />
<br />
<div style="color: purple;">
<b>Step #2</b><br />
</div>
- Before you made
any adjustment of your blog please <b>save your blog template first!</b><br />
<br />
<div style="color: purple;">
<b>Step #3</b><br />
</div>
- tick on the <b style="color: #660000;">Expand Widget Templates</b><br />
<br />
<div style="color: purple;">
<b>Step #4</b><br />
</div>
- Use <b style="color: #660000;">Ctrl+F</b><span style="color: #660000;"> </span>shortcut
key and search for this <b style="background-color: #fff2cc; color: #0c343d;">]]></b:skin></b> tag:<br />
<br />
<div style="color: purple;">
<b>Step #5</b><br />
</div>
- Paste this code
above the tag:<br />
<br />
<div style="background-color: #d9d2e9; color: #20124d;">
<b><br /></b><br />
</div>
<div style="background-color: #d9d2e9;">
<b><span style="color: #20124d;">/* Bookmark with titlepopup by syafzpic.com */</span><br style="color: #20124d;" /><span style="color: #20124d;">#titlepopup{</span><br style="color: #20124d;" /><span style="color: #20124d;">position:absolute;</span><br style="color: #20124d;" /><span style="color: #20124d;">border:none;</span><br style="color: #20124d;" /><span style="color: #20124d;">background:#323232;<span style="color: #674ea7;">/*titlepopup background color*/</span></span><br style="color: #20124d;" /><span style="color: #20124d;">padding:2px 5px;</span><br style="color: #20124d;" /><span style="color: #20124d;">color:#f2f2f2;<span style="color: #674ea7;">/*titlepopup font color*/</span></span><br style="color: #20124d;" /><span style="color: #20124d;">z-index: 20;</span><br style="color: #20124d;" /><span style="color: #20124d;">-moz-border-radius-bottomleft:
5px;</span><br style="color: #20124d;" /><span style="color: #20124d;">-moz-border-radius-bottomright:
5px;</span><br style="color: #20124d;" /><span style="color: #20124d;">-moz-border-radius-topleft:
0;</span><br style="color: #20124d;" /><span style="color: #20124d;">-moz-border-radius-topright:
5px;</span><br style="color: #20124d;" /><span style="color: #20124d;">-moz-opacity:
.87;</span><br style="color: #20124d;" /><span style="color: #20124d;">display:none;</span><span style="color: #20124d;">} </span><br style="color: #20124d;" /><span style="color: #20124d;">.syafzpicc{opacity:0.45;}</span><br style="color: #20124d;" /><span style="color: #20124d;">.syafzpicc:hover{opacity:1;}</span></b><br />
</div>
<div style="background-color: #d9d2e9;">
<b><span style="color: #20124d;"> </span><br /></b><br />
</div>
<br />
<br />
<div style="color: purple;">
<b>Step #6</b><br />
</div>
- Once again, use <b style="color: #660000;">Ctrl+F</b> and search for this code:<br />
<b style="background-color: #fff2cc; color: #660000;"><data:post.body/></b><br />
<br />
<div style="color: purple;">
<b>Step #7</b><br />
</div>
- Paste this code
below right after the <b style="background-color: #fff2cc; color: #660000;"><data:post.body/></b> code:<br />
<br />
<textarea cols="40" name="code" rows="20"><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>
</textarea>
<br />
<br />
<br />
<div style="color: purple;">
<b>Step #8</b><br />
</div>
-
Save your template and done!<br />Syarhanhttp://www.blogger.com/profile/10578010648350539420noreply@blogger.com0tag:blogger.com,1999:blog-5540288547303814393.post-1738184662167676112010-01-27T00:44:00.000-08:002010-01-27T00:49:54.153-08:00Elegant pop up title for your link<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/_KIuDFnyM-FM/S1_xjC2P9QI/AAAAAAAAAW0/-AU65p4w6CQ/s1600-h/titlepopup.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_KIuDFnyM-FM/S1_xjC2P9QI/AAAAAAAAAW0/-AU65p4w6CQ/s320/titlepopup.png" /></a><br /></div>
<br />
<br />
Elegant link pop up title for your links in your blog...<br />
<br />
<br />
<div style="text-align: center;">
------------- <b>STEPS</b>
-------------<br />
</div>
<div style="text-align: center;">
<br />
</div>
<b>Step
1</b><br />
- As usual, go to<b> Layout <span style="color: #20124d;">></span>
Edit HTML</b><br />
<br />
<b>Step 2</b><br />
- Then use <b>Ctrl+F</b>
shortcut key to find this <b style="background-color: #fce5cd; color: #990000;">]]></b:skin></b> code tag<br />
<br />
<b>
Step 3</b><br />
- Paste this below code above the <b style="background-color: #fce5cd; color: #990000;">]]></b:skin></b>
code tag:<br />
<br />
<div style="background-color: #cfe2f3;">
<b>/* Titlepopup by syafzpic.com */ </b><br />
</div>
<div style="background-color: #cfe2f3;">
<b>#titlepopup{<br />
background:#323232;/*titlepopup background color*/<br />
color:#f1f1f1;/*titlepopup font color*/</b><br />
</div>
<div style="background-color: #cfe2f3;">
<b> padding:2px 5px;</b><br />
<b>
z-index: 20;<br /> -moz-border-radius-bottomleft: 5px;<br />
-moz-border-radius-bottomright: 5px;<br /> -moz-border-radius-topleft:
0;<br /> -moz-border-radius-topright: 5px;<br /> -moz-opacity: .87;</b><br />
</div>
<div style="background-color: #cfe2f3;">
<b> border:none;</b><br />
<b>
display:none;</b><br />
</div>
<div style="background-color: #cfe2f3;">
<b> position:absolute;</b><b> </b><br />
</div>
<div style="background-color: #cfe2f3;">
<b>} </b><br />
</div>
<div style="background-color: #cfe2f3;">
<br />
</div>
<br />
<b>Step
4</b><br />
<b>- </b><span style="color: black;">Paste this script code link
in your <b style="background-color: #fff2cc; color: #990000;"><head></b> area or just paste it above the <b style="background-color: #fff2cc;"><span style="color: #990000;"></head></span></b></span><br />
<span style="color: black;"><b style="background-color: #fff2cc;"><span style="color: #990000;"><br /></span></b></span><br />
<div style="background-color: #cfe2f3;">
<b><script
src="http://s2.sigmirror.com/files/53531_qbkj8/jquery.js"
type="text/javascript"></script><br /><script
src="http://s2.sigmirror.com/files/53732_zbfhp/nice_appears.js"
type="text/javascript"></script></b><br />
</div>
<br />
<br />
<b>Step
5 </b><br />
- Save your template<br />
<br />
<b>Step 6</b><br />
-
Just use this code in any link that you wanted the popup title
to be appear<br />
<br />
<a href="<i><b style="background-color: #d9ead3;"><span style="color: blue;">PUT URL HERE</span></b></i>"
class="titlepopup" title="<i><b style="background-color: #ead1dc; color: #20124d;">PUT THE URL TITLE HERE </b></i>"><b style="background-color: #fff2cc; color: #660000;">URL
Name Here</b></a><br />
<br />
<ul>
<li><i><b style="background-color: #d9ead3;"><span style="color: blue;">PUT URL HERE</span></b></i> = Replace this with URL
link, for example: http://blogging-style.blogspot.com </li>
<li><i><b style="background-color: #ead1dc; color: #20124d;">PUT THE URL TITLE HERE </b></i> = Replace this with the pop up
title, for example: Visit me again.<br /></li>
<li><b style="background-color: #fff2cc; color: #660000;">URL
Name Here</b> = Replace this with the name of your URL, for example:
Blogger Tips and Style <br /></li>
</ul>
<br />
<br />
<br />
<br />
<div style="text-align: center;">
----------------------- <b>Finished</b>
------------------------<br />
</div>
<div style="text-align: left;">
<br />
</div>
<span style="font-size: large;">Example link with title pop up code: </span><br />
<a
href="<b style="background-color: #d9ead3; color: blue;">http://www.syafzpic.com</b>"
class="titlepopup" title="<b style="background-color: #ead1dc; color: #20124d;">Visit me at syafzpic.com </b>"><b style="background-color: #fff2cc; color: #660000;">SyafzPic</b></a><br />
<br />
<style>
/* 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;
}
</style>
<b>Result</b>
= mouse-over to this word, <a class="titlepopup" href="http://www.syafzpic.com/" title='visit syafzpic.com now!' >SyafzPic</a><br />
<br />
<br />
<br />Syarhanhttp://www.blogger.com/profile/10578010648350539420noreply@blogger.com0tag:blogger.com,1999:blog-5540288547303814393.post-44524220691345619782010-01-22T05:16:00.001-08:002010-01-23T23:52:24.535-08:00Printer friendlyJust paste this code in your post <b>HTML</b>:<br />
<br />
<pre style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-size: auto auto; background-attachment: scroll; background-color: #cccccc; background-image: none; background-position: 0% 50%; background-repeat: repeat; border: 0px solid rgb(255, 255, 255); margin-right: 20px; padding: 5px;"><a href="javascript:window.print()">Print</a></pre>Syarhanhttp://www.blogger.com/profile/10578010648350539420noreply@blogger.com1tag:blogger.com,1999:blog-5540288547303814393.post-15073841644334029682010-01-22T04:59:00.001-08:002010-01-23T23:52:24.538-08:00Popular posts widgetShow your popular posts at the sidebar. <br />
Go to <b style="color: #990000;">Add a Gadget</b> and choose the<b style="color: #990000;"> HTML/JavaScript</b>. Copy and paste this code in it.<br />
<br />
<pre style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-size: auto auto; background-attachment: scroll; background-color: #cccccc; background-image: none; background-position: 0% 50%; background-repeat: repeat; border: 0px solid rgb(255, 255, 255); margin-right: 6px; padding: 5px;"><script type="text/javascript">
start_views_num = 1;
limit = 5;
</script>
<script src="http://h41r3z4n.googlepages.com/MostViewed.js" type="text/javascript">
</script></pre>
<br />
<br />Syarhanhttp://www.blogger.com/profile/10578010648350539420noreply@blogger.com2tag:blogger.com,1999:blog-5540288547303814393.post-72153547843235139602010-01-21T08:29:00.001-08:002010-01-21T11:54:57.848-08:00Check your site rank with AlexaFind out your site rank with the <a href="http://alexa.com/">alexa.com</a> now<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://alexa.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/_KIuDFnyM-FM/S1iCdsGDPAI/AAAAAAAAAUs/EveQI1GF-hU/s640/alexa+check.PNG" /></a><br /></div>
<br />
<br />
<br />
<br />
<br />Syarhanhttp://www.blogger.com/profile/10578010648350539420noreply@blogger.com2tag:blogger.com,1999:blog-5540288547303814393.post-51552253250235803142010-01-21T06:37:00.001-08:002010-01-21T11:54:57.862-08:00Browser safe font for web designersFonts 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 <b><span style="color: #45818e;">"browser safe"</span></b> fonts.
<br />
<br />
Browsers
support <b style="color: #cc0000;">TrueType</b> fonts and all operating systems come with sets of
standard <b><span style="color: #cc0000;">TrueType</span></b> fonts that have been preinstalled. These preinstalled
<b><span style="color: #cc0000;">TrueType</span></b> fonts are what we can say are <b><span style="color: #45818e;">"browser safe"</span></b> fonts.
<br />
<br />
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 <b style="color: #134f5c;">Macintosh</b> and one
for <b style="color: blue;">Windows</b>. Please remember that multiword font names should be
in quotes (example "<b>Times New Roman</b>").
<br />
<br />
So, here is a list of fonts that are preinstalled in <b style="color: #134f5c;">Macintosh </b><span style="color: black;">and</span> <b style="color: blue;">Windows</b> computers as they come out of the box.
<br />
<br />
<div style="background-color: white; color: #990000;">
<span style="font-size: large;"><b>Windows OS
</b></span><br /></div>
<ul style="background-color: #674ea7; color: white;">
<li style="background-color: #674ea7;">Arial (Bold, Italic, Bold Italic)
</li>
<li style="background-color: #674ea7;">Arial Black
</li>
<li style="background-color: #674ea7;">Comic Sans (Bold)
</li>
<li>Courier New (Bold, Italic, Bold Italic)
</li>
<li>Franklin Gothic Medium (Italic) - as of Windows XP
</li>
<li>Georgia (Bold, Italic, Bold Italic)
</li>
<li>Impact
</li>
<li>Lucida Console
</li>
<li>Lucida Sans Unicode
</li>
<li>Marlett
</li>
<li>MS Sans Serif - as of Windows XP
</li>
<li>Palatino Linotype (Bold, Italic, Bold Italic)
</li>
<li>Symbol
</li>
<li>Tahoma (Bold)
</li>
<li>Times New Roman (Bold, Italic, Bold Italic)
</li>
<li>Trebuchet (Bold, Italic, Bold Italic)
</li>
<li>Verdana (Bold, Italic, Bold Italic)
</li>
<li>Webdings</li>
</ul>
<br />
<br />
<div style="background-color: white; color: #134f5c;">
<span style="font-size: large;"><b> Mac OS
</b></span><br /></div>
<ul style="background-color: #f3f3f3;">
<li>American Typewriter (Bold)
</li>
<li>Andale Mono - Only installed in OS X if Classic is installed
</li>
<li>Apple Chancery
</li>
<li>Apple Symbols
</li>
<li>Arial (Bold, Italic, Bold Italic)
</li>
<li>Arial Black
</li>
<li>Arial Narrow (Bold, Italic, Bold Italic)
</li>
<li>Arial Rounded MT Bold
</li>
<li>Baskerville (Bold, Italic, Bold Italic)
</li>
<li>Big Caslon
</li>
<li>Brush Script MT
</li>
<li>Capitals - Only installed in OS X if Classic is installed
</li>
<li>Charcoal - Only installed in OS X if Classic is installed
</li>
<li>Chicago - Only installed in OS X if Classic is installed
</li>
<li>Cochin (Bold, Italic, Bold Italic)
</li>
<li>Comic Sans MS (Bold)
</li>
<li>Copperplate (Bold)
</li>
<li>Courier (Bold, Oblique, Bold Oblique) - Only installed in OS X if Classic is installed
</li>
<li>Courier New (Bold, Italic, Bold Italic)
</li>
<li>Didot (Bold, Italic)
</li>
<li>Futura (Sans-serif)
</li>
<li>Gadget - Only installed in OS X if Classic is installed
</li>
<li>Geneva
</li>
<li>Georgia (Bold, Italic, Bold Italic)
</li>
<li>Gill Sans (Bold, Italic, Bold Italic)
</li>
<li>Helvetica (Bold, Oblique, Bold Oblique)
</li>
<li>Helvetica Neue (Bold, Italic, Bold Italic)
</li>
<li>Herculanum
</li>
<li>Hoefler Text (Bold, Italic, Bold Italic)
</li>
<li>Impact
</li>
<li>Marker Felt
</li>
<li>Monaco
</li>
<li>New York - Only installed in OS X if Classic is installed
</li>
<li>Optima (Bold, Italic, Bold Italic)
</li>
<li>Palatino (Bold, Italic, Bold Italic) - Only installed in OS X if Classic is installed
</li>
<li>Papyrus
</li>
<li>Sand - Only installed in OS X if Classic is installed
</li>
<li>Skia
</li>
<li>Symbol
</li>
<li>Techno - Only installed in OS X if Classic is installed
</li>
<li>Textile - Only installed in OS X if Classic is installed
</li>
<li>Times (Bold, Italic, Bold Italic)
</li>
<li>Times New Roman (Bold, Italic, Bold Italic)
</li>
<li>Trebuchet (Bold, Italic, Bold Italic)
</li>
<li>Verdana (Bold, Italic, Bold Italic)
</li>
<li>Webdings - Only installed in OS X if Classic is installed
</li>
<li>Zapf Dingbats
</li>
<li>Zapfino </li>
</ul>Syarhanhttp://www.blogger.com/profile/10578010648350539420noreply@blogger.com0tag:blogger.com,1999:blog-5540288547303814393.post-69669993818755402972010-01-21T05:26:00.001-08:002010-01-21T11:54:57.866-08:00Nice font for web design<div style="color: #134f5c;">
Hey check this out!<br /></div>
<b><span style="color: #660000;">Nice fonts for web designer: </span><br /></b><br />
<br />
1.<b> <span style="font-size: small;">Sketch Rockwell</span></b><br />
<img border="0" src="http://2.bp.blogspot.com/_KIuDFnyM-FM/S1inBX8eBdI/AAAAAAAAAU8/XCterOljhMQ/s320/sketch+rockwell.PNG" /><br />
<a href="http://s2.sigmirror.com/files/53153_sy504/SketchRockwell-Bold.ttf"><b>Download</b></a><br />
<br />
2<b>. Grey Magus</b><br />
<a href="http://www.blogger.com/"><img border="0" src="http://2.bp.blogspot.com/_KIuDFnyM-FM/S1inHIzXSGI/AAAAAAAAAVE/xsPyOIJ5gmI/s320/grey+magus.PNG" /></a><br />
<a href="http://s2.sigmirror.com/files/53148_gelie/greymagus.ttf"><b>Download</b></a><br />
<br />
<br />
3. <b>Kelly Script</b><br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<a href="http://www.blogger.com/"><img border="0" src="http://2.bp.blogspot.com/_KIuDFnyM-FM/S1inLlAN4KI/AAAAAAAAAVM/LIWkmDlwhps/s320/kelly+script.PNG" /></a><br />
<a href="http://s2.sigmirror.com/files/53150_vrbxe/Kelly%20Script.ttf"><b>Download</b></a><br />
<br />
4. <b><span style="font-size: small;">Bubbly Frog</span></b><br />
<br />
<a hre="" href="http://www.blogger.com/post-edit.g?blogID=5540288547303814393&postID=6966999381875540297"><img border="0" src="http://1.bp.blogspot.com/_KIuDFnyM-FM/S1inPbwBh1I/AAAAAAAAAVU/VEBafX1msHE/s320/bubble+frog.PNG" /></a><br />
<a href="http://s2.sigmirror.com/files/53143_u6osn/Bubbly%20Frog.ttf"><b>Download</b></a><br />
<br />
5. <b><span style="font-size: small;">AB Exp</span></b><br />
<br />
<a hre="" href="http://www.blogger.com/post-edit.g?blogID=5540288547303814393&postID=6966999381875540297"><img border="0" src="http://4.bp.blogspot.com/_KIuDFnyM-FM/S1injNqNz2I/AAAAAAAAAVc/CZll4M_yUQg/s320/ab+exp.PNG" /></a><br />
<a href="http://s2.sigmirror.com/files/53140_rhttt/AB_Exp.ttf"><b>Download</b></a><br />
<span style="font-size: small;"><br /></span><br />
<span style="font-size: small;">6. </span><b>Bleeding Cowboys<br /></b><br />
<a href="http://www.blogger.com/"><img border="0" src="http://2.bp.blogspot.com/_KIuDFnyM-FM/S1ioZCYPlfI/AAAAAAAAAVk/oiJUaSWjsyg/s320/bleeding+cowboys.PNG" /></a><br />
<a href="http://s2.sigmirror.com/files/53142_kchuj/Bleeding_Cowboys.ttf"><b>Download</b></a><br />
<br />
7. <b>Bauhaus</b><br />
<a href="http://www.blogger.com/"><img border="0" src="http://1.bp.blogspot.com/_KIuDFnyM-FM/S1iocve8aiI/AAAAAAAAAVs/KsCNpHlPdJo/s320/bauhaus.PNG" /></a><br />
<a href="http://s2.sigmirror.com/files/53141_4utuy/Bauhaus.ttf"><b>Download</b></a><br />
<br />
<br />
8. <b><span style="font-size: small;">Contempory</span></b><br />
<a href="http://www.blogger.com/post-edit.g?blogID=5540288547303814393&postID=6966999381875540297"><img border="0" src="http://2.bp.blogspot.com/_KIuDFnyM-FM/S1iohEurntI/AAAAAAAAAV0/WMVb0CipXfw/s320/contemporary.PNG" /></a><br />
<a href="http://s2.sigmirror.com/files/53145_tmapg/Contempory.ttf"><b>Download</b></a><br />
<br />
<br />
9. <b>Diavlo</b><br />
<a href="http://www.blogger.com/post-edit.g?blogID=5540288547303814393&postID=6966999381875540297"><img border="0" src="http://4.bp.blogspot.com/_KIuDFnyM-FM/S1ipLb8UK4I/AAAAAAAAAV8/vD8VTb6KsHI/s320/diavlo.PNG" /></a><br />
<a href="http://s2.sigmirror.com/files/53146_pphuo/Diavlo.otf"><b>Download</b></a><br />
<br />
<br />
<span style="font-size: small;">10. <b>Comfortaa</b></span><br />
<a href="http://www.blogger.com/post-edit.g?blogID=5540288547303814393&postID=6966999381875540297"><img border="0" src="http://4.bp.blogspot.com/_KIuDFnyM-FM/S1ipPerAoGI/AAAAAAAAAWE/t4m3lif1hrw/s320/comfortaa.PNG" /></a><br />
<a href="http://s2.sigmirror.com/files/53144_ld6vr/Comfortaa.ttf"><b>Download</b></a><br />
<span style="font-size: small;"><br /></span><br />
<span style="font-size: small;"><br /></span><br />
<span style="font-size: small;">11. </span><b><span style="font-size: small;">Forgotten Futurist</span></b><br />
<span style="font-size: small;"> </span><br />
<a href="http://www.blogger.com/post-edit.g?blogID=5540288547303814393&postID=6966999381875540297"><img border="0" src="http://4.bp.blogspot.com/_KIuDFnyM-FM/S1ipTS1sP0I/AAAAAAAAAWM/aDhYg0v7VzI/s320/forgotten+futurist.PNG" /></a><br />
<a href="http://s2.sigmirror.com/files/53147_smio1/forgotten%20futurist.ttf"><b>Download</b></a><br />
<span style="font-size: small;"><br /></span><br />
<span style="font-size: small;"><br /></span><br />
<span style="font-size: small;">12. </span><b><span style="font-size: small;">Opticon One</span></b><br />
<a href="http://www.blogger.com/post-edit.g?blogID=5540288547303814393&postID=6966999381875540297"><img border="0" src="http://4.bp.blogspot.com/_KIuDFnyM-FM/S1ipW72-4OI/AAAAAAAAAWU/BXj8camb2bA/s320/opticon+one.PNG" /></a><br />
<a href="http://s2.sigmirror.com/files/53152_egjim/Option%20one.ttf"><b>Download</b></a><br />
<br />
<span style="font-size: small;"><br /></span><br />
<span style="font-size: small;">13. </span><b><span style="font-size: small;">Lois Ann</span></b><br />
<a href="http://www.blogger.com/post-edit.g?blogID=5540288547303814393&postID=6966999381875540297"><img border="0" src="http://4.bp.blogspot.com/_KIuDFnyM-FM/S1ipaKytVnI/AAAAAAAAAWc/CTY5UTtZyEY/s320/lois+ann.PNG" /></a><br />
<a href="http://s2.sigmirror.com/files/53151_smalc/LoisAnn.ttf"><b>Download</b></a><br />
<span style="font-size: small;"> <br /></span><br />
<span style="font-size: small;"> <br /></span><br />
<span style="font-size: small;">14. </span><b><span style="font-size: small;">Grunge Serifia</span></b><br />
<a href="http://www.blogger.com/post-edit.g?blogID=5540288547303814393&postID=6966999381875540297"><img border="0" src="http://1.bp.blogspot.com/_KIuDFnyM-FM/S1ipdkzwcQI/AAAAAAAAAWk/zaMocCYxUUk/s320/grunge+serifia.PNG" /></a><br />
<a href="http://s2.sigmirror.com/files/53149_x4vmn/Grunge_Serifia.otf"><b>Download</b></a><br />
<span style="font-size: small;"><br /></span><br />Syarhanhttp://www.blogger.com/profile/10578010648350539420noreply@blogger.com2tag:blogger.com,1999:blog-5540288547303814393.post-79881364921581483012010-01-13T03:44:00.000-08:002011-01-13T03:48:02.123-08:00SyafzMagz and SyafzDesign<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/_KIuDFnyM-FM/TS7lthP5a9I/AAAAAAAAAYk/SuUJpJorBpI/s1600/syafzmagz-logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_KIuDFnyM-FM/TS7lthP5a9I/AAAAAAAAAYk/SuUJpJorBpI/s1600/syafzmagz-logo.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/_KIuDFnyM-FM/TS7mHo30WtI/AAAAAAAAAYo/GpKS_psiEYo/s1600/syafzdesign-logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_KIuDFnyM-FM/TS7mHo30WtI/AAAAAAAAAYo/GpKS_psiEYo/s1600/syafzdesign-logo.png" /></a></div>
<br />Syarhanhttp://www.blogger.com/profile/10578010648350539420noreply@blogger.com0tag:blogger.com,1999:blog-5540288547303814393.post-42635403682431542532010-01-13T01:13:00.001-08:002010-01-16T06:51:48.502-08:00Fancy Bookmarking style below post<div style="color: black;">
<span style="font-size: small;">Hi... nice to meet all of you again.</span><br />
</div>
<span style="font-size: small;">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 <b><span style="color: orange;">(</span><span style="color: #cc0000;">Please don't remove the copyright by </span><a href="http://syafzpic.com/" style="color: #134f5c;">syafzpic.com</a><span style="color: #cc0000;"> part</span><span style="color: orange;">)</span></b>. I don't want to waste any more time for the introduction session. Let's we proceed to the tutorial shown below... </span><br />
<div style="color: black;">
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/_KIuDFnyM-FM/S1HSEgqjlGI/AAAAAAAAAUk/TB9xotj_JH8/s1600-h/syafzpic_type1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="92" src="http://1.bp.blogspot.com/_KIuDFnyM-FM/S1HSEgqjlGI/AAAAAAAAAUk/TB9xotj_JH8/s640/syafzpic_type1.PNG" width="640" /></a><br /></div>
<br />
</div>
<span style="font-size: large;"><b><span style="color: #990000;">Step 1</span>.</b></span><br />
- Use <b style="color: purple;">Ctrl+F</b> and search for this <b> <span style="background-color: #f3f3f3; color: blue;">]]></b:skin></span></b> tag. Paste this code above the <b> <span style="background-color: #f3f3f3; color: blue;">]]></b:skin></span></b> tag:<br />
<br />
<div style="background-color: #eeeeee;">
<b style="color: #660000;">.syafzpicc {<br />opacity: 0.45;<br />}<br />.syafzpicc:hover {<br />opacity: 1;<br />}</b><br />
</div>
<br />
<br />
<span style="font-size: large;"><b><span style="color: #990000;">Step 2</span>.</b></span><br />
- Then, use and search <b style="color: purple;">Ctrl+F</b> for this <b><span style="background-color: #f3f3f3; color: blue;"><data:post.body/></span> </b>code.<br />
<br />
<span style="font-size: large;"><b><span style="color: #990000;">Step 3</span>.</b></span><b> <br /></b><br />
- Paste this code below the <b><span style="background-color: #f3f3f3; color: blue;"><data:post.body/></span> </b>code:<br />
<br />
<textarea cols="40" name="code" rows="10"><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>
</textarea>
<br />
<br />
<br />
<span style="font-size: large;"><b><span style="color: #990000;">Step 4</span>.</b></span><br />
<b>- <span style="color: #274e13;">Save your template</span></b> and enjoy the elegant bookmarking share under your post.<br />
<br />
<br />
<span style="font-size: large;"><b>Credits:</b></span><br />
<b>- <span style="color: #660000;"><a href="http://www.syafzpic.com/">syafzpic</a> </span></b><br />
<br />
I hope all of you enjoy the tutorial and please leave a comment...<br />
<br />Syarhanhttp://www.blogger.com/profile/10578010648350539420noreply@blogger.com3tag:blogger.com,1999:blog-5540288547303814393.post-77204400799544534872010-01-13T00:44:00.001-08:002010-01-16T06:51:48.507-08:00Nice bookmark under post<div style="color: black;">
<span style="font-size: small;">Hi...I'm <b>SyafiqZaimi</b>, Syarhanz's brother, nice to meet all of you.</span><br />
</div>
<div style="color: black;">
<span style="font-size: small;">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.</span><br />
<span style="font-size: small;">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 <b style="color: #351c75;">(please don't remove the copyright by <a href="http://syafzpic.com/">syafzpic.com</a>)</b>... 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. <br /></span><br />
</div>
<div style="color: black;">
<span style="font-size: small;"><br /></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_KIuDFnyM-FM/S1HQjE4Dg-I/AAAAAAAAAUc/r-Z6zHFi030/s1600-h/syafzpic_type3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/_KIuDFnyM-FM/S1HQjE4Dg-I/AAAAAAAAAUc/r-Z6zHFi030/s640/syafzpic_type3.jpg" /></a><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<span style="font-size: small;"><br /></span><br />
</div>
<div style="color: black;">
<br />
</div>
<span style="font-size: large;"><b><span style="color: #990000;">Step 1</span>.</b></span><br />
- Use <b>Ctrl+F</b> and search for this <b> <span style="background-color: #f3f3f3; color: blue;">]]></b:skin></span></b> tag<br />
<br />
<span style="font-size: large;"><b><span style="color: #990000;">Step 2</span>.</b></span><br />
- Then, use and search <b style="color: purple;">Ctrl+F</b> for this <b><span style="background-color: #f3f3f3; color: blue;"><data:post.body/></span> </b>code.<br />
<br />
<span style="font-size: large;"><b><span style="color: #990000;">Step 3</span>.</b></span><b> <br /></b><br />
- Paste this code below the <b><span style="background-color: #f3f3f3; color: blue;"><data:post.body/></span> </b>code:<br />
<br />
<textarea cols="40" name="code" rows="20"><!-- 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>
</textarea><br />
<br />
<span style="font-size: large;"><b><span style="color: #990000;">Step 4</span>.</b></span><br />
<b>- <span style="color: #274e13;">Save your template</span></b> and enjoy the elegant bookmarking share under your post.<br />
<br />
<br />
<span style="font-size: large;"><b>Credits:</b></span><br />
<b>- <span style="color: #660000;"><a href="http://www.syafzpic.com/">syafzpic</a></span></b><br />
<br />
I hope all of you enjoy the tutorial and please leave a comment...Enjoy the tutorial!<br />
<br />Syarhanhttp://www.blogger.com/profile/10578010648350539420noreply@blogger.com1tag:blogger.com,1999:blog-5540288547303814393.post-51961251341528077522010-01-13T00:42:00.000-08:002010-01-13T00:42:09.113-08:00Add Shadow Effects<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_KIuDFnyM-FM/S0jXQpKLRCI/AAAAAAAAATs/-IY8PzNM4No/s1600-h/shadow+effect.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/_KIuDFnyM-FM/S0jXQpKLRCI/AAAAAAAAATs/-IY8PzNM4No/s320/shadow+effect.png" /></a><br /></div>
<span style="font-size: large;"><b style="color: #660000;"><span style="color: black;"><span style="font-size: small;">Hello </span></span></b><span style="color: #660000;"><span style="color: black;"><span style="font-size: small;">and nice to meet all of you again</span></span></span><b style="color: #660000;"> </b><span style="color: #660000;"><span style="font-size: small;"><span style="color: black;">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.</span></span></span><b style="color: #660000;"><br /></b></span><br />
<br />
<br />
<br />
<br />
<br />
<span style="font-size: large;"><b style="color: #660000;">Step #1</b><span style="color: #660000;">:</span></span><br />
Log in to your blogger like usual using your <b>blog ID</b>. Go to your <b>Layout</b> and choose <b>Edit HTML</b> tab. Back up your template. Click at the <b>Download Full Template</b>. Tick at the <b>Expand Widget Templates</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_KIuDFnyM-FM/S0jP8m9_X7I/AAAAAAAAATk/ituDy1OJvCY/s1600-h/semua+html.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/_KIuDFnyM-FM/S0jP8m9_X7I/AAAAAAAAATk/ituDy1OJvCY/s320/semua+html.PNG" /></a><br /></div>
<br />
<br />
<div style="color: #660000;">
<span style="font-size: large;"><b>Step #2</b></span>:<br />
</div>
Use Ctrl+F and search for this <b style="color: #990000;">]]></b:skin></b> tag. Copy and paste this code above the <b><span style="color: #990000;">]]></b:skin></span></b> tag<br />
<br />
<span style="background-color: #f3f3f3;">.syafzpic-shadow {</span><br />
<span style="background-color: #f3f3f3;">color: #222;</span><br />
<span style="background-color: #f3f3f3;">font-size: 14px;</span><br />
<span style="background-color: #f3f3f3;">font-family: helvetica, tahoma, arial;</span><br />
<span style="background-color: #f3f3f3;">text-shadow: 0px 2px 3px #555;</span><br />
<span style="background-color: #f3f3f3;">}</span><br />
<br />
<br />
<br />
<div style="color: #660000;">
<span style="font-size: large;"><b>Step #3:</b></span><br />
</div>
Save template.<br />
<br />
<div style="color: #660000;">
<b><span style="font-size: large;">Step #4: </span></b><br />
</div>
In every section you want this shadow effect to be worked, you just need to add this code:<br />
<br />
<div style="background-color: #f3f3f3;">
<div <b style="color: #cc0000;">class="syafzpic-shadow"</b> ><br />
</div>
<div style="background-color: #f3f3f3;">
<span style="color: blue;">PUT YOUR TEXT HERE</span><br />
</div>
<div style="background-color: #f3f3f3;">
</div><br />
</div>
<br />
For example:<br />
<br />
<b>Example 1</b>: without link<br />
<div style="background-color: #f3f3f3;">
<div <b><span style="color: #cc0000;">class="syafzpic-shadow"</span></b> ><br />
</div>
<div style="background-color: #f3f3f3;">
<span style="color: blue;"> Blogger Tips and Style</span><br />
</div>
<div style="background-color: #f3f3f3;">
</div> <br />
</div>
<br />
<span style="font-size: small;"><b>Example 2</b></span>: with link<br />
<div style="background-color: #f3f3f3;">
<div <b><span style="color: #cc0000;">class="syafzpic-shadow"</span></b> ><br />
</div>
<div style="background-color: #f3f3f3;">
<a class="syafzpic-shadow" href="<span style="color: red;">PUT TARGET LINK HERE</span>"><strong><span style="color: blue;">Welcome to MyBlog</span></strong></a><br />
</div>
<div style="background-color: #f3f3f3;">
</div><br />
</div>
<br />
You can replace the blue text above with your own text.Also do not forget to change the <span style="color: red;">PUT TARGET LINK HERE</span> with your target link(url).<br />
<br />
For any question, please leave a <a href="http://www.blogger.com/post-create.g?blogID=5540288547303814393#comments" rel="nofollow">comment</a>...<br />
<br />
<b><span style="font-size: large;">Credits:</span></b><br />
1. <a href="http://syafzpic.com/">syafzpic.com</a><br />Syarhanhttp://www.blogger.com/profile/10578010648350539420noreply@blogger.com6tag:blogger.com,1999:blog-5540288547303814393.post-28777131423092487222010-01-09T11:04:00.001-08:002010-01-21T11:54:57.872-08:00Redirected to Comment Form areaWhen you click the comment link, it will be redirected to the comment box in your blog post<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/_KIuDFnyM-FM/S1iJqyapy5I/AAAAAAAAAU0/s9Xhk2RfYwI/s1600-h/redirect+comment+form+area.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/_KIuDFnyM-FM/S1iJqyapy5I/AAAAAAAAAU0/s9Xhk2RfYwI/s320/redirect+comment+form+area.PNG" /></a><br /></div>
<br />
<br />
Just paste the html link in the <b>Edit HTML</b> section in your post<br />
<br />
<div style="background-color: #f3f3f3;">
<a href='#respond' rel='nofollow'><b>Leave a response</b></a><br />
<div style="background-color: white;">
<br />
</div>
<div style="background-color: white;">
<br />
Please <a href="http://www.blogger.com/post-edit.g?blogID=5540288547303814393&postID=2877713142309248722#respond">leave me a response</a><br />
</div>
</div>Syarhanhttp://www.blogger.com/profile/10578010648350539420noreply@blogger.com0tag:blogger.com,1999:blog-5540288547303814393.post-44599333896744242272010-01-09T06:28:00.001-08:002010-01-09T11:23:48.657-08:00Your Blog Value, Estimation and Information<b><span style="color: #990000;">Check your blog value</span>, </b>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.<br />
<br />
<b>Step 1:</b> Go to <a href="http://cubestat.com/"><b>cubestat.com</b></a>. <br />
<br />
<b>Step 2:</b> Enter your <b style="color: #e69138;">House(Blog)</b> <b>URL</b> and click at the <b>Check</b> button.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_KIuDFnyM-FM/S0iWZTeISzI/AAAAAAAAAS8/J_HA0UpcZck/s1600-h/cudestart.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/_KIuDFnyM-FM/S0iWZTeISzI/AAAAAAAAAS8/J_HA0UpcZck/s320/cudestart.PNG" /></a><br /></div>
<br />
After you enter your <b>URL</b> and click at the <b>Check</b> button, you now can see your <b style="color: blue;">blog value, estimation and information</b>. That's all for today. Always always comment my blog... <br />
<br />
If you are pleasure, please give me a <a href="http://www.blogger.com/post-create.g?blogID=5540288547303814393#comments" rel="nofollow">comment</a>.<br />Syarhanhttp://www.blogger.com/profile/10578010648350539420noreply@blogger.com6tag:blogger.com,1999:blog-5540288547303814393.post-10317879762693758372010-01-09T05:23:00.000-08:002010-01-09T05:27:41.222-08:00Add a Light Translator to your blog<b>As blogger</b>,
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...<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/_KIuDFnyM-FM/S0cVLfUvP4I/AAAAAAAAASc/lvDWRN_ID7c/s1600-h/transltae.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_KIuDFnyM-FM/S0cVLfUvP4I/AAAAAAAAASc/lvDWRN_ID7c/s320/transltae.PNG" /></a><br /></div>
<br />
<br />
<b>Step 1</b>: Sign in to blogger as usual using your <b>ID</b>. Go to your <b>Layout</b> and choose <b>Edit HTML</b> tab. Back up your template. Click at the <b>Download Full Template</b>. Tick at the <b>Expand Widget Templates</b>.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/_KIuDFnyM-FM/S0cTtTcb_rI/AAAAAAAAASU/zW95Joq-SQ0/s1600-h/semua+html.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_KIuDFnyM-FM/S0cTtTcb_rI/AAAAAAAAASU/zW95Joq-SQ0/s320/semua+html.PNG" /></a><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<br />
<b>Step 2</b>: Use <b>Ctrl+F</b> and find <b style="background-color: #f3f3f3; color: blue;">]></b:skin></b> tag. Above the <b style="background-color: #f3f3f3; color: blue;">]></b:skin></b> tag, paste this code:<br />
<br />
<br />
<div style="background-color: #f3f3f3;">
.other-language {<br />
</div>
<div style="background-color: #f3f3f3;">
font: bold 11px "Trebuchet MS", Arial, Helvetica, sans-serif;<br />
</div>
<div style="background-color: #f3f3f3;">
color: #758D38;<br />
</div>
<div style="background-color: #f3f3f3;">
width : 250px;<br />
</div>
<div style="background-color: #f3f3f3;">
background: #F2F2F2;<br />
</div>
<div style="background-color: #f3f3f3;">
}<br />
</div>
<br />
<span style="font-size: large;"><b style="color: red;">Attention!!!</b></span><br />
<ul>
<li>You may change the colour code(<b>758D38</b>) with the colour code that you like.</li>
</ul>
<br />
<b>Step 3</b>: Click at the <b>Save Template</b>.<br />
<br />
<b>Step 4</b>: Go to the <b>Page Elements</b> at the <b>Layout</b> and choose <b>Add a Gadget</b>. A small <b>pop up</b> window window will appeared. Between the choices, you must click at the <b>HTML/JavaScript</b>. A small pop up window will appeared again but this window has a <b>content box</b>. Paste this code in the content box appeared.<br />
<br />
<div style="background-color: #f3f3f3;">
<small>Choose : </small><br />
</div>
<div style="background-color: #f3f3f3;">
<select onchange="if (this.value!='') window.open(this.value,'_blank')" class="other-language"><br />
</div>
<div style="background-color: #f3f3f3;">
<option selected value="0"/> Other Language<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=sq&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Albanian<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=ar&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Arabic<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=bg&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Bulgarian<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=ca&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Catalan<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=zh-CN&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Chinese (Simplified)<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=zh-TW&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Chinese (Traditional)<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=hr&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Croatian<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=cs&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Czech<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=da&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Danish<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=nl&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Dutch<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=en&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> English<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=et&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Estonian<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=tl&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Filipino<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=fi&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Finnish<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=fr&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> French<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=de&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> German<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=el&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Greek<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=gl&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Galician<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=iw&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Hebrew<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=hi&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Hindi<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=hu&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Hungarian<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=it&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Italian<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=ja&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Japanese<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=ko&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Korean<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=lv&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Latvia<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=lt&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Lithuanian<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=mt&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Maltese<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=no&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Norwegian<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=fa&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Persian<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=pl&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Polish<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=pt&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Portuguese<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=ro&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Romanian<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=ru&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Russian<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=sr&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Serbian<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=sk&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Slovak<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=sl&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Slovenian<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=es&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Spanish<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=sv&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Swedish<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=th&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Thai<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=tr&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Turkish<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=uk&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Ukrainian<br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=vi&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Vietnamese<br />
</div>
<div style="background-color: #f3f3f3;">
<!-- Please Don't Change or Remove This Code --><br />
</div>
<div style="background-color: #f3f3f3;">
<option value="http://<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com"/><br />
</div>
<div style="background-color: #f3f3f3;">
<!-- Enjoy This --><br />
</div>
<div style="background-color: #f3f3f3;">
</select><br />
</div>
<div style="background-color: #f3f3f3;">
<small><div
style="text-align:right;">by <a
href="http://translate.google.com" target="_blank">Google
Translate</a></div></small><br />
</div>
<br />
<div style="color: red; text-align: left;">
<span style="font-size: large;"><b>Attention !!!</b></span><br />
</div>
<ul>
<li>Please change <b style="background-color: white; color: blue;">YOURBLOGNAME </b><span style="background-color: white; color: blue;"><span style="color: white;">i </span></span>in the code above with your <b>blog name</b>.</li>
<li>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: <br /></li>
</ul>
<div style="text-align: left;">
<b>1: </b>To delete<b> Albanian</b>, please delete:<br />
</div>
<div style="text-align: left;">
<br />
</div>
<div style="text-align: left;">
<span style="background-color: #f1c232;"><option
value="http://translate.google.com/translate?hl=en&sl=id&tl=sq&u=http%3A%2F%2FYOURBLOGNAME.blogspot.com%2F"/>
Albanian</span><span style="background-color: #ffe599;"></span><br />
</div>
<div style="text-align: left;">
<br />
</div>
<div style="text-align: left;">
<br />
</div>
<div style="text-align: left;">
<b>2: </b>To delete<b> Arabic</b>, please delete:<br />
</div>
<div style="text-align: left;">
<br />
</div>
<div style="background-color: #ffd966; text-align: left;">
<option value="http://translate.google.com/translate?hl=en&sl=id&tl=ar&u=http%3A%2F%2F<b style="color: blue;">YOURBLOGNAME</b>.blogspot.com%2F"/> Arabic<br />
</div>
<div style="text-align: left;">
<br />
</div>
<div style="text-align: left;">
<b><br /></b><br />
</div>
<div style="text-align: left;">
<b>Step 5:</b> Save it. That's all for now. Thank You. Hope all of you enjoy this post. See you again. Bye2...<br />
</div>
<div style="text-align: left;">
<br />
</div>
<div style="text-align: left;">
Please leave this post with a <a href='#comments' rel='nofollow'>comment</a>..Thanks..<br />
</div>Syarhanhttp://www.blogger.com/profile/10578010648350539420noreply@blogger.com7tag:blogger.com,1999:blog-5540288547303814393.post-48581809721091288372010-01-09T03:55:00.001-08:002010-01-09T11:23:48.662-08:00Add Twitter Updates in your blog<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/_KIuDFnyM-FM/S0ixz-Dk9cI/AAAAAAAAATU/vUsMp15QBZc/s1600-h/tw.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_KIuDFnyM-FM/S0ixz-Dk9cI/AAAAAAAAATU/vUsMp15QBZc/s320/tw.png" /></a><br /></div>
<br />
<b><span style="color: #cc0000;">Twit</span>, <span style="color: #45818e;">twit</span>, <span style="color: #f1c232;">twit</span></b> 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 <a href="http://www.twitter.com/">twitter</a> 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.<br />
Please read and understand it clearly and I hope you will be enjoyed with the tutorials... <br />
<br />
<br />
<span style="background-color: white;"></span><br />
<b style="color: #783f04;">Step #1</b>: Sign in to <b><a href="http://blogger.com/">blogger.com</a> </b>as usual. Go to your <b>Layout</b> > <b>Page Elements</b> and click at the <b>Add a Gadget</b>. Between the choices, you choose the <b>HTML/JavaScript</b>. A blank box in a small pop up window will appeared. <br />
<br />
<b style="color: #783f04;">Step #2</b>. Copy and paste this code in the box appeared:<br />
<br />
<div style="background-color: #f3f3f3;">
<br />
</div>
<div style="background-color: #f3f3f3;">
<div style="background:#f5f5f5; border:solid 3px #f2f2f2;"><br />
<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><br />
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/<b style="background-color: lime; color: blue;">syafiqzaimi</b>"><strong>follow me on Twitter</strong></a><br />
</div><br />
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script><br />
<script src="http://twitter.com/statuses/user_timeline/<b style="background-color: lime; color: blue;">syafiqzaimi</b>.json?callback=twitterCallback2&count=<b><span style="background-color: blue; color: white;">1</span></b>" type="text/javascript"></script><br />
</div><br />
</div>
<div style="background-color: #f3f3f3;">
<br />
</div>
<br />
<span style="color: red; font-size: large;">Attention!!!</span><br />
<ul>
<li>Replace the <b style="background-color: lime; color: blue;">syafiqzaimi</b> in the code above with your <b><a href="http://www.twitter.com/">twitter</a></b> ID. </li>
<li>Replace the number <b><span style="background-color: blue; color: white;">1</span></b> at the <span style="background-color: #f3f3f3;">count=</span><b style="background-color: blue; color: white;">1</b> above to change the number of the Twitter updates</li>
</ul>
<br />
<ul>
</ul>
<span style="font-size: large;"><span style="font-size: small;"><b style="color: #783f04;">Step #3</b>. Save it and you just need to view your blog.</span></span><br />
<br />
<span style="font-size: large;"><span style="font-size: small;">If you are pleasure, please leave a <a href="http://www.blogger.com/post-edit.g?blogID=5540288547303814393&postID=4858180972109128837#comments" rel="nofollow">comment</a> </span> <br /></span><br />
<br />
<span style="color: #cc0000; font-size: large;">Credits</span>:<br />
1. <a href="http://www.twitter.com/">Twitter</a><br />
2. <a href="http://www.syafzpic.com/">syafzpic</a><br />Syarhanhttp://www.blogger.com/profile/10578010648350539420noreply@blogger.com2tag:blogger.com,1999:blog-5540288547303814393.post-3654948699579105972010-01-08T00:58:00.001-08:002010-01-09T11:23:48.668-08:00Button for Facebook Share Count<a href="http://2.bp.blogspot.com/_KIuDFnyM-FM/S0ivEqn5xNI/AAAAAAAAATE/P4Ew4EXEZv4/s1600-h/facebook_share_syafzpic.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://2.bp.blogspot.com/_KIuDFnyM-FM/S0ivEqn5xNI/AAAAAAAAATE/P4Ew4EXEZv4/s640/facebook_share_syafzpic.png" /></a><b> Hey guys,</b> 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 <b style="background-color: white;">"Button for Facebook Share Count". </b><span style="background-color: white;">You will have your own </span><b style="background-color: white;">Button for Facebook Share Count now!<br /></b><br />
<br />
<br />
<br />
<b style="background-color: white;"> </b> <br />
<b style="color: #cc0000;">Step #1</b>: Like always, you must login to blogger. Go to your <b>layout</b> and click at the <b>Edit HTML</b> tab. You need to <b>backup</b> your template by clicking at the <b>Download Full Template</b>. Tick at the <b>Expand Widget Templates</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/_KIuDFnyM-FM/S0cODh76JPI/AAAAAAAAASM/e96vKQl1S8A/s1600-h/semua+html.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_KIuDFnyM-FM/S0cODh76JPI/AAAAAAAAASM/e96vKQl1S8A/s320/semua+html.PNG" /></a><br /></div>
<br />
<br />
<b style="color: #cc0000;">Step #2</b>: Use <b style="color: #660000;">Ctrl+F</b> to find this line of code:<br />
<br />
<b style="background-color: #f3f3f3; color: blue;"><div class='post-header-line-1'/></b> or <b style="background-color: yellow; color: blue;"><p class='post-header-line-1'/></b> or
<b style="background-color: #cccccc; color: blue;"><data:post.body/></b><br />
<div class="code" style="background-color: white; color: blue;">
</div>
<div style="background-color: white; color: blue;">
<br />
</div>
<div style="background-color: white;">
<br />
</div>
<b style="background-color: white; color: #cc0000;">Step #3</b><span style="background-color: white;">: Below are example/choices </span><b style="background-color: white;">Button for Facebook Share Count</b><span style="background-color: white;">. Choose one of them and copy the </span>code below it. You paste the code copied above the<br />
<b style="background-color: #f3f3f3; color: blue;"><div class='post-header-line-1'/></b> or <span style="background-color: yellow; color: blue;"><b><p class='post-header-line-1'/></b></span> or <b style="background-color: #cccccc;"><span style="color: blue;"><</span></b><b style="background-color: #cccccc;"><span style="color: blue;">data:post.body</span><span style="color: blue;">/></span></b><br />
<div class="code">
</div>
code.<br />
<br />
<div style="background-color: cyan;">
<b>Choices Given: Style 1 and Style 2...</b><br />
</div>
<br />
<br />
<b>Style 1:</b><br />
<a href="http://www.syafzpic.com/"><img border="0" src="http://3.bp.blogspot.com/_KIuDFnyM-FM/S0iwJuCehWI/AAAAAAAAATM/txq4s1ledaI/s320/style1.PNG" /></a>
<br />
<div class="code" style="background-color: white;">
<div class="code">
<div class="code">
<div class="code" style="background-color: #fce5cd;">
<pre class="csharpcode"><div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='<span style="background-color: #fce5cd;">nofollow' type='button_coun</span><span style="background-color: #fce5cd;">t'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div></span></pre>
</div>
<pre class="csharpcode"> </pre>
<pre class="csharpcode"><b><b>
</b></b></pre>
<pre class="csharpcode"><b><b>Style2:</b></b></pre>
<a href="http://www.syafzpic.com/"><img border="0" src="http://3.bp.blogspot.com/_KIuDFnyM-FM/S0i-X2ZdE-I/AAAAAAAAATc/gQLZoTiDDNA/s320/fb_box_syafzpic.PNG" /></a>
<br />
<pre class="csharpcode"></pre>
<pre class="csharpcode" style="background-color: #f6b26b;"><div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='<span style="background-color: #f6b26b;">nofollow' type='box_count'/</span><span style="background-color: #f6b26b;">>
<</span><span id="IL_AD1" style="background-color: #f6b26b;">script type</span><span style="background-color: #f6b26b;">="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div></span></pre>
</div>
</div>
<pre class="csharpcode" style="background-color: white;">
</pre>
<pre class="csharpcode" style="background-color: white;"></pre>
</div>
<div style="background-color: white;">
<br /></div>
<div style="background-color: white;">
<b style="color: #cc0000;">Step #4</b>: <b style="color: #660000;">Save the Template</b> and the work is <b>DONE</b>. To see the result, you can open your blog page and see your <b style="color: #b45f06;">Button for Facebook Share Count</b> at your blog post.<br /></div>
<div style="background-color: white;">
<br /></div>
<div style="background-color: white;">
<b>I</b> hope you all enjoy with this post. If you are pleasure, please leave a <a href="http://www.blogger.com/post-edit.g?blogID=5540288547303814393&postID=365494869957910597#comments" rel="nofollow"><b>comment</b></a> on this post. Bye. Hope you like this house(<b>blog</b>). <br /></div>Syarhanhttp://www.blogger.com/profile/10578010648350539420noreply@blogger.com2tag:blogger.com,1999:blog-5540288547303814393.post-4367624337005293672010-01-05T17:21:00.000-08:002010-01-05T17:45:42.450-08:00Scrolling Follow Bar for blogger<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/_KIuDFnyM-FM/S0Ns5LKoAHI/AAAAAAAAARs/FeCsFJD6A34/s1600-h/syafzpic-bar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="1" src="http://2.bp.blogspot.com/_KIuDFnyM-FM/S0Ns5LKoAHI/AAAAAAAAARs/FeCsFJD6A34/s400/syafzpic-bar.png" style="border: 2px solid rgb(242, 242, 242);" /></a><br /></div>
<br />
<br />
<b>Add scrolling bar that always follow you when you scroll up and down the blog...<br /></b><br />
<br />
<br />
<b>Step #1</b>: As usual, you must login to blogger with your ID. You go straight to the <b>Layout</b> and choose <b>Edit HTML.</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/_KIuDFnyM-FM/S0PqtpBam_I/AAAAAAAAAR0/Mxlh1YegRbw/s1600-h/yyy.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_KIuDFnyM-FM/S0PqtpBam_I/AAAAAAAAAR0/Mxlh1YegRbw/s320/yyy.PNG" /></a><br /></div>
<br />
<br />
<b>Step #2</b>: Use <b>Ctrl+F</b> and search for this <b></head></b> tag.<br />
<br />
<b>Step #3</b>: Paste this code before the <b></head></b> tag:<br />
<br />
<br />
<div style="background-color: #f3f3f3; color: #660000;">
<!--syafzpic bar start here--><br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'/><br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
<script type='text/javascript'><br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
$(function() {<br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
var offset = $(&quot;#syafzpic-bar&quot;).offset();<br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
var topPadding = 15;<br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
$(window).scroll(function() {<br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
if ($(window).scrollTop() &gt; offset.top) {<br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
$(&quot;#syafzpic-bar&quot;).stop().animate({<br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
marginTop: $(window).scrollTop() - offset.top + topPadding<br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
});<br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
} else {<br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
$(&quot;#syafzpic-bar&quot;).stop().animate({<br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
marginTop: 0<br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
});<br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
};<br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
});<br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
});<br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
</script><br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
<!--syafzpic bar end here--><br />
</div>
<br />
<br />
<span style="background-color: #f3f3f3;"> </span><br />
<br />
<b>Step #4</b>: Use <b>Ctrl+F</b> again to find this <b>]]></b:skin></b> tag. Paste this code above the <b>]]></b:skin></b> tag:<br />
<br />
<div style="background-color: #f3f3f3; color: #660000; text-align: justify;">
/************ syafzpic-bar ***********/ <br />
#syafzpic-bar ul { background: #eee; padding: 10px; }<br />
li { margin: 0 0 0 20px; }<br />
#syafzpic-bar { width: 190px; float: right; }<br />
</div>
<br />
<b>Step #5</b>: <b>Save</b> the template.<br />
<br />
<b>Step #6</b>: You go to the <b>Page Elements</b> at the <b>Layout</b> and choose <b>Add a Gadget</b>. In the small pop up window, you must click at the <b>HTML/JavaScript</b>. A small pop up window will appear again with it content box.<br />
<br />
<b>Step #7</b>: Paste the code below in the content box appeared:<br />
<br />
<div style="background-color: #f3f3f3;">
<div id="syafzpic-bar" style="background: #dedede; color:#000000; border: solid 2px #f2f2f2;"><br />
<ul><br />
<li><a href='<span style="color: blue;">Put Your Link Here</span>'><span style="color: red;">Put Your Text Here</span></a></li><br />
<li><a href='<span style="color: blue;">Put Your Link Here</span>'><span style="color: red;">Put Your Text Here</span></a></li><br />
<li><a href='<span style="color: blue;">Put Your Link Here</span>'><span style="color: red;">Put Your Text Here</span></a></li><br />
</div>
<div style="background-color: #f3f3f3;">
<li><a href='<span style="color: blue;">Put Your Link Here</span>'><span style="color: red;">Put Your Text Here</span></a></li><br />
</div>
<span style="background-color: #f3f3f3;"> <li><a href='</span><span style="background-color: #f3f3f3; color: blue;">Put Your Link Here</span><span style="background-color: #f3f3f3;">'></span><span style="background-color: #f3f3f3; color: red;">Put Your Text Here</span><span style="background-color: #f3f3f3;"></a></li></span><br />
<span style="background-color: #f3f3f3;"></ul> </span><br />
<span style="background-color: #f3f3f3;"></div></span><br />
<br />
<br />
<span style="font-size: large;"><b>Setup instruction:</b></span><br />
<ul>
<li><span style="background-color: #f3f3f3; color: blue;">Put Your Link Here <span style="background-color: white;"> = <span style="color: black;">Put your link at this area</span></span></span></li>
<li><span style="background-color: #f3f3f3; color: red;">Put Your Text Here</span><span style="background-color: #f3f3f3; color: blue;"><span style="background-color: white;"><span style="color: black;"> = Put your text here<br /></span></span></span></li>
</ul>
<span style="background-color: #f3f3f3; color: blue;"><span style="background-color: white; color: black;"><span style="color: #660000;"> </span><span style="font-size: large;"><span style="color: #660000;">Example</span>:</span></span></span><br />
<ul>
<li><span style="background-color: #f3f3f3; color: blue;">Put Your Link Here <span style="background-color: white;"> = <span style="color: black;">http://blogging-style.blogspot.com</span></span></span></li>
<li><span style="background-color: #f3f3f3; color: red;">Put Your Text Here</span><span style="background-color: #f3f3f3; color: blue;"><span style="background-color: white;"><span style="color: black;"> = Blogging Tips and Style<br /></span></span></span></li>
</ul>
<br />
<span style="font-size: large;">Example code with background:</span><br />
<br />
<div style="background-color: #f3f3f3;">
<div id="syafzpic-bar" style="background: #dedede; color:#000000; border: solid 2px #fff000;"><br />
<ul><br />
<li><a href='<span style="color: blue;">http://www.syafzpic.com</span>'><span style="color: red;">syafzpic</span></a></li><br />
<li><a href='<span style="color: blue;">http://blogging-style.blogspot.com</span>'><span style="color: red;">Blogging Tips and Style</span></a></li><br />
<li><a href='<span style="color: blue;">http://www.blogger.com</span>'><span style="color: red;">Login</span></a></li><br />
</div>
<div style="background-color: #f3f3f3;">
<li><a href='<span style="color: blue;">http://www.flickr.com</span>'><span style="color: red;">Flickr</span></a></li><br />
</div>
<div style="background-color: #f3f3f3;">
<span style="background-color: #f3f3f3;"> <li><a href='</span><span style="background-color: #f3f3f3; color: blue;">http://www.twitter.com</span><span style="background-color: #f3f3f3;">'></span><span style="background-color: #f3f3f3; color: red;">Twitter</span><span style="background-color: #f3f3f3;"></a></li></span><br />
</div>
<div style="background-color: #f3f3f3;">
<span style="background-color: #f3f3f3;"></ul> </span><br />
</div>
<div style="background-color: #f3f3f3;">
<span style="background-color: #f3f3f3;"></div> </span><br />
</div>
<br />
<br />
<span style="font-size: large;">Example code without background:</span><br />
<br />
<br />
<div style="background-color: #f3f3f3;">
<div id="syafzpic-bar"><br />
<ul><br />
<li><a href='<span style="color: blue;">http://www.syafzpic.com</span>'><span style="color: red;">syafzpic</span></a></li><br />
<li><a href='<span style="color: blue;">http://blogging-style.blogspot.com</span>'><span style="color: red;">Blogging Tips and Style</span></a></li><br />
<li><a href='<span style="color: blue;">http://www.blogger.com</span>'><span style="color: red;">Login</span></a></li><br />
</div>
<div style="background-color: #f3f3f3;">
<li><a href='<span style="color: blue;">http://www.flickr.com</span>'><span style="color: red;">Flickr</span></a></li><br />
</div>
<div style="background-color: #f3f3f3;">
<span style="background-color: #f3f3f3;"> <li><a href='</span><span style="background-color: #f3f3f3; color: blue;">http://www.twitter.com</span><span style="background-color: #f3f3f3;">'></span><span style="background-color: #f3f3f3; color: red;">Twitter</span><span style="background-color: #f3f3f3;"></a></li></span><br />
</div>
<div style="background-color: #f3f3f3;">
<span style="background-color: #f3f3f3;"></ul> </span><br />
</div>
<div style="background-color: #f3f3f3;">
<span style="background-color: #f3f3f3;"></div> </span><br />
</div>
<br />
<br />
<br />
<br />
<br />
You can also put your chat box code in it.<br />
Example of the follow bar with <b>chat box</b> code: <br />
<br />
<br />
<div style="background-color: #f3f3f3;">
<div id="syafzpic-bar" style="background: #dedede; color:#000000; border: solid 2px #fff000;"><br />
<br />
</div>
<div style="background-color: #f3f3f3;">
<span style="background-color: #f3f3f3;"><b style="color: blue;">Put your chat box code in this area</b> <br />
</span><br />
</div>
<div style="background-color: #f3f3f3;">
<span style="background-color: #f3f3f3;"> </span><br />
</div>
<div style="background-color: #f3f3f3;">
<span style="background-color: #f3f3f3;"></div> </span><br />
</div>
<span style="background-color: #f3f3f3;"> </span><br />
<br />
<br />
<b>Step #8</b>: Save it and Done!<br />
<span style="background-color: #f3f3f3;"> </span><br />
<br />
<span style="font-size: large;"><b><span style="background-color: #f3f3f3;"> </span><a href="http://syarhanz-demo.blogspot.com/"><span style="color: #351c75;">Demo</span></a> | <a href="http://syarhanz-demo2.blogspot.com/"><span style="color: #990000;">Demo with Chat Box</span></a></b></span><br />
<br />
Please leave me a comment... enjoy!<br />
<br />Syarhanhttp://www.blogger.com/profile/10578010648350539420noreply@blogger.com4tag:blogger.com,1999:blog-5540288547303814393.post-38879066330970097292010-01-05T08:51:00.001-08:002010-01-08T16:07:13.579-08:00How to improve the loading time of your blog<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_KIuDFnyM-FM/S0SO4OtxpRI/AAAAAAAAASE/p56PV5aKtFE/s1600-h/load+optimize+faster.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="1" src="http://4.bp.blogspot.com/_KIuDFnyM-FM/S0SO4OtxpRI/AAAAAAAAASE/p56PV5aKtFE/s400/load+optimize+faster.png" style="border: 3px solid rgb(222, 222, 222);" /></a><br /></div>
<br />
<br />
<b>Hello friends...</b><br />
Do you know, image in your blog will make your blog more interesting?<br />
But the present of images in your blog will make the loading time of your blog is longer.<br />
The long time taken for the loading will make the readers uninvited to read your blog.<br />
By using the jQuery <a href="http://www.appelsiini.net/projects/lazyload">Lazyload</a>, the loading time of your blog will be improved.<br />
The image in your blog will be loaded when you 'look' at them.<br />
So, to improve the loading time of your blog, you have to make some adjustment to your blog.<br />
<br />
<br />
<b>Step 1</b>: Login to <a href="http://blogger.com/"><b>Blogger.com</b></a><br />
<br />
<b>Step 2</b>: Go to<b> Layout</b> > <b>Edit HTML</b><br />
<br />
<b>Step 3: </b>Find this <b style="background-color: #f3f3f3;"><b:skin><![CDATA[/*</b> tag and paste this code above it. If you already put this code please ignore this code:<br />
<br />
<div style="background-color: #eeeeee; color: #990000;">
<b><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/></b><br />
</div>
<br />
<br />
<b>Step 4</b>: Use <b>Ctrl+F</b> and search for this <b style="color: #660000;"></head></b> code.<br />
<br />
<b>Step 5</b>: Replace the <b style="color: #660000;"></head></b> with this code:<br />
<br />
<br />
<div style="background-color: #f3f3f3; color: #660000;">
<script src='http://dl.getdropbox.com/u/1693834/javascript/lazyload.js' type='text/javascript'/><br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
<script type='text/javascript'><br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
<br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
$(function() {<br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
$(&quot;.post img&quot;).lazyload({<br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
placeholder : &quot;http://i195.photobucket.com/albums/z105/dantearaujo/box.gif&quot;,<br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
threshold : 200<br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
});<br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
});<br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
<br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
</script><br />
</div>
<div style="background-color: #f3f3f3; color: #660000;">
</head><br />
</div>
<br />
<br />
<b>Step 6</b>: Save your template and done.<br />
<br />
<br />
<br />
<span style="font-size: large;"><b>Credits:</b></span><br />
<br />
- The <b>Lazyloader</b> is inspired by <a href="http://developer.yahoo.com/yui/imageloader/">YUI ImageLoader</a>.Utility by Matt Mlinac<br />
- <a href="http://www.bloggertuts.com/2009/09/improve-your-blogs-loading-time-using.html">BloggerTuts</a><br />
- <a href="http://www.appelsiini.net/projects/lazyload/enabled.html">Demo</a><br />
<br />
<br />
<br />
<div style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(56, 56, 56) none repeat scroll 0% 0%; border: 2px solid rgb(254, 254, 254); text-align: left;">
<b style="color: white;">If you have any problem when installing the code, please leave a comment. You comment will be replied soon...</b><br />
</div>
<br />Syarhanhttp://www.blogger.com/profile/10578010648350539420noreply@blogger.com7tag:blogger.com,1999:blog-5540288547303814393.post-65730849828229956572010-01-04T02:16:00.001-08:002010-01-05T08:55:34.901-08:00Show star rating in your Blogger postsAdd star rating to your blog posts now...<br />
Star rating will show the rating of your posts given by readers...<br />
Let us follow the easy steps below:<br />
<br />
<b>Step #1</b>: Login to <a href="http://blogger.com/"><b>Blogger.com</b></a><br />
<br />
<b>Step #2</b>: Go to <b>Layout</b> > <b>Page Elements</b>... Choose this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/_KIuDFnyM-FM/S0HCBvkk94I/AAAAAAAAARk/Vkvnz0qmwtE/s1600-h/Blog+post.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_KIuDFnyM-FM/S0HCBvkk94I/AAAAAAAAARk/Vkvnz0qmwtE/s400/Blog+post.PNG" /></a><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Step #3</b>: Find this code line:<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<b><span style="background-color: #cccccc; color: #660000;"><div class='post-footer-line post-footer-line-1'></span><br /></b><b> </b><br />
<div class="separator" style="clear: both; color: black; text-align: left;">
<b>or</b><br /></div>
<div class="separator" style="clear: both; color: black; text-align: left;">
<b> <br /></b><br /></div>
<div class="separator" style="clear: both; color: black; text-align: left;">
<b style="background-color: #cccccc; color: #660000;"><p class='post-footer-line post-footer-line-1'></b><br /></div>
<div class="separator" style="clear: both; color: black; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; color: black; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; color: black; text-align: left;">
<b> </b><br /></div>
<span style="color: black;"><b>Step #4</b>:</span><br />
<span style="color: black;"> Replace the</span><br />
<span style="color: black;"> <b><span style="background-color: #cccccc;"><div class=''post-footer-line post-footer-line-1'></span> or </b></span><b style="background-color: #cccccc; color: #660000;"><p class='post-footer-line post-footer-line-1'></b><span style="color: black;"><b> code</b> with this code:</span><br />
<br />
<div style="background-color: #f3f3f3;">
<b><span style="color: black;"><span style="color: #660000;"><div class=''post-footer-line post-footer-line-1'></span><br style="color: #660000;" /><span style="color: #660000;"> <span class='star-ratings'><br /> <b:if cond='data:top.showStars'><br /> <div expr:g:url='data:post.absoluteUrl' g:background-color='22221f' g:height='42' g:text-color='c0c0b4' g:type='RatingPanel' g:width='280'/><br /> </b:if><br /> </span><br /></span></span></b><br />
</div>
<br />
<span style="color: black;">or this code</span><br />
<span style="color: black;"><br /></span><br />
<div style="background-color: #f3f3f3; color: #660000;">
<b><p class=''post-footer-line post-footer-line-1'><br /><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></b><br />
</div>
<span style="color: black;"><br /></span><br />
<span style="color: black;"><br /></span><br />
<span style="color: black;"><b>Step #5</b>: Save your template and done!<br /></span><br />
<br />
<span style="color: black;"><b></b></span><b style="color: #3333ff;"><span style="color: black;"></span> <br /></b><br />Syarhanhttp://www.blogger.com/profile/10578010648350539420noreply@blogger.com0tag:blogger.com,1999:blog-5540288547303814393.post-67269874573157607292010-01-01T05:56:00.001-08:002010-01-03T06:20:45.886-08:00How to Change blogspot.com to co.cc<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/_KIuDFnyM-FM/S0CkrdPtb7I/AAAAAAAAARM/1dk6tNaiusk/s1600-h/cocc.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_KIuDFnyM-FM/S0CkrdPtb7I/AAAAAAAAARM/1dk6tNaiusk/s400/cocc.PNG" /></a><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b> <br /></b><br /></div>
<b><span style="font-size: large;"><span style="font-size: small;">GET YOUR OWN FREE DOMAIN NAME NOW</span> www.<span style="background-color: #f3f3f3; color: blue;">YOURDOMAINNAME</span>.co.cc !!!<br /></span></b><br />
<b><span style="font-size: large;">Join for free:</span></b><br />
<br />
<ul>
<li><span style="font-size: large;">Go to this link and register now for free: <a href="http://www.co.cc/">www.co.cc</a> </span></li>
<li><span style="font-size: large;">How to setup with the Blogger, please refer to this link: <a href="http://www.co.cc/blogger/blogger.php">http://www.co.cc/blogger/blogger.php</a></span></li>
</ul>
<br />
<span style="font-size: large;">After the step had finished, you've to wait for 48 hours for your <span style="background-color: #f3f3f3; color: blue;">YOURDOMAINNAME</span>.blogspot.com to be redirected to the new www.<span style="background-color: #f3f3f3; color: blue;">YOURDOMAINNAME</span>.co.cc <br /></span><br />
<br />
<span style="font-size: large;">Enjoy It! <br /></span><br />
<br />Syarhanhttp://www.blogger.com/profile/10578010648350539420noreply@blogger.com11tag:blogger.com,1999:blog-5540288547303814393.post-47035064611110699082009-12-31T18:57:00.001-08:002010-01-03T06:20:45.890-08:00Add Light Box Image<br />
Greeting... this is my first 2010 year blogger tutorial. I feel very excited with this year because my feeling say that many good things will happen to me. Let's we start the year happily without thinking any bored things. <br />
Want to make your image stylish when you click on it, check this out!<br />
<br />
<br />
<br />
<div id="syafzpicbox">
<a href="http://rmanphotography.com/mygallery/images/20091230185516_theband.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" rel="lytebox">
<img alt="" border="0" id="BLOGGER_PHOTO_ID_5406207422236379378" src="http://rmanphotography.com/mygallery/images/20091230185516_theband.jpg" />
</a>
<br />
</div>
<br />
<a href="http://blogging-style.blogspot.com/"><b>Demo</b></a><br />
<br />
<span style="font-size: large;">Step 1 : Adding the Scrip</span>t<br />
<br />
1. Find this <b></head></b> code.<br />
<br />
2. Replace the <b></head></b> code with this code:<br />
<br />
<br />
<div style="background-color: #f3f3f3;">
<link href='http://www.mydatanest.com/files/allblogtools/29603_izeup/lytebox.css' media='screen' rel='stylesheet' type='text/css'/><br />
</div>
<div style="background-color: #f3f3f3;">
<script src='http://www.mydatanest.com/files/allblogtools/29602_xemqf/lytebox.js' type='text/javascript'/><br />
</div>
<div style="background-color: #f3f3f3;">
</head><br />
</div>
<br />
<br />
<br />
<br />
<span style="font-size: large;">Step 2 : Adding the CSS code</span><br />
<br />
1. Use <b>Crtl+F</b> and search for this <b style="background-color: #f3f3f3;">]]></b:skin></b> tag.<br />
<br />
2. Replace this <b style="background-color: #f3f3f3;">]]></b:skin></b> tag with this code:<br />
<br />
<div style="background-color: #f3f3f3;">
.syafzpicbox {<br />
</div>
<div style="background-color: #f3f3f3;">
display: block; <br />
</div>
<div style="background-color: #f3f3f3;">
margin: 0px auto 10px; <br />
</div>
<div style="background-color: #f3f3f3;">
text-align: center;<br />
</div>
<div style="background-color: #f3f3f3;">
cursor: pointer; <br />
</div>
<div style="background-color: #f3f3f3;">
cursor: hand;<br />
</div>
<div style="background-color: #f3f3f3;">
width: 400px; <br />
</div>
<div style="background-color: #f3f3f3;">
height: 324px;<br />
</div>
<div style="background-color: #f3f3f3;">
}<br />
</div>
<div style="background-color: #f3f3f3;">
<br />
</div>
<div style="background-color: #f3f3f3;">
]]></b:skin><br />
</div>
<br />
3. Click on the <b>Save Template</b> button.<br />
<br />
<br />
<br />
<span style="font-size: large;">Step 3 : Add the light box image in posts</span><br />
<br />
This step will show how to add the light box image in your blog posts.<br />
<br />
1. Make sure you use this code in where you want the Light Box Image to be appeared:<br />
<br />
<br />
<div style="background-color: #f3f3f3;">
<div id='syafzpicbox'><br />
</div>
<div style="background-color: #f3f3f3;">
<a rel="lytebox" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="<b><span style="color: red;">YOUR IMAGE URL</span></b>"><img src="<b><span style="color: red;">YOUR IMAGE URL</span></b>" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a><br />
</div>
<div style="background-color: #f3f3f3;">
</div><br />
</div>
<br />
2. Just replace the <b><span style="background-color: #f3f3f3; color: red;">YOUR IMAGE URL</span></b> with your own image url...<br />
<br />
<div style="color: blue;">
<b>Enjoy them!</b><br />
<br />
<b>Please Leave a COMMENT <br /></b><br />
</div>Syarhanhttp://www.blogger.com/profile/10578010648350539420noreply@blogger.com3