Ditulis oleh: Ditulis pada: 8/07/2015
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.