Scribd Logo
Carica

Benvenuto in Scribd!

  • FACEBOX Di Blogspot

    Caricato da

    Faust Alexist
    18 visualizzazioni4 pagine

    Titolo originale

    FACEBOX di blogspot

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    DOC, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato DOC, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    18 visualizzazioni4 pagine

    FACEBOX Di Blogspot

    Caricato da

    Faust Alexist

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato DOC, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 4

    Membuat "Facebox" Pop Up Bergaya Facebook (JQuery)

    Posted by: Yudhaime Mangetsu Category: Blogger Tricks , facebook , Pop up , trick blog , Widget , Comments (4) Siapa sih yang gak kenal Facebook? Jejaring Sosial buatan Mark Zuckernberg yang paling diminati saat ini. Facebook memiliki tampilan web yang cukup khas dengan warna putih biru, dan salah satu ciri paling unik dari Facebook adalah tampilan pop up yang minimalis tapi menarik. Popup ini tentunya memberi PR tersendiri bagiku untuk mengetahui cara pembuatannya. Caranya Simple kok!

    Login dulu ke akun Blogger kamu Masuk ke menu "rancangan" pilih submenu "edit HTML" Copy kode CSS dan seperti biasa dipaste diatas ]]></b:skin>

    /*Facebox*/ #facebox .b { background:url(http://i31.tinypic.com/2dreyva.jpg); } #facebox .tl { background:url(http://i32.tinypic.com/ta3p53.jpg); } #facebox .tr { background:url(http://i28.tinypic.com/2wf639t.jpg); } #facebox .bl { background:url(http://i27.tinypic.com/ea1o1x.jpg); } #facebox .br { background:url(http://i26.tinypic.com/20fcisk.jpg); } #facebox { position: absolute; top: 0; left: 0; z-index: 100; text-align: left; } #facebox .popup { position: relative; } #facebox table {

    border-collapse: collapse; } #facebox td { border-bottom: 0; padding: 0; } #facebox .body { padding: 10px; background: #fff; width: 370px; } #facebox .loading { text-align: center; } #facebox .image { text-align: center; } #facebox img { border: 0; margin: 0; } #facebox .footer { border-top: 1px solid #DDDDDD; padding-top: 5px; margin-top: 10px; text-align: right; } #facebox .tl, #facebox .tr, #facebox .bl, #facebox .br { height: 10px; width: 10px; overflow: hidden; padding: 0; } #facebox_overlay { position: fixed; top: 0px; left: 0px; height:100%;

    width:100%; } .facebox_hide { z-index:-100; } .facebox_overlayBG { background-color: #000; z-index: 99; } * html #facebox_overlay { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); }

    Pasang script JQuery di bawah ini dengan mempastenya diatas

    <script src='http://mangetsu.googlecode.com/files/faceboxx.js' type='text/javascript'/>

    Copy lagi script ini dan paste dibawah kode JQuery tadi

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

    Simpan Template!

    Mana? Kok gak terjadi apa-apa? Sabar dunk! Pasang link popupnya aja belum! Untuk membuat pop up, pertama kita harus bikin wadah pop upnya terlebih dahulu Kodenya <div id="info" style="display:none;"> Isi tulisan atau kode yang ingin ditampilkan dalam pop up </div> Kode hijau silahkan ganti sesuai keinginan Kode tadi bisa dipaste di bawah <body> Atau bisa juga ditambahkan ke gadget seperti biasa Lalu tinggal membuat link supaya pop up muncul jika diklik kodenya <a href="#info" rel="facebox">Klik Disini Sob</a> Lihat kode warna merah harus disamakan dengan id="info" pada pop up yang ingin dimunculkan Contohnya

    Coba Klik Disini Selain cara diatas, pemasangan pop up ini bisa bervariasi sesuai kebutuhannya! Untuk popup halaman iframe <a href="Alamat Tujuan" rel="facebox">Klik Disini Sob</a> Contohnya seperti ini Coba Klik Disini Mudah kan? Silahkan berkomentar! Hebat! Aku sendiri cukup terkesan dengan trik ini hingga akhirnya aku pasang permanen di blog ini (gak cuma diposting ini doank)

    Potrebbero piacerti anche