Sunday, June 26, 2011

jQuery Easy Organic Blogger Tabs

Posted by dav On 5:23 PM
Bismillah. Alhamdulillah. Masih ingat dengan artikel "Memahami dan Membuat jQuery Slick Tab" yang pernah ditulis? Berhasilkah atau justru membuat widget blog menjadi tambah kacau? Artikel kali ini merupakan pengembangan dari tips trik artikel tersebut, yang scriptnya dibuat lebih sederhana dan lebih mudah untuk diterapkan pada blog. Seperti biasa, Blogger Tune-Up tidak lagi meng-inject-kan embel-embel link menuju ke blog ini, semua saya kembalikan kepada kesadaran para blogger "republish" untuk bisa saling menghargai antar blogger, atau masih tetap bangga dengan hasil karya orang lain yang kemudian diklaim menjadi hasil karya sendiri.
Script asli jQuery Easy Organic Blogger Tabs diambil dari plugin "Organic Tabs" buatan CSS Tricks. Walaupun sebenarnya tidak semua scriptnya digunakan, hanya beberapa baris kode yang digunakan dan dimodifiaksi, sehingga tampilannya tidak sehalus Organic Tabs yang sebenarnya. Efek "autoheight" dari Organic Tabs tidak diikut sertakan karena terkendala kegagalan kerja saat di coba pada sidebar tab sehingga yang tersisa hanya efek "fade" saja. Penasaran?

Kelebihan jQuery Easy Organic Blogger Tabs

  • Proses pemasangan pada widget/sidebar sangat mudah tanpa perlu modifikasi kode template
  • Tidak diperlukan keahlian khusus untuk memasang jQuery Easy Organic Blogger Tabs karena proses pemasangan dilakukan pada "Rancangan - Elemen Laman"
  • Lebih ringan dari jenis Blogger Tabs sebelumnya
  • Penambahan dan pengurangan tabs sangatlah mudah hanya perlu mengubah angka
  • Cari sendiri kelebihannya ya?

Kekurangan jQuery Easy Organic Blogger Tabs

  • Efek autoheight bawaan Organics Tabs belum bisa diintegrasikan sehingga membuat hasil akhir tab kurang mantap (seperti sayur tanpa garam)
  • Ditunggu koreksinya...
Jika anda membutuhkan source code jQuery Easy Organic Blogger Tabs lengkap tanpa di kompres, silahkan tunggu beberapa hari lagi, karena blog khusus source code yang pernah dibuat Blogger Tune-Up akan diterbitkan dengan lisensi terbuka dan bebas (Open Source - GNU Public License)

Membuat jQuery Easy Organic Blogger Tabs pada Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Elemen Laman"
Langkah 3
Klik "Tambah Gadget" baru dengan Type "HTML/JavaScript"
Langkah 4
Masukan (copypaste) kode dibawah ini pada bagian konten:
<style type="text/css">
.blogtabs {padding: 0px !important;border: 0 solid #bbb;}
.blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px 5px;border: 1px solid #bbb;overflow: hidden;position: relative;background: #e0e0e0;cursor:pointer;}
html .blogtabs h2.active {background: #fff;}
.blogtabs .widget-content {border: 1px solid #bbb;padding: 10px;background: #fff;clear:both;margin:0;}
.btab, #showtabs {display:none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/3558628/jQsimpletabs.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#showtabs').simpleBlogTab ({organictabs: 3});
});
</script>
<div id="showtabs"></div>
Langkah 5
Simpan widget tanpa judul dan preview blog anda...
Keterangan:
  • Widget yang berisi kode pada langkah 4 harus ditempatkan diatas widget yang akan dibuat menjadi organic tab
  • Untuk mengatur berbagai hal yang berhubungan dengan tampilan jQuery Easy Organic Blogger Tabs silahkan edit atau modifikasi kode-kode CSS-nya
  • Framework jQuery tidak perlu dipasang jika anda pernah memasang pada template blog anda (lihat langkah 4 baris 8)
  • Untuk mengatur jumlah tabs ubah nilai 3 pada kode organictabs: 3 (langkah 4 baris 12). Angka 3 berarti kita akan memasukan 3 widget kedalam organic tabs

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

Friday, June 17, 2011

Autolink Mini MP3 Player for Blogger

Posted by dav On 1:33 PM
Bismillah. Alhamdulillah. Selesai juga coding JavaScript untuk fasilitas "Autolink Mini MP3 Player" yang diperuntukan bagi pengguna setia Blogger. Script ini tidak pernah di coba diselain Blogger, jadi bagi mereka yang menggunakan platform lain, mohon ma'af sekali. Tapi tidak ada salahnya dicoba, mungkin saja bisa digunakan. Script Autolink Mini MP3 Player sangat cocok digunakan bagi mereka yang suka berbagi file-file musik MP3. Script ini sebenarnya penyederhanaan dari MP3 Player yang pernah dibahas pada artikel sebelumnya. Karena script yang sebelumnya masuk dalam kategori rumit dan ukuran file yang besar membuat beban untuk loading blog menjadi bertambah, ujung-ujungnya blog menjadi agak lambat. Untuk itulah code JavaScript-nya dikurangi dan diperbaiki beberapa kodenya agar menjadi lebih sederhana dan lebih ringan untuk digunakan pada blog sehingga tidak menambah berat loading blog. Makanya nama fasilitas MP3 Player ini adalah Autolink Mini MP3 Player for Blogger.

Kelebihan Autolink Mini MP3 Player

  • Autolink artinya script ini secara otomatis akan mendeteksi file-file MP3 yang terdapat pada halaman blog yang sedang dibuka
  • Tidak diperlukan kemampuan khusus untuk menambahkan MP3 player, cukup masukan link file MP3-nya saja pada artikel
  • Otomatis menambahkan player pada file MP3 yang terdapat pada halaman blog tanpa harus mengotak-atik kode sumber
  • Ukuran kode JavaScript sangat kecil hanya 2.15 Kilobyte sehingga lebih ringan untuk loading blog
  • Otomatis tersedia link untuk mendownload file MP3 yang disertakan pada blog
  • Pemasangan script Autolink Mini MP3 Player pada template sangat mudah
  • Tampilan MP3 Player berbasis flash yang sangat sederhana dan menarik karena menggunakan Audio Player 1 Pixelout Versi 2 buatan Martin Laine
  • Dan apa lagi ya? Silahkan dicoba sendiri, keluhan, kesalahan, dan lain-lain tinggalkan pada komentar

Kelemahan Autolink Mini MP3 Player

  • Tidak menggunakan autoplay karena saya secara pribadi tidak begitu suka dengan blog-blog yang memasang "autoplay MP3 in background"
  • Tidak bisa bekerja sempurna untuk blog yang memasang tag body onload pada template-nya
  • Hanya menggunakan satu jenis player

Integrasi Autolink Mini MP3 Player

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:
</head>
atau
</body>
Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:
<script type='text/javascript' src='https://sites.google.com/site/henscripts/jscript/minimp3player.js'/>
Langkah 5
Simpan Template....

Menambahkan File MP3 pada Artikel Blog

Langkah 1
Buatlah sebuah artikel blog dan ketikan judul lagu/file MP3 pada editor blog
Langkah 2
Blok (Highlight) judul lagu/file MP3 tersebut kemudian klik toolbar "Tautan"
Langkah 3
Masukan link lagu/file MP3 pada kotak "Masukan URL" lalu klik tombol OK
Langkah 4
Terbitkan artikel dan preview blog anda...
Langkah 5
Klik tombol "Play" dan dengarkan lagunya...
Buffering-kan? Berarti anda harus berlangganan internet dengan bandwidth internet yang lebih cepat...

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Monday, June 13, 2011

Recent Posts with Simple Spy Effect

Posted by dav On 12:06 PM
Alhamdulillah. Satu widget lagi selesai dibuat walau berbekal kepala yang masih "mumet". Widget ini dibuat untuk memenuhi permintaan dari beberapa pembaca setia Blogger Tune-Up yang ide aslinya lahir dari Abu Farhan dan jqueryfordesigners.com. Setelah dibongkar script asli milik Abu Farhan ternyata cukup rumit dalam proses penerapannya plus rumit jika ingin mengembangkannya, akhirnya menulis ulang code JSON dan jQuery-nya. Dari tampilan akhir memang sangat mirip dengan widget-widget yang sudah beredar di dunia maya, namun sebenarnya menggunakan kode JavaScript yang baru, hanya kode CSS di ambil dari code aslinya yang kemudian di tata ulang untuk menyesuaikan dengan script JSON dan jQuery yang digunakan.
Widget ini kemudian diberi nama "Recent Posts with Simple Spy Effect" atau dalam bahasa Indonesia-nya kurang lebih "Artikel Terbaru dengan Efek Sederhana Mata-mata". Widget ini memiliki dua mode yang bisa disesuaikan dengan ruangan yang dimilikinya. Jika blog anda memiliki ruangan yang cukup lebar maka akan lebih menarik jika menggunakan Mode 2 namun jika ruangan yang dimiliki sempit akan lebih menarik jika menggunakan Mode 1.

Kelebihan Recent Post with Simple Spy Effect

  • Lebih mudah dalam penerapan karena menggunakan script yang lebih sederhana
  • Lebih cepat karena pembacaan Feed tidak semuanya hanya dibatas pada sejumlah feed yang telah diatur
  • Pengaturan lebih mudah dan sederhana karena pengaturan hanya pada beberapa bagian utama saja
  • Memiliki 2 mode pilihan sehingga lebih mudah untuk ditempatkan sesuai dengan ruangan yang dimiliki
  • Rasakan sendiri dan tinggalkan pada komentar kelebihan dan kekurangannya ya teman-teman
  • Widget akan berhenti berjalan jika pointer mouse berada diatasnya

Kelemahan Recent Posts with Simple Spy Effect

  • Hanya mampu bekerja baik dengan Framework jQuery Versi 1.3.2 kebawah, maka disarankan untuk tidak menggunakan versi diatasnya atau yang terbaru, atau gunakan framework tersendiri untuk widget ini.
  • Apalagi ya? Baru itu yang ditemukan, kesalahan lain yang ditemukan kemudian akan diperbaiki dalam tempo yang sesingkat-singkatnya.

Integrasi Recent Posts with Simple Spy Effect

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Elemen Laman"
Langkah 3
Tambahkan sebuah gadget/widget baru dengan tipe "HTML/JavaScript" pada posisi yang menarik
Langkah 4
Masukan (copy paste) kode dibawah ini pada bagian "Konten" dan beri judul sesuai keinginan
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#rpsidebarspy {
overflow:hidden;
margin:5px auto;
padding:0px 0px;
height:450px;
font:11px/1.5 Verdana, Arial, Helvetica, sans-serif;
}
#rpsidebarspy ul{
width:480px;
overflow:hidden;
list-style-type: none !important;
padding: 0px 0px;
margin:0px 0px;
}
#rpsidebarspy li {
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none !important;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://lh5.googleusercontent.com/-GKbvLBC1tW8/TfYBC0rDF5I/AAAAAAAAFa4/e58iyiLSm-s/s800/bgrcspypost.jpg) repeat-x;
border:1px solid #ddd;
}

#rpsidebarspy li a {
text-decoration:none;
color:#4B545B;
height:16px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#rpsidebarspy li .news-text {
display:block;
padding:5px;
text-align:justify;
}
#rpsidebarspy li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
width:70px;
height:70px;
}
.spydate{
overflow:hidden;
padding:2px 0px;
margin:1px 0px 0px 0px;
}
</style>
<script language="Javascript" type="text/javascript">//<![CDATA[
jmlrepos = 10;
tampilspy = 5;
durasispy = 4000;
alamatblog = "http://modification-blog.blogspot.com";
eusiartikel = true;
jmlkarpos = 150;
//]]></script>
<div id="rpsidebarspy">
<script src='http://henscripts.googlecode.com/svn/trunk/jquery.simplespy.min.js' type='text/javascript'></script>
</div>
Langkah 5
Klik tombol "SIMPAN"
Langkah 6
Preview blog anda dan perhatikan, menarik bukan?

Pengaturan Recent Post with Simple Spy Effect

Perhatikan kode dibawah ini (code diambil dari langkah 4 dan hanya bagian tertentu saja yang diambil):
#rpsidebarspy {
height:450px;
}
Ubahlah nilai 450 sesuai dengan tinggi widget yang dibutuhkan, namun harus disesuaikan dengan jumlah artikel yang akan ditampilan (lihat tampilspy = 5; pada keterangan dibawah)
#rpsidebarspy ul{
width:480px;
}
Ubahlah nilai 480 untuk mengatur lebar item widget atau ubahlah menjadi 100% untuk lebar yang otomatis mengikuti lebar ruangan yang ada
#rpsidebarspy li {
height:70px;
}
Ubahlah nilai 70 untuk mengatur tinggi item widget
#rpsidebarspy li img {
width:70px;
height:70px;
}
Ubahlah nilai 70 keduanya untuk mengatur besar gambar mini yang akan ditampilkan

Perhatikan kode dan gambar dibawah ini (code diambil dari langkah 4):
jmlrepos = 10;
tampilspy = 5;
durasispy = 4000;
alamatblog = "http://modification-blog.blogspot.com";
eusiartikel = true;
jmlkarpos = 150;
Keterangan:
  • jmlrepos = 10; ubahlah nilai 10 untuk mengatur jumlah keseluruhan artikel yang akan ditampilkan secara bergantian
  • tampilspy = 5; ubahlah nilai 5 untuk mengatur jumlah artikel yang akan ditampilkan
  • durasispy = 4000; ubahlah nilai 4000 untuk mengatur waktu pergantian (satuan dalam milidetik)
  • alamatblog = "http://modification-blog.blogspot.com"; ubahlah alamat blog sesuai dengan alamat blog anda
  • eusiartikel = true; nilai true jika ingin menampilkan mode 2, nilai false jika ingin menampilkan mode 1
  • jmlkarpos = 150; ubahlah nilai 150 untuk menentukan jumlah karakter ringkasan artikel yang akan ditampilkan, mengubah nilai ini jika mengaktifkan tampilan mode 2
Selamat mencoba dan semoga berhasil. Happy Blogging :)