TopBottom

Blog Tutorial

About Me

Add your donation here for a better of our service. Thanks!

Berlangganan

Anda Suka Tips Blogger Zacky?
Temukan Kami Di:
Ingin Dapat Artikel Terbaru?
rss Klik disini untuk berlangganan melalui RSS atau terima artikel di email anda dengan cara mengisi form berikut:

Facebox, Blogger Lightbox ala Facebook

Original by IFX Adrian | 10 Desember 2009 2 Comments

Wow! Lagi lagi saya akan membahas widget yang ada hubungannya dengan Facebook. Widget yang akan saya bahas kali ini adalah lightbox blogger yang bergaya Facebook, namanya Facebox. Facebox dibuat oleh Famspam.com dan dipublikasikan oleh Dynamic Drive. Jika kita meng-klik link atau foto maka akan muncul pop-up box. Sebagai contoh, coba anda klik link Contact Me pada bagian TopNavBar blog saya ini. Muncul pop-up box seperti yang ada di Facebook kan? Mau tau cara membuatnya?

Sebelum saya menjelaskan lebih lanjut, silahkan baca kutipan berikut dari Dynamic Drive tentang Facebox:

Facebox is a lightweight Facebook-style lightbox which can display images, divs, or entire remote pages (via Ajax) inline on the page and on demand. It uses the compact jQuery library as its engine, unlike Lightbox v2.0, which uses Prototype.

Nha, sekarang mari kita langsung pada pokok permasalahan...

Berikut Cara Memasang Facebox:

1. Login ke akun Blogger anda

2. Pilh Layout > Edit HTML, lalu centang Expand Widget Template

3. Cari kode </body>, lalu paste kode berikut di atasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://tipsbloggerzacky.googlecode.com/files/tbz-facebox.js' type='text/javascript'/>

<script type='text/Javascript'>
function togglediv (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className==&quot;divshown&quot;) { whichpost.className=&quot;divhidden&quot;; } else { whichpost.className=&quot;divshown&quot;; }
}
</script>

<script type='text/Javascript'>
function showhide(id) {
var elem = document.getElementById(id);
if (elem.style.display==&quot;none&quot;) elem.style.display = &quot;block&quot;;
else elem.style.display = &quot;none&quot;;}
</script>

<script type='text/javascript'>
jQuery(document).ready(function($) {
$(&#39;a[rel*=facebox]&#39;).facebox()
})
</script>



4. Selanjutnya cari kode ]]></b:skin>, lalu paste kode berikut di atasnya:

.thickstyle{background: silver;}
#facebox .b { background:url(http://tipsbloggerzacky.googlecode.com/files/b.png);}
#facebox .tl { background:url(http://tipsbloggerzacky.googlecode.com/files/tl.png);}
#facebox .tr { background:url(http://tipsbloggerzacky.googlecode.com/files/tr.png);}
#facebox .bl { background:url(http://tipsbloggerzacky.googlecode.com/files/bl.png);}
#facebox .br { background:url(http://tipsbloggerzacky.googlecode.com/files/br.png);}
#facebox { position: absolute;width:100%;top:0;left: 0;z-index: 100;text-align: left;}
#facebox .popup { position: relative;}
#facebox table { margin: auto; border-collapse: collapse;}
#facebox .body { padding: 10px; background: #fff; width: 370px;}
#facebox .loading {text-align: center;}
#facebox .image {text-align: center;}
#facebox img {border: 0;}
#facebox .footer {border-top: 1px solid #DDDDDD;padding-top: 5px; margin-top: 10px;
text-align: right;}
#facebox .header {padding-top: 0px; margin-top: 0px; text-align: right;}
#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {height: 10px; width: 10px;
overflow: hidden;padding: 0;}
.current_page_item {background:#dee5e5;color:#2299ff;}



5. Klik Save Template.

Selesai untuk pemasangan script. Lalu gimana cara menggunakannya di blog?

Tenang, setelah memasang scipt Facebox, maka kita bisa menggunakannya untuk beberapa hal, yaitu:

1. Menampilkan gambar
Kodenya:

<a href="URL-GAMBAR-ANDA" rel="facebox">NAMA LINK</a>

Contoh:

<a href="http://i45.tinypic.com/kbydxv.jpg" rel="facebox">Rock ' Roll..!!</a>

Hasilnya akan seperti ini.

2. Menampilkan tag DIV
Di dalam tag DIV kita bisa memasukkan kode-kode widget, text, pengumuman, contact form, dll. Tag DIV ini harus ditambahkan atribut style="display:none" supaya isinya tidak muncul sebelum kita meng-klik link Facebox.

Kodenya:

<a href='#ID TAG DIV' rel='facebox'>NAMA LINK DIV</a><div id='ID TAG DIV' style='display:none'>ISI TAG DIV</div>

Contoh:
<a href='#contact-me' rel='facebox'>Contact Me</a><div id='contact-me' style='display:none'>&lt;form method=&quot;post&quot; action=&quot;http://www.emailmeform.com/fid.php?formid=502783&quot; enctype=&quot;multipart/form-data&quot; accept-charset=&quot;UTF-8&quot;&gt;&lt;table cellpadding=&quot;2&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; bgcolor=&quot;#FFFFFF&quot;&gt;&lt;tr&gt;&lt;td&gt;&lt;font face=&quot;Verdana&quot; size=&quot;2&quot; color=&quot;#000000&quot;&gt;&lt;/font&gt; &lt;div style=&quot;&quot; id=&quot;mainmsg&quot;&gt; &lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;br&gt;&lt;table cellpadding=&quot;2&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; bgcolor=&quot;#FFFFFF&quot;&gt;&lt;tr valign=&quot;top&quot;&gt; &lt;td nowrap&gt;&lt;font face=&quot;Verdana&quot; size=&quot;2&quot; color=&quot;#000000&quot;&gt;Your Name&lt;/font&gt;&lt;/td&gt; &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;FieldData0&quot; size=&quot;30&quot;&gt; &lt;/td&gt;&lt;/tr&gt;&lt;tr valign=&quot;top&quot;&gt; &lt;td nowrap&gt;&lt;font face=&quot;Verdana&quot; size=&quot;2&quot; color=&quot;#000000&quot;&gt;Your Email Address&lt;/font&gt;&lt;/td&gt; &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;FieldData1&quot; size=&quot;30&quot;&gt; &lt;/td&gt;&lt;/tr&gt;&lt;tr valign=&quot;top&quot;&gt; &lt;td nowrap&gt;&lt;font face=&quot;Verdana&quot; size=&quot;2&quot; color=&quot;#000000&quot;&gt;Subject&lt;/font&gt;&lt;/td&gt; &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;FieldData2&quot; size=&quot;30&quot;&gt; &lt;/td&gt;&lt;/tr&gt;&lt;tr valign=&quot;top&quot;&gt; &lt;td nowrap&gt;&lt;font face=&quot;Verdana&quot; size=&quot;2&quot; color=&quot;#000000&quot;&gt;Message&lt;/font&gt;&lt;/td&gt; &lt;td&gt;&lt;textarea name=&quot;FieldData3&quot; cols=&quot;60&quot; rows=&quot;10&quot;&gt;&lt;/textarea&gt;&lt;br&gt; &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt; &lt;td colspan=&quot;2&quot;&gt;&lt;table cellpadding=5 cellspacing=0 bgcolor=&quot;#E4F8E4&quot; width=&quot;100%&quot;&gt;&lt;tr bgcolor=&quot;#AAD6AA&quot;&gt;&lt;td class=&quot;label&quot; colspan=&quot;2&quot;&gt;&lt;font color=&quot;#FFFFFF&quot; face=&quot;Verdana&quot; size=&quot;2&quot;&gt;&lt;b&gt;Image Verification&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td class=&quot;captcha&quot; style=&quot;padding: 2px;&quot; width=&quot;10&quot;&gt;&lt;img src=&quot;http://www.emailmeform.com/turing.php&quot; id=&quot;captcha&quot; alt=&quot;captcha&quot;&gt;&lt;/td&gt;&lt;td class=&quot;field&quot; valign=&quot;top&quot;&gt;&lt;div&gt;&lt;font color=&quot;#000000&quot;&gt;Please enter the text from the image&lt;/font&gt;:&lt;br&gt;&lt;input type=&quot;text&quot; name=&quot;Turing&quot; value=&quot;&quot; maxlength=&quot;100&quot; size=&quot;10&quot;&gt; [ &lt;a href=&quot;#&quot; onclick=&quot; document.getElementById(&#39;captcha&#39;).src = document.getElementById(&#39;captcha&#39;).src + &#39;?&#39; + (new Date()).getMilliseconds()&quot;&gt;Refresh Image&lt;/a&gt; ] [ &lt;a href=&quot;http://www.emailmeform.com/?v=turing&amp;pt=popup&quot; onClick=&quot;window.open(&#39;http://www.emailmeform.com/?v=turing&amp;pt=popup&#39;,&#39;_blank&#39;,&#39;width=400, height=500, left=&#39; + (screen.width-450) + &#39;, top=100&#39;);return false;&quot;&gt;What&#39;s This?&lt;/a&gt; ]&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt; &lt;td&gt; &lt;/td&gt; &lt;td align=&quot;right&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;hida2&quot; value=&quot;&quot; maxlength=&quot;100&quot; size=&quot;3&quot; style=&quot;display : none;&quot;&gt;&lt;input type=&quot;submit&quot; class=&quot;btn&quot; value=&quot;Send email&quot; name=&quot;Submit&quot;&gt; &lt;input type=&quot;reset&quot; class=&quot;btn&quot; value=&quot; Clear &quot; name=&quot;Clear&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td colspan=2 align=&quot;center&quot;&gt;&lt;br&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/form&gt;</div>


Maka hasilnya akan seperti Contact Me

3. Menampilkan Halaman External Yang Berekstensi .htm dalam server yang sama
Kodenya:

<a href="External.htm" rel="facebox[.thickstyle]">NAMA LINK</a>


Hmm, anda suka widget ini?
Untuk sementara, silahkan coba dulu... Jika anda punya banyak pertanyaan tentang tips ini, maka akan saya jelaskan lebih lanjut pada sesi tanya jawab tentang Facebox. Sesi tanya jawab akan saya buka setelah ada request pertama di komentar postingan ini. Jadi bagi anda yang mau bertanya tentang Facebox sedangkan sesi tanya jawabnya belum ada, silahkan request dulu disini dan langsung buat pertanyaan anda. Pertanyaan harus detail supaya jawabannya sesuai keinginan anda.

Jangan lupa kasih komentar ya...

Ok, salam blogger!!!

Bagikan Artikel Ini!

<a href="http://instaforex.com/forexcopy_system.php?x=DVXF">InstaForex</a>
Facebook Delicious Digg! Twitter Linkedin StumbleUpon Lintas Berita
Technorati Google Bookmarks Mixx Yahoo! Newsvine Reddit

Artikel Lain Yang Mungkin Anda Baca

2 komentar:

Uchiha Depri 2 Oktober 2010 13.03  

Bos Jquery untuk Facebook ya hilang to link ya bisa di perbaiki gk

sherlina halim 15 Oktober 2015 02.33  

Pengen yang lebih seru ...
Ayo kunjungi www.asianbet77.com
Buktikan sendiri ..

Real Play = Real Money

- Bonus Promo Red Card pertandingan manapun .
- Bonus Mixparlay .
- Bonus Tangkasnet setiap hari .
- New Produk Sabung Ayam ( minimal bet sangat ringan ) .
- Referal 5 + 1 % ( seumur hidup ) .
- Cash Back up to 10 % .
- Bonus Royalty Rewards setiap bulan .

Untuk Informasi lebih jelasnya silahkan hubungi CS kami :
- YM : op1_asianbet77@yahoo.com
- EMAIL : melasian77cs@gmail.com
- WHATSAPP : +63 905 213 7234
- WECHAT : asianbet_77
- SMS CENTER : +63 905 209 8162
- PIN BB : 2B4BB06A / 28339A41

Salam Admin ,
asianbet77.com

Download Disini

Poskan Komentar