How to 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.

 

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.

Posted in: Blogger, How To