Sunday, February 6, 2011

Squeaking my Mind.

A few people have mentioned my new Squeak a Comment logo, and I'd like to say thanks for giving me something to post about.  It's so much easier when I don't have to think of a topic myself.  I might cover reaction buttons too if there time, or maybe tomorrow.

A word of caution, don't attempt this if you haven't selected a layout.  If you're using default settings I'm pretty sure your code is different.

A few posts ago I covered making a banner for you site using cooltext.com  I used the same site for the post a comment message, because you can use a picture instead of just text.  So I'm not going to go over all of that again, but if you need help go back and see this post.  Just make the text a little smaller when creating your pic for comments.  I used the same style and font so it would match the site banner.

...so anyways, take your picture and upload it somewhere.  i used http://www.picturestack.com/ because it's easy and they keep your pictures indefinitely.

So, you got a picture uploaded with your new message?  Good.  Now lets put it in your blog.  Log in to blogger, go to design, edit html, and check the box for expand widget templates, as seen here:

hit ctrl+F and look for <data:postCommentMsg/>  this appears in 2 places and you'll need to replace both of them.  so when you find the first one replace it with <img src='http://www.picturestack.com/878/814/octcooltext50yS7.png'/> but make the address point to the picture you just uploaded uless you want to use mine and have people squeaking on your blog too.
After you change that, hit the button for find next occurrence and change the second one too.
Once you've changed all the codes from <data:postCommentMsg/> to <img src='http://www.picturestack.com/878/814/octcooltext50yS7.png'/> then hit preview(you won't be able to see the change in the preview but just make sure you don't get any errors) and then hit Save Template and your done.  You should have a nice new comments graphic/text thing.

You don't have to use an image, you can supposedly just replace <data:postCommentMsg/> with text that you want it to say, but i got errors when i tried to do that.  your mileage may vary.

You may want to change your footer to match your new Comment entry text if you're doing a theme, like AnonyMOUSE making everything say squeak or whatever.



This is easier since I don't think you need to change any code to do it...




this'll bring you to a nice little popup where you can change these settings.
While you're there I might as well cover reaction buttons too.  You see it a couple settings down in that last picture but theres a bit more to it than that.  If you want these, go ahead and check the box, and/or click edit next to that setting to change what the buttons say.  Now if you're using the default blog template, they should just show up, but if you have a custom layout its back to the html editor and expand widget templates(see above).

 This time find the code: <data:post.body/> and immediately after it paste in the following code:
<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' width='100%'><tr>
<td valign='center'><span class='reactions-label'>
<data:top.reactionsLabel/></span>
</td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span> 
 I put my code a little further down it looks like but I don't recall why...anyway, here's mine so make yours look something like this:

Preview to check for errors, save it and you're done.  That concludes this post because I really don't feel like writing anymore.  I hope this helps somebody out.  It's not too difficult and I did my best to break it all down into manageable steps without making this post too long.  Let me know how it works for you if you try it.  I know it might seem like a lot but I covered a few different mods so...get what you can out of it.

32 comments:

  1. Your posts are always really informative and well thought-out. I don't really need this but I appreciate all the work you put in.

    Love your background image by the way.

    ReplyDelete
  2. Another great tip, thanks for posting!

    ReplyDelete
  3. These posts are very helpful which is obvious judging by their popularity. Keep it up!

    ReplyDelete
  4. Hey, nice post, looking forward to the next ones. :)

    ReplyDelete
  5. I admire that you want to write it all for us :)

    ReplyDelete
  6. Yes awesomely informative and useful.

    ReplyDelete
  7. another great informative post. great job.

    ReplyDelete
  8. great post, i really like your blogs, they are packed full of useful info

    ReplyDelete
  9. Working day by day, step by step to make the perfect blog haha, good work man

    ReplyDelete
  10. very helpful if you want to customising your blog. thanks

    ReplyDelete
  11. Wonderful guide, I might do this!

    ReplyDelete
  12. Hah, I was silently wondering about that. Thanks for the tip!

    ReplyDelete
  13. nice post, very informative, cheers bro!

    ReplyDelete
  14. I think you have a knack for these types of posts

    ReplyDelete
  15. I'm gonna try this out right now. Thanks!

    ReplyDelete
  16. You make really good tutorails dude. Please keep it up :D!

    ReplyDelete
  17. Ha, very useful. Perhaps more work than I can put into it right now, but thanks

    ReplyDelete
  18. great tutorial... will be adding this to my blog as well :)

    ReplyDelete
  19. Man more great info, I was wondering how people did stuff like that.

    ReplyDelete
  20. I was wondering myself about your "squeak" thingy. Thanks!

    ReplyDelete
  21. always enjoyr reading your posts. very helpful.


    Following and supporting!
    http://benny-lava.blogspot.com/

    ReplyDelete
  22. thats preety neat. im not going to do it but its cool.

    ReplyDelete
  23. Thanks for the blog posts. When I have time, I plan on customizing my blog as well.

    Thanks for these!

    ReplyDelete