Membuat Tweet Box Di Postingan Blog Dengan Javascript

Jika Anda memakai blog Wordpress, maka untuk menciptakan Tweet Box di dalam postingan yaitu sesuatu hal yang sangat mudah. Tinggal install plugin maka pekerjaan Anda akan lebih gampang untuk menciptakan Tweet Box.

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

Sebelumnya aku mencara cara menciptakan atau menampilkan Tweet Box ini di postingan blogger. Dari beberapa acuan dari Google, untuk menciptakan Tweet Box ini memakai fitur Tweet Anywhere dari Twitter. Namun sayang, sekarang Twitter sudah menghilangkan fitur ini.

Demi sanggup menampilkan tweet box di postingan, maka aku mencoba kutak-katik sedikit arahan dari acuan yang telah ada.

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

Langkah 1

Silahkan simpan arahan 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 arahan 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="Membuat Tweet Box Di Postingan Blog Dengan Javascript">\
 <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 aku marking di atas. Untuk arahan KompiAjaib (ada 2) silahkan ganti dengan username Twitter Anda. Jika tidak ingin melampirkan URL postingan, silahkan hapus arahan var twurl = window.location.href; dan arahan &url='+twurl+'.

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

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

Selamat mencoba.


Sumber https://www.kompiajaib.com/

Share this post