Home → Semua Post Berkategori Blogging Tutorial
Tampilkan postingan dengan label Blogging Tutorial. Tampilkan semua postingan
Tampilkan postingan dengan label Blogging Tutorial. Tampilkan semua postingan
Jumat, Februari 06, 2015
1 comments

Cara Membuat Lightbox Evolution pada Blog dengan JQuery



Cara Membuat Lightbox Evolution pada Blog dengan JQuery- - adalah sebuah fitur di Blogger yang memungkinkan sebuah gambar jika diklik oleh pengunjung maka gambar tersebut akan tampil dalam ukuran besarnya tapi pengunjung masih berada di halaman yang sama, dan jika halaman yang dibaca pengunjung tersebut memiliki beberapa gambar di dalamnya maka gambar-gambar tersebut akan ditampilkan dalam bentuk thumbnail di bagian bawahnya,
untuk keluar dari mode tampilan gambar penuh tersebut pengunjung cukup klik saja di area kosong (bukan gambar).

Untuk DEMO, Sobat bisa klik saja pada gambar yg ada di halaman ini.
 dan bagi sobat yang ingin menerapkan lightbox ini, silahkan ikuti langkah mudahnya :

1. Pasang framework jQuery diatas kode </head>:


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Apabila sudah terpasang jQuery silahkan ganti dengan versi 1.7.2, karena saya coba dengan beberapa versi sampai yang terbaru, tidak bisa bekerja

2. Pasang Lightbox jQuery serta CSS-nya masih di atas kode </head>

<link href='http://kang-is.googlecode.com/svn/trunk/css/lightbox.css' rel='stylesheet' type='text/css'/>
<script src='http://kang-is.googlecode.com/svn/trunk/javascript/lbev2.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[ 
jQuery(document).ready(function(){$('.lightbox').lightbox()});
//]]>
</script>

3. Simpan Template

Cara Penggunaan

Untuk penggunaan Lightbox Evolution ini, cukup tambahkan class='lightbox' pada url tujuan. Untuk lebih lengkapnya lihat cara penggunaan dibawah ini :

Gambar Satuan



<a href="url-gambar-besar" class="lightbox"><img src="url-gambar-kecil" alt=""/></a>
<a href="url-gambar-besar" class="lightbox"><img src="url-gambar-kecil" alt=""/></a>
<a href="url-gambar-besar" class="lightbox" title="Untuk menambahkan deskripsi seperti ini, tambah title"><img src="url-gambar-kecil" alt=""/></a>

Untuk menambahkan class='lightbox' pada setiap gambar secara otomatis, simpan kode ini di atas </body>

<script type='text/javascript'>
  jQuery(document).ready(function(){
    $(&#39;a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)&#39;).lightbox();
  });
</script>

Album / Gallery


Untuk membuat Gallery, tambahkan nama album dengan menggunakan tag rel contoh rel="nama-album"



<a href="url-gambar-besar" rel="nama-album" class="lightbox"><img src="url-gambar-kecil" alt=""/></a>
<a href="url-gambar-besar" rel="nama-album" class="lightbox"><img src="url-gambar-kecil" alt=""/></a>
<a href="url-gambar-besar" rel="nama-album" class="lightbox" title="Untuk menambahkan deskripsi seperti ini, tambah title"><img src="url-gambar-kecil" alt=""/></a>

Oke sekian Tutorial tentang - Cara Membuat Lightbox Evolution pada Blog dengan JQuery
Semoga Bermanfaat ^^
Jumat, Agustus 22, 2014
1 comments

Cara Menghilangkan Kotak Komentar Bawaan di Blog,

Gambar : Contoh Kotak Komentar pada Blog

Bagi anda yang tidak mau blog-nya dikomentari oleh orang lain atau ingin menggantinya dengan Komentar Facebook, maka anda tidak salah 
berkunjung Kesini.
Disini saya akan beritahu 2 cara untuk menghilangkan kotak komentar blog, agar anda bisa memilih cara mana yang mudah untuk di-lakukan. 
Berikut Tutorial-nya: 

1.Melalui Edit HTML
  • Masuk ke dashboard
  • Pilih Template
  • Unduh Template Lengkap (agar mengantisipasi saat anda berubah pikiran)
  • Edit HTML
  • Centang tulisan Expand Template Widget
  • Tekan Ctrl+F pada keyboard, lalu cari kode yang seperti di-bawah ini
<p class='comment-footer'>


    <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>
    <b:include data='post' name='comment-form'/>
    <b:else/>
    <data:post.noNewCommentsText/>
    </b:if>
    <b:else/>
    <b:if cond='data:post.allowComments'>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
    </b:if>


    </p>
  • Setelah ketemu, kemudian hapus kode diatas
  • Simpan Template
  • Selesai.
2.Melalui Menu Pengaturan
  • Pilih Setelan
  • Pos dan komentar
  • Dalam pilihan Lokasi Komentar ? Pilih Sembunyikan
  • Simpan Setelan
  • Selesai.

Pilih cara yang paling mudah bagi anda. 
Kalau saya pakai cara ke-2 yang saya anggap lebih mudah.
Semoga tutorial ini bermanfaat.
>> HAVE A NICE DAY <<

Teman.

Back to Top