Cara Membuat Tweet Box di Postingan Blogger
07 August 2015
Pertama kali saya mencoba membuat postingan wordpress, saya melihat cara untuk membuat Tweet Box, kata yang jika di klik akan langsung siap Tweet ke Twitter. Sebenarnya waktu itu saya ingin mencoba membuat Tweet Box pada Blogger, dan hasilnya gagal.
Setelah sekian lama saya hampir melupakan Tweet Box pada wordpress, saya melihat Tutorial ini di blog @KompiAjaib. Lalu saya merubah sedikit Style pada Tweet box tersebut agar mirip seperti Tweet box pada Wordpress. Mungkin untuk pengguna wordpress untuk membuat Tweet Box seperti ini adalah hal yang mudah. Namun berbeda dengan blogger sobat harus sedikit kreatif untuk menampilkan Tweet Box pada postingan.
Setelah sekian lama saya hampir melupakan Tweet Box pada wordpress, saya melihat Tutorial ini di blog @KompiAjaib. Lalu saya merubah sedikit Style pada Tweet box tersebut agar mirip seperti Tweet box pada Wordpress. Mungkin untuk pengguna wordpress untuk membuat Tweet Box seperti ini adalah hal yang mudah. Namun berbeda dengan blogger sobat harus sedikit kreatif untuk menampilkan Tweet Box pada postingan.
Cara Membuat Tweet Box Di Postingan Blogger
Apakah sobat tertarik untuk membuat Tweet box pada postingan blog? Ikuti tutorialnya di bawah ini.
Langkah Pertama, tambahkan kode CSS di bawah ini tepat di atas
]]></b:skin> atau </style> pada Edit HTML./* CSS Tweet Box */
.tweet-box{background:#fff;padding:20px;margin:20px auto;color:#777;font-size:18px;overflow:hidden;font-family:Arial;border-radius:5px;border:1px solid #ddd;}
.tweet-box p{font-size:130%;font-style:italic;margin:0!important;line-height:1.3em;}
a.tweet-this{display:block;float:right;font-size:12px;text-transform:uppercase;margin-top:10px;color:#777;font-family:sans-serif;font-weight:bold;text-decoration:none;transition:all .4s ease-in-out;}
a.tweet-this:hover{color:#000;}
.tweet-this i{color:#07ACEC;font-size:15px;}
.tweet-text:hover {cursor:pointer;color:#000;}
Langkah Kedua, tambahkan kode HTML di bawah ini untuk menampilkan Tweet Box, tambahkan dalam mode HTML.
<div class="tweet-box">
<div class="tweet-text" id="p1 ">
Cara Membuat Tweet Box Di Postingan Blogger </div>
<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=RhinokageRio &related=RhinokageRio " target="_blank" title="Tweet This">\
Click To Tweet <i class="fa fa-twitter"></i></a> \
');
</script>
</div>Sobat hanya perlu menulis konten / isi Tweet dengan mengganti kalimat yang saya marking (warna biru). Untuk Kode RhinokageRio (ada 2) silahkan ganti dengan username Twitter sobat.
dan Jika sobat akan menampilkan lebih dari 1 Tweet Box di dalam postingan, silahkan ganti kode id p1 (ada 2) dengan p2 dan seterusnya. Agar Tweet tidak bentrok.
Dan pastikan sobat sudah menggunakan Font Awesome pada template blog sobat, untuk menampilkan icon Burung Twitter pada Tweet Box.
Selamat Mencoba...
Selamat Mencoba...
Referensi : http://www.kompiajaib.com/2015/08/membuat-tweet-box-di-postingan-blog.html