March 7, 2011

Add A TweetQuote To Your Blogger Blog


In HTML/CSS, when you quote a piece of text from other websites/web pages, then it is usually done through customized quote boxes, called as blockquotes. You can read, add and customize these blockquotes in your blog from this tutorial:
Customize Blockquote In Your BlogSpot Blog

Now, in this tutorial you will be able to add a sub-type of blockquotes: Tweetquote, to your blog.
Many tweets go viral on Twitter and many a times, we do find tweets worth sharing with our readers on our blogs. So, here is a creative & professional way to (re)publish tweets on your blogs:
@BillGates congratulating Warren Buffett, for being awarded with National Medal of Fredom:
Congratulations to my dear friend Warren Buffett on National Medal of Freedom - http://bit.ly/eN9rh1
-@BillGates

There are just two steps to follow, in this tutorial:
STEP #1
Log in to Blogger, go to Design -> Edit HTML and find this code:
</head>

And immediately ABOVE/BEFORE it, paste this code:
<style type="text/css">
blockquote.tweetquote {
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #46A8B8;
border-bottom: 1px solid #46A8B8;
background: #D1D0C6 url(http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/twitterquote1.jpg);
background-position:top left;
background-repeat:repeat-y;
margin: 0 20px;
padding: 10px 20px 10px 45px;
font-size: 0.9em;
}
</style>
You may use a different background image in your blog by editing the code highlighted in BLUE color in the above code. And SAVE the template.

STEP #2
Now, while publishing a post on your blog, whenever you want to quote a tweet, do it in this way:
<blockquote class="tweetquote">PASTE THE TWEET HERE</blockquote>
-<a href="http://LINK_TO_TWEET">@TWIT_ID</a>

NOTE: Remember the code highlighted in RED, that has to be used everytime you want to quote a tweet.
Your tweet can be of any length (you may use tweets from twitlonger too, as the background cloud pattern will keep on repeating itself). That's it...Publish the post.

Image credits: OneHalfKiller


14 comments:

Ardi @ BlogBizTutor said...

Great tips... i like it.
Your blog is my favorite. Look at my blogroll.
I will continue to wait for you post....

Sai - BloggerStop.Net said...

Glad to know that buddy :)
Happy Blogging!

Reza Winandar said...

Great tutorial! Thanks for sharing it.

Sangam said...

can please advise to me,how to add social share buttons on my blog,i have tried so many time but not succcess,1i will be apriciate with you fast respons...thanks

Sai - Blogger Widgets said...

Hey there,

Follow this tutorial, for what you want:
http://bloggerstop.net/2008/12/how-to-add-social-networking-buttons-to.html

Sterling Silver Jewelry said...

this post is really useful to me , and i d like to Add A TweetQuote To my Blogger Blog

SEO Company said...

Thank you. I was really tired with that twitter screenshot thing.

Shock Mount Aluminum Case said...

Thanks for this code!
I have applied it on my blog and it works. Now I am searching code for official twitter button for blogger.

mutuelle santé said...

Really useful !
Thanks

organic pet food said...

I am really enjoying reading your well written articles. It looks like you spend a lot of effort and time on your blog. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work.

Sara said...

Really your post is really very good and I appreciate it. It’s hard to sort the good from the bad sometimes, but I think you’ve nailed it. You write very well which is amazing. I really impressed by your post.
flowers cambodia

Lawyers said...

Thanks for sharing your opinion. This is a really good read for me.This is the good blog for eneyone who wants to know about this topic.

WALI HYDER said...

:))

buy wow gold online said...

nice idea helps a lot to increase the views of site its helpful

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

Allowed HTML tags: <b>, <i> and <a>

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]MensItaly[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy