07 August 2015

Cara Membuat Tweet Box di Postingan Blogger

Membuat Tweet Box di postingan Blogger

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.

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...

Referensi : http://www.kompiajaib.com/2015/08/membuat-tweet-box-di-postingan-blog.html
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic