How to Install Yahoo Emoticon in Comment Box

Today Tutorial blog and blogger hack. At last Tutorial Blog, we have learned how to embedded Comment below post. If you havent read it just click here. It will more interesting if we put some emoticon like Yahoo emoticon above the comment box. SO, the reader can keep they ekspression when give comment. (thanks to o-om for Yahoo emoticon javasript)

Just like before at tutorial blog here, we will keep this simple and easy to do:

Go to Layout and choose Edit HTML (Back up your blog)

Copy and paste code below at above tag </body>

<script src='http://oom.blog.googlepages.com/smiley.js' type='text/javascript'/>

 

Now find this code with red colour

<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'> <b:include data='post' name='comment-form'/> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl'

expr:onclick='data:post.addCommentOnclick'>

<data:postCommentMsg/>

</a> </b:if> </b:if> </p>

 

Copy-paste  code yahoo emoticon below and put it under

           <p class='comment-footer'> (just look the code at step 3)

<b><img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>

:))

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>

:)]

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>

;))

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>

;;)

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>

:D

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>

;)

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>

:p

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>

:((

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>

:)

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>

:(

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>

:X

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>

=((

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>

:-o

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>

:-/

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>

:-*

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>

:|

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>

8-}

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>

~x(

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>

:-t

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>

b-(

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>

:-L

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>

x(

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>

=))</b>

 

Save and done

Now, check your blog and comment box, is the emoticon appears or not? i hope it’s work well.

That’s tutorial blog today

Have a nice try

 

Read More.... »»

How to Make Recent Comment

Today Tutorial Blog dan Blogger Hack. Comment always make blogger happy , when your blog full of comment from visitor your will get full spirit to get more inspiration to getting better.

We needs to know when a new comment added, so recent comment is important for our blog. Every single comment will appears in tthe recent comment. You know that to adding recent comment can be make by twio ways first by RSS Feeds and another one by Javascript code.

In Tutorial blog today we will make Recent comment with Javascript code,

Let’s make it simple and quick step only:

1. Go to your Layout
2. Add a Gadget
3. Choose HTML/Javascript
4. Copy-paste code below 

<ul><script style="text/javascript">
function showrecentcomments(json) {
for (var i = 0; i < 5; i++) {
var entry = json.feed.entry[i];
var ctlink;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
ctlink = entry.link[k].href;
break;
}
}
ctlink = ctlink.replace("#", "#comment-");
var ptlink = ctlink.split("#");
ptlink = ptlink[0];
var txtlink = ptlink.split("/");
txtlink = txtlink[5];
txtlink = txtlink.split(".html");
txtlink = txtlink[0];
var pttitle = txtlink.replace(/-/g," ");
pttitle = pttitle.link(ptlink);
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");
document.write('<li>');
document.write('<a href="' + ctlink + '">' + entry.author[0].name.$t + '</a>');
document.write(' on ' + pttitle);
document.write('<br/>');
if (comment.length < 100) {
document.write(comment);
}
else
{
comment = comment.substring(0, 100);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + ctlink + '">(more)</a>');
}
}
document.write('</li>');
document.write('<div style="font-size:75&percnt;;text-align:center"><a href="http://blogtutormaster.blogspot.com/2009/02/How-to-make-recent-comment.html">Get this Widget</a></div>');
}
</script>
<script src="http://Yourblogname.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script></ul>
<noscript>You need to enable JavaScript to read this.</noscript>

 

  5. Save and done

 

Note:

Change URL http://YourBlogname.blogspot.com with your blog URL

 

Now, you have a recent comment widget on your blog, everysingle comment update will show on it.

Thats Tutorial blog today,see you next time

Have a nice try

Read More.... »»

Easy Way To Make Float Image Or Float Ads

Today Tutorial blog and blogger hack. We will make a float image that can be located in our blog. You can use it for advertising, Image, RSS, Link or else. You can see this example for float image at the right bottom with blue square.

It’s easy to make float image like that. Blogger  who want to make space for advertise for her/him blog just follow this simple step:

1. Go to your Layout
2. Choose Edit HTML and Click on Expand widget Template (back up your blog first)
3. Copy this code below ( you can choose the placement)

Up-Left Foat Image

<a href='http://yourlink' style='display:scroll;position: fixed; top:5px;left:5px;' title='change with your title'><img src='http://img132.imageshack.us/img132/70/14106996d8c859fm3wq7.gif'/></a>

 

Up-Right Float image

<a href='http://yourlink' style='display:scroll;position: fixed; top:5px;right:5px;' title='change with your title'><img src='http://img132.imageshack.us/img132/70/14106996d8c859fm3wq7.gif'/></a>

 

Bottom-Right Float Image

<a href='http://yourlink' style='display:scroll;position: fixed; bottom:5px;right:5px;' title='change with your title'><img src='http://img132.imageshack.us/img132/70/14106996d8c859fm3wq7.gif'/></a>

 

Bottom-Left Float Image

<a href='http://yourlink' style='display:scroll;position: fixed; bottom:5px;left:5px;' title=’change with your title’><img src='http://img132.imageshack.us/img132/70/14106996d8c859fm3wq7.gif'/></a>

 

   4.  Put code above <body> tag .

   5. Save your Template and done

 

Change The red code with your link and title, the orange code with your own image or banner.

 

Well now you can make a space of your blog for advertise or just put an image of your photo there. It's just a simple and interesting Tutorial blog 

Have a nice try..

Read More.... »»

How to Embedded Comment Below Post

Today tutorial blog and blogger hack. We will talk about embedded comment below the post.  it’s usually  can be done with an easy ways. Upps i say maybe two ways to embedded comment below the post.

Let’s try the first one:

1. Go to Setting and Choose Formatting
2. Choose Comments  and look at comment form placement
3. Then  choose embedded below post

Now Check your blog, is it the comment form is below post yet? If it is, now we done to do it. congratulate for your success. Now enjoy the comment below post in your blog

But, if it is fail. Now we move to the next step.

1. Go to your Layout
2. Choose Edit HTML and click on Expand Widget Template
3. Backup your blog first
4. Now find this code, especially focusing at red code

<p class='comment-footer'>

        <b:if cond='data:post.allowComments'>

        <a expr:href='data:post.addCommentUrl'            

expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

    </b:if>

</p>

5. Change these code with this code below

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>


</b:if>

6. Then save your template and it’s done

 

Well, it’s very useful if we have embedded comment below post cause visitor can easy to give a  comment .

Have a nice try 

 

Technorati Tags: Tutorial BLog,Blogger Hack

Read More.... »»