Showing posts with label jQuery. Show all posts

[Ask] Cara membuat slider di postingan blogger

Blogger Cirebon 12:54 PM Blogger, Javascript, jQuery No comments

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..?

Blogger Cirebon 11:46 AM CSS, Javascript, jQuery No comments

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

Membuat image slider saat di klik bisa memberikan informasi

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 ^_^

Membuat Slider Bootstrap Yang Responsive

Blogger Cirebon 8:11 AM CSS, Javascript, jQuery No comments

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 ^_^

Mudahnya memanipulasi ukuran gambar Blogger

Blogger Cirebon 3:39 AM Blogger, jQuery No comments

Beruntungnya kita yang memakai Blogger, karena kita bisa merubah ukuran Gambar tanpa harus membuat gambar baru, selain itu gambar yang di upload ke blogger dapat kita akses menggunakan HTTPS.

Batasan gambar pada Blogger

Blogger menyimpan gambar mereka menggunakan PICASA untuk akun dengan profile Blogger, dengan batasan penyimpanan sampai 1GB, Sedangkan untuk akun yang menggunakan Profile Google+ mendapatkan 15GB yang terbagi untuk semua akun google, termasuk Google drive, Email, dan blogger itu sendiri.

Aturan URL File Gambar

Setiap gambar yang kita upload ke blogger, pasti akan mempunyai ukuran default 1600 dan biasanya menghasilkan URL : http://../.../s1600/...jpg.png.gif.etc

Berikut ini ShortCode URL Image Blogger yang ane ketahui:

s = Size ( default : s1600 )
w = Width
h = Height
c = Cropping
r = Resize

Manipulasi Ukuran Gambar

Dengan mengetahui shortcode itu, kita bisa mengoptimalkan gambar agar tidak terlalu berat, dan tanpa perlu memaksa untuk meperkecil gambar menggunakan CSS.

Suatu contoh, ane punya gambar dengan URL berikut ( Original Gambar = s1600 ):
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKPM84_Y1GyrGGi_yTM0N3QnO9JkcgjinLEOqqstAzVIgJUwxJiyj6g2qOSave0nodtLI9b5EfzK58R7u3NQSxAkwlwq7kKvHLvdFN3CxXp_0qRICQuF9c8R5gXEJB831EVER4etf4JmQ/s1600/car.jpg

Lihat perbedaan Gambar jika ane rubah URL gambar tersebut

Size 400px

Shortcode = s400
Perubahan URL = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKPM84_Y1GyrGGi_yTM0N3QnO9JkcgjinLEOqqstAzVIgJUwxJiyj6g2qOSave0nodtLI9b5EfzK58R7u3NQSxAkwlwq7kKvHLvdFN3CxXp_0qRICQuF9c8R5gXEJB831EVER4etf4JmQ/s400/car.jpg

Height = 200px

Shortcode = h200
Perubahan URL = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKPM84_Y1GyrGGi_yTM0N3QnO9JkcgjinLEOqqstAzVIgJUwxJiyj6g2qOSave0nodtLI9b5EfzK58R7u3NQSxAkwlwq7kKvHLvdFN3CxXp_0qRICQuF9c8R5gXEJB831EVER4etf4JmQ/h200/car.jpg

Width = 300px, Height = 300px kemudian ane Cropping

Shortcode = w300-h300-c
Perubahan URL = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKPM84_Y1GyrGGi_yTM0N3QnO9JkcgjinLEOqqstAzVIgJUwxJiyj6g2qOSave0nodtLI9b5EfzK58R7u3NQSxAkwlwq7kKvHLvdFN3CxXp_0qRICQuF9c8R5gXEJB831EVER4etf4JmQ/w300-h300-c/car.jpg

Mudah bukan, silahkan agan bereksperimen sendiri dengan URL gambar yang ada pada blogger, jadi ane sarankan mulai saat ini, agan jangan memperkecil ukuran gambar blogger menggunakan CSS, walaupun gambar tersebut hasilnya sama, tapi beban loadingnya akan berbeda ^_^

Trik Membuat Landing Page pada Blogger

Blogger Cirebon 8:04 AM Blogger, jQuery No comments

Pada blogger, kita bisa membuat landingpage atau halaman penawaran dengan sedikit bantuan javascript, tanpa perlu merubah template yang kita pakai saat ini, cara membuatnya cukup mudah, sebagai contoh silahkan lihat halaman penawaran Autopost Facebook milik ane, cek TKP : Autopost Facebook

Ane hanya memakai simpel jquery code berikut ini :

Code Jquery

 var cloneHead = $("#copy-head").html();
$("head").html(cloneHead);

var cloneBody = $("#copy-body").html();
$("body").html(cloneBody);

Berikut Contoh Pemakaian Code dalam landing page :

<div id='copy-head'> 

<!-- Isi dengan code html untuk bagian head --> 
<title>Judul Landing Page</title> 
<style>body {color:#eee; margin :0; padding:20px;}</style> 
<script>alert ("This is my Landing Page")</script> 

</div> 


<div id='copy-body'> 

<!-- Isi dengan code html untuk bagian body --> 
<h1>Judul Landing page</h1> 
<p>Ini Halaman Landing Page di Blogger ^_^ </p> 

</div>

<script type='text/javascript'> 
var cloneHead = $("#copy-head").html(); 
$("head").html(cloneHead); 
var cloneBody = $("#copy-body").html(); 
$("body").html(cloneBody); 
</script>

Mudah kan, cukup dengan membuat postingan baru dengan memasukkan code apa saja yang akan kita pakai dalam bagian head, dan body, layaknya sebuah landing page pada umumnya, saat halaman tersebut melakukan loading page, maka jquery akan tereksekusi, dan membuang semua code blogger, kemudian menggantinya dengan code yang sudah kita persiapkan pada landing page.

CATATAN..!

Code Javascript ditas menggunakan Jquery, jadi kalau template blogger yang saat ini agan pakai tidak memakai Jquery, silahkan tambahkan code berikut pada bagian head atau body, kalau agan bingung, silahkan lakukan test terlebih dahulu dengan membuat postingan baru, dan masukkan code yang ane beri diatas, Lihat hasilnya kalau berjalan normal, berarti agan sudah memakai Jquery, kalau tidak berjalan, tinggal tambahkan code berikut ini diatas code tadi :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Membuat Buku Catatan Online dengan Jquery

Blogger Cirebon 11:53 AM jQuery No comments

Dengan bantuan code Jquery kita akan membuat catatan online dengan tampilan layaknya sebuah buku, agar nantinya bisa kita akses dan bagikan ke teman kita, atau untuk keperluan yang lain.

Kelebihan dari buku kita kali ini adalah ukurannya yang responsive, jadi bukan hanya dengan laptop atau PC saja, tapi kita juga bisa membukanya dengan HP, ataupun Tablet, asalkan terdapat koneksi Internet ^_^

Membuat Buku Catatan Online dengan Jquery

Contoh catatan ane kali ini adalah kumpulan cerita Abu Nawas yang ane dapat dari berbagai sumber, silahkan lihat demonya disini :

Demo Flip Book - Abu Nawas

Ane simpan semua code jquery itu kedalam googledrive, untuk mempercepat loading, jadi sekarang kita hanya membutuhkan code HTML sebagai penampakan buku dan artikelnya, berikut code yang akan kita pakai sebagai front end ( tampilan depan ).

Langkah 1 :: Buat Code HTML

Silahkan buka Notepad dan masukkan code berikut, kemudian simpan dengan nama minibook.html

 
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>TITLE BUKU</title>
    <link rel="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU-ZSVEInYlcyRMHApsmXDm7l71EvNvjpISpUzDMbEZW0BnMxpD-3KKYIxCb9MJLNPU7nbT0VYnzrOfSqjVuS6OR1BCzkba1yt1961lNtyi65OkW8CUYHvBYNb0UOQg9zDgM7LdPtU97M/s25-c/icon-webjalanan.png" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0BwxBVI9xP07VT3ZYaU5HckhZTXM" />       
</head>
<body>
<div id="container" class="container">
<!-- MENU BUKU -->
<div class="menu-panel">
    <h3>JUDUL BUKU</h3>
    <ul id="menu-toc" class="menu-toc"> 
<li class="menu-toc-current"><a href="#page1">Judul Artikel-1</a></li>
    <li><a href="#page2">Judul Artikel-1</a></li>
    <li><a href="#page3">Judul Artikel-1</a></li>
    <li><a href="#page4">Judul Artikel-1</a></li>
    <li><a href="#page5">Judul Artikel-1</a></li>
    </ul>
    <div id="flipbook"></div>
</div>
   
<div class="bb-custom-wrapper">
<div id="bb-bookblock" class="bb-bookblock">

    <!-- ARTIKEL 1 -->
    <div class="bb-item" id="page1">
    <div class="content">
    <div class="scroller">
    <h2>Judul Artikel 1 </h2>
    <p>Deskripsi dan Isi Artikel 1</p>
    </div>
    </div>
    </div>

    <!-- ARTIKEL 2 -->
    <div class="bb-item" id="page2">
    <div class="content">
    <div class="scroller">
    <h2>Judul Artikel 2 </h2>
    <p>Deskripsi dan Isi Artikel 2</p>
    </div>
    </div>
    </div>

    <!-- ARTIKEL 3 -->
    <div class="bb-item" id="page3">
    <div class="content">
    <div class="scroller">
    <h2>Judul Artikel 3 </h2>
    <p>Deskripsi dan Isi Artikel 3</p>
    </div>
    </div>
    </div>

    <!-- ARTIKEL 4 -->
    <div class="bb-item" id="page4">
    <div class="content">
    <div class="scroller">
    <h2>Judul Artikel 4 </h2>
    <p>Deskripsi dan Isi Artikel 4</p>
    </div>
    </div>
    </div>

    <!-- ARTIKEL 5 -->
    <div class="bb-item" id="page5">
    <div class="content">
    <div class="scroller">
    <h2>Judul Artikel 5 </h2>
    <p>Deskripsi dan Isi Artikel 5</p>
    </div>
    </div>
    </div>

<nav>
<span id="bb-nav-prev">&larr;</span>
<span id="bb-nav-next">&rarr;</span>
</nav>
<span id="tblcontents" class="menu-button">Daftar Isi</span>
</div>
</div>
</div>

<!-- JQUERY SCRIPT -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0BwxBVI9xP07VUkdiLWlaZkVVM1E"></script>
<script type="text/javascript" src="https://googledrive.com/host/0BwxBVI9xP07VMEp2ZlJJUmF3VVU"></script>
<script type="text/javascript" src="https://googledrive.com/host/0BwxBVI9xP07VQW96TU1GWXcwM1E"></script>
<script type="text/javascript" src="https://googledrive.com/host/0BwxBVI9xP07Vb25Wazd1RG9relE"></script>
<script type="text/javascript" src="https://googledrive.com/host/0BwxBVI9xP07VOC16RDMtN2s0QWM"></script>
<script type="text/javascript" src="https://googledrive.com/host/0BwxBVI9xP07Vb21kc2lTaFJNYkE"></script>
<script>$(function() { Page.init();});</script>
</body>
</html>

Rubah Judul dan Isi Artikel sesuai dengan buku yang agan inginkan, pelajari dulu konsep penataan codenya bila agan ingin menambahkan lebih dari 5 Artikel ( dalam contoh code, ane hanya memberi 5 artikel ).

Langkah 2 :: Upload ke Google Drive

Pastikan terlebih dahulu file minibook.htm agan sudah benar, dengan membukanya menggunakan Browser Firefox, Chrome atau yang lain. Bila file sudah benar silahkan buka https://drive.google.com
Pilih New ==> File Upload

Langkah 3 :: Share File minibook.html

Ada dua cara untuk share minibook yang telah kita buat.

Melalui link share yang muncul setelah selesai upload
Melalui icon share yang ada pada menu Google Drive

Pada pop up sahre Pilih link Advanced yang berada pada pojok kanan Bawah,
kemudian pilih sahring On - Public on the web , agar semua orang bisa melihat buku agan.

Langkah 4 :: Short URL + QR Code ( Optional )

Setelah langkah dua selesai, kita akan mendapatkan link share yang terlihat seperti ini :

https://drive.google.com/open?id=0BwxBVI9xP07VdC1LTV9TNWlWcG8
https://drive.google.com/file/d/0BwxBVI9xP07VdC1LTV9TNWlWcG8/view?usp=sharing

Code yag ane bold warna merah merupakan id file kita di google drive, untuk melihat tampilan buku yang barusan kita buat, silahkan buka dengan alamat URL berikut :

https://googledrive.com/host/IdGoogleDrive
Contoh jadinya seperti ini :
https://googledrive.com/host/0BwxBVI9xP07VdC1LTV9TNWlWcG8

Sampai sini, Buku karya agan sudah bisa dibuka secara Online, akan tetapi akan sangat susah untuk mengingat link yang panjang tersebut, untungnya google sudah mempersiapkan ShortURL untuk kita, dengan tambahan Fitur QR Code untuk Android.

Caranya Short URL dan membuat QR code cukup mudah :

Silahkan masuk ke https://goo.gl
Masukkan Link yang panjang diatas kemudian Klik Shorten URL

Untuk QR Code, tinggl kita tambahkan saja .qr pada bagian belakang URL Shortner tersebut.
Contoh :

URL Shortner ==> https://goo.gl/KzS3Wb
Ambil QR Code ==> https://goo.gl/KzS3Wb.qr

Dan hasilnya akan muncul gambar QR Code seperti ini :

Sekarang kita bisa membagikan link Shortner kita untuk dijadikan buku catatan online, atau kalau agan mempunyai Android, tinggal scan saja gambar QR Code.

OK Selamat berkreasi gan ^_^

Membuat Efek Bounce In Left

Blogger Cirebon 7:29 PM CSS, Javascript, jQuery No comments

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>

Mengamankan Bandwidth Hosting Dari Image Postingan

Blogger Cirebon 4:48 AM jQuery, Trik, Wordpress No comments

Berbeda dengan blog gratis seperti misalnya blogspot atau wordpress.com yang dapat mengupload gambar atau image tanpa batas, wordpress self hosted harus mikir dua kali untuk menambahkan image ke dalam postingan.

Gambar merupakan salah satu unsur yang cukup banyak mengkonsumsi bandwidth pada hosting. Jika ingin menghemat bandwidth, sebaiknya gunakan share image hosting seperti Google+ atau Picassa. Namun ada yang mengatakan bahwa image yang dihosting di pihak lain akan memperlambat loading blog.

Nah untuk itu kini saya share cara agar image yang dihosting di pihak lain tidak memperlambat loading blog wordpress self hosted.

Sebenarnya cara ini sama dengan cara mempercepat loading blogspot dengan menunda penayangan image postingan (deferring image).

Namun seperti halnya blogspot, wordpress yang menggunakan gambar yang dihosting di pihak lain tidak bisa menampilkan thumbnail di homepage atau widget lain yang menggunakan thumbnail. Biasanya wordpress memiliki fitur Featured Image untuk thumbnail postingan. Dengan begitu kita perlu penanganan lanjutan agar gambar postingan bisa tampil sebagai thumbnail di homepage.

Nah penundaan penampilan gambar ini menggunakan trik menggunakan gambar dengan data:base64 dengan size yang sangat kecil untuk mengganti sementara gambar sesungguhnya. Dengan begitu peramban tidak mengupload gambar bersamaan dengan loading blog (sementara gambar diganti dengan gambar base64), namun setelah blog termuat seluruhnya. Dengan begitu loading blog tidak akan terganggu oleh loading image.

Penempatan gambarnya menggunakan kode di bawah ini.

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="URL IMAGE ASLI DARI PICASSA ATAU LAINNYA" alt="" title="" width="" height="" />

Kemudian tambahkan javascript di bawah ini di atas kode </body>. Pada tema yang saya gunakan memiliki fitur Theme Options yang bisa menempatkan script di atas kode </body>.

<script type='text/javascript'>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

Nah jika ternyata thumbnail postingan tidak muncul, silahkan gunakan script php untuk menampilkan gambar postingan (gambar pertama/first image post) pada link di bawah ini.

How to: Get the first image from the post and display it

Trik ini sudah saya coba di blog wordpress saya AyoInter.net, silahkan coba lihat thumbnail postingan di homepage atau postingan. Klik kanan pada thumbnail dan open image in new tab kemudian lihat url image di address bar. Itu adalah url image dari Picassa bukan dari hosting wp saya.

Dengan ini pula kita bisa menghindari pencurian bandwidth karena penggunaan image (yang dihosting sendiri) yang digunakan orang lain.

Sticky Recent Post Slide Out On Scroll

Blogger Cirebon 4:45 AM Blogger, jQuery, Trik, Widget No comments

Puter-puter cari ide postingan, akhirnya menemukan sesuatu juga. Saya menemukan sebuah generator widget untuk related post dari moretechtips.net yang menghasilkan related post atau recent post yang cukup keren dengan efek rolling posts. Kemudian muncul sebuah ide untuk memodifikasinya untuk dijadikan sebagai sticky widget yang muncul ketika halaman discroll.

Untuk penampakan sticky recent post slide out on scroll widget ini silahkan lihat di animasi gif di bawah ini.

Atau silahkan coba langsung pada link demo di bawah ini. Silahkan scroll halaman kotaknya.

Demo JSFiddle

Untuk mencobanya, silahkan copy kode CSS di bawah ini dan simpan di atas kode ]]></b:skin> atau kode </style>

.related-posts-widget{position:fixed;bottom:80px;right:0;display:none}
.related-posts-widget h2{color:#555;margin:0;padding:3px 6px 3px 0;font-weight:300;font-size:26px;font-family:inherit}
ul.rpw{list-style-type:none!important;margin:0;padding:0}
ul.rpw li{width:322px;overflow:hidden;margin:0;position:relative;list-style-type:none!important}
ul.rpw a{text-decoration:none;outline:0}
ul.rpw img{border:0;width:100%;height:auto;margin-bottom:-4px}
ul.rpw strong{background:#59a5d9;color:#fff;z-index:5;line-height:1.2em!important;position:absolute;bottom:0;left:0;right:0;height:auto;padding:4px 8px;font-weight:400;font-size:14px;font-family:inherit}
ul.rpw a strong{display:none}
ul.rpw a:hover strong{display:block}
.ani-dur{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;animation-duration:1s;}
@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
100%{opacity:1;-webkit-transform:none;transform:none}}
.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}

Kemudian simpan kode javascript di bawah ini di atas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
(function(c){c.fn.relatedPostsWidget=function(s){if(!this.size())return this;s=c.extend({},c.fn.relatedPostsWidget.defaults,s);return this.each(function(){var k=c(this),z=0,g=null,p=null,t=0,q=0,l=-1,n=-1,u=-1,r=null,v=0,w=null,A="",b=s,F=function(){if(!((l+1)*b.show_n>=q&&!b.animate_loop))if(!v){c("li",g).eq(n).fadeOut(b.exit_time,B);b.show_n>1&&c("li",g).slice(n+1,u).fadeOut(b.exit_time)}},B=function(){if(g.parent().size()){l++;if(l*b.show_n>=q)l=0;n=l*b.show_n;u=(l+1)*b.show_n;c("li",g).eq(n).animate(r,
b.enter_time,"linear",C);b.show_n>1&&c("li",g).slice(n+1,u).animate(r,b.enter_time)}},C=function(){w&&clearTimeout(w);w=setTimeout(F,b.stay_time)},G=function(){r={};r[b.animate]="show";g.bind("mouseenter",function(){v=1}).bind("mouseleave",function(){v=0;C()});B()},x=function(){if(!(t||!g)){b.loading_class&&g.removeClass(b.loading_class);b.max_posts&&b.tags.length&&c("li:gt("+(b.max_posts-1)+")",g).remove();q=c("li",g).size();b.tags.length&&b.timeout&&b.max_posts&&c("img",g).each(function(){var d=
c(this);d.attr("rel")&&d.attr("src",d.attr("rel"))});if(b.show_n==0)c("li",g).show();else q&&G();t=1}},E=function(d){if(!t){z++;if(d.feed.entry){if(!g){k.html("");if(b.tags.length==0)b.recent_title&&c("<h2>"+b.recent_title+"</h2>").appendTo(k);else b.related_title&&c("<h2>"+b.related_title+"</h2>").appendTo(k);g=c('<ul class="rpw '+b.loading_class+'"></ul>').appendTo(k)}for(var i=0,o=d.feed.entry.length;i<o;i++){var e=d.feed.entry[i],h;a:{var f=0;for(h=e.link.length;f<h;f++)if(e.link[f].rel=="alternate"){h=
e.link[f].href;break a}h=""}f=e.title.$t;e=e.media$thumbnail?e.media$thumbnail.url:b.thumb_default;if(h!=A||b.tags.length==0)a:{var j=h,m=f,H=e;if(b.tags.length>0){e=c("li",g);f=0;for(var I=e.length;f<I;f++){var y=c("a",e.eq(f));h=D(y);if(y.attr("href")==j){j=y;m=++h;j.attr("score",m);b.post_score_class&&j.attr("class",b.post_score_class+m);for(j=f-1;j>=0;j--){m=c("a",e.eq(j));if(D(m)>h){f-j>1&&e.eq(j).after(e.eq(f));break a}}f>0&&e.eq(0).before(e.eq(f));break a}}}e=j;f=m;h=H;if(b.thumb_size!="s72-c")h=
h.replace("/s72-c/","/"+b.thumb_size+"/");j=b.tags.length&&b.timeout&&b.max_posts?"rel":"src";g.append('<li style="display:none"><a href="'+e+'" title="'+f+'">'+(b.thumbs&&h?"<span><img alt='thumbnail post' "+j+'="'+h+'" title="'+f+'"/></span>':"")+(b.titles?"<strong>"+f+"</strong>":"")+"</a></li>")}}}if(z>=b.tags.length){p&&clearTimeout(p);x()}}},D=function(d){d=parseInt(d.attr("score"));return d>0?d:1},J=function(){if(!b.tags){b.tags=[];c('a[rel="tag"]:lt('+b.max_tags+")").each(function(){var e=c.trim(c(this).text().replace(/\n/g,
""));if(c.inArray(e,b.tags)==-1)b.tags[b.tags.length]=e})}var d=b.blog_url+"/feeds/posts/summary/";if(b.tags.length==0){if(b.timeout)p=setTimeout(x,b.timeout);c.ajax({url:d,data:{"max-results":b.max_posts,alt:"json-in-script"},success:E,dataType:"jsonp",cache:true})}else{if(b.timeout)p=setTimeout(x,b.timeout*b.tags.length);for(var i=0,o=b.tags.length;i<o;i++)c.ajax({url:d,data:{category:b.tags[i],"max-results":b.posts_per_tag,alt:"json-in-script"},success:E,dataType:"jsonp",cache:true})}};(function(){var d=
k.attr("data-options");if(!d){var i=k.html().replace(/\n|\r\n/g,"");if(i)if((i=i.match(/<!--\s*(\{.+\});?\s*--\>/))&&i.length==2)d=i[1]}if(d){if(d.indexOf("{")<0)d="{"+d+"}";try{b=eval("("+d+")")}catch(o){a.html('<b style="color:red">'+o+"</b>");return null}b=c.extend({},c.fn.relatedPostsWidget.defaults,b)}if(b.post_page_only?location.pathname.match(/^\/\d{4}\/\d\d\/[\w\-\_]+\.html/):true){A=location.protocol+"//"+location.host+location.pathname+(b.url_querystring?location.search:"");J()}})()})};
c.fn.relatedPostsWidget.defaults={blog_url:"http://www.kompiajaib.com/",max_posts:5,max_tags:5,posts_per_tag:5,tags:false,loading_class:"rpw-loading",related_title:"Related Posts",recent_title:"Recent Posts",post_score_class:"",post_page_only:0,thumb_default:"",thumb_size:"s72-c",thumbs:1,titles:1,url_querystring:0,timeout:1500,show_n:0,stay_time:5E3,enter_time:200,exit_time:200,animate:"opacity",animate_loop:1}})(jQuery);jQuery(document).ready(function(){jQuery("div.related-posts-widget").relatedPostsWidget()});
$(window).scroll(function(){if ($(this).scrollTop()>1000){$('.related-posts-widget').fadeIn();}else{$('.related-posts-widget').fadeOut();}});
//]]>
</script>
<div class="related-posts-widget ani-dur fadeInRight"> 
<!-- {
    thumb_size:'s320'
	,max_posts:5
	,show_n:1
} -->
</div>
</b:if>

Kode yang berwarna merah silahkan ganti dengan URL blog Anda.

Ini akan menampilkan thumbnail dari recent post dengan lebar 320px dan tinggi menyesuaikan sehingga tinggi gambar akan berubah-rubah sesuai dengan gambar sesungguhnya. Jika Anda ingin menentukan tinggi gambarnya agar thumbnail yang muncul memiliki tinggi yang sama, silahkan ganti kode height:auto menjadi height:160px pada kode CSS ini.

ul.rpw img{border:0;width:100%;height:auto;margin-bottom:-4px}

Iklan Gambar ala Google AdSense

Blogger Cirebon 5:12 PM Blogger, jQuery No comments

Iklan Gambar ala Google AdSense - Setelah membuat template, saya mencoba membuat iklan gambar yang menyerupai GA maksutnya gambar akan berbeda setiap kali reload halaman. Sebenarnya ini hanya memanipulasi html menjadi JavsScript

Untuk pemasangan juga mudah, sobat hanya perlu menambakan widget baru, berikut kodenya:

  <script type="text/javascript">
    var jumlah_iklan = 3;
    var waktu_sekarang = new Date()
    var detik = waktu_sekarang.getSeconds()
    var pasang_iklan = detik % jumlah_iklan;
    pasang_iklan += 1;
    if (pasang_iklan == 1) {
    url = "http://the-anarchyta.blogspot.com/2014/03/subculture-responsive-blogger-template.html";
    alt = "Subculture Responsive Blogger Template";
    title = "Subculture Responsive Blogger Template";
    banner = "http://4.bp.blogspot.com/-mYwieyawg84/U3ybJtGe92I/AAAAAAAABFQ/kKXwtDOACys/s1600/dian-anarchyta.png";
    width = "300";
    height = "250";
    }
    if (pasang_iklan == 2) {
    url = "http://the-anarchyta.blogspot.com/2014/04/responsive-original-blogger-template.html";
    alt = "Responsive Original Blogger Template";
    title = "Responsive Original Blogger Template";
    banner = "http://1.bp.blogspot.com/--hDKmIUbjEY/U3ybPr1KjAI/AAAAAAAABFg/nHFx087tiX4/s1600/Origin-BTemplate.png";
    width = "300";
    height = "250";
    }
    if (pasang_iklan == 3) {
    url = "http://the-anarchyta.blogspot.com/2014/05/the-fiseo-magz-blogger-template.html";
    alt = "FiSEO Responsive Blogger Template";
    title = "FiSEO Responsive Blogger Template";
    banner = "http://3.bp.blogspot.com/-sRTcKjWzSfs/U3ybMb0wdAI/AAAAAAAABFY/zkCb_uJJ9h8/s1600/fiseo-mag.png";
    width = "300";
    height = "250";
    }
    document.write('<a href=\"' + url + '\" target=\"_blank\" rel=\"nofollow\">');
    document.write('<img src=\"' + banner + '\" width=')
    document.write(width + ' height=' + height + ' ');
    document.write('title=\"' + title + '\" alt=\"' + alt + '\"></a>');
    </script>

Keterangan
url : silahkan ganti dengan url tujuan iklan.
alt : silahkan tulis keterangan gambar.
title : silahkan tulis judul gambar.
banner : silahkan ganti url gambar.
width : Lebar gambar.
height : Tinggi gambar.

Semoga bermanfaat !