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.. :)
SUBSCRIBE TO OUR NEWSLETTER

Add Your Comments

bold <b></b>
italic <i></i>
underline <u></u>
HTML <code></code> use Parser

Emoticon
Parser
Out Of Topic
😊
😉
😀
😁
😎
😍
😜
😑
😇
💖
😯
😱
😭
👍
🍻