Membuat Widget Twitter Card Responsif untuk Blog
Membuat Widget Twitter Card Responsif untuk Blog

Kita sebagai pengguna platform blogger tentu sangat bersyukur karena banyaknya widget-widget untuk blog yang tersebar luas di luar sana. Widget-widget tersebut dapat membuat blog kita menjadi lebih cantik, rapi, SEO, dan lengkap.

Nah kali ini Bang Jarwo membuat widget baru lagi, yaitu kartu pengikut akun Twitter anda atau sering disebut Twitter Followers Card.

Cara kerja widget ini simpel saja, yaitu menampilkan nama dan jumlah pengikut akun Twitter anda, disertai tombol untuk memfollow akun Twitternya. Widget ini dijamin 100% responsif, widget dapat mengecil dan melebar dengan sendirinya mengikuti ukuran atau lebar layar.

Untuk Live Demonya silahkan lihat disini.

Selain itu, widget sudah dibuat lebih SEO, yaitu dengan pengguanaan 1 buah tag Heading h3. Juga, widget ini dijamin ringan karena baik itu Javascript maupun CSSnya sudah saya kompres. Langsung saja, bagi anda yang ingin tau cara memasangnya, silahkan ikuti panduan berikut ini.

  • Pertama, silakan lihat terlebih dahulu ID akun Twitter anda, disini saya akan memberi contoh IDnya kodejarwo
  • Setelah itu, silahkan anda masuk ke blogger.com, lalu pilih Tata Letak.
  • Sekarang pilih dimana anda ingin menempatkan widget ini. Saya beri contoh di Sidebar. Lalu, tekan Tambahkan Widget pada kolom sidebar.
  • Pilih widget jenis HTML/Javascript, lalu masukkan kode dibawah ini kedalamnya.

<div class="col-md-12"><div class="twit-jarwo twit-jarwo-stats"><div class="twit-jarwo-header" data-background-color="blue"><i class="fa fa-twitter"></i></div>
<div class="twit-jarwo-content">
<p class="category">Followers</p>
<h3 class="title"> <a class="twitter-follow-button" href="https://twitter.com/kodejarwo" data-show-count="true" data-lang="id"></a><br />
<script type="text/javascript">// <![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// ]]&gt;</script></h3></div><div class="twit-jarwo-footer"><div class="stats">➤ Created by www.kodejarwo.com</div></div></div></div>

<style>
.twit-jarwo,.twit-jarwo .twit-jarwo-footer div{display:inline-block}.twit-jarwo{position:relative;width:100%;margin:25px 0;box-shadow:0 1px 4px 0 rgba(0,0,0,.14);border-radius:3px;color:rgba(0,0,0,.87);background:#fff}.twit-jarwo-stats .twit-jarwo-header{float:left;text-align:center}.twit-jarwo [data-background-color]{color:#FFF}.twit-jarwo [data-background-color=blue]{background:linear-gradient(60deg,#26c6da,#00acc1);box-shadow:0 12px 20px -10px rgba(0,188,212,.28),0 4px 20px 0 rgba(0,0,0,.12),0 7px 8px -5px rgba(0,188,212,.2)}.twit-jarwo .twit-jarwo-header{box-shadow:0 10px 30px -12px rgba(0,0,0,.42),0 4px 25px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.2);margin:-20px 15px 0;border-radius:50px;padding:8px;background-color:#999}.twit-jarwo-stats .twit-jarwo-header i{font-size:36px;line-height:56px;width:56px;height:56px}.twit-jarwo-stats .twit-jarwo-content{text-align:right;padding-top:10px}.twit-jarwo .twit-jarwo-content{padding:15px 20px}.twit-jarwo .twit-jarwo-footer{margin:0 20px 10px;padding-top:10px;border-top:1px solid #eee}.twit-jarwo .twit-jarwo-content .category{margin-bottom:0}.twit-jarwo .category:not([class*=text-]){color:#999}p{margin:0 0 10px}.twit-jarwo-stats .title{margin:0}.twit-jarwo .twit-jarwo-footer .stats{line-height:22px;color:#999;font-size:12px}.twit-jarwo .twit-jarwo-footer .stats .material-icons{position:relative;top:4px;font-size:16px}.col-md-12{width:100%;padding:4px 0 0}h3{font-size:24px}.twit-jarwo-header:hover{box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.3)}
</style><link async='async' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>
 Catatan: Ganti tulisan yang berwarna merah dengan ID Twitter anda.

  • Simpan widget

Selesai, sekarang silahkan anda lihat hasilnya. Widget ini bisa anda tempatkan dimanapun, baik di sidebar, postingan, footer, atau laman, karena sudah 100% responsif. Jangan lupa untuk mencoba widget-widget lainnya yang pernah saya buat. Bila ada kesalahan pada widgetnya mohon segera diberi tahu ke saya agar segera diperbaiki, terima kasih.
Silakan pilih sistem komentar anda ⇛   

Silakan berkomentar dengan sopan. Jangan buang-buang waktu anda hanya untuk melakukan SPAM di sini.