Cara Membuat Tweet Box Ala Wordpress di Blogspot

by - 7:11:00 AM

Hola! Kali ini gue mau kasih tutorial gimana cara membuat tweet box ala Wordpress di Blogspot. Ketika mengunjungi blog-nya Almazia.co, gue tertarik melihat tweet box yang ada di tiap postingannya. Wordpress memang menyediakan fitur tersebut dengan beberapa konfigurasi yang harus dilakukan. Kayak gini, nih....

Cara Membuat Tweet Box Ala Wordpress di Blogspot

Nah, kalo di Wordpress kan, itu memang salah satu fiturnya. Gimana kalo mau mengaplikasikan itu di Blogspot?

Langkah pertama yang harus dilakukan adalah men-copy kode berikut dan di-paste sebelum ]]></b:skin> atau </style> dalam Edit HTML di konfigurasi template.

/* 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;}

Selanjutnya, dalam setiap postingan yang mau dibikinin tweet box, copy kode HTML berikut ini ya!

<div class="tweet-box">
<div class="tweet-text" id="x">
Cara Membuat Tweet Box Ala Wordpress di Blogspot</div>
<script>
var twurl = window.location.href;
var twcontent= document.getElementById("x").textContent;
var twesc=escape(twcontent);
document.write('<a class="tweet-this" href="https://twitter.com/intent/tweet?text='+twesc+'&url='+twurl+'&via=tehpocii&related=tehpocii" target="_blank" title="Tweet This">\
Click To Tweet <i class="fa fa-twitter"></i></a> \
');
</script>
</div>

Kalian bisa mengganti yang udah di-bold ya! Ganti tehpocii dengan id Twitter lo sendiri. Kalo dalam satu postingan mau dibikin dua tweet box, tinggal tambahin kode kedua dan variabel x diganti dengan variabel lain. Dan pastikan, lo udah menggunakan font Awesome di template karena logo Twitter tersebut diambil dari situ. Kalo belom, tinggal copy kode ini di Edit HTML sebelum </head>.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Gimana? Mudah sih, sebenernya, cuma ya setiap postingan kode HTML-nya harus ditambahin juga. Kalo ada yang mau ditanyain tentang cara membuat tweet box ala Wordpress di Blogspot, langsung hubungi gue via FB atau komentar di sini. Selamat mencoba!

Share
Tweet
Pin
Share
Tags :

You May Also Like

4 comments

  1. Diah Dwi ArtiFebruary 27, 2016 at 12:54 PM

    oooh ini namanya tweetbox to.

    eee mbak, itu 'x' nya diganti apa ya?

    ReplyDelete
    Replies
    1. BagaimaknaFebruary 28, 2016 at 12:02 PM

      Misalnya Mbak mau bikin dua tweet box dalam satu postingan. Nah, variabel "x" itu diganti jadi variabel lain misalnya y, z, atau apa pun. Jadi masing-masing tweet box variabelnya beda kalo di satu postingan yang sama. :)

      Delete
  2. dog loverMarch 23, 2016 at 7:01 PM

    makasih buat tutorialnya gan..
    ditunggu tutorial yang lainnya..

    ReplyDelete