Top Info
RELOAD.ID | Jasa Web Pulsa Murah Master Server Pulsa
✉ info@reload.id
Mengapa Pilih Reload ID ?
Beberapa alasan kenapa kamu harus menggunakan layanan Jasa Web Pulsa dari Reload ID
Harga Jasa Web Pulsa Murah Kami
Tentunya dapat disesuaikan dengan kebutuhan Anda :)

Starter

Platform Blogspot 

[harga]500rb* Tahun pertama [/harga] Domain PREMIUM Contoh : www.mitrapulsaku.com Domain (.com/.net/.org) Hosting Blogger Unlimited Bandwidth Admin Panel Responsive Theme SEO Friendly [harga] 250RB / TAHUN[/harga]

[order]Starter[/order]

Professional

Platform Wordpress 

[harga]850rb* Tahun pertama [/harga] Domain PREMIUM Contoh : www.bospulsa-semarang.com Domain (.com/.net/.org) Hosting 500 Mb Unlimited Bandwidth Admin Panel Responsive Theme SEO Optimal [harga] 450RB / TAHUN[/harga]

[order]Professional[/order]

Web Pulsa

Web Pulsa Otomatis

[harga]2jt Tahun pertama [/harga] Domain PREMIUM Contoh : https://w38s.com Domain (.com/.net/.org) Hosting 1.5GB SSD Unlimited Bandwidth Admin Panel Responsive Theme SEO Custom [harga] 600 / TAHUN[/harga]

[order]Pulsa Otomatis[/order]

Mengganti Default Lightbox Blogger dengan SimpleLightbox

Mengganti Default Lightbox Blogger dengan SimpleLightbox oleh reload.id. Semakin hari blogger.com milik google senantiasa memperbarui fitur-fitur pada cms gratis dengan unlimitted bandwidth terbaik yang terkenal dengan subdomain .blogspot.com serta dapat dicustom domain seperti web reload.id ini. update terkini yang baru-baru ini dilakukan oleh google yaitu merubah tampilan dashboard blogger dengan tampilan yang lebih menarik dan fast loading.

Dengan fitur-fitur dan widget yang sudah ada pada bawaan default blogger, dengan bermodalkan css dan js maka blogger menjadi website yang bisa dikustomisasi dari tampilan hingga fungsionalitasnya. Pada kesempatan kali ini admin mau share tentang Mengganti Default Lightbox Blogger dengan SimpleLightbox yang biasa admin terapkan pada template blog untuk jasa website client dari reload.id.

Contoh Lightbox Bawaan Blogger

Apa itu lightbox ?

Lightbox dalam dunia website adalah satu fitur untuk menampilkan gambar atau media lainnya pada kotak munculan tanpa menutup halaman yang sedang kita buka. media yang didukung bisa seperti gambar, video, iframe, ajax, dan lain-lain. Lightbox bisa ditambahkan pada website menggunakan Jquery, Vanilla JS / Pure JS (alias tanpa jquery) bahkan Pure CSS sekalipun. Keuntungan menggunakan lightbox pada website, kita tidak perlu membuka tab baru untuk membuka sebuah media dan tidak perlu melakukan reload atau meload ulang halaman yang sedang kita akses jika kita ingin kembali / menutup media tersebut. Kekurangannya kita menambah script berupa JS atau Library JS dan CSS pada website kita.

SimpleLightbox adalah lightbox yang ringan (ligthweight) dan responsif tanpa dependencies. Dapat menampilkan gambar, galeri, video atau konten khusus dan kontrol lightbox Anda dengan api yang mudah digunakan. Beratnya kurang dari 3KB saja.

simplelightbox-blogger
Contoh Lightbox Custom Content berupa Div dari HTML

Pada kesempatan kali ini kita akan menerapkan SimpleLightbox untuk menggantikan default Lightbox Image milik Blogger, Berikut langkah-langkahnya :

Menonaktifkan Default Lightbox Bawaan Blogger.

  1. Masuk ke Blogger
  2. Pilih Setting
  3. Scroll ke Bawah pada bagian Posts 
  4. Nonaktifkan Image Lightbox.


Adapun langkah untuk menonaktifkan Image lightbox blogger bisa dengan cara mengedit template html untuk menghapus file js bawaan blogger. namun untuk saat ini kita cukup menonaktifkan lewat pengaturan.

Memasang SimpleLightbox pada Template Blogger

  1. Masuk ke Blogger
  2. Pilih Menu Theme klik tombol Customise, pilih Edit HTML

  3. Tambahkan script js dan css simplelightbox berikut bisa ditaro sebelum </head> atau sebelum </body> :
    [code]<b:if cond='data:blog.pageType != &quot;index&quot;'> <!-- aktif diselain halaman index --> <link href='https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.css' rel='stylesheet'/> <script src='https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.js'/> </b:if>[/code]
  4. Untuk selectornya bisa menggunakan versi JS atau Jquery. Untuk selector gambar blogger defaultnya memliki class separator sebelum kode ahref ke link gambar. maka kita tambahkan kode berikut setelah sebelum kode </body> :
    [js]<script> // Pure js new SimpleLightbox({elements: '.separator a'}); // atau jQuery $('.separator a').simpleLightbox(); </script>[/js]
  5. Terakhir simpan dan lihat pada halaman statis atau item post artikel kita.
Untuk demonya bisa lihat pada halaman gallery demo reload.id karena di website ini pun sudah diterapkan menggunakan simplelightbox. jika ada yang perlu ditanyakan silahkan berkomenter.

Untuk versi bahasa inggris alias sumbernya bisa lihat dihalaman http://dbrekalo.github.io/simpleLightbox/

Sekian untuk tutorial Mengganti Default Lightbox Blogger dengan SimpleLightbox mudah-mudah bisa bermanfaat buat sobat semua.

 
Ingin Server Pulsa Mu Tampil Disini ? Hub : 0897-321-7073 !