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

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Google Facebook Twitter More

• Digg
• Linkedin
• Stumbleupon
• Delicious
• Tumblr
• BufferApp
• Pocket
• Evernote

Related Posts

• Floating Share Buttons With Total Shares Count For Your BlogSpot Blog There are many tutorials on Internet that can help you add a floating widget with multiple share buttons for Facebook
• Spam Comments Moderation In Blogger/BlogSpot BlogsBeing closely associated with Google, Blogger has always been focusing on improving the SEO attributes of its blogs. Wo
• 9 Best Ways To Build Links To Your Blog A lot of bloggers are constantly on the look out for getting as many back links to their blog as possible. The reason
• TinyPic Is Down Forever - Code 010394*UPDATE: The problem has been solved. See the bottom of this post for Tinypic's explanation on the issue. Now the image