Menampilkan Facebox Sebagai OnLoad / Alert

HALO ! Lama rasanya tak jumpa kawan2 giblog ni . udah berapa bulan ya ?? lama banget dah . Sekarang saya balik bawa berita baru . Menampilkan Facebox sebagai alert / popUp . Postingan sekarang ini sebenarnya dari sebuah pertanyaan pengunjung giblog yg mungkin udah lama tanya baru saya jawab sekarang . (saya lupa nama nya maaf . hehehe..) Kira2 gni deh tanya nya.. "Gimana cara nya buat sebuah alert waktu buka blog tapi dengan tampilan facebox ?" Akhirnya saya tertarik juga untuk mengutak utik nya..

demo facebox alert nya liat disini

DEMO

untuk cara buat facebox, temen2 bisa liat di sini http://granoblog.blogspot.com/2009/09/menampilkan-gambar-teks-dengan-facebox.html

atau saya bahas lagi sedikit deh..

ini script facebox nya .. masukan di atas tag body..

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

ini css nya... masukan di tempat css seperti biasa ..

/*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');
}



javascriptnya nih.. taruh dibawah script facebox..

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


lalu html nya..


<div id="info" style="display:none;">
Isi tulisan sobat disini
</div>


Kalau membuat facebox dengan mengklik suatu link  maka kita akan buat seperti ini


<a href="#info" rel="facebox"<Klik Disini Sob>/a>


sedangkan yang kita bahas disini adalah bagaimana kita tampilkan facebox sebagai ALERT atau pesan selamat datang, caranya kita rubah sedikit javascriptnya yang tadinya seperti ini


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


jadi seperti ini


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


selesai deh... kalau semua sudah benar pasti berhasil ko sob...
thanks udah baca yah... comment jangan lupa, thanks juga ke orang yg bertanya tentang ini . saya jadi niat ngeblog lagi . hahaha..

Readmore

Go Green with Jquery Parallax Plugin Free Blogger Template

Yah setelah sekian lama ga eksis sekarang kembali membawa template baru, satu lagi Free Blogger Template hasil karya saya . Template yang saya beri judul Go Green ini saya buat dengan warna hijau agar lebih segar dan fresh . Dengan memberikan "Awesome" header berlandaskan jparallax plugin dari jquery membuat template lebih hidup . Agar lebih jelas kenapa bisa dibilang "awesome header" coba cek demo nya saja :) .

Ini screenshootnya

Temen-temen bisa melihat demo template nya secara langsung disini . Dan jika tertarik bisa download disini .

Demo Template

Download

Fasilitas template ini :

>Readmore (automatic readmore, standard) .
>Custom font for title blog, title post, title sidebar using Cufon .
>jquery parallax plugin for awesome header .
>Navigation menu with jquery easing plugin .
>1 kolom sidebar 4 kolom for footer .

Newbie seperti saya itu pasti mempunyai banyak kekurangan, maka dari itu jika ada kekurangan dari template ini mohon confirmasi nya, dan juga saya membutuhkan saran-saran sahabat giblog untuk membangun sebuah template yang berkualitas .

Readmore

Typho Minimalis Another Free Template

Template lagi template lagi .. ternyata membangun sebuah template itu mengasyikan . Kita bisa mengekspresikan segala yang kita mau . Template kali ini sebenarnya saya ragu untuk menyebutkan kata "typho" yang sebetulnya saya masih awam sekali tentang hal ini . Untuk lebih jelasnya tentang template ini,

ini screenshootnya,

dan untuk demonya bisa dilihat juga disini, dan jika tertarik bisa juga di down load disini .

Demo Template

Download

Saya rasa ini cukup minimalis, tapi untuk typhographinya ? itu biarkan sahabat sendiri yang menilai . Banyak sekali situs-situs yangberkonsep minimalis, dapat dilihat di minimalsite.com untuk contoh-contoh situs yang berkonsep minimalis . Dan untuk masalah typhographi dapat di pelajari di situs ini

silahkan dipelajari gimana konsep minimalis dan typographi . untuk lebih kurangnya template ini tolong di konfirmasi yah .

Readmore

Style Minimalist Free Blogger Template

Hmm, kali ini postingan sedikit berbeda dari biasa nya . sekarang saya mau posting Free Blogger Template hasil karya saya .
Template yang saya beri judul Style minimalis ini pertama kali nya template yang saya share buat sahabat giblog sekalian . Template ini saya buat sebetulnya hanya sekedar iseng . Bagus atau tidaknya itu terserah menurut sahabat-sahabat giblog . Yang pasti ini "free" alias gratis .

Ini screenshootnya

Temen-temen bisa melihat demo template nya secara langsung disini . Dan jika tertarik bisa download disini .

Demo Template

Download

Fasilitas template ini :

>Readmore (Hahahah, ga penting banget . buat sendiri juga bisa gw)
>Custom font using Cufon
>script jQuery walaupun ga di pake apa-apa . hahahahha mungkin ada yg mau pake jadi ga usah repot copy script jquery . ya kan ? wkwkwkwkwkwk .

Kalau ada kesalahan pada template atau kekurangan mohon di confirmasi .

Readmore

Shoutmix Sliding Panel dengan jQuery

Yup yang pasti udah tau gimana tampilan sliding panel ini. Menarik dan keren.. Udah lama saya pake dan sekarang saya tertarik untuk share gimana cara buatnya .

Trik "Sliding Panel" ini saya dapat dari spreystudios, yang sebenarnya fungsinya bukan hanya untuk menampilkan shoutmix saja . Tapi saya pakai buat menampilkan shoutmix, karena shoutmix yang dulu udah berbau "jadul" alias udah biasa banyak yang pakai . Yah begitulah jQuery, mantaf..

langsung aja cara buat nya ya cuy ? biar ga terlalu lama baca-baca yang ga penting ini, hahahah ..

1. jelas, Masukan script jQuery ini di atas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'>


2. ini javascriptnya, masukan di bawah script di atas .

<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
3.ini css nya..



.panel {
position: absolute;
top: 50px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}
.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}
.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}
.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}
a.trigger{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(URL GAMBAR +) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}
a.trigger:hover{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(URL GAMBAR +) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}
a.active.trigger {
background:#222222 url(URL GAMBAR X) 85% 55% no-repeat;
}


Nb:

>>Ini untuk gambar +


>>ini untuk gambar X


>>kalo ingin buat di sebelah kiri ganti css a.trigger dan panel dengan ini


a.trigger{
position: absolute;
top: 80px; left: 0;
}

.panel {
position: absolute;
top: 50px; left: 0;
}

dan juga ganti css rounded corner ini


border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;

dengan ini


border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;

>>kalo ingin buat posisi fixed ganti dengan css posisitionya dengan fixed .

4. Untuk tag htmlnya, taruh di widget atau di bagian body .


<div class='widget-content'>
<div class="panel">

Taruh Script shoutmix nya disini atau content lainya

</div>
<a class="trigger" href="#">Shoutmix</a>
</div>


Nah... jadi deh.. xixixixi gampang kan ? usefull lagi, bagus juga .

Readmore