How To Add Tweet This Quote + Phrase Box In Blogger Post

Hello Folks, Today in this article we are going to explain How to Add Tweet Quotes In Blogger Template. You might have noticed in wordpress site when you reading some sentence you can see few quotes are highlighted with the tweet this box in wordpress website or blog.However before this feature is only available for wordpress site's but our team has worked on it and we have bring beautiful widget for tweet this content/article or any quotes or any highlighted important tag lines in your blogger posts.Now Let's your readers share a quote from your blogger posts with the "Quote Tweet This button".Tweet this features is very easy to embed/install with stylish unique tweetable quote/contents box in your article.Pick your most engaging content and highlight or load them into tweet this box.Tweet this is a part of paragraph of your content.
Benefits of adding tweet this button in your post is that you visitors can share the content on twitter and it might be go viral in this case you will surely increase your page ranking in alexa and also in SERP. Tweet blogger plugin helps you to highlight catchy phrase or sentence in your post and you can easily advertise your website , blog or business on twitter. Nowdays it's become very popular to invite users to tweet a specific section of a post by just installing tweet this box inside your blogger template.To create beautiful tweet this boxes in your blogger website follow the steps mentioned below.

How to Install Tweet This Box Inside The Blogger Post

Installation Steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.

Step 2. Now Click on -> Template -> Edit HTML.

Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.

Step 4. Now Copy the below CSS and paste it just before/above </style> or ]]></b:skin>.

/* CSS Tweet This Box By www.Bloggersstand.com */
.bsd-tweet-box{background:#fff;padding:18px;margin:18px auto;color:#666;font-size:18px;overflow:hidden;
font-family:'Roboto',Helvetica,Arial,sans-serif;border-radius:5px;border:1px solid silver;}
.bsd-tweet-box p{font-size:130%;font-style:italic;margin:0!important;line-height:1.3em;}
a.tweet-it{display:block;float:right;font-size:12px;text-transform:uppercase;margin-top:10px;color:#666;
font-family:'Roboto',Helvetica,Arial,sans-serif;font-weight:bold;
text-decoration:none;transition:all .4s ease-in-out;}
a.tweet-it:hover{color:#00aced;}
.tweet-it i{color:#07ACEC;font-size:16px;}
.tweet-text:hover {cursor:pointer;color:#00aced;}

Step 5. Now Save your Template.

How To Add Tweet This Box Inside Blogger Post

To add tweet this box inside your blogger posts ,if you want to embed in certain place in your content/sentence when you are writing it,just switch to html mode and copy the below code and past it where you want to display tweet to this box inside your post then switch back to compose mode and hit publish button,now you will see beautiful tweet it/tweet this/tweetable content box inside your blogger post.

<div class="bsd-tweet-box">
<div class="tweet-text" id="bsd1">
How to Tweet Quotes In Blogger By Bloggersstand.com</div>
<script>
var twurl = window.location.href;
var twcontent= document.getElementById("bsd1").textContent;
var twesc=escape(twcontent);
document.write('<a class="tweet-it" href="https://twitter.com/intent/tweet?text='+twesc+'&url='+twurl+'&via=bloggersstand&related=bloggersstand" target="_blank" title="Tweet This">\
Tweet it <i class="fa fa-twitter"></i></a> \
');
</script>
</div>

Customization: 

• Replace Bloggersstand with your twitter username.
• Replace How to Tweet Quotes with your phrase/sentence.
• If you are going to add more than one tweet this box ,replace bsd1 with bsd2 and so on.