Tuesday, November 02, 2010

"Like" Button For Tinki Talks

My post footer currently looks like this:


Post Footer without Like button.


On a whole, I guess I'm pretty happy with the way it looks. But some time ago since some readers suggested that I include a "Like" button to it. Not a bad suggestion, I suppose. It allows you guys to interact with my post without having to think about what to say. =)


But considering I'm no programmer,
I put it off for the longest time.

Till last night. =p


Tinkered away with Blogger Settings and experimentally tweaked some codes. But unfortunately for me, those codes are just NOT working the way I intended them to. Hrrmph. >( When added, the Like button somehow expands my footer in a way I don't appreciate.


Post Footer with Like button in a new line.


Yuck! Such an eyesore! Blergh!  
Cannot make it lah liddat. -_-''' 

This *points below* is what
I want my Post Footer to look like:


 Post Footer with Like button BETWEEN Comments and Share buttons.


Does anybody know how I can customise my codes
to make my Like button behave the way I want it to?

13 comments :

narrowband said...

Currently from the code, the "Like" table (yes I see it's a <table>..</table>) is positioned AFTER those Share-Buttons. Maybe try slot the code in between Post-Timestamp and the Share-Buttons?

Pam Song said...

ATTN: narrowband
– Thanks for the suggestion! Will try that now. =)

Pam Song said...

ATTN: narrowband
– Oh yes, now I remember why I didn't leave it that way. It's cos I end up with FOUR lines instead of the already-terrible-looking three. -_-'''

It's like the "Like" button always wants to be in a new line and refuses to sit on a line on its own.

I'm gonna revert it back to what I had before (with the three lines and the "Like" button sitting on its own) but you can click *here* to see what I mean.

Pam Song said...

ATTN: narrowband
– Sorry, I mean it refuses to sit on the same line as the other things on the post footer. -_-'

Willett said...

Let me know when you are free gal..I will look into it for you.

Terence Song said...

Try this:

Put the span element with class="post-icons" that contains your "like" button in a div with class="post-share-buttons" and move it to where you want it (between the span with class="post-comment-link" and the div with class="post-share-buttons" that contains your share buttons).

This seems to work, for me at least.

Pam Song said...

ATTN: Willett
– Haha. It's okay! My cousin solved it!


ATTN: Terence Song
– Terence Koko you so very many amazingness!! Thank you!!!

Terence Song said...

Ai yah... ka-ki-nang... mien khek-khi...

Seriously, it worked?

You might want to duplicate the post-share-buttons style and give it a different name... maybe post-reaction-buttons?... same style as post-share-buttons, but with different style id (so you can change the style of your like button without affecting the style of the share buttons).

Pam Song said...

ATTN: Terence Song
– Haha. Do you see it? Does it look ok on your side? Cos on my side it does. But I haven't tried loading the page on other browsers. Right now, it appears as per this post on Firefox. =D

And urm... what do you mean by changing the style? As in the look? Actually I really don't like the font for the "Like" word. So tak matching with all my other text. But... is it even possible to change that? -_-'

Pam Song said...

ATTN: Terence Song
– Eee, Terence Koko, it looks really ugly on Chrome, Opera and Safari. T_T Look! *click*

Terence Song said...
This comment has been removed by the author.
Pam Song said...

ATTN: Terence Song
- Cannot wor. If I do that, it goes back to what it was before where there are 3 lines. Hmmm...

Pam Song said...

ATTN: Terence Song
– Reverted it back to the previous one for the time being till this problem gets figured out. Bleh. And there I was thinking everything's fine and dandy now. Haha.

Post a Comment

Talk to me!