Memasang Tweet Box Di Postingan Blog Dengan Javascript

Tweet Box

Twitter menyerupai yang kita ketahui bersama yaitu salah satu Platform Media Sosial share yang sering juga dipakai untuk mendatangkan trafik bagi Blog, tugas serta Media Sosial sekarang ini luar biasa cepatnya dari Informasi yang dibagikan dengan cepat mudah di kanal dan dibaca oleh penggunan Media Sosial. 

Nah di postingan kali ini akan dibahas Cara Memasang Tweet Box Di Postingan Blog Dengan Javascript sebagai alat embel-embel untuk mendatangkan trafik bagi Blog yang sedang kita kelola. Pemasangan Tweet Box ini pada dasarnya sangat mudah di Platform tersebut pun sudah disediakan dan bahkan bagi sahabat yang Ngeblog menggunakan Wordpress cara ini tentu bukan hal yang sulit sebab sahabat cukup tinggal Instal saja plugin Tweet Box di Wordpress dan selesai. 

Namun bagaimana kalau sahabat yang menggunakan Platform Blogger sebagai media Ngeblog, tentu hal ini sedikit menambahkan instruksi untuk memasang Tweet Box ini Di Postingan. Apalagi sangat disayangkan dari Twitter sudah menghilangkan alat Tweet Anywhere mungkin banyak sekali pertimbangan keamanan alhasil Twitter sudah tidak menampilkannya.

Bagi sahabat yang mau mencoba memasang Tweet Box ini di postingan Blogger nya silahkan di simak cara berikut ini.

Langkah Awal
Silahkan sahabat salin instruksi CSS dibawah ini lalu letakkan di atas instruksi ]]></b:skin> atau di </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 Ke Dua
Silahkan sahabat salin instruksi dibawah ini dan letakkan dalam Postingan di Mode HTML

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

Perhatikan instruksi yang ditandai Silahkan rubah dengan Konten Tweet lalu untuk instruksi dibalikseo silahkan sahabat ganti dengan user name twitter sobat. Nah ada pertanyaan bagaimana kalau tidak ingin menampilkan URL postingan, caranya silahkan sahabat hapus saja instruksi var twurl=window.location.href; setelah itu hapus juga instruksi &url='+twurl+'.

Lalu perhatikan juga instruksi p1 yang ditandai silahkan sahabat ganti kalau ingin menampilkan lebih dari satu tweet box di postingan menjadai p2, p3 dan seterusnya. Cara diatas menggunakan FontAwesome jadi sebelumnya pastikan sahabat sudah memasangnya. Dan Selesai selamat mencoba

Comments