Pengenalan FeathersJs

Javascript sekarang sudah semakin pesat perkembangannya. Mulai dari backend dan frontend sekarang sudah bisa menggunakan full javascript.
Tidak heran lagi kalau ada banyak progremmer diluar sana yang mulai beralih menjadi fullstack developer dengan javascript.

Salah satu framework javascript di sisi backend yang menurut saya menarik untuk dipelajari adalah FeathersJs. FeathersJs merupakan sebuah framework open source yang mempermudah dalam membuat REST dan Realtime API sesuai dengan mottonya

An open source REST and realtime API layer for modern applications.

FeathersJs dikembangkan dengan framework ExpressJs. Jadi kalau kalian sudah terbiasa dengan ExpressJs, tidak akan kebingungan lagi melihat sintak-sintak dari FethersJs. Untuk dokumentasi resminya bisa dilihat di https://feathersjs.com/.

Untuk mempelajari FeathersJs kita harus sudah menginstall nodejs dan npm. Untuk cara installnya nodejs bisa dilihat disini Cara Install NodeJs.

Cara install FeatherJs

Cara installnya cukup mudah dengan catatan laptop kalian harus sudah terintall nodejs dan terkoneksi ke internet. Karena saat proses instalasi akan mengambil dependensi yang dibutuhkan.

Pertama kalian buka teminal untuk pengguna linux dan OS-X atau CMD untuk pengguna windows.

Keterangan:
Pertama jalankan npm install -g feathers-cli untuk generate FeatherJs secara global di komputer kita jadi dapat kita gunakan kalau mau buat aplikasi lain.

Langkah kedua buatlah folder dengan nama my-app mkdir my-app

Ketiga masuk ke folder yang tadi kalian buat cd my-app

Untuk melihat command apa yang tersedia di feathers, kalian bisa mengetikan feathers g tanpa parameter. Hasilnya seperti gambar berikut

Opsi-opsi command diatas akan dibahas pada artikel lain.

Langkah keempat generate aplikasi dengan perintah feathers generate app atau feathers g app

Saat proses generate akan ada beberapa langkah yang harus kalian isi

? Project name my-app
Pada proses ini akan meminta nama project kalian. bisa diisi atau langsung enter aja untuk generate nama project sesuai dengan folder yang kita buat tadi.

? Description Belajar feathersjs
Tambahkan deskripsi sesuai project kalian.

? What folder should the source files live in? src
Langkah ini untuk memberikan nama folder dimana kita akan melakukan koding nantinya. Saya sarankan di enter saja.


Selanjutnya feathers akan melakukan download dependensi. silahkan tunggu sampai proses selesai.

Kalau sudah selesai akan seperti gambar diatas.
Untuk menjalankan aplikasi ketikan perintah npm start pada terminal atau CMD

Sekarang kalian bisa mengakses di browser dengan url http://localhost:3030
Hasilnya akan seperti gambar berikut

Instalasi FeathersJs sudah selesai. Selanjutnya kalian bisa melanjutkan belajar dengan membaca dokumentasi resminya https://docs.feathersjs.com/.

Terimakasih semoga bermanfaat dan teruslah belajar!

Cara mudah membuat web screenshots (thumbnail).

Kebetulan ane dapat job sebuah web social bookmarking, web tersebut berfungsi untuk grabing website lain, untuk pengambilan isi content tidak ada masalah, hanya saja screen shot web tidak dapat diambil.

Sebagai solusi ane memanfaatkan screen shot yang dipakai oleh google page speed

HTML dan Javascript code grab Image

<span id='WJSnapShoot'></span>
<script src='https://www.googleapis.com/pagespeedonline/v1/runPagespeed?screenshot=true&callback=WJShot&url=http://www.webjalanan.com'></script>
<script>
document.getElementById("WJsnapform").addEventListener("submit", WJsubmit);
function WJShot(wjObj) {
    var dataImg = wjObj.screenshot.data;
    var decodeImg = dataImg.replace(/\_/g, "/").replace(/\-/g, "+");
    document.getElementById("WJSnapShoot").innerHTML = '<img src="data:image/jpeg;base64,'+decodeImg+'"/>';
}
</script>

Code tersebut berfungsi untuk memanggil Json milik google page speed, hanya saja ane beri callback untuk memanggil image yang terenkripsi menggunakan code base64.

Sebagai contoh diatas ane mengambil contoh milik http://www.webjalanan.com
untuk mengambil web yang lain, silahkan agan rubah code pemanggilan json, sesuai dengan web yang mau diambil screen shotnya.

<script src='https://www.googleapis.com/pagespeedonline/v1/runPagespeed?screenshot=true&callback=WJShot&url=http://namadomain'></script>

Mudah kan gan, code ini sengaja ane simpan, siapa tau nanti dibutuhkan lagi ^_^

[Ask] Apakah Membuat Snippet Blog Juga Harus Ada Json?

Apakah Membuat Snipet Blog Juga Harus Ada Json?

: Admin Blog Doa : sch*******@gmail.com : http://kumpulandoa.my.id

: Saya mau bertanya, Apakah Membuat Snipet Blog Juga Harus Ada Json? , masalanya di blog saya tampilan snipet dalam versi mobile web nya tidak tampil, kira kira apakah ini ada hubungannya juga dengan masalah kode json itu ?

Untuk snippet blog, selain menggunakan json agan juga bisa memakai code bawaan blogger,  hanya saja kita tidak bisa mengatur jumlah kalimat yang tampil.

Berikut code snippet bawaan blogger

<data:post.snippet/>

 

Code tersebut harus berada pada widget "Blog" atau yang mempunyai id 'post', silahkan agan coba rubah code JSON yang biasanya berada pada widget Blog1.

Untuk versi mobile web, seharusnya json tetap bisa berjalan, karena code json hanya memakai javascript saja. Untuk tampilan mobile, Blogger biasanya akan memilih standard template secara otomatis, dan ini yang membuat seakan-akan json tidak berjalan, silahkan agan nonaktifkan fitur tersebut di pengaturan blogger.

Maaf ane tidak bisa memberi banyak masukkan, karena ane tidak tau dimana agan meletakkan code JSON tersebut.

[Ask] Cara membuat slider di postingan blogger

Cara membuat slider di postingan blogger..?

: Heri hermawan : heriher*********@gmail.com : http://herlivs.blogspot.com

: Agan tolong bantuannya

Bagaimana cara membuat slide gambar di dalam postingan blogger..

Tolo beri contohnya gan.

Terimakasih gan.

Mudahan agan bisa bantu saya.

Assalamualaikum.

Waalaikumsalam Warahmatullahi Wabarakatuh.
Untuk membuat seperti slider diatas , caranya hampir sama dengan tutorial Membuat Image Slider pada Blogger , contoh hasilnya akan seperti ini : LIHAT DEMO

1. Untuk blogger post pertama agan harus memilih metode HTML 

2. Masukkan code berikut

<style type="text/css">
#sliderFrame {position:relative;width:100%;height:200px;margin: 10px auto;max-width: 700px;}
#slider{width:100%;height:100%;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQvBNqSjour7ENzvN9MqNfm5_mAa9iBqMgzBKJ8W2dpRQh7NLLsbPLErdYZ5VQIansALKngvIUqoXQaIzkvp9Y19HK_lKGeh7hJyPsZTX2JgFqYpzKflCqUG1L9tChTv9JjL4-ziGfsKPY/s1600/loading.gif) 50% 50% no-repeat #fff;position:relative;margin:0 auto;box-shadow:0 1px 5px #999;transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0)}
#slider a.imgLink,#slider img{display:none;position:absolute}
#slider img{border:none;min-width:100%}
#slider a.imgLink{z-index:2;top:0;left:0;border:0;padding:0;margin:0;width:100%;height:100%}
div.mc-caption-bg,div.mc-caption-bg2{position:absolute;width:100%;height:auto;padding:0;left:0;bottom:15px;z-index:3;overflow:hidden;font-size:0}
div.mc-caption-bg{background-color:#000}
div.mc-caption{font:700 14px/20px Arial;color:#EEE;z-index:4;padding:10px 0;text-align:center}
div.mc-caption a{color:#FB0}div.mc-caption a:hover{color:#DA0}
div.navBulletsWrapper{padding: 5px 0; margin:0 auto; text-align:center;top:100%;background:0 0;position:absolute;z-index:5;cursor:pointer;}
div.navBulletsWrapper div{width:11px;height:11px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNTy4dkC5F5KZYBZs7HlsLWKH33r09CoKuWkYLg3kkfxRcEHR4XkBO2r9TIT8GAAQJ9hvRg96c89Tdbjkfk5_qScOhCy8RxlrMgkNtE63TkulriUFu4Dg_tun_Rl7ZicSASw6G4VLoBinP/s1600/bullet.png) no-repeat;float:left;overflow:hidden;vertical-align:middle;cursor:pointer;margin-right:11px}
div.navBulletsWrapper div.active{background-position:0 -11px}
.intro{bottom:0;color:rgba(0,0,0,.2);font-size:16px;position:absolute;right:0;text-decoration:none;z-index:99999}
.group1-Wrapper{position:absolute;z-index:20;top:40%;width: 100%;}
a.group1-Next,a.group1-Prev{margin:0 10px;padding:10px 20px;cursor:pointer;position:relative;border-radius:50%;background:#fff;font-size:24px;opacity:.75;}
a.group1-Prev{float:left;}a.group1-Next{float:right;}
a.group1-Next:hover,a.group1-Prev:hover{background:#e2e2e2;color:#fff;opacity:.9}
</style>

<div id="sliderFrame">
<div class="group1-Wrapper">
<a href='#' onclick="imageSlider.previous()" class="group1-Prev">&#8249;</a>
<a href='#' onclick="imageSlider.next()" class="group1-Next">&#8250;</a>
</div>

<div id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-2sZoYouA7xD0uXhozxJC3tLgtPjA-VieuHwXg6HzuPwDDZZ1lb79NBbQpQP_HNvPdG-m7GnRRnSBHKvJ5RxWEw9Z__XJUu7SwpyexQ20YnS8QhHkqso1emJr7Jc1OCAdRivi2IwHUC05/s1600/image-slider-1.jpg" alt="Nama Image" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx3gN-mRzrMRC-VGzcDl8VxlpiYtS1I3BP-1ycxEllMgN2fwIEZV5JpTqpJFCmqNA-YNd8Eqd9nN2h8WK_7S23XJfIi61MZTSxfO0uQBsje6kR5CbUiLph08cGZxnSx7oJ3778WP8cBRXA/s1600/image-slider-2.jpg" alt="Deskripsi Image"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbnHDJLrCWMe_00w60My3xyDPrg8k7knQY_RjemTZsUEm9PK8hMpUW1GImd_4h4oD-4yVTJV_NalfGNMmu4zm2Ta59v1TFjE8hvBVzoKVqW_jMmmNEmpMkvcXprBF5YXDe8yQCIlZUSAcV/s1600/image-slider-3.jpg" alt="Keterangan Slide"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK25MKXIDbzVbWdlaKpfAOkRz6y6x7YgLs2dXYe0kn_DxJhycb9B1K5pSuQfagbNedfT2Dh8YHQKPplqv-a3p39sXj7qjnDx70R4RPc5YV99GpLUh_uycxJjXi47H9JGihwPWAun99Wz1z/s1600/image-slider-4.jpg" alt="Suka suka" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPsXfWMmsGdwfD-QpULA2idJaxCoDqXJK8ysBV6yjbOGSsmCc4iNvfPWr-gthdgAlm4UsbsJuUSpLsZax2Eo3CkeOnUqOsK-PuHZucG7tiswVZgH_r2Y_mHG3IOGfpxbJkB3e4J_Dq8n2d/s1600/image-slider-5.jpg" alt="Stay Connected"/></a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/WebJalanan/Blog/master/WJslider.js"></script>

3. Edit Code

Pada code <style> paling atas yang ane pertebal, agan sesuaikan dengan lebar postingan, dalam contoh code diatas lebar 700px dan tinggi 300px, Jangan lupa sesuaikan juga url imagenya.

[Ask] Membuat image slider saat di klik bisa memberikan informasi..?

Bagaimana membuat image slider saat di klik bisa memberikan informasi..?

: Januar : janua*****@yahoo.co.id : http://--

: di image slip yg ada .., kita ingin membuat saat image di klik akan muncul/halaman/form baru yg akan dapat memberikan keterangan dari image yg terpilih..?, tks

LIVE DEMO SLIDER

Sebagai contoh pada link diatas ane memakai bootstrap slider gan, karena proses pembuatan bisa lebih mudah, kita tidak perlu membuat code CSS dan javascript yang terlalu panjang.

Caranya :

1. Pastikan ada code jquery dan boostrap pada bagian <head>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

2. Pada bagian <body> untuk slider, kita memanfaatkan code slider dikombinasikan dengan modal, jadinya seperti ini gan, ini ane buat contoh code dengan satu gambar saja, agar mudah memahaminya

<div class="container">
<div id="WJSlider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">

<div class="item active">
    <img data-toggle="modal" data-target="#info_gambar1" src="http://url_gambar_agan.jpg">
</div>
<div class="modal fade" id="info_gambar1" role="dialog">
    <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">1. Header Keterangan Untuk Gambar Slider</h4>
    </div><div class="modal-body">
    <p>Isi keterangan bisa berupa text atau code HTML seperti form dll.</p>
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>
    </div>
    </div>
</div>

</div>
</div>
</div>


Untuk lebih lengkapnya contoh code jadinya bisa seperti ini, ( code ini ane kombinasikan dengan tutorial slider ini : Membuat Slider Bootstrap Yang Responsive )


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Slider Bootstrap Webjalanan</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>.carousel-inner > .item > img,.carousel-inner > .item > a > img { width: 80%; margin: auto;}</style>
  </head>
  <body>
    <div class="container">
      <div id="WJSlider" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#WJSlider" data-slide-to="0" class="active"></li>
          <li data-target="#WJSlider" data-slide-to="1"></li>
          <li data-target="#WJSlider" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner" role="listbox">

        <!-- Gambar Slider 1 -->
          <div class="item active">
            <img data-toggle="modal" data-target="#info_gambar1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil1MA0LR75O4sDiwqjIjC8alenS7wdEG7xAcPmHK06m7cE-MHfq5YKVBIY9bLpyZXK7zRIRbvwFaBF8ttiviXWnnl94R8yaMPRggR6KAa7__T1d3i_vjcQ3qZNjgUYvMtpCgTIU9ag4RdL/s1600/WJslider1.jpg" alt="slide1" width="460" height="345">
            <div class="carousel-caption">
              <h3>Judul Gambar 1</h3>
              <p>Ini adalah deskripsi singkat dari judul gambar yang pertama.</p>
            </div>
          </div>
          <div class="modal fade" id="info_gambar1" role="dialog">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">1. Header Keterngan Gambar Pertama</h4>
                </div>
                <div class="modal-body">
                  <p>Keterangan 1<br/>Isi keterangan bisa berupa text atau code HTML seperti form dll.</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>

          <!-- Gambar Slider 1 -->
          <div class="item">
            <img data-toggle="modal" data-target="#info_gambar2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm-65ATwtkC5DHanXcAJMA1bCIlVRixrZe9G9uztpgpqfZ8bwB4p8UudCj5ebec7of1uHMWFp9ECiKmfD5Os4RmZZCim8WVWnUCsmjuHbWHp_7tb3QQ4emKuRkdN2gISlU6BwUBp_A2dnv/s1600/WJslider2.jpg" alt="slide2" width="460" height="345">
            <div class="carousel-caption">
              <h3>Judul Gambar 2</h3>
              <p>Ini adalah deskripsi singkat dari judul gambar yang ke dua.</p>
            </div>
          </div>
          <div class="modal fade" id="info_gambar2" role="dialog">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">2. Header Keterngan Gambar Pertama</h4>
                </div>
                <div class="modal-body">
                  <p>Keterangan 2<br/>Isi keterangan bisa berupa text atau code HTML seperti form dll.</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>

          <!-- Gambar Slider 1 -->
          <div class="item">
            <img data-toggle="modal" data-target="#info_gambar3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2HmKddCVf06f1GsuEDEqrMTuFtNra3z9qPdAkZlXsyK9kymk3QpoJyyRAMweT_eY8e4b2l2EGdQHrAMGy90HmDcq6qk8JCrRhnMMN4jCW_26fn-MbzoH9tbl-1DlBJg3uyHlhh29urSnv/s1600/WJslider3.jpg" alt="slide3" width="460" height="345">
            <div class="carousel-caption">
              <h3>Judul Gambar 3</h3>
              <p>Ini adalah deskripsi singkat dari judul gambar yang ke tiga.</p>
            </div>
          </div>
          <div class="modal fade" id="info_gambar3" role="dialog">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">3. Header Keterngan Gambar Pertama</h4>
                </div>
                <div class="modal-body">
                  <p>Keterangan 3<br/>Isi keterangan bisa berupa text atau code HTML seperti form dll.</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>

        </div>

        <!-- Panah Kanan-Kiri -->
        <a class="left carousel-control" href="#WJSlider" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Kembali</span>
        </a>
        <a class="right carousel-control" href="#WJSlider" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Lanjut</span>
        </a>
      </div>
    </div>
  </body>
</html>

Sepertinya itu saja sudah cukup gan, semoga membantu ^_^

Tools untuk mengirim Tweet atau Direct Message Secara Massal

Tools ini berfungsi untuk mengirimkan Tweet atau Direct Message secara massal, dengan fitur spintax untuk mengurangi kemungkinan agan dianggap sebagai robot, karena twitter memakai security code yang bisa mendeteksi kesamaan kalimat atau link yang agan kirimam tweet
(*More info Auto Tweet Rules : https://support.twitter.com/articles/76915#Tweets).

SIMPLE FITUR :

1. Pencarian Target sesuai Keyword dan Bahasa.
2. Scrap langsung dari halaman Timeline Twitter yang sedang terbuka.
3. Auto Mention Target ( @NamaTarget : Isi pesan agan...... )
4. Spintax pada pesan yang akan dikirim. {Kalimat 1 | Kalimat 2 | Kalimat 3 | dan seterusnya}
   

Cara Pemasangan Tool Pada Browser

1. Silahkan pasang addons Greasemonkey (Untuk Firefox) atau Tempermonkey (Selain Firefox)
2. Setelah salah satu addons diatas terpasang silahkan buka halaman ini :
https://gist.github.com/WebJalanan/838ebc69a19fb706c546/raw/masstw.user.js

Fungsi Penting Code Spintax

{Kalimat 1 | Kalimat 2 | Kalimat 3 | dan seterusnya}

Code spintax ini mempunyai peranan utama terkirim atau tidaknya pesan agan, karena Twitter menggunakan security code yang bisa membaca duplicate tweet, untuk melewati security tersebut, agan harus lebih kreatif dalam membuat tweet dengan memanfaatka fungsi spintax code tersebut.

Contoh code spintax :
{Hallo| Hi} apa kabar, salam kenal dari orang paling {ganteng| keren| cool} sekelurahan.

Spintax diatas akan menghasilkan kalimat yang berbeda contoh :
Hallo apa kabar, salam kenal dari orang paling ganteng sekelurahan
Hi apa kabar, salam kenal dari orang paling keren sekelurahan
Hallo apa kabar, salam kenal dari orang paling cool sekelurahan
dst.....

Twitter hanya membatasi sampai 140 Karakter, jadi kemungkinan untuk spintax memutar kalimat juga menjadi sedikit, agan musti lebih kreatif dalam memutar kalimat ^_^.

Membuat Slider Bootstrap Yang Responsive

Tutorial kali ini kita akan belajar membuat tampilan slider responsive menggunakan bootstrap, agar image slider kita bisa berubah menyesuaikan ukuran layar, disini ane memakai yang carousel slide.

Contoh hasilnya akan seperti ini : Demo Bootstrap Slider

Cara membuatnya tidak terlalu sulit kok, kita hanya membutuhkan, jquery dan bootstrap, jadi kalau dalam template atau blog yang sekarang agan pakai itu sudah ada bootstrap atau jquery, agan bisa mengabaikan code 1 ( code HTML dalam head ) yang ane berikan dibawah ini :

1. Code HTML dalam Head

Letakkan code berikut di antara <head> sampai </head>.


<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>.carousel-inner > .item > img,.carousel-inner > .item > a > img { width: 80%; margin: auto;}</style>


Perhatikan pada bagian <style> code diatas, itu ane buat lebar gambar hanya 80% , agar tombol next ( > ) dan prev ( < ) bisa terlihat, code itu bisa agan rubah menjadi 100% agar tidak ada space disamping kanan dan kirinya, atau silahkan modifikasi sesuai selera agan.

2. Code HTML dalam Body

Silahkan letakkan code berikut di dalam body, atau pada halaman yang ingin ditambah slider.


<div class="container">
  <br>
  <div id="WJSlider" class="carousel slide" data-ride="carousel">
    <!-- Indikator yang bulat bulat ituloh gan-->
    <ol class="carousel-indicators">
      <li data-target="#WJSlider" data-slide-to="0" class="active"></li>
      <li data-target="#WJSlider" data-slide-to="1"></li>
      <li data-target="#WJSlider" data-slide-to="2"></li>
      <li data-target="#WJSlider" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper untuk slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
        <img src="url-gambar1.jpg" alt="slide1" width="460" height="345">
        <div class="carousel-caption">
          <h3>Judul Gambar 1</h3>
          <p>Ini adalah deskripsi singkat dari judul gambar yang pertama.</p>
        </div>
      </div>

      <div class="item">
        <img src="url-gambar2.jpg" alt="slide2" width="460" height="345">
        <div class="carousel-caption">
          <h3>Judul Gambar 2</h3>
          <p>Ini adalah deskripsi singkat dari judul gambar yang ke dua.</p>
        </div>
      </div>
 
      <div class="item">
        <img src="url-gambar3.jpg" alt="slide3" width="460" height="345">
        <div class="carousel-caption">
          <h3>Judul Gambar 3</h3>
          <p>Ini adalah deskripsi singkat dari judul gambar yang ke tiga.</p>
        </div>
      </div>

      <div class="item">
        <img src="url-gambar4.jpg" alt="slide4" width="460" height="345">
        <div class="carousel-caption">
          <h3>Judul Gambar 4</h3>
          <p>Ini adalah deskripsi singkat dari judul gambar yang ke empat.</p>
        </div>
      </div>

    </div>

    <!-- Kode untuk Navigasi -->
    <a class="left carousel-control" href="#WJSlider" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Kembali</span>
    </a>
    <a class="right carousel-control" href="#WJSlider" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Lanjut</span>
    </a>
  </div>
</div>


Berikut ini full code yang ane pakai sebagai DEMO, dan bisa agan gunakan sebagai contoh live :
1. Buka notepad
2. Copy dan paste code dibawah ini
3. save dengan nama slider.html (ingat ya gan,  harus xxx.html jangan xxx.txt ^_^)

Full code HTML contohmembuat slider yang responsive

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Slider Bootstrap Webjalanan</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>.carousel-inner > .item > img,.carousel-inner > .item > a > img { width: 80%; margin: auto;}</style>
</head>
<body>

<div class="container">
  <br>
  <div id="WJSlider" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#WJSlider" data-slide-to="0" class="active"></li>
      <li data-target="#WJSlider" data-slide-to="1"></li>
      <li data-target="#WJSlider" data-slide-to="2"></li>
      <li data-target="#WJSlider" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil1MA0LR75O4sDiwqjIjC8alenS7wdEG7xAcPmHK06m7cE-MHfq5YKVBIY9bLpyZXK7zRIRbvwFaBF8ttiviXWnnl94R8yaMPRggR6KAa7__T1d3i_vjcQ3qZNjgUYvMtpCgTIU9ag4RdL/s1600/WJslider1.jpg" alt="slide1" width="460" height="345">
        <div class="carousel-caption">
          <h3>Judul Gambar 1</h3>
          <p>Ini adalah deskripsi singkat dari judul gambar yang pertama.</p>
        </div>
      </div>

      <div class="item">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm-65ATwtkC5DHanXcAJMA1bCIlVRixrZe9G9uztpgpqfZ8bwB4p8UudCj5ebec7of1uHMWFp9ECiKmfD5Os4RmZZCim8WVWnUCsmjuHbWHp_7tb3QQ4emKuRkdN2gISlU6BwUBp_A2dnv/s1600/WJslider2.jpg" alt="slide2" width="460" height="345">
        <div class="carousel-caption">
          <h3>Judul Gambar 2</h3>
          <p>Ini adalah deskripsi singkat dari judul gambar yang ke dua.</p>
        </div>
      </div>
  
      <div class="item">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2HmKddCVf06f1GsuEDEqrMTuFtNra3z9qPdAkZlXsyK9kymk3QpoJyyRAMweT_eY8e4b2l2EGdQHrAMGy90HmDcq6qk8JCrRhnMMN4jCW_26fn-MbzoH9tbl-1DlBJg3uyHlhh29urSnv/s1600/WJslider3.jpg" alt="slide3" width="460" height="345">
        <div class="carousel-caption">
          <h3>Judul Gambar 3</h3>
          <p>Ini adalah deskripsi singkat dari judul gambar yang ke tiga.</p>
        </div>
      </div>

      <div class="item">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYkyL5naiwOgIlhQjG-RzoGimZ9E_6I5SiTklqwMyADFPWQW1YG6EZYkOe7dqNohm-grRFBX3Ante1n-_loPV3bC6-AwS6CR3BBSbz81LNBxdGimIOKgpZxKnmOcbW91V22LIk7NoeSocc/s1600/WJslider4.jpg" alt="slide4" width="460" height="345">
        <div class="carousel-caption">
          <h3>Judul Gambar 4</h3>
          <p>Ini adalah deskripsi singkat dari judul gambar yang ke empat.</p>
        </div>
      </div>
 
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#WJSlider" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Kembali</span>
    </a>
    <a class="right carousel-control" href="#WJSlider" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Lanjut</span>
    </a>
  </div>
</div>

</body>
</html>


OK gan, selamat mencoba dan semoga bermanfaat,
ane tunggu komen dan masukkannya ^_^

Cara Mudah Menyembunyikan Affiliate Link

Simple trik ini sangat berguna untuk agan yang ingin mencari referral atau penghasilan dari shorturl, dimana kita akan menyembunyikan link affiliate atau link shortner dengan menggunakan simple javascript.

Kenapa ini kita lakukan..?
Karena kebanyakan pengunjung terkadang akan malas untuk mengunjungi link yang mengarahkan mereka ke shorturl seperti adf.ly atau link affiliasi untuk mencari referral.

Simple live link code !

<a href="#" onclick="window.open('http://www.webjalanan.com', '_blank', 'height=700,width=500'); return false;">Webjalanan</a>

Bagaimana trik ini bekerja..?

Contoh code diatas, bila diklik akan mengarahkan pengunjung ke halaman http://www.webjalanan.com dengan lebar popup 500px dan tinggi 700px, bila mouse diarahkan ke live link Webjalanan, maka hanya akan terlihat "#" atau bisa juga kita rubah dengan nama link yang unik.

Contoh live link dengan nama unik : Webjalanan
**Arahkan mouse agan pada link diatas, dan lihat nama link yang ane berikan, walaupun nama linknya berbeda, saat diklik akan tetap membuka www.webjalanan.com.

Mengambil Content Blogger Menggunakan Javascript

Pernah membuat autoblog..? atau mungkin membuat template blogger..?
Kali ini kita akan mempelajari cara untuk mengambil content blog dengan memanfaatkan feed/RSS. Dengan memahami code feed ini kita juga bisa membuat AutoBlog (Blog yang terisi content secara otomatis), karena autoblog pada dasarnya memiliki konsep dan teknik yang sama.

1. URL script penyimpan feed

Pada blogger mereka memakai code API  google untuk mengola array  feed, berikut contoh feed yang dipakai pada www.webjalanan.com

http://www.webjalanan.com/feeds/posts/default?orderby=published&max-results=3&alt=json-in-script&callback=AmbilContent

Penjelasan URL diatas :

• /feeds/posts/default? ==> Dipakai bila ingin memanggil isi standard feed blog
• orderby=published ==> Memanggil data postingan terbaru secara berurutan
• max-results=3 ==>  Angka 3 adalah banyaknya post yang mau diambil.
• alt=json-in-script ==> Kita memanggil code berupa array javascript
• callback=AmbilContent ==> Ini adalah nama fungsi yang akan kita bahas dibawah

Dari hasil URL diatas akan membuka javascript dengan array feed standard, berikut ini tabel object yang kita dapat dari URL diatas :

JavaScript Object	Fungsi Object
json.feed.id.$t	Melihat ID Blog
json.feed.updated.$t	Tanggal update terakhir
json.feed.category[]	Melihat semua kategori/label blog
json.feed.category[i].term	Melihat kategori tertentu
json.feed.title.$t	Nama blog
json.feed.subtitle.$t	Deskripsi blog
json.feed.author[]	Nama Pemilik Blog
json.feed.author[i].name.$t	Nama Admin Blog
json.feed.author[i].uri.$t	URL  Admin
json.feed.openSearch$totalResults.$t	Jumlah postingan
json.feed.entry[]	Array Dasar postingan blog
json.feed.entry[i].id.$t	Id postingan
json.feed.entry[i].title.$t	Judul postingan
json.feed.entry[i].published.$t	Waktu postingan di publikasikan
json.feed.entry[i].updated.$t	Waktu postingan di perbaiki (update)
json.feed.entry[i].category[]	Kategori/label Postingan
json.feed.entry[i].category[x].term	Melihat postingan pada label tertentu
json.feed.entry[i].summary.$t	Melihat Summary postingan
json.feed.entry[i].content.$t	Isi postingan lengkap
json.feed.entry[i].link[]	Link dari postingan
json.feed.entry[i].link[x].href	Link pada postingan tertentu
json.feed.entry[i].author[]	Array dari Author postingan (lebih dari 1 admin)
json.feed.entry[i].author[x].name.$t	Nama admin pembuat postingan
json.feed.entry[i].author[x].uri.$t	Melihat url admin pembuat postingan
json.feed.entry[i].author[x].gd$image.src	Melihat Image / Avatar admin pembuat postingan
json.feed.entry[i].media$thumbnail.url	Mengambil thumbnails url pada postingan
json.feed.entry[i].thr$total.$t	Melihat jumlah komentar pada postingan

2. Script Fungsi Pengelola Feed

Sekarang kita akan membuat simple javascript, yang berfungsi untuk merubah link diatas menjadi sebuah tampilan sesuai data yang kita inginkan, berikut contoh code yang akan kita pakai bila ingin memanggil title dan isi content pada 5 postingan terbaru :


<script type="text/javascript">
  function AmbilContent(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
      var judulPost = json.feed.entry[i].title.$t;
      var isiPost = json.feed.entry[i].content.$t;
      var hasilItem = '<h1>' + judulPost + '</h1><p>' + isiPost + '</p>';
      document.write(hasilItem);
    }
  }
</script>

<script src="http://www.webjalanan.com/feeds/posts/default?orderby=published&max-results=5&alt=json-in-script&callback=AmbilContent"></script>



Untuk memanggil code yang lain sesuai kebutuhan, tinggal membuat variabel baru dan ambil fungsi sesuai dengan tabel diatas; contoh bila kita ingin memanggil kategori/label, maka kita bisa membuat variabel baru,  contoh:

var namaLabel = json.feed.category[i].term


Code standard diatas menggunakan fungsi loop  ( mengulangi suatu fungsi ), jadi secara otomatis dia akan membuat nomor urut, dengan demikian kita bisa memanggil post tertentu dengan memasukkan nomor urut dari post target, contoh bila kita akan memanggil nama kategori ke 6, maka kita gunakan code seperti ini :

var namaLabel6 = json.feed.category[6].term


Banyak trik javascript lain yang bisa kita pakai dengan memanfaatkan script feed dari blogger, kita juga bisa membuat autoblog dengan meggabungkan code javascript, HTML dan CSS sebagai tampilannya.

Contoh code simpel AutoBlog


<html>
<head>
<title>Blogger Feed Grabber</title>
<style>
.wrapper {
    background: #ccc none repeat scroll 0 0;
    border: 1px solid #ccc;
    margin: 50px;
    padding: 20px;
}
.titleblog {
    background: #f7f7f7 none repeat scroll 0 0;
    color: #ccc;
    margin: 0 0 20px;
    padding: 10px;
    text-align: center;
    text-shadow: 1px 1px 1px #000;
}
.contentblog {
    background: #ffffff none repeat scroll 0 0;
    padding: 50px;
}
</style>
</head>
<body>
<script type="text/javascript">
function AmbilContent(json) {
 for (var i = 0; i < json.feed.entry.length; i++) {
    var judul = json.feed.entry[i].title.$t;
    var isi = json.feed.entry[i].content.$t;
    var hasilItem = '<div class="wrapper"><h1 class="titleblog">'+judul+'</h1><div class="contentblog">'+isi+'</div></div>';               
    document.write(hasilItem);
     }
   }
</script>
<script src="http://www.webjalanan.com/feeds/posts/default?orderby=published&max-results=5&alt=json-in-script&callback=AmbilContent"></script>
</body>
</html>



Silahkan copy dan paste code diatas pada notepad, kemudian simpan dengan nama index.html, kemudian buka file index.html tersebut menggunakan browser, dan lihat hasilnya kemudian kembangkan sendiri codenya.

Code tersebut berfungsi untuk mengambil 5 postingan terbaru dari www.webjalanan.com, yang kemudian dibuat sebagai halaman baru.

Amazing Javascript - Efek Kain Percah

Kali ini kita akan bermain dengan salah satu koleksi  javascript  dari codepen,  hanya sebagai pengisi waktu luang saja, kita akan bermain dengan code javascript yang unik satu ini.

Javascript memang salah satu smartest code yang paling favorit. Silahkan lihat demo berikut ini yang hanya memakai javascript sebagai otaknya, dan pastinya code html untuk menampilkan front end demonya.
Kita akan membuat kain mengikuti perintah mouse, kita bisa mencabik cabik kain itu sampai menjadi debu, dan semua ini hanya menggunakan efek dari code javascript.

DEMO AMAZING JAVASCRIPT

Klik Kiri Untuk Menarik Kain.
Klik kanan Untuk Memotongnya
Hancurkan Kainnya Sekarang..!!

Berikut ini Code untuk membuat efek kain percah dengan javascript :

1. HTML Code

<canvas id="c"></canvas>

2. Javascript Code

var physics_accuracy  = 3,
    mouse_influence   = 20,
    mouse_cut         = 5,
    gravity           = 1200,
    cloth_height      = 30,
    cloth_width       = 50,
    start_y           = 20,
    spacing           = 7,
    tear_distance     = 60;
window.requestAnimFrame =
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function (callback) {
        window.setTimeout(callback, 1000 / 60);
};
var canvas,
    ctx,
    cloth,
    boundsx,
    boundsy,
    mouse = {
        down: false,
        button: 1,
        x: 0,
        y: 0,
        px: 0,
        py: 0
    };
var Point = function (x, y) {

    this.x      = x;
    this.y      = y;
    this.px     = x;
    this.py     = y;
    this.vx     = 0;
    this.vy     = 0;
    this.pin_x  = null;
    this.pin_y  = null;
  
    this.constraints = [];
};
Point.prototype.update = function (delta) {
    if (mouse.down) {
        var diff_x = this.x - mouse.x,
            diff_y = this.y - mouse.y,
            dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y);
        if (mouse.button == 1) {
            if (dist < mouse_influence) {
                this.px = this.x - (mouse.x - mouse.px) * 1.8;
                this.py = this.y - (mouse.y - mouse.py) * 1.8;
            }
        } else if (dist < mouse_cut) this.constraints = [];
    }
    this.add_force(0, gravity);
    delta *= delta;
    nx = this.x + ((this.x - this.px) * .99) + ((this.vx / 2) * delta);
    ny = this.y + ((this.y - this.py) * .99) + ((this.vy / 2) * delta);
    this.px = this.x;
    this.py = this.y;
    this.x = nx;
    this.y = ny;
    this.vy = this.vx = 0
};
Point.prototype.draw = function () {
    if (!this.constraints.length) return;
    var i = this.constraints.length;
    while (i--) this.constraints[i].draw();
};
Point.prototype.resolve_constraints = function () {
    if (this.pin_x != null && this.pin_y != null) {
        this.x = this.pin_x;
        this.y = this.pin_y;
        return;
    }
    var i = this.constraints.length;
    while (i--) this.constraints[i].resolve();
    this.x > boundsx ? this.x = 2 * boundsx - this.x : 1 > this.x && (this.x = 2 - this.x);
    this.y < 1 ? this.y = 2 - this.y : this.y > boundsy && (this.y = 2 * boundsy - this.y);
};
Point.prototype.attach = function (point) {
    this.constraints.push(
        new Constraint(this, point)
    );
};
Point.prototype.remove_constraint = function (constraint) {

    this.constraints.splice(this.constraints.indexOf(constraint), 1);
};
Point.prototype.add_force = function (x, y) {
    this.vx += x;
    this.vy += y;
};
Point.prototype.pin = function (pinx, piny) {
    this.pin_x = pinx;
    this.pin_y = piny;
};
var Constraint = function (p1, p2) {
    this.p1     = p1;
    this.p2     = p2;
    this.length = spacing;
};
Constraint.prototype.resolve = function () {
    var diff_x  = this.p1.x - this.p2.x,
        diff_y  = this.p1.y - this.p2.y,
        dist    = Math.sqrt(diff_x * diff_x + diff_y * diff_y),
        diff    = (this.length - dist) / dist;
    if (dist > tear_distance) this.p1.remove_constraint(this);
    var px = diff_x * diff * 0.5;
    var py = diff_y * diff * 0.5;
    this.p1.x += px;
    this.p1.y += py;
    this.p2.x -= px;
    this.p2.y -= py;
};
Constraint.prototype.draw = function () {
    ctx.moveTo(this.p1.x, this.p1.y);
    ctx.lineTo(this.p2.x, this.p2.y);
};
var Cloth = function () {
    this.points = [];
    var start_x = canvas.width / 2 - cloth_width * spacing / 2;
    for (var y = 0; y <= cloth_height; y++) {
        for (var x = 0; x <= cloth_width; x++) {
            var p = new Point(start_x + x * spacing, start_y + y * spacing);
            x != 0 && p.attach(this.points[this.points.length - 1]);
            y == 0 && p.pin(p.x, p.y);
            y != 0 && p.attach(this.points[x + (y - 1) * (cloth_width + 1)])             this.points.push(p);
        }
    }
};
 Cloth.prototype.update = function () {
    var i = physics_accuracy;
    while (i--) {
        var p = this.points.length;
        while (p--) this.points[p].resolve_constraints();
    }
    i = this.points.length;
    while (i--) this.points[i].update(.016);
};
Cloth.prototype.draw = function () {
    ctx.beginPath();
    var i = cloth.points.length;
    while (i--) cloth.points[i].draw();
    ctx.stroke();
};
function update() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    cloth.update();
    cloth.draw();
    requestAnimFrame(update);
}
function start() {
    canvas.onmousedown = function (e) {
        mouse.button  = e.which;
        mouse.px      = mouse.x;
        mouse.py      = mouse.y;
        var rect      = canvas.getBoundingClientRect();
        mouse.x       = e.clientX - rect.left,
        mouse.y       = e.clientY - rect.top,
        mouse.down    = true;
        e.preventDefault();
    };

    canvas.onmouseup = function (e) {
        mouse.down = false;
        e.preventDefault();
    };
    canvas.onmousemove = function (e) {
        mouse.px  = mouse.x;
        mouse.py  = mouse.y;
        var rect  = canvas.getBoundingClientRect();
        mouse.x   = e.clientX - rect.left,
        mouse.y   = e.clientY - rect.top,
        e.preventDefault();
    };
    canvas.oncontextmenu = function (e) {
        e.preventDefault();
    };
    boundsx = canvas.width - 1;
    boundsy = canvas.height - 1;
    ctx.strokeStyle = '#888';
    cloth = new Cloth(); 
    update();
}
window.onload = function () {
    canvas  = document.getElementById('c');
    ctx     = canvas.getContext('2d');
    canvas.width  = 400;
    canvas.height = 400;
    start();
}

Silahkan rubah ukuran Canvas untuk memperbesar atau memperkecil ukuran Animasinya.
Yups selamat mencoba dan berkreasi dengan code javascript..see ya..

Membuat Efek Bounce In Left

Code ini bisa kita pakai untuk PopUp (seperti pada www.webjalanan.com), List social media atau pada gambar dalam Artikel, Efek yang dihasilkan adalah memantul ke kiri sebelum berhenti pada posisi sebenarnya, cara pembuatan cukup mudah, kita bisa memakai javascript atau menerapkannya langsung menggunakan code CSS.

Dalam contoh artikel ini ane memakai jquery untuk membantu menambahkan class efek, hasilnya bisa agan lihat pada demo blog berikut :

 Demo Efek Bounce in Left

Berikut ini Code yang kita butuhkan untuk membuat Efek Tersebut :

1. Code CSS


ul[efek="bounceInLeft"] li {
    opacity: 0;
    position: relative;
    animation: bounceInLeft 600ms ease both;
    animation-play-state: paused;
}

ul[efek="bounceInLeft"].play li {
    animation-play-state: running;
}

@keyframes bounceInLeft {
    0% { opacity: 0; transform: translateX(-2000px); }
    60% { transform: translateX(30px); }
    80% { transform: translateX(-10px); }
    100% { opacity: 1; transform: translateX(0); }
}
img {float:left;margin:5px}
ul li {list-style:none;}


2. Code HTML + JQUERY


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div style="margin:0 auto;width:700px">
<ul efek="bounceInLeft">
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsm2TBb22ispog0a0RoFBWNjlvGSa2mtFFsaGwoX9YWlaO03uqTSCj4cGVsdHSCztUrrO7Uw6uH4x2YWvRGxB19A5RbOZvJadMaOjplVwAsZLCHekobaGHjZTg91tV442OKmc6uC0Z1HMZ/s130-c/1.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYZYKPWUZrJUfXUWWigQTckBrs9L3CCgFLYEK-EHLI_brUT53hLxT_iQp2cVFeSLqHc2QPmVuluRhDzYBhAIzUjQ2N2x4gVSHzKm5NjMGj8mhQ-fPuTeamStyTkBKqfWG6u-5mAKMnsep5/s130-c/2.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijFnb1LgNiinc0JFwKt7c6uibpE-26Fldyg0GcAuN5-e7sf9eiOk2l8MZnYiR7OKgu6AVuSbpmuC0M40lGuW104e6tnmR2b2_PewUAReDTXK4uE3mTpalYY6TMwXGrEOGVu4tNK9jChfhe/s130-c/3.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWmknvjvsEn1BSnpE8a2KIb2GrT-MaMntB7AbSW1qoN1LC-NxXsr6YXtEEKepAzijBo6Ph-FWGBXsrHHydi0SLC1UAihfj7ADr3JJEuSIVXf_LptdshOvOdb1_g6DstDR9dx4wmfQz3oNR/s130-c/4.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB13z3DZjweOj-KGYrSDY72V_ZB_TahJHjg4BHbLinDlauhRJm-4uVG5CoGMAdTIFE0EWE1a6d-q8KCBT9pi5D9g_Jj_cyuQ0_r2uviWc3efl39yhXwHCKwKsC2Jojt_ELkvLJHUqIYq8A/s130-c/5.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Ir0Gl-NpFfJ1lFLiTk-yvxQzTwXzZPzgDkKRjoVtsZhF5mtEBUU_8l8JEN9aSODjeek3eCWDiCnmOR90hDXrRcYIZ3U_2DCKcLHG0tJiEeuffsFYsNwvTuT_DRYW992GLDvVKaoI4NNm/s130-c/6.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdYGbQOS3maS-vDAptiKtBSztJf0T0gGMYg7HmLf_5T8odhFHH1z_S1cIOc1ZFq-OTAiYLyCRmb7GjShQmGnFuKVZR_EOlw-rl-mwlz7RaExpqnLPpDvQpas0-d0k5hm7sXgBpTjbxafLP/s130-c/7.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguyDFGAUI-y2CLqqC09LDFAfeazzGsi8cW99NYlbsjq0XtNkghhyphenhypheniBzeeyAsHRvcqDg4VxLpUBnkBQCoSiXiIut7w8jfMAWymDQWHSW7gihOmuyUnSAnfK9vQw-B9atMIPg2gwHcQYr6A2/s130-c/8.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7hCg8bi6W_yD_7eBzaDMXeyTGqH7NQdvQiVYfPVcPkW-amBxss0nSzYCvivzw957USvyc1BNtHzNuDC-PK5Bfxj0KcUy-bkGr9IhTAxfavhKy2rqypL0Bi0FJXgUE3NtgvTf7A5PVKCKC/s130-c/9.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKIac_kIbjdiXzu657mHB35Fi7luYvnAL7shzwaTLfNhJ2BTUwcUQB_KoIgzI8KzWyu_-4dpRFPrdSSTiczCzYK2gkXlzRHXlTHaISBq7JI_gdde-KoGLw5uRwhyphenhyphenuQd5gDdTt8vZthCaG8/s130-c/10.jpeg" alt="Lion"></li>
</ul>
<div align="center">
<button onclick="efek();">Demo Efek</button>
</div>
</div>

3. Code Javascript (Jquery)


function efek() {
    $("ul[efek] li").each(function (i) {
        $(this).attr("style", "animation-delay:" + i * 1000 + "ms");
        if (i == $("ul[efek] li").size() -1) {
            $("ul[efek]").addClass("play")
        }
    });
};

Bila agan ingin membuatnya auto run tanpa mengeklik tombol, silahkan rubah code javascript diatas dengan code berikut :

$(document).ready(function () {
    $("ul[efek] li").each(function (i) {
        $(this).attr("style", "animation-delay:" + i * 1000 + "ms");
        if (i == $("ul[efek] li").size() -1) {
            $("ul[efek]").addClass("play")
        }
    });
});

Karena auto run jadi kita tidak membutuhkan button, langsung saja buang code <button> tersebut dari html agan, code yang ini gan :

<button onclick="efek();">Demo Efek</button>


Bila semua code digabungkan maka akan terlihat seperti ini (auto start)

<style type="text/css">
ul[efek="bounceInLeft"] li {
    opacity: 0;
    position: relative;
    animation: bounceInLeft 600ms ease both;
    animation-play-state: paused;
}

ul[efek="bounceInLeft"].play li {
    animation-play-state: running;
}

@keyframes bounceInLeft {
    0% { opacity: 0; transform: translateX(-2000px); }
    60% { transform: translateX(30px); }
    80% { transform: translateX(-10px); }
    100% { opacity: 1; transform: translateX(0); }
}
img {float:left;margin:5px}
ul li {list-style:none;}
</style>

<div style="margin:0 auto;width:700px">
<ul efek="bounceInLeft">
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsm2TBb22ispog0a0RoFBWNjlvGSa2mtFFsaGwoX9YWlaO03uqTSCj4cGVsdHSCztUrrO7Uw6uH4x2YWvRGxB19A5RbOZvJadMaOjplVwAsZLCHekobaGHjZTg91tV442OKmc6uC0Z1HMZ/s130-c/1.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYZYKPWUZrJUfXUWWigQTckBrs9L3CCgFLYEK-EHLI_brUT53hLxT_iQp2cVFeSLqHc2QPmVuluRhDzYBhAIzUjQ2N2x4gVSHzKm5NjMGj8mhQ-fPuTeamStyTkBKqfWG6u-5mAKMnsep5/s130-c/2.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijFnb1LgNiinc0JFwKt7c6uibpE-26Fldyg0GcAuN5-e7sf9eiOk2l8MZnYiR7OKgu6AVuSbpmuC0M40lGuW104e6tnmR2b2_PewUAReDTXK4uE3mTpalYY6TMwXGrEOGVu4tNK9jChfhe/s130-c/3.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWmknvjvsEn1BSnpE8a2KIb2GrT-MaMntB7AbSW1qoN1LC-NxXsr6YXtEEKepAzijBo6Ph-FWGBXsrHHydi0SLC1UAihfj7ADr3JJEuSIVXf_LptdshOvOdb1_g6DstDR9dx4wmfQz3oNR/s130-c/4.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB13z3DZjweOj-KGYrSDY72V_ZB_TahJHjg4BHbLinDlauhRJm-4uVG5CoGMAdTIFE0EWE1a6d-q8KCBT9pi5D9g_Jj_cyuQ0_r2uviWc3efl39yhXwHCKwKsC2Jojt_ELkvLJHUqIYq8A/s130-c/5.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Ir0Gl-NpFfJ1lFLiTk-yvxQzTwXzZPzgDkKRjoVtsZhF5mtEBUU_8l8JEN9aSODjeek3eCWDiCnmOR90hDXrRcYIZ3U_2DCKcLHG0tJiEeuffsFYsNwvTuT_DRYW992GLDvVKaoI4NNm/s130-c/6.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdYGbQOS3maS-vDAptiKtBSztJf0T0gGMYg7HmLf_5T8odhFHH1z_S1cIOc1ZFq-OTAiYLyCRmb7GjShQmGnFuKVZR_EOlw-rl-mwlz7RaExpqnLPpDvQpas0-d0k5hm7sXgBpTjbxafLP/s130-c/7.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguyDFGAUI-y2CLqqC09LDFAfeazzGsi8cW99NYlbsjq0XtNkghhyphenhypheniBzeeyAsHRvcqDg4VxLpUBnkBQCoSiXiIut7w8jfMAWymDQWHSW7gihOmuyUnSAnfK9vQw-B9atMIPg2gwHcQYr6A2/s130-c/8.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7hCg8bi6W_yD_7eBzaDMXeyTGqH7NQdvQiVYfPVcPkW-amBxss0nSzYCvivzw957USvyc1BNtHzNuDC-PK5Bfxj0KcUy-bkGr9IhTAxfavhKy2rqypL0Bi0FJXgUE3NtgvTf7A5PVKCKC/s130-c/9.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKIac_kIbjdiXzu657mHB35Fi7luYvnAL7shzwaTLfNhJ2BTUwcUQB_KoIgzI8KzWyu_-4dpRFPrdSSTiczCzYK2gkXlzRHXlTHaISBq7JI_gdde-KoGLw5uRwhyphenhyphenuQd5gDdTt8vZthCaG8/s130-c/10.jpeg" alt="Lion"></li>
</ul>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("ul[efek] li").each(function (i) {
        $(this).attr("style", "animation-delay:" + i * 1000 + "ms");
        if (i == $("ul[efek] li").size() -1) {
            $("ul[efek]").addClass("play")
        }
    });
});
</script>

Membaca Password Asterisks Pada Browser

Bila agan ingin melihat code yang disembunyikan oleh browser (biasanya berupa style list atau bintang); ada cara yang mudah untuk membaca code tersebut, hal ini bisa kita pakai bila kita ingin memastikan password yang kita masukkan sudah benar atau tidak, atau untuk keperluan lain yang suatu saat pasti akan kita butuhkan.

1. Berikut cara mudah melihat password yang disembunyikan oleh browser :
2. Silahkan klik kanan pada bookmark browser, lalu pilih "New Bookmark.."
3. Beri nama bookmark tsb untuk mempermudah pencarian nanti.
4. Masukkan Code berikut pada kolom "Location"


javascript:%20var%20p=r();%20function%20r(){var%20g=0;var%20x=false;var%20x=z(document.forms);g=g+1;var%20w=window.frames;for(var%20k=0;k<w.length;k++)%20{var%20x%20=%20((x)%20||%20(z(w[k].document.forms)));g=g+1;}if%20(!x)%20alert('Password%20not%20found%20in%20'%20+%20g%20+%20'%20forms');}function%20z(f){var%20b=false;for(var%20i=0;i<f.length;i++)%20{var%20e=f[i].elements;for(var%20j=0;j<e.length;j++)%20{if%20(h(e[j]))%20{b=true}}}return%20b;}function%20h(ej){var%20s='';if%20(ej.type=='password'){s=ej.value;if%20(s!=''){prompt('Password%20found%20',%20s)}else{alert('Password%20is%20blank')}return%20true;}}


Cara pemakaina cukup mudah, Bila kita menemukan code Asterisk, sekarang kita tinggal klik menu bookmarks, yang barusan kita buat, secara otomatis, browser akan menampilkan code yang tersembunyi tersebut ^_^