Friday, March 25, 2011

Belajar Seputar Dunia Blogging

Belajar Seputar Dunia Blogging

Budaya Berbagi Dalam Komunitas Blogwalking /20’

Posted: 24 Mar 2011 06:57 AM PDT


Bismillah...
Sungguh memang sangat indah kalau kita bisa saling berbagi dengan sahabat kita, slogan ini pula yang di junjung tinggi oleh Komunitas Blogwalking /20' yang saat ini sudah menjadi komunitas besar di facebook.

Komunitas Blogwalking/20'? Komunitas apa itu? Ya, pertanyaan itu dulu yang melintas di benak saya. Setiap saya melakukan blogwalking mengunjungi blog sahabat, ada yang memasang logo Komunitas Blogwalking /20'. Pada awalnya saya cuek bebek naik getek, tapi di saat semakin sering saya melakukan aktifitas blogwalking, semakin sering juga saya melihat adanya logo bumi yang di kelilingi bintang dan bertuliskan KBw/20' di tengahnya yang cukup atraktif.

Mulai dari situ timbul rasa penasaran saya tentang komunitas ini. Pada saat itu juga saya klik logo KBw/20' yang terpasang di salah satu blog. Akhirnya saya di bawa menuju halaman forum di facebook, dan rasa penasaran saya pun mulai terobati. Kemudian muncul lagi pertanyaan di benak saya, buat apa komunitas ini ada, padahal blogwalking hanya sekedar berkunjung ke blog orang lain dan mennggalkan jejak berharap mendapatkan kunjungan balik. Tanpa berfikir panjang saya langsung mendaftarkan diri untuk ikut bergabung di Komunitas Blogwalking /20'.

Setelah saya di terima untuk bergabung, saya mulai mendapat manfaat telah bergabung di komunitas itu. Di sana kita bisa saling sharing dan promosikan blog kita, karena komunitas ini sangat menjunjung tinggi sebuah slogan Budaya Berbagi Dalam Komunitas Blogwalking /20'. Yang tadinya blog ini sangat sepi pengunjung, lambat laun mulai ramai pengunjung karena saya sering berpromosi di Komunitas Blogwalking /20' yang memang mayoritas anggotanya adalah para blogger.

Kalian bisa lihat sendiri komentar di blog ini yang tadinya tidak ada sama sekali, sekarang sudah mulai banyak yang berkomentar dan bisa meningkatkan alexa rank blog ini. Terima kasih saya ucapkan untuk semua sahabat saya yang tergabung dalam Komunitas Blogwalking /20' dan juga para admin yang telah mendirikan komunitas yang sangat bermanfaat dalam perkembangan blogger indonesia. Tidak lupa juga saya ucapkan banyak terima kasih untuk sobat blogger semua yang sudi meluangkan waktu untuk mengunjungi dan berkomentar di blog ini.

Alhamdulillah...

Image Gallery Menggunakan Jquery 1.4.2

Posted: 24 Mar 2011 03:27 AM PDT

Lagi jalan-jalan ke blog sahabat, secara tidak sengaja saya menemukan trik menarik tentang macam-macam efek image gallery menggunakan Jquery 1.4.2. Trik ini sangat atraktif jika sobat sedang posting artikel tentang foto-foto sehingga tidak memakan terlalu banyak ruang, dan pengunjung juga tidak merasa bosan.

Oke lagsung saja silahkan lihat demo di bawah ini untuk macam-macam efeknya.

Only compatible with firefox










Untuk pemasangannya, sobat blogger bisa menggunakan kode di bawah ini.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://belajarblogging.googlecode.com/files/animasi1.js" type="text/javascript">
</script><script src="http://belajarblogging.googlecode.com/files/animasi2.js" type="text/javascript"></script>
<script src="http://belajarblogging.googlecode.com/files/animasi3.js" type="text/javascript">
</script><style type="text/css">
.amdhas { height: 232px; width: 432px; padding:0; margin:0; overflow: hidden; -webkit-box-shadow: 2px 2px 4px #000;-moz-box-shadow: 2px 2px 4px #000;-moz-border-radius: 10px; -webkit-border-radius: 10px;}.amdhas img { height: 200px; width: 400px; padding: 15px; border: 1px solid #ccc; background-color: #f8f8ff;-webkit-border-radius: 10px;-moz-border-radius: 10px;}</style><div class="amdhas" id="ke2">
<img height="200" src="URL GAMBAR DI SINI" width="400" />
<img height="200" src="URL GAMBAR DI SINI" width="400" />
<img height="200" src="URL GAMBAR DI SINI" width="400" /></div>
<script type="text/javascript">
SILAHKAN PILIH SALAH SATU KODE JQUERY YANG SOBAT SUKA KEMUDIAN MASUKKAN KODENYA DI SINI.
</script>

Saya contohkan gambar di atas menggunakan kode seperti ini.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://belajarblogging.googlecode.com/files/animasi1.js" type="text/javascript">
</script><script src="http://belajarblogging.googlecode.com/files/animasi2.js" type="text/javascript"></script>
<script src="http://belajarblogging.googlecode.com/files/animasi3.js" type="text/javascript">
</script><style type="text/css">
.amdhas { height: 232px; width: 432px; padding:0; margin:0; overflow: hidden; -webkit-box-shadow: 2px 2px 4px #000;-moz-box-shadow: 2px 2px 4px #000;-moz-border-radius: 10px; -webkit-border-radius: 10px;}.amdhas img { height: 200px; width: 400px; padding: 15px; border: 1px solid #ccc; background-color: #f8f8ff;-webkit-border-radius: 10px;-moz-border-radius: 10px;}</style><div class="amdhas" id="ke2">
<img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYoWUCx65cjI_Kr1zVQdvCJEitX7-ghMnUvmY4kjTi3OKopCzrCAPsvYc7z4zlET5oF3R2pTb3wH1P9rP_gC1-3_fPd5_giaTOR3g53dZ0a8jpJX3nalqHD2TlZ_dagGzDfnxnqNnWLMhh/s400/iphone-4g.jpg" width="400" />
<img height="200" src="http://peoplemeetme.com/wp-content/uploads/2010/09/iphone-4g-11.jpg" width="400" />
<img height="200" src="http://1.bp.blogspot.com/_7510iPezit8/TRbRi3jJjkI/AAAAAAAAAPY/sAn48YoV0A8/s1600/11119422-apple-iphone-4.jpg" width="400" />
<img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKNi6ArN2vphVkDar3wcGyeZ9uz-TSd6-M-6ZaWTfRtoEjn0WSCURQGwzE0_Dqp8K5jVcH7TBP7kPiNc4R-RP8G1me-6d19Mo7wlQBfq-fZG0auf7mvhDtntoQo_OcQgl_vb5ZX9_dCsE/s1600/iphone4.jpeg.jpg" width="400" />
<img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLsYH_N7AeGIRoaDvZH5tTh3WkSo7F5Pxy6MFSGAsMWd-txUpIxY_Wq5joS8mx_MJkcZZ8TgJ_wRIUPSpymk05QuUgUkZLkgeVPmk_tLtRYdv96iCAdtI6AYpw4PHnCY0u39c8O8Y7aQhS/s1600/iphone4.gif" width="400" /></div>
<script type="text/javascript">
$('#ke2').cycle({fx:'scrollDown',speedIn: 2000,speedOut: 500,easeIn:'bounceout',easeOut: 'backin',delay:-2000});
</script>

Untuk kode-kode jquery yang lain, silahkan pilih di bawah ini.

$('#ke2').cycle({fx:'zoom',speedIn:2500,speedOut: 500,easeIn:'bouncein',easeOut: 'easeout',sync:0,delay:-4000});

$('#ke2').cycle({fx:'custom',cssBefore:{left: 232,top: -232,display: 'block'},animIn: {left: 0,top: 0},animOut: {left: 232,top: 232},delay: -3000});

$('#ke2').cycle({fx:'custom',sync: 0,cssBefore: {top:0,left: 360,display: 'block'},animIn:{left: 0},animOut: {top: 232},delay: -1000});

$('#ke2').cycle({fx:'custom',cssBefore: {left: 115,top: 115,width: 0,height: 0,opacity: 1,zIndex: 1},animOut: {opacity: 0},animIn: {left: 0,top: 0,width: 400,height: 200},cssAfter: {zIndex: 0},delay: -3000});

$('#ke2').cycle({fx: 'custom',cssBefore: {top:0,left: 0,width: 0,height: 0,zIndex: 1},animIn:{width: 400,height: 200},animOut:{top:200,left: 200,width: 0,height: 0},cssAfter:{zIndex: 0},delay: -1000});

$('#ke2').cycle({fx:'shuffle',shuffle: {top:-280,left: 280},easing:'backinout',delay: -2000});

$('#ke2').cycle({fx:'curtainX',sync: false,delay: -2000});

$(function(){$('#ke2').cycle({fx:'cover',delay:-2000,cssBefore:{opacity:1 },animOut:{ opacity: 0 }});});

$('#ke2').cycle('wipe');

$('#ke2').cycle({fx:'wipe',speed:1000,timeout: 6000,delay:-4000,clip:'l2r'});

$('#ke2').cycle({fx:'wipe',speed:1000,timeout: 6000,clip:'zoom'});

Sekedar tambahan, trik ini juga bisa di pasang di bagian home page dengan cara menambahkan ke widget HTML/Java script. Selamat berkreasi.


Semoga bermanfaat.
Alhamdulillah...
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)