12:51 AM
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 Buffet, 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:
And immediately ABOVE/BEFORE it, paste this code:
STEP #2
Now, while publishing a post on your blog, whenever you want to quote a tweet, do it in this way:
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.
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">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.
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>
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: 
