How To Make Tweet Box in Blog Posts For Blogger

How To Make Tweet Box in Blog Posts For Blogger. Make Tweet Box in Blog Posts For Blogger. I am sure you are often find tweet box on several professional website. Actually, Tweet Box in the post is something that is very easy if you are use Wordpress blog. Just install the plugin then Tweet Box will appear on your post. Another case with Blogspot, you should be a little creative to be able to display the Tweet Box in the post. It quite easy I think, you just tried to tamper a bit of code from existing reference, then become as below.

Do you interest to try this Tweet Box in Blog Posts For Blogger? Please follow the steps below. It very easy to apply, but you should be careful in place the script below. And make sure you're using a Font Awesome blog to show the Twitter icon in the tweet box.

Step 1

Please save the CSS code below in the edit HTML above the code ]]></b:skin> or </style>.

 .tweet-box{
    background:#55acee;
    padding:20px;
    margin:20px auto;
    color:#fff;
    font-family:Georgia;
    border-radius:5px;
    border:1px solid transparent;
}
.tweet-box p{
    font-size:130%;
    font-style:italic;
    margin:0!important;
    line-height:1.3em;
}
a.tweet-this{
    display:block;
    float:right;
    margin-top:10px;
    color:#fff;
    text-decoration:none;
    transition:all .4s ease-in-out;
}
a.tweet-this:hover{
    color:#002039
}

Step 2

Use the code below to display the Tweet Box in the post. Post it in HTML mode not Compose mode.

<div class="tweet-box">
<p id="p1">How To Make Tweet Box in Blog Posts For Blogger</p>
<script>
var twurl = window.location.href;
var twcontent= document.getElementById("p1").textContent;
var twesc=escape(twcontent);
document.write('<a class="tweet-this" href="https://twitter.com/intent/tweet?text='+twesc+'&url='+twurl+'&via=Bloggerokay&related=Bloggerokay" target="_blank" title="Tweet This">\
<i class="fa fa-twitter"></i> Tweet This</a> \
<div style="clear:both"></div> \
');
</script>
</div>

For Customization

You just need to write the tweet content by replacing the phrase that I marking above. For Bloggerokay code ( There are two id) please replace with your Twitter username. If you do not want to attach a URL posting , please delete var twurl = window.location.href; and code &url='+twurl+'.

If you are going to post more than one Tweet Box in the post, please replace the id code p1 (There are two) with p2 and so on.

That's enough my post about How To Make Tweet Box in Blog Posts For Blogger. It will make your post more attractive than before.

Advertisement