Membuat Tweet Box Di Postingan Blog Dengan Javascript

Jika Anda menggunakan blog Wordpress, maka untuk membuat Tweet Box di dalam postingan adalah sesuatu hal yang sangat mudah. Tinggal install plugin maka pekerjaan Anda akan lebih mudah untuk membuat Tweet Box.

Namun lain halnya dengan Blogspot, Anda harus sedikit kreatif untuk dapat menampilkan Tweet Box di dalam postingan.

Sebelumnya saya mencara cara membuat atau menampilkan Tweet Box ini di postingan blogger. Dari beberapa referensi dari Google, untuk membuat Tweet Box ini menggunakan fitur Tweet Anywhere dari Twitter. Namun sayang, kini Twitter sudah menghilangkan fitur ini.

Demi bisa menampilkan tweet box di postingan, maka saya mencoba kutak-katik sedikit kode dari referensi yang telah ada.

Bagaimana, tertarik untuk mencobanya? Silahkan ikuti langkah-langkahnya di bawah ini.

Langkah 1


Silahkan simpan kode CSS di bawah ini di edit HTML di atas kode ]]></b:skin> atau </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
}

Langkah 2


Gunakan kode di bawah ini untuk menampilkan Tweet Box di dalam postingan. Tulis dalam mode HTML.


<div class="tweet-box">
<p id="p1">Membuat tweet box di dalam postingan blog dengan javascript</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=KompiAjaib&related=kompiajaib" target="_blank" title="Tweet This">\
<i class="fa fa-twitter"></i> Tweet This</a> \
<div style="clear:both"></div> \
');
</script>
</div>

Anda hanya perlu menulis konten tweet dengan mengganti kalimat yang saya marking di atas. Untuk kode KompiAjaib (ada 2) silahkan ganti dengan username Twitter Anda. Jika tidak ingin melampirkan URL postingan, silahkan hapus kode var twurl = window.location.href; dan kode &url='+twurl+'.

Jika Anda akan menampilkan lebih dari 1 Tweet Box di dalam postingan, silahkan ganti kode id p1 (ada 2) dengan p2 dan seterusnya.

Dan pastikan Anda sudah menggunakan font awesome di blog untuk menampilkan ikon Twitter di dalam tweet box.

Selamat mencoba.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments