Membuat Tweet Box Di Postingan Blog Dengan Javascript

Membuat Tweet Box Di Postingan Blog Dengan Javascript

Bola Hero Gawai

Membuat Tweet Box Di Postingan Blog Dengan Javascript

Membuat Tweet Box Di Postingan Blog Dengan Javascript
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. Maka jadilah seperti di bawah ini.

Anda harus kreatif untuk dapat menampilkan Tweet Box di dalam postingan Blogger.

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

2 Comments Add Comment

[request] Pak Adhy,.Jika di klik tweet url-postingan bisa otomatis menjadi sort-url pasti akan mjd lebih keren. mohon dimodifikasikan jika hal itu memungkinkan Pak.

trmksh sebelumnya.
salam

Balas

Pak Adhy, sudah saya coba di artikel saya ini http://www [dot] prospektif [dot] xyz/2016/06/memulai-usaha.html
itukan kodenya ada akun saya ya pak. Kalau pakai akun saya kliknya sih memang bisa
Nah itu kalau pas pembaca klik tweet, bisa kan pak ya?
terima kasih

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×