Cara Menciptakan Tweet Box Di Postingan Blogger

Pertama kali aku mencoba menciptakan postingan wordpress, aku melihat cara untuk menciptakan Tweet Box, kata yang kalau di klik akan pribadi siap Tweet ke Twitter. Sebenarnya waktu itu aku ingin mencoba menciptakan Tweet Box pada Blogger, dan kesannya gagal.

Setelah sekian usang aku hampir melupakan Tweet Box pada wordpress, aku melihat Tutorial ini di blog @KompiAjaib. Lalu aku merubah sedikit Style pada Tweet box tersebut supaya ibarat mirip Tweet box pada Wordpress. Mungkin untuk pengguna wordpress untuk menciptakan Tweet Box ibarat ini ialah hal yang mudah. Namun berbeda dengan blogger teman harus sedikit kreatif untuk menampilkan Tweet Box pada postingan.

Cara Membuat Tweet Box Di Postingan Blogger

Apakah teman tertarik untuk menciptakan Tweet box pada postingan blog? Ikuti tutorialnya di bawah ini.

Langkah Pertama, tambahkan aba-aba CSS di bawah ini sempurna 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 aba-aba 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="Cara Membuat Tweet Box di Postingan Blogger">\ Click To Tweet <i class="fa fa-twitter"></i></a> \ '); </script> </div>

Sobat hanya perlu menulis konten / isi Tweet dengan mengganti kalimat yang aku marking (warna biru). Untuk Kode RhinokageRio (ada 2) silahkan ganti dengan username Twitter sobat.

dan Jika teman akan menampilkan lebih dari 1 Tweet Box di dalam postingan, silahkan ganti aba-aba id p1 (ada 2) dengan p2 dan seterusnya. Agar Tweet tidak bentrok.

Dan pastikan teman sudah memakai Font Awesome pada template blog sobat, untuk menampilkan icon Burung Twitter pada Tweet Box.

Selamat Mencoba...

Referensi : https://jalantikusgo.blogspot.com/search?q=cara-menggunakan-ikon-font-awesome-di-blog

Sumber https://www.idblanter.com