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

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

41 comments

Write comments
March 07, 2011 1:00 PM delete

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

Reply
avatar
March 07, 2011 1:04 PM delete

Glad to know that buddy :)
Happy Blogging!

Reply
avatar
March 09, 2011 5:00 AM delete

Great tutorial! Thanks for sharing it.

Reply
avatar
May 19, 2011 5:38 PM delete

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

Reply
avatar
May 20, 2011 2:26 AM delete

Hey there,

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

Reply
avatar
August 19, 2011 3:26 AM delete

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

Reply
avatar
August 19, 2011 5:50 AM delete

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

Reply
avatar
September 13, 2011 2:01 AM delete

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.

Reply
avatar
October 26, 2011 11:13 PM delete

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.

Reply
avatar
November 01, 2011 2:39 AM delete

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

Reply
avatar
November 04, 2011 12:33 PM delete

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.

Reply
avatar
February 12, 2013 2:57 AM delete

I am joyful to read this post, its an ittractive one. I am always searching for quality posts and articles and this is what I found here, I hope you will be adding more in future. Thanks
Prestige New projects Bangalore Like Following projects Prestige Ferns Residency

Reply
avatar
February 12, 2013 3:00 AM delete

I am joyful to read this post, its an ittractive one. I am always searching for quality posts and articles and this is what I found here, I hope you will be adding more in future. Thanks
Prestige New projects Bangalore Like Following projects Prestige Ferns Residency

Reply
avatar
February 12, 2013 3:21 AM delete

I am joyful to read this post, its an ittractive one. I am always searching for quality posts and articles and this is what I found here, I hope you will be adding more in future. Thanks
Prestige New projects Bangalore Like Following projects Prestige Ferns Residency

Reply
avatar
February 12, 2013 3:58 AM delete

Thanx for sharing the useful information with us..Keep going!!
Prestige New projects Bangalore Like Following projects Prestige Ferns Residency

Reply
avatar
February 12, 2013 4:01 AM delete

Thanx for sharing the useful information with us..Keep going!!
Prestige New projects Bangalore Like Following projects Prestige Ferns Residency

Reply
avatar
February 12, 2013 4:02 AM delete

Thanx for sharing the useful information with us..Keep going!!
Prestige New projects Bangalore Like Following projects Prestige Ferns Residency

Reply
avatar
February 12, 2013 4:18 AM delete

Thanks for posting this informative blog...well done.
Prestige New projects Bangalore Like Following projects Prestige Ferns Residency

Reply
avatar
February 12, 2013 4:20 AM delete

Thanks for posting this informative blog...well done.
Prestige New projects Bangalore Like Following projects Prestige Ferns Residency

Reply
avatar
February 12, 2013 4:21 AM delete

Thanks for posting this informative blog...well done.
Prestige New projects Bangalore Like Following projects Prestige Ferns Residency

Reply
avatar
February 12, 2013 4:37 AM delete

This nice and useful blog....Thanks for this post
Prestige New projects Bangalore Like Following projects Prestige Ferns Residency

Reply
avatar
February 12, 2013 4:39 AM delete

I really enjoy the blog post…
Prestige royale gardens Bangalore Like Following projects Prestige royale gardens

Reply
avatar
February 12, 2013 4:39 AM delete

This nice and useful blog....Thanks for this post
Prestige New projects Bangalore Like Following projects Prestige Ferns Residency

Reply
avatar
February 12, 2013 4:40 AM delete

This nice and useful blog....Thanks for this post
Prestige New projects Bangalore Like Following projects Prestige Ferns Residency

Reply
avatar
February 12, 2013 4:40 AM delete

I really enjoy the blog post…
Prestige royale gardens Bangalore Like Following projects Prestige royale gardens

Reply
avatar
February 12, 2013 4:41 AM delete

I really enjoy the blog post…
Prestige royale gardens Bangalore Like Following projects Prestige royale gardens

Reply
avatar
February 12, 2013 4:59 AM delete

I am glad to read this post, its an interesting one. I am always searching for quality posts and articles and this is what I found here, I hope you will be adding more in future. Thanks
Prestige New projects Bangalore Like Following projects Prestige Ferns Residency

Reply
avatar
February 12, 2013 5:01 AM delete

I am glad to read this post, its an interesting one. I am always searching for quality posts and articles and this is what I found here, I hope you will be adding more in future. Thanks
Prestige New projects Bangalore Like Following projects Prestige Ferns Residency

Reply
avatar
February 12, 2013 5:03 AM delete

I am glad to read this post, its an interesting one. I am always searching for quality posts and articles and this is what I found here, I hope you will be adding more in future. Thanks
Prestige New projects Bangalore Like Following projects Prestige Ferns Residency

Reply
avatar
February 12, 2013 5:15 AM delete

I am glad to read this post, its an interesting one. I am always searching for quality posts and articles and this is what I found here, I hope you will be adding more in future. Thanks
Prestige New projects Bangalore Like Following projects Prestige Ferns Residency

Reply
avatar
February 12, 2013 5:29 AM delete

Thanx for sharing the useful information with us..Keep going!!
Prestige New projects Bangalore Like Following projects Prestige Ferns Residency

Reply
avatar
February 12, 2013 5:31 AM delete

Thanx for sharing the useful information with us..Keep going!!
Prestige New projects Bangalore Like Following projects Prestige Ferns Residency

Reply
avatar
February 12, 2013 5:31 AM delete

Thanx for sharing the useful information with us..Keep going!!
Prestige New projects Bangalore Like Following projects Prestige Ferns Residency

Reply
avatar
February 12, 2013 5:46 AM delete

Thanx for sharing the useful information with us..Keep going!!
Prestige New projects Bangalore Like Following projects Prestige Ferns Residency

Reply
avatar

Comments are moderated on this blog

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

Comment Like This! and Optimize your blog EmoticonEmoticon