08 January 2015

Membuat Lightbox Webpage di Blog

Lightbox Webpage

Lightbox Webpage ~ Apa itu Lightbox Webpage? Jawabannya adalah, jika Link yang kita pilih di Klik maka akan memunculkan Lightbox, tapi isinya bukan Tulisan atau gambar, melainkan Webpage, dari link itu sendiri.

Saya menemukan Lightbox jenis ini, saat saya sedang mencari Inspirasi untuk design saya sendiri, lalu saya menemukan Lightbox jenis ini di Blog.KangRian.com ya cukup menarik.. saya juga menemukan banyak tutorial blog keren dan menarik di sana. Mungkin sobat sudah banyak yang mengenal Blog Kang Rian

Untuk Lebih jelasnya mengenai tutorial ini, silahkan sobat lihat Demonya di bawah ini :


Ok kita langsung saja ke tutorial "Membuat Lightbox Webpage di Blog"
  • Masuk ke Blogger >> Template >> Edit HTML
Langkah Pertama HTML, letakan HTML di bawah ini di Link yang sobat Pilih.

Note : Kode di bawah ini adalah HTML Linknya, jadi tidak usah membuat Link baru.

 <a class='lightbox' data-options='{"width":1100, "height":600, "iframe": true}' href='http://blanter-forever.blogspot.com' itemprop='url'>Dunia Blanter</a> 

Langkah Kedua, letakan CSS dan Javascript di bawah ini tepat di atas </head>

 <link href='https://8579a835711466b329532f888fdef8b5efd2a89d.googledrive.com/host/0B495PN79xGJ6Q1VRQVhfeTVlREk/lightbox-blanter.css' rel='stylesheet' type='text/css'/>
<script src='https://8579a835711466b329532f888fdef8b5efd2a89d.googledrive.com/host/0B495PN79xGJ6Q1VRQVhfeTVlREk/lightbox-blanter.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[ 
jQuery(document).ready(function(){$('.lightbox').lightbox()});
//]]>
</script> 

Lalu.. Simpan Template...

Semoga Tutorial ini Bermanfaat.. :)
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic