Thursday, November 24, 2011

Membuat gadget untuk menampilkan status Twitter sebenarnya pernah dibahas pada artikel sebelumnya, namun pada tips trik blog kali ini kita akan mencoba memanfaatkan plugin JavaScript yang dibuat oleh remysharp.com. Dengan menggunakan plugin Twitter JS proses pembuatan widget untuk menampilkan status Twitter menjadi sangat mudah, sederhana dan menarik. Plugin Twitter JS memberikan kesempatan penggunanya untuk membuat style yang sesuai dengan keinginan, lebih menarik serta bukan hanya untuk menampilkan status Twitter kita namun bisa juga digunakan untuk menampilkan status orang lain, atau status kumpulan orang lain yang sudah kita kelompokan.
Plugin Twitter JS
Untuk menambahkan gadget status Twitter pada blog dengan menggunakan plugin Twitter JS, maka ada 3 kelompok kode yang akan digunakan, yaitu sebagai berikut:
Kode JavaScript
Kode JavaScript ini digunakan untuk memanggil status dari server Twitter sesuai dengan id penggunanya. Jika anda ingin menggunakan hosting sendiri, silahkan download file JavaScript Twitter JS disini.

Script Dasar
<script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js" type="text/javascript"></script>
<script charset="utf-8" type="text/javascript">
getTwitters('twitters', {
id: 'dedehendriono/motivator',
clearContents: true,
count: 8,
enableLinks: false,
withFriends: true,
ignoreReplies: false,
template: '<a class="even" href="http://twitter.com/%user_screen_name%/statuses/%id_str%" target="_blank"><span class="prev_pic"><img height="48" width="48" src="%user_profile_image_url%" /></span><span class="post_name">"%text%"</span><span class="meta">%user_name% | %time%</span></a>'
});
</script>

Settings Option JavaScript
Dibawah ini adalah option untuk mengeset bagian yang akan di tampilkan dari status Twitter. Tidak semua option dibawah ini harus diikut sertakan.
  • id : nama tampilan anda pada twitter, misal nama tampilan saya "dedehendriono". id juga dapat juga diganti dengan daftar (list) dari status orang-orang yang sudah kita kumpulkan (dalam format user/nama-daftar, misal dedehendriono/motivator) atau dapat juga disini hash tag.
  • count : jumlah status twitter yang ingin ditampilkan, secara default di isi 1.
  • clearContents : true/false - jika anda memiliki isi didalam sebuah wadah maka kita bisa memindah bariskannya. Secara default adalah true
  • enableLinks : true/false - untuk memeriksa tweet yang mengandung link dan membuatnya bisa di klik, termasuk @balasan dan#hashtag. Secara default adalah true.
  • ignoreReplies : true/false - tetap menampilkan tweet yang dimulai dengan @. Jika permintaan 1 tweet, dan flag ini di set, dibelakang layar ia akan meminta 2 dengan kasus yang pertama dimulai dengan @. Tetapi jika permintaan lebih dari 2 balasan, maka tidak akan ditampilkan.
  • withFriends : true/false - apakah akan menyertakan tweet dari teman. Secara defaults di set false.
  • template : HTML template digunakan dalam setiap elemen li. Lihat variabel template dibawah.
  • prefix : jika tidak menggunakan template, anda dapat menggunakan set ini. Misal kita ingin menambahkan 'Hendriono berkata:'. Disini juga anda bisa saja menambahkan variabel template.
  • timeout : nilai dalam milidetik sebelum memicu onTimeout. Jika onTimeout diatur, batas waktu default adalah 10 detik.
  • onTimeout : fungsi untuk panggilan ketika batas waktu tercapai. Konteks diatur ke tweet elemen HTML yang akan dimasukkan ke dalamnya.
  • onTimeoutCancel : true/false - jika tidak di atur maka tidak ada batasan picu, namun script Twitter akan dapat dipanggil secara lengkap dan tidak ada pembatalan. Untuk menghindari hal ini, ditetapkan onTimeoutCancel = true. Set default adalah true.
  • newwindow: true/false - jika di set true, semua link didalam tweet (tidak terkecuali) akan dibuka pada sebuah jendela baru. Set defaults adalah false.
  • callback - fungsi untuk memanggil ketika twitter telah sempurna di render. Tidak ada batasan waktu.

Variabel Template
Semua variabel harus diapit oleh simbol% (lihat contoh di atas atau dibawah).
  • text - pesan status yang akan ditampilkan
  • id_str - id dari pesan status (catatan bahwa id telah digunakan sebelumnya, tapi untuk mendapatkan id yang benar, Anda perlu menggunakan id_str)
  • time - waktu relatif
  • created_at - waktu baku
  • user_name - nama asli
  • user_screen_name - nama tampilan
  • user_id_str - id pengguna
  • user_profile_image_url - gambar avatar pengguna sesuai id
  • user_url - alamat (link url) pengguna sesuai id
  • user_location - lokasi pengguna sesuai id
  • user_description - deskripsi pengguna sesuai id

Kode HTML
Kode HTML dibawah ini digunakan sebagai wadah (container) untuk menampilkan status twitter.
<div id="twitters" class="speciallist">
<p><a href="http://twitter.com/dedehendriono">Jika malas menunggu - silahkan kunjungi halaman twitter kami</a></p>
</div>
Kode CSS
Kode CSS dibawah ini hanyalah contoh. Anda bisa saja berkreasi menurut imajinasi anda.
#twitters {margin:10px auto;}
.even{background-color:#222;}
.prev_pic{border:1px solid #282828;background-color:#131313;display:block;float:left;height:48px;left:5px;margin-right:15px;position:relative;top:1px;width:48px;}
a:hover .prev_pic{border:1px solid #fff;}
.prev_pic img, a:hover .prev_pic img{border:none;}
.post_name{color:#fff;display:block;font-size:13px;/*font-weight:bold;*/height:20px;overflow:hidden;padding:0;padding-top:6px;max-width:80%;}
.meta, .meta a{color:#777;font-size:11px;text-decoration:none;}
.meta a:hover{text-decoration:underline;}
.meta_sub{border-right:1px solid #777;padding-right:5px;margin-right:5px;}
.speciallist{padding-top:3px;padding-bottom:15px;}
.speciallist ul{list-style-type:none;padding:none;margin:none;}
.speciallist a{background-color:#222;border-bottom:1px solid #282828;border-top:1px solid #131313;clear:both;display:block;height:52px;padding:3px 0;text-decoration:none;position:relative;overflow:hidden;}
.speciallist a:hover{background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxjWvWaT25feBQSVniBQXiH0m8TKolYuB8WCS8WlNRhZAsCYWX1dGmqeNlYanT9iwXEKSo9oTMfs6YQyxtQsKCijRpR6muUHjKiah69coEjf1e47b-R6oCsyUzdWS4U4NQzPSa5F1QjhgM/s800/bg_speciallist.jpg) no-repeat scroll right 8px;}

Gadget Status Twitter dengan Twitter JS

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Elemen Laman"
Langkah 3
Klik "Tambah Gadget" dan pilih gadget "HTML/JavaScript"
Langkah 4
Masukan kode dibawah ini pada kotak "Konten":
<style>
#twitters {margin:10px auto;}
.even{background-color:#222;}
.prev_pic{border:1px solid #282828;background-color:#131313;display:block;float:left;height:48px;left:5px;margin-right:15px;position:relative;top:1px;width:48px;}
a:hover .prev_pic{border:1px solid #fff;}
.prev_pic img, a:hover .prev_pic img{border:none;}
.post_name{color:#fff;display:block;font-size:13px;/*font-weight:bold;*/height:20px;overflow:hidden;padding:0;padding-top:6px;max-width:80%;}
.meta, .meta a{color:#777;font-size:11px;text-decoration:none;}
.meta a:hover{text-decoration:underline;}
.meta_sub{border-right:1px solid #777;padding-right:5px;margin-right:5px;}
.speciallist{padding-top:3px;padding-bottom:15px;}
.speciallist ul{list-style-type:none;padding:none;margin:none;}
.speciallist a{background-color:#222;border-bottom:1px solid #282828;border-top:1px solid #131313;clear:both;display:block;height:52px;padding:3px 0;text-decoration:none;position:relative;overflow:hidden;}
.speciallist a:hover{background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxjWvWaT25feBQSVniBQXiH0m8TKolYuB8WCS8WlNRhZAsCYWX1dGmqeNlYanT9iwXEKSo9oTMfs6YQyxtQsKCijRpR6muUHjKiah69coEjf1e47b-R6oCsyUzdWS4U4NQzPSa5F1QjhgM/s800/bg_speciallist.jpg) no-repeat scroll right 8px;}
</style>
<script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js" type="text/javascript"></script>
<script charset="utf-8" type="text/javascript">
getTwitters('twitters', {
id: 'dedehendriono/motivator',
clearContents: true,
count: 8,
enableLinks: false,
withFriends: true,
ignoreReplies: false,
template: '<a class="even" href="http://twitter.com/%user_screen_name%/statuses/%id_str%" target="_blank"><span class="prev_pic"><img height="48" width="48" src="%user_profile_image_url%" /></span><span class="post_name">"%text%"</span><span class="meta">%user_name% | %time%</span></a>'
});
</script>
<div id="twitters" class="speciallist">
<p><a href="http://twitter.com/dedehendriono">Jika malas menunggu - silahkan kunjungi halaman twitter kami</a></p>
</div>
Perhatian! Kode diatas hanyalah contoh, silahkan anda berkreasi dengan Twitter JS
Langkah 5
Klik tombol "SIMPAN" dan preview blog anda...

Selamat mencoba dan semoga berhasil... Happy Blogging :)

Special thanks to remysharp.com for Twitter JS Plugin

Saturday, November 12, 2011

Memahami jQuery Show Hide dan Cookie

Posted by dav On 2:58 AM
Pada artikel sebelumnya Blogger Tune-Up membahas artikel tentang "Tampilkan Sembunyikan Isi dan Form Komentar". Pada artikel kali ini merupakan penjelasan script jQuery yang digunakan pada artikel tersebut. Bertahap untuk memahami fungsi-fungsi jQuery dengan memahami script-script sederhana. Mohon ma'af untuk para master jQuery, silahkan tinggalkan artikel ini jika dianggap tidak bermanfaat. Script jQuery Show Hide sebenarnya pernah dibahas dan disertakan pada beberapa tips trik jQuery, namun demikian tidak ada salahnya kita ungkap kembali mengenai penggunakan script tersebut, serta di tambahkan peranan Cookie dalam mengatur perilaku pengunjung pada terhadap tombol yang tersimpan pada Cookie browser.
Pada artikel kali ini kita akan menggunakan efek jQuery sederhana yaitu efek show, efek hide dan efek slide serta akan melibatkan sebuah plugin jQuery Cookie yang dibuat oleh Klaus Hartl (https://github.com/carhartl) yaitu sebuah plugin jQuery sederhana yang digunakan untuk membaca, menulis dan menghapus cookie dari browser.

Skenario HTML

Dibawah ini adalah kode HTML yang digunakan:
<b:includable id='comments' var='post'>

<div class='comments' id='comments'>
<!-- Berisi Kode Komentar dan Form Komentar -->
</div>

<button class='tombol black' id='bukakeun'>Click here for comment</button>
<button class='tombol black' id='tutupkeun'>Click here for close</button>

</b:includable>

Keterangan Skenario HTML:
<div class='comments' id='comments'>
<!-- Berisi Kode Komentar dan Form Komentar -->
</div>
Kode diatas menggambarkan suatu kotak komentar yang memiliki identitas atau ID comments (id='comments'). comments ini berisi form komentar dan isi komentar yang akan ditampilkan (show) dan disembunyikan (hide) dengan menggunakan tombol yang telah disiapkan dibawahnya.
<button class='tombol black' id='bukakeun'>Click here for comment</button>
<button class='tombol black' id='tutupkeun'>Click here for close</button>
Tombol yang akan digunakan terdiri dari 2 tombol yaitu tombol dengan ID bukakeun (id='bukakeun') dan tombol dengan ID tutupkeun (id='tutupkeun'). Kedua tombol ini akan ditampilkan secara bergantian sesuai dengan keadaan cookie.

Skenario jQuery

Dibawah ini adalah kode jQuery yang digunakan:
<script src='http://yandex.st/jquery/1.5.2/jquery.min.js' type='text/javascript'/>
<script src='http://yandex.st/jquery/cookie/1.0/jquery.cookie.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
jQuery(document).ready(function () {
jQuery('#bukakeun').click(function () {
jQuery('#comments').slideToggle('slow');
jQuery(this).css({display: 'none'});
jQuery('#tutupkeun').show();
jQuery.cookie('komen', 1);
return false
});
jQuery('#tutupkeun').click(function () {
jQuery('#comments').slideToggle('slow');
jQuery(this).css({display: 'none'});
jQuery('#bukakeun').show();
jQuery.cookie('komen', null);
return false
});
if (jQuery.cookie('komen') == 1) {
jQuery('#comments').show();
jQuery('#bukakeun').hide()
} else {
jQuery('#comments').hide();
jQuery('#tutupkeun').hide()
}
});
//]]></script>

Keterangan Skenario jQuery
Script ini digunakan untuk memanggil (load) framework jQuery, jika anda pernah memasang sebelumnya pada template maka script dibawah ini tidak perlu diikutsertakan. (Baca artikel Perpustakaan jQuery pada Blogger).
<script src='http://yandex.st/jquery/1.5.2/jquery.min.js' type='text/javascript'/>
Script dibawah ini digunakan untuk memanggil (load) plugin jQuery Cookie yang berfungsi untuk membaca, menulis dan menghapus cookie.
<script src='http://yandex.st/jquery/cookie/1.0/jquery.cookie.min.js' type='text/javascript'/>
Script ini untuk pendeklarasian bahwa kode setelah baris ini adalah fungsi JavaScript
<script type='text/javascript'>//<![CDATA[
Script ini untuk pendeklarasian bahwa kode setelah baris ini adalah fungsi jQuery
jQuery(document).ready(function () {
Jika tombol dengan id bukakeun (id='bukakeun') di klik maka fungsi dimulai...
jQuery('#bukakeun').click(function () {
Wadah (container) dengan id comments (id='comments') akan terbuka dengan efek slideToggle berdurasi lambat
jQuery('#comments').slideToggle('slow');
Tombol dengan id bukakeun (id='bukakeun') akan disembunyikan
jQuery(this).css({display: 'none'});
Tombol dengan id tutupkeun (id='tutupkeun') akan ditampilkan
jQuery('#tutupkeun').show();
Plugin jQuery Cookie akan menuliskan cookie dengan nama 'komen' dengan nilai 1 pada browser menandakan bahwa kita melakukan klik pada tombol dengan id bukakeun (id='bukakeun')
jQuery.cookie('komen', 1);
Fungsi akan diulang jika mengalami kegagalan load
return false
Fungsi tombol dengan id bukakeun (id='bukakeun') ditutup
});
Keterangan : Sampai script diatas maka browser akan selalu menyimpan cookie dengan nama komen hingga waktu tidak tentu. Selama cookie pada browser dengan nama komen tersimpan maka isi komentar dan form komentar akan selalu terbuka walaupun pengunjung menutup browser atau berpindah halaman.

Jika tombol dengan id tutupkeun (id='tutupkeun') di klik maka fungsi dimulai...
jQuery('#tutupkeun').click(function () {
Wadah (container) dengan id comments (id='comments') akan tertutup dengan efek slideToggle berdurasi lambat
jQuery('#comments').slideToggle('slow');
Tombol dengan id tutupkeun (id='tutupkeun') akan disembunyikan
jQuery(this).css({display: 'none'});
Tombol dengan id bukakeun (id='bukakeun') akan ditampilkan
jQuery('#bukakeun').show();
Plugin jQuery Cookie akan menghapus cookie dengan nama 'komen' dengan nilai null (kosong) pada browser menandakan bahwa kita melakukan klik pada tombol dengan id tutupkeun (id='tutupkeun')
jQuery.cookie('komen', null);
Fungsi akan diulang jika mengalami kegagalan load
return false
Fungsi tombol dengan id tutupkeun (id='tutupkeun') ditutup
});
Keterangan : Sampai script diatas maka browser sudah menghapus cookie dengan nama komen hingga waktu tidak tentu. Jika cookie pada browser dengan nama komen sudah dihapus maka isi komentar dan form komentar akan selalu tertutup walaupun pengunjung menutup browser atau berpindah halaman.

Kumpulan script dibawah ini digunakan untuk memeriksa keberadaan cookie pada Browser, apakah tersedia atau tidak.
Jika jQuery Cookie menemukan cookie pada browser dengan nama komen dan tersedia maka...
if (jQuery.cookie('komen') == 1) {
Wadah (container) dengan id comments (id='comments') akan terbuka dan...
jQuery('#comments').show();
Tombol dengan id bukakeun (id='bukakeun') akan disembunyikan
jQuery('#bukakeun').hide()
Jika browser tidak memiliki cookie dengan nama komen maka...
} else {
Wadah (container) dengan id comments (id='comments') akan tertutup dan...
jQuery('#comments').hide();
Tombol dengan id tutupkeun (id='tutupkeun') akan disembunyikan
jQuery('#tutupkeun').hide()
Fungsi periksa cookie ditutup
}
Pendeklarasian fungsi jQuery di tutup
});
Pendeklarasian fungsi JavaScript di tutup
//]]></script>
Mudah-mudahan artikel diatas bermanfaat dan silahkan dikembangkan sesuai dengan imajinasi anda. Happy Blogging... :)

Catatan kaki:

Friday, November 11, 2011

Tampilkan Sembunyikan Isi dan Form Komentar

Posted by dav On 2:12 AM
Kembali lagi menulis setelah sekian lama bersemedi. Kali ini Blogger Tune-Up akan mengawali artikel terbaru di Blog ini dengan tips dan trik jQuery sederhana. Sebenarnya sudah banyak para Blogger yang membahas hal ini, namun sebagian besar menggunakan form komentar dari pihak ketiga seperti DisqUs atau IntenseDebate. Sedangkan form bawaan Blogger dinonaktifkan hal tersebut dengan beberapa alasan diantaranya form komentar bawaan Blogger tidak valid XHTML dan menggunakan metode iframe sehingga kurang fleksibel dalam memodifikasi tampilannya. Terlepas dari alasan-alasan tersebut, Blogger Tune-Up tetap akan membahas cara menyembunyikan dan menampilkan isi komentar dan form komentar bawaan Blogger dengan satu tombol yang terekam melalui jQuery Cookie. jQuery Cookie digunakan untuk merekam tingkah laku pengunjung blog terhadap tombol show/hide comment. Ketika pengunjung me-load halaman pertama kalinya dan cookie browser kosong (null) maka isi komentar dan kotak komentar akan disembunyikan, sebuah tombol "Show" akan ditampilkan.
Ketika tombol "Show" ditampilkan maka isi komentar dan form komentar akan ditampilkan, sebuah tombol "Hide" akan ditampilkan. Pada saat pengunjung meng-klik tombol "Show" maka browser akan menyimpan cookie, sehingga ketika pengunjung berulang-ulang kali berpindah halaman atau bahkan keluar dari browser dan kemudian kembali lagi mengunjungi blog maka isi komentar dan form komentar akan tetap terbuka. Namun ketika pengunjung mengklik tombol "Hide" maka isi komentar dan form komentar akan disembunyikan dan cookie pada browser akan dihapus. Hal ini karena jQuery Cookie merekam dan menyimpan tingkah laku pengunjung terhadap tombol "Show Hide Comment". Cara ini cocok bagi Blogger yang menggunakan metode Captcha untuk mengurangi spam pada komentar.

Menambahkan Tombol Tampilkan Sembunyikan Isi dan Form Komentar

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
]]></b:skin>
Langkah 5
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 4:
.tombol {width:100%;display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0;outline: none;cursor: pointer;text-align: center;text-decoration: none;padding: .3em 2em .35em;text-shadow: 0 1px 1px rgba(0,0,0,.3);font-weight:bold;font: 13px/20px 'Open Sans',Arial,Helvetica,Verdana,sans-serif;}
.tombol:hover {text-decoration: none;}
.tombol:active {position: relative;top: 1px;}
.black {color: #d7d7d7;border: solid 1px #282828;box-shadow:0 0 2px #000 inset;-webkit-box-shadow: 0 0 2px #000 inset;-moz-box-shadow: 0 0 2px #000 inset;background: #282828;background: -webkit-gradient(linear, left top, left bottom, from(#282828), to(#000));background: -moz-linear-gradient(top, #282828, #000);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#282828', endColorstr='#000000');}
.black:hover {background: #000;background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));background: -moz-linear-gradient(top, #444, #000);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');}
.black:active {color: #666;background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));background: -moz-linear-gradient(top, #000, #444);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');}
Langkah 6
Cari kode dibawah ini:
</head>
Langkah 7
Masukan (copy paste) kode, plugin dan framework jQuery dibawah ini diatas kode pada langkah 6:
<script src='http://yandex.st/jquery/1.5.2/jquery.min.js' type='text/javascript'/>
<script src='http://yandex.st/jquery/cookie/1.0/jquery.cookie.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
jQuery(document).ready(function () {
jQuery('#bukakeun').click(function () {
jQuery('#comments').slideToggle('slow');
jQuery(this).css({
display: 'none'
});
jQuery('#tutupkeun').show();
jQuery.cookie('komen', 1);
return false
});
jQuery('#tutupkeun').click(function () {
jQuery('#comments').slideToggle('slow');
jQuery(this).css({
display: 'none'
});
jQuery('#bukakeun').show();
jQuery.cookie('komen', null);
return false
});
if (jQuery.cookie('komen') == 1) {
jQuery('#comments').show();
jQuery('#bukakeun').hide()
} else {
jQuery('#comments').hide();
jQuery('#tutupkeun').hide()
}
});
//]]></script>
Langkah 8
Cari kode dibawah ini:
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>
Langkah 9
Masukan (copy paste) kode XHMTL dibawah ini diatas kode pada langkah 8:
<button class='tombol black' id='bukakeun'>Click here for show comment</button>
<button class='tombol black' id='tutupkeun'>Click here for hide comment</button>
Sehingga menjadi seperti ini:
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
<button class='tombol black' id='bukakeun'>Click here for show comment</button>
<button class='tombol black' id='tutupkeun'>Click here for hide comment</button>
</b:includable>
Langkah 10
Simpan template dan preview blog anda...

Keterangan:
Jika anda sudah pernah memasang framework jQuery (pada langkah 7 baris 1) maka framework jQuery tidak perlu diikutsertakan...

Selamat mencoba semoga berhasil... Happy Blogging... :)