Giblog

Menampilkan Facebox Sebagai OnLoad / Alert

2010-04-17T22:46:00.003+07:00

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..

Go Green with Jquery Parallax Plugin Free Blogger Template

2009-11-17T12:36:00.023+07:00

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 .

Typho Minimalis Another Free Template

2009-11-10T22:07:00.000+07:00

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 .

Style Minimalist Free Blogger Template

2009-11-07T00:39:00.001+07:00

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 .

Shoutmix Sliding Panel dengan jQuery

2009-11-05T13:15:00.001+07:00

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 .

Hover Glow Another Link Effect Using Color Plugin

2009-11-04T04:50:00.000+07:00

Pagi hari posting tepatnya pukul 4 pagi. Pada kesempatan kali ini saya sedikit tertarik untuk bermain-main dengan jquery color plugin . Bermain-main dengan warna, cocok untuk blog atau situs yg colorfull atau main tabrak warna, xixixixix .

Macam effect hover link banyak sekali, dari sekedar menambahkan effect link pelangi, nudging, fade dan sebagainya . Nah Sekarang ini akan share Effect Glow . Untuk demonya bisa diliat disini .

Demo

Hmm gimanah ? lain dari pada yg lain kan ? Gini caranya..

1. seperti biasa script jquery nya... biasa di atas </head$gt;

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

2. ini color plugin nya . masukan di bawah script di atas yah..

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

Nb: Bisa di hostingkan sendiri sob .

3. Ini script untuk effect glowng nya .

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

Nb: Bisa di hosting kan sendiri .

4. Ini javascriptnya bro..

<script charset='utf-8' type='text/javascript'>
$(document).ready(function() {
$('a').addGlow({ textColor: 'blue', haloColor: 'blue', radius: 200, duration: 1000 });
$('*').bind('glow:started', console.info);
$('*').bind('glow:canceled', console.info);
});

</script>

Nb:
>> untuk text color adalah warna link saat mouseover .
>> untuk halo color adalah warna effect di belakang link .
>> radius seberapa besar effectnya .
>> duration seberapa cepat atau lambat effectnya berjalan .

script di atas bisa diganti atau di ubah-ubah sesuai selera .

Yup, selesai deh . cukup mudah kan ? gimana ? effect nya sedikit memberikan kesan berbeda dengan effect2 lain yg sudah banyak digunakan .

Colorfull Menu Using Jquery Color Plugin

2009-11-04T04:32:00.028+07:00

Posting kali ini masih sekitar jQuery Color plugin . Sekarang mencoba menerapkan color plugin di menu . Biar lebih cepat dan jelas langsung ajah liat demonya disini, tapat nya dibagian atas sendiri di demo page .

Demo

Color plugin kali ini memberikan banyak warna pada menu saat mouseover . Warna yg berubah-ubah secara random saat mouseover . Cukup menarik untuk sahabat blogger yang suka bermain2 dengan warna di blognya .
Langsung ajah cara buat nya ya bro...

1. Ini Script jquery nya. masukan tepat di atas </head;>

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

Nb: Kalo udah ada biarin ajah biar ga doble .

2. Ini script color plugin nya .

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

Nb: Kalo udah ada biarin ajah biar ga doble .

3. Ini css nya..

#menu{
margin:0 auto;
width:600px;
height:40px;
}
#menu ul {
margin:0;
list-style-type:none;}
#menu2 ul li{
float:left;
padding-left:10px;
}
.colormenu a {
font: 20px Georgia;
font-style:italic !important;
color:#fff;
text-decoration:none;
background-color:#cc0022;
padding:5px;
border:none; -webkit-border-radius: 10px; -moz-border-radius: 10px;}
#menu3{
margin:0 auto;
width:600px;
height:40px;
}

Nb yg jelas bisa di edit2 sendiri sesuai selera .

4. ini javascriptnya untuk memberikan effect merubah warna background nya .

<script type='text/javascript'>
$(document).ready(function(){
$('.colormenu a').hover(function() { //mouseover
var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
$(this).animate({'backgroundColor': col},500);
},function() { //mouseout
$(this).animate({'backgroundColor': col},500);
});
});
</script>

5. Ini tag HTML nya . idealnya di letakan di widget bagian bawah header . Tapi itu cuma sugesti, wkwkwk terserah mau di tempatin dimana .

<div id="menu" class="colormenu">
<ul>
<li> <a href="#"> Home</a></li>
<li> <a href="#"> About</a></li>
<li> <a href="#"> Portfolio</a></li>
<li> <a href="#"> Contact</a></li>
</ul>
</div>

Nb: Yang pasti ganti url dan nama link sesuai kebutuhan.. hoho..

nah jadi deh.. gwampang bgt kan ? bagus ga sih ? moga bermanfaat aja deh .

Give Lavalamb Effect to Menu Using jQuery

2009-10-31T20:23:00.002+07:00

errrmm... lama ga posting gara pulsa abis, wkwkkwkwkwkw . Sekarang posting di hari sabtu waktunya malming untuk para blogger . (Blogger juga butuh malming hohoho..)

Yoyoy langsung ke topiknya . Sekarang tentang lavalamp effect pada menu . tau ga sih lavalamb menu ? kalo lavalamp menu coba cari di google, pasti deh ketemu . sekarang saya mau bahas gimana cara buat effectnya . Untuk demonya biar lebih jelas disini .

Demo

hmm gimana ? cukup bagus kan effect nya ? kalo menu nya sih jelek . lha emang aq ga edit menu nya, males boo.. yg penting effect nya cui..

langsung aja nih cara nya bro sist .

1. Pertama masukan script jQuery ini .

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

2. Kedua nih plugin jQuery buat effect nya

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

3. Ini css nya

ini css untuk effect nya.. bisa background atau border .

ini untuk background

.lava {
position: absolute;
z-index: 100;
background: #000;
}

ini untuk border

.lava {
position: absolute;
z-index: 100;
border: 2px solid #000;
padding: 1px 2px;
}

mao yg laen ? suka2 kamu deh..

ini css untuk menu yg saya buat .

#menu {
width: 770px;
height: 2.5em;
background-color: #999;
margin-bottom: 1em;
}
#menu li {
float: left;
margin: 0;
list-style-type: none;
text-align: center;
}
#menu li.a {
width: 80px;
}
#menu li.b {
width: 150px;
}
#menu li.c {
width: 170px;
}
#menu li.d {
width: 120px;
}
#menu li.e {
width: 100px;
}
#menu li a {
display: block;
line-height: 2.5em;
color: #fff;
font-weight: bold;
text-decoration: none;
}
#menu li a:hover {
text-decoration: underline;
}

ini sbenarnya ga perlu kalo sobat udah punya menu sendiri .

4. javascriptnya..

<script type='text/javascript'>
$(document).ready(function(){
$('#menu ul').foxiblob({className:'lava', opacity:1, speed:1000});
});
</script>

Nb: Untuk #menu ul kalo sobat udah punya menu sendiri, masukin css menu sobat sendiri . Misal blog sobat punya menu yg css-nya "#menu2 ul" . tinggal masukan ajah jadi $('#menu2 ul') .

5. HTMLnya .

<div id='menu'>
<ul>
<li><a href='#'>start</a></li>
<li><a href='#'>link 1</a></li>
<li><a href='#'>very long link</a></li>
<li><a href='#'>url</a></li>
<li><a href='#'>testlink</a></li>
</ul>
</div>

Nb: kalo sobat udah punya menu sendiri yah ga usah pake ginian ..

Hmm gampang kan ? saya rasa mudah ko .. makasih yah udah sempetin baca sob . gimana menurut sobat, bagus ga ?

Fixed Bottom Menu Using Easing Jquery !

2009-10-27T09:26:00.001+07:00

Pagi hari ini jam 9 pagi saya mau share tentang easing plugin jquery yg bisa diterapkan pada fixed menu satu ini..

untuk lebih jelas nya bagai mana menu itu dapat dilihat di demo ini,

Demo

giamana sob ?? langsung ajah dah cara buatnya..

1. Masukan script jquery ini,

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

2. Masukan juga script plugin easing jquery ini,

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

Nb: hostingin ndiri yah klo mo pake ?

3. ini css nya..

#fake-body {
overflow:auto;
z-index:1;
}
#dock {
background:#ccc url(http://i33.tinypic.com/2gwe1si.jpg) repeat-x;
height:400px;
z-index:100;
width:100%;
}
.dockblock {
float: left;
width:250px;
padding:0 4px 20px 4px;
margin: 30px 4px 0px 4px;

4. ini javascriptnya bro..

<script>

$(document).ready(function() {

var easing_type = 'easeOutBounce';
var default_dock_height = '40';
var expanded_dock_height = $('#dock').height();
var body_height = $(window).height() - default_dock_height;

$('#fake-body').height(body_height);
$('#dock').css({'height': default_dock_height, 'position':'fixed', 'top': body_height});
$(window).resize(function () {

updated_height = $(window).height() - default_dock_height;

$('#fake-body').height(updated_height);
$('#dock').css({'top': updated_height});
});

$('#dock').mouseover(function () {

expanded_height = $(window).height() - expanded_dock_height;

$(this).animate({'height':expanded_dock_height,'top': expanded_height},{queue:false, duration:1000, easing: easing_type});

}).mouseout(function () {

body_height = $(window).height() - default_dock_height;

$(this).animate({'height':default_dock_height,'top': body_height},{queue:false, duration:10 00, easing: easing_type});

});

});

</script>

Nb: untuk easeOutBounce bisa di ganti sesuai selera, untuk list plugin easing dapta dilihat sendiri disini, http://gsgd.co.uk/sandbox/jquery/easing/

5.HTML-nya

<div id='fake-body'>
<br/><br/>
</div>

<div id='dock'>

<b:section class='dockblock' id='dockblock1' showaddelement='yes'/>
<b:section class='dockblock' id='dockblock2' showaddelement='yes'/>
<b:section class='dockblock' id='dockblock3' showaddelement='yes'/>

</div>

Nb: untuk isi dari menunya saya buat jadi 3 buah widget . itu bisa diganti sesuai selera temen2, mau di isi 1 buah widget atau yang lainya..

Nah postingan kali ini berakhir wkwwkwkwk, liat jam eh masih jam 9:26 . posting nya ga lama yak..

Nice Floating Menu Using jQuery !

2009-10-25T16:35:00.000+07:00

Yuhuu... posting agy cuy... kali ini tentang floating menu . floating menu itu yg gimana sih ? itu tuh menu yg di sebelah kiri blog q.. tapi kali ini, menu yg aku share cuma sekedar memberikan efek floating pada menu . Coba deh liat demonya disini

Demo

Gimana ? mungkin style nya ga terlalu bagus.. wkwkwkkw kan bisa lu edit ndiri kale.. yg penting effect nya ya kan sob ? langsung ajah caranya bro..

1. Masukin script ini dibawah </head>..

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

2. ini css nya bro, uda tau kan dimana tempat css ?

#floatMenu {
position:absolute;
top:150px;
float:right;
width:200px;
}
#floatMenu ul {
margin-bottom:10px; list-style: none;
}
#floatMenu ul li a {
display:block;
border:1px solid #999;
background-color:#222;
border:2px solid #999;-moz-border-radius: 12px;
-webkit-border-radius: 12px;
text-decoration:none;
text-align:center;
color:#ccc;
margin-bottom:10px;
}
#floatMenu ul li a:hover {
color:#fff;
background-color:#333333;
}
#floatMenu ul.menu1 li a:hover {
border-color:#fff;
}
#floatMenu ul.menu2 li a:hover {
border-color:#fff;
}

Nb: Sesuai kata2 saya tadi, untuk hasil yg lebih memuaskan edit ndiri yah bro..

3. Javascriptnya sob, taruh di bawah sacript jquery tadi

<script language='javascript'>
var name = "#floatMenu";
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:1500,queue:false});
});
});
</script>

Nb:
>> duration:1500 . ini adalah seberapa cepat effect floating . Semakin banyak durationya . semakin lambat pula effect floatingnya .

4. HTML, taruh dibagian body yah..

<div id='floatMenu'>
<ul class='menu1'>
<li><a href='#'> Home </a></li>
</ul>
<ul class='menu2'>
<li><a href='#'> Contact </a></li>
<li><a href='#'> Rss </a></li>
<li><a href='#'> Apa lagi yah ? </a></li>
</ul>
</div>

nah selesai deh.. gampang kan sob ?? bagus lagi

Friend Blog List Like Facebook Friend-Suggestion

2009-10-24T13:27:00.000+07:00

Huh, udah lama ga posting.. sekarang posting lagi . Temen udah tau kan gimana friend suggestion di beranda facebook kita ? Kalo ga tau ? cape deh... nih liat demonya disini

Demo

Cekuik cekuik cekuik.... mirip kan sama freind suggestion di facebook ? coba langsung klik "Lihat Semua" di demonya.. ane bikin langsung buka pake facebox biar tambah mirip.. Sekarang langsung ajah aku share cara buat friend suggestionnya, untuk cara buat facebox nya bisa liat disini

1. Pertama, masukin script jQuery ini..

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

Nb: kalo udah ada di blog sobat lewat ajah..

2. Ini css nya..

#facebook{
height:60px;
width:215px;
overflow:hidden;

padding:6px 10px 14px 10px;;
}
#facebook li{
border:0; margin:0; padding:0; list-style:none;
}

#facebook li{
height:60px;
padding:5px;
list-style:none;

}
#facebook a{
color:#000000;
text-decoration:none;

}
#facebook .nama-teman{
display:block;
font-weight:bold;
margin-bottom:4px;
font-size:11px;
color:#36538D;
}
#facebook .addas{
display:block;
font-size:11px;
color:#666666;
}
#facebook img{
float:left;
margin-right:14px;
padding:4px;

}
#facebook .del
{
float:right; font-weight:bold; color:#666666
}
#facebook .del a
{
color:#000000;

}
#facebook .del a:hover
{
background-color:#36538D;
padding-left:1px;
padding-right:1px;
color:#ffffff;
}

3. Ini javascriptnya sob..

<script type='text/javascript'>
$(function()
{
$(".delete").click(function(){
var element = $(this);
var I = element.attr("id");
$('li#list'+I).fadeOut('slow', function() {$(this).remove();});
return false;
});
});
</script>

4.Udah bro.. ini HTML nya..

<span style=" padding-left:20px; font-weight:bold;">Suggestions</span> <a style=" float: right; font-weight:bold;" href="#teman" rel="facebox">Lihat Semua</a>
<ul id="facebook">
<li id="list1">
<img src="http://i38.tinypic.com/2hqufbc.jpg
"/> <span class="del"><a id="1" href="#" class="delete"><img src="http://i34.tinypic.com/fa3fdi.jpg"/></a></span>
<a href="Link Teman" class="nama-teman">v</a>
<span class="addas">Add as Friend</span>
</li>
<li id="list2">
<img src="http://i38.tinypic.com/2hqufbc.jpg
"/> <span class="del"><a id="2" href="#" class="delete"><img src="http://i34.tinypic.com/fa3fdi.jpg"/></a></span>
<a href="Link Teman" class="nama-teman">Link Teman</a>
<span class="addas">Add as Friend</span>
</li>
<li id="list3">
<img src="http://i38.tinypic.com/2hqufbc.jpg
"/> <span class="del"><a id="3" href="#" class="delete"><img src="http://i34.tinypic.com/fa3fdi.jpg"/></a></span>
<a href="Link Teman" class="nama-teman">Link Teman</a>
<span class="addas">Add as Friend</span>
</li>
<li id="list4">
<img src="http://i38.tinypic.com/2hqufbc.jpg
"/> <span class="del"><a id="4" href="#" class="delete"><img src="http://i34.tinypic.com/fa3fdi.jpg"/></a></span>
<a href="Link Teman" class="nama-teman">Link Teman</a>
<span class="addas">Add as Friend</span>
</li>

</ul>

Nb:

>> untuk link lihat semua menggunakan Rel='facebox' jika ingin menggunakan facebox .
>> http://i38.tinypic.com/2hqufbc.jpg ini adalah gambar blogger, sebagai pengganti foto profil.

Nah selesai kan ?? gampang kan ? mungkin not usefull... but fun ! =D
trick ini bukan cuma buat friend blog ajah.. bisa di pake buat yg lain kok, dlu c maunya saya buat pake post suggestion, tp susah juga implementasikan script post ke friend list satu ini =D

Nice Blog Header With jQuery Parallax

2009-10-20T22:51:00.001+07:00

Hoaaammmhh,,, nguantuk nih, tapi posting duyu ah.. Lawan ngantuk nya bentar aja . Karana lagi ngantuk, hehehhe, to the point aja sob . Sekarang Giliran plugin jQeury parallax yg saya akan mau share .

Terasa asing dengan kata2 jQuery parallax ?? See the demo page here..

Demo

Di dalam demonyah saya gunakan untuk header blog . Tapi yg saya jelaskan dsini sebenarnya bukan semata-mata jQuery parallax untuk header blog . Bnyak sekali penggunaan plugin yg satu ini . Yg akan saya jelaskan adalah gimanah cara pakenya, langsung aja..

1. Masukan jQuery ini..

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

2. Masukan plugin parallax ini

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

3. Ini sedikit Css nya..

#parallax div div
{font-family: Palatino, Georgia, Trebuchet MS, serif; font-size: 20em; line-height: 0.6em;}

Nb: Ukuran font bisa diganti sesuai selera..

4. Ini sedikit juga javascriptnya..

<script type='text/javascript'>
$(document).ready(function(){

$('#parallax').jparallax({triggerExposesEdges: true}).append(corners);

$('a.goto').click(function(){
var ref=$(this).attr("href");
// console.log(ref);
$('#parallax').trigger("jparallax", [ref]);
return false;
});

});

//-->
</script>

5. Yg terakhir tag htmlnya, masukan di bagian mana ajah, misalkan mau dibagian header . masukan di widget bagian header..

<div id='parallax' style='position:relative; overflow:hidden; width:60em; height:320px; background: #2F3134;'>

<div style='width:1200px; height:640px;'>
<div style='position:absolute; top:280px; left:150px; color:#9bc0e5'>
<a name='G'/>
G
</div>
</div>

<div style='width:1800px; height:420px;'>
<div style='position:absolute; top:180px; left:330px; color:#a4c522'>
<a name='i'/>
i
</div>
</div>

<div style='width:1400px; height:460px;'>
<div style='position:absolute; top:140px; left:360px; color:#e99400'>
<a name='B'/>
B
</div>
</div>

<div style='width:2000px; height:495px;'>
<div style='position:absolute; top:260px; left:520px; color:#b50c0c;'>
<a name='l'/>
l
</div>
</div>

<div style='width:1540px; height:480px;'>
<div style='position:absolute; top:230px; left:540px; color:#e99400;'>
<a name='o'/>
o
</div>
<div style='position:absolute; top:220px; left:780px; color:#b50c0c;'>
<a name='G'/>
G
</div>
</div>

</div>

Nb:
>> Untuk Huruf2 G I B L O G, yg pasti ganti sessuai keinginan sobat .
>> Warna Dari huruf2 juga bisa diganti
>> Besar kecil div id parallax juga bisa diganti .

Yup selesai deh . Mudah kan ?? Cukup menarik menurut saya kalo ditempatkan di bagian header . tapi gag tau lg gimana menurut sobat ?

Costumize Your Corner with jQuery Corner . Awesome !

2009-10-19T02:44:00.004+07:00

Xixixixixix, lagi suka bikin judul yang lebay lebay nih . Tapi beneran awesome kok, jquery plugin yang satu ini merubah atau mengganti bagian pjok atau corner box yang biasanya cuma bentuk kotak atau round . Untuk lebih jelasnya lihat demonya disini .

Demo

Gimana ? Awesome kan ? (awesome artinya apa sih ? wkwkkwkw ) mau coba ? gni caranya sob..

1. Masukan script jQuery ini,

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

2. Masukan script plugin ini tepat dibawah script di atas .

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

Nb: hostingin ndiri bro.. biar lebih afdol..

3. Javascript ..

Untuk javascriptnya bisa di ambil di dalam demonya . Misal kamu mau pake bevel corner tinggal masukin javascript sperti ini .

<script type='text/javascript'>$('this').corner("bevel");</script>

lalu ganti kata this dengan kata sesuka anda, ini untuk pemanggilan pada tag div . Misal

<script type='text/javascript'>$('.bevel').corner("bevel");</script>

pemanggilanya

<div id='bevel'> </div>

4. Contoh pemanggilan pada div box .

Css Box

#box {
width: 250px;
height: 150px;
background: grey;
position: relative;
text-align: center;}

Javascript (schulpt)

<script type='text/javascript'>$(''schulpt').corner("schulpt");</script>

HTML

<div id='bevel' class='box'> </div>

5. Keterangan Untuk Custom

yang dimaksud Custom disini adalah menggunakan beberapa corner yg berbeda . Mengubahnya hanya menambahkan sedikit script posisi pada javascriptnya . Misal ingin menggunakan Schulpt di bagian atas dan bite dibagian bawah . javascriptnya

<script type='text/javascript'>$(''schulpt').corner("schulpt top"); .corner("bite bottom");</script>

Yup begitulah tentang cara penggunaan jQuery Corner . Gimana ? mudahkan ? menarik dan cukup simple untuk digunakan bro... semoga bermanfaat yah sob??

jQuery Cycle Plugin . Nice !!

2009-10-17T22:08:00.001+07:00

Hai hai... hai bro sist.. hwkwkwkwkwk posting lagi nih . masih bergulir di dunia image . Seperti kata pepatah banyak jalan menuju roma, ribuan cara pula menampilkan image galery kamu . hwehe..

jQuery Cycle Plugin . Inti plugin ini sebenarnya adalah slidshow, tapi kalau dilihat mungkin berbeda jauh dari slideshow .

Untuk Demonya Lihat Disini

Demo

List demo Cycle Plugin

1. Image Shuffle
2. Image Bounce
3. Image Bounce 2
4. Image Custom

Cukup bagus dan lebih menarik untuk menampilkan galery gambar .

Langsung ajah caranya sob...

1. Pertama masukan script jquery ini..


<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>

Nb: Kalo udah ada lewat ajah, biar ga doble .

2. Tyus masukan juga kedua script dibawh ini tepat dibawah script di atas,


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

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

Nb: Hostingin sendiri scriptnya yah sob ??

3. ini sedikit cssnya


.pics { height: 232px; width: 232px; padding:0; margin:0; overflow: hidden }
.pics img { height: 200px; width: 200px; padding: 15px; border: 1px solid #ccc; background-color: #eee; top:0; left:0 }
.pics img {
-moz-border-radius: 10px; -webkit-border-radius: 10px;
}

4. javscriptnya bro..

Shuffle.


<script type='text/javascript'> 
  $('#shuffle').cycle({ 
    fx:    'shuffle', 
    delay: -4000 
});
 
</script>

Shuffle2.


<script type='text/javascript'> 
$('#shuffle2').cycle({ 
    fx:   'shuffle', 
    shuffle: { 
        top:  -230, 
        left:  230 
    }, 
    easing: 'backinout', 
    delay: -2000 
});</script>

Bounce in.


<script type='text/javascript'> 
$('#bouncein').cycle({ 
    fx:     'zoom', 
    easing: 'bouncein', 
    delay:  -4000 
});</script>

Bounceout.


<script type='text/javascript'> 
$('#bounceout').cycle({ 
    fx:     'scrollDown', 
    easing: 'bounceout', 
    delay:  -2000 
});</script> 
<script type='text/javascript'>

Bouncein2.


$('#bouncein2').cycle({ 
    fx:      'zoom', 
    speedIn:  2500, 
    speedOut: 500, 
    easeIn:  'bouncein', 
    easeOut: 'easeout', 
    sync:     0, 
    delay:   -4000 
});</script> 
<script type='text/javascript'>

Bounceout2.


$('#bounceout2').cycle({ 
    fx:      'scrollDown', 
    speedIn:  2000, 
    speedOut: 500, 
    easeIn:  'bounceout', 
    easeOut: 'backin', 
    delay:   -2000 
});</script> 
<script type='text/javascript'>

Custom


$('#custom').cycle({ 
    fx:      'custom', 
    cssBefore:{  
        left: 232,   
        top: -232,  
        display: 'block' 
    }, 
    animIn: {  
        left: 0, 
        top: 0  
    }, 
    animOut: {  
        left: 232,   
        top: 232 
    }, 
    delay: -3000 
});</script>

Custom2.


<script type='text/javascript'> 
$('custom2').cycle({ 
    fx:      'custom', 
    sync: 0, 
    cssBefore: {  
        top:  0, 
        left: 232, 
        display: 'block' 
    }, 
    animIn:  { 
        left: 0 
    }, 
    animOut: {  
        top: 232 
    }, 
    delay: -1000 
});
});</script>

Nb: Masukan salah satu sesuai selere kamu sob...

5 HTMLnya bro atau pemakaianya..


 <div id="custom" class="pics"> 
            <img width="200" src="img1.jpg" height="200"/> 
            <img width="200" src="img2.jpg" height="200"/> 
            <img width="200" src="img3.jpg" height="200"/> 
        </div>

atau


 <div id="shuffle" class="pics"> 
            <img width="200" src="img1.jpg" height="200"/> 
            <img width="200" src="img2.jpg" height="200"/> 
            <img width="200" src="img3.jpg" height="200"/> 
        </div>

Nb: untuk div id= ini sesuaikan dengan kebutuhan atau effect pada javascriptanya . Misal kalo butuh effect bouncein2 tulis ajah div id='bouncein2' .

Gimana ??? gampang kan?? bagus lagi . yah mudah2an bermanfaat bagi sobat sobat semua...

Css3 Effect (Simple and More Usefull)

2009-10-17T07:32:00.003+07:00

Oi sobat sobat giblog.. posting lagi nih . Sekarang mau share gimana canggihnya css3 . Kalau menurut aku sendiri css3 juga bisa disbut write less do more code nih, layaknya jquery, mootools, protoype dll.. (lha itu kan javascript library ? kok disama2in sama css ?? =D ) .

Dan share kali ini, akan share beberapa effect menggunakan css3 yg cukup berguna dan tanpa menggunakan banyak script atau javascript .

ini beberapa effect nya.

1.Sliding Door
2.Link Nudging
3.Gradient Background tanpa Image
4.Simple Slide Hover
5.Simple Rotate Scale
6.Advandce Rotate Scale
7.Mask Image
8.Reflection

dan semuanya bisa temen2 liat disini,

Demo

Nb: Checked on chorme n safari4, ga jalan di IE atau FF, itu mungkin salah satu sebab saya lebih suka dengan google chrome .
Gimana ? mau coba ?? nih saya share satu demi satu tutorialnya..

1. Sliding Door .

Css.

.open {
   width: 200px;
   height: 200px;
   overflow: hidden;
   position: relative;
   cursor: pointer;
   float: left;
   margin: 1em;
  }
  
  .open img {
   position: absolute;
   top: 0; left: 0;
  }
  
  
  .open img {
   -webkit-transition: left .6s linear;
  }
  
  .open:hover img {
   left: -200px;
  }

Nb: Letak effect / kelebihanya adalah pada -webkit-transition . ini membuat image bergeser kekiri . Dan juga pada hover img yg membuat image bergeser kekiri .

HTML

<div class="open"> 
  <img src="img/image.jpg" alt="" /> 
  <p>Sliding Door</p> 
</div>

Nb: img/image.jpg ini adalah gambar yg dimana saat hover mouse akan terbuka, ganti dengan Url gambar semau sobat .

2. Link Nudging.

Css

#nudging li a {
   position: relative;
   -webkit-transition: left .3s linear;
  }
  
  #nudging li a:hover {
   left: 10px;
  }

HTML

<ul id="nudging"> 
  <li><a href="#">Link</a></li> 
  <li><a href="#">Link</a></li> 
  <li><a href="#">Link</a></li> 
  <li><a href="#">Linkt</a></li>      
  </ul>

Nb: Gag perlu lagi deh pake jQuery Link nudging

3. Gradient Background Tanpa Image.

Css:

background: -webkit-gradient(linear, 0 0, 100% 100%, from(#000), to(#ffffff));

Nb:

>>so pasti warna bisa diganti sesuai selera .
>>Bisa digunakan untuk background blog ataupun background box, background apa saja bisalah..

4. Simple Slide Hover

Css:

#box {
   width: 250px;
   height: 250px;
   background: grey;
   position: relative; 
   
   -webkit-transition: left 2s linear;
  }
  
  #box:hover {
   left: 100px;
  }

Nb: -webkit-transition: left 2s linear; bisa di implementasikan dimana saja, tidak hanya di sebuah 'box'

HTML:

<div id="box"> 
      
     </div>

5. Simple Rotate Scale

Css:

@-webkit-keyframes pulse {
   from {
    -webkit-transform: rotate(0deg);
   }
   
   to {
    /*
    -webkit-transform: rotate(20deg);
    -webkit-transform: scale(2);
    */
    
    -webkit-transform: rotate(180deg) scale(2);
   }
  }
   
   .pulse {
    _-webkit-animation: pulse 4s alternate 2;
    
    -webkit-animation-name: pulse;
    -webkit-animation-duration: 4s;
    -webkit-animation-direction: alternate;
    -webkit-animation-iteration-count: 4;        
    
    width: 300px; height: 100px; background: grey; position: relative; margin: 200px auto 0; line-height: 100px; text-align: center; font-family: arial;
   }

HTML

<div class="pulse"> 
  <p>Giblog</p> 
 </div>

6. Advance Rotated Scale

Css:

@-webkit-keyframes pulse {
   0% {
    
   }
   
   50% {
    -webkit-transform: rotate(-180deg) scale(5);
   }
   
   100% {
    -webkit-transform: rotate(-360deg) scale(2.5);
   }
  }
  
  .pulse {
   -webkit-animation: pulse 4s alternate 2;
    
    width: 300px; height: 100px; background: grey; position: relative; margin: 200px auto 0; line-height: 100px; text-align: center; font-family: arial;   
  }

HTML:

<div class="pulse"> 
  <p>Giblog</p> 
 </div>

7. Mask Image.

Css:

#mask img {
  -webkit-mask-box-image: url(http://i38.tinypic.com/21l7vnr.jpg);
  opacity: .2;
 }
 
#mask img:hover {
  -webkit-transition: opacity 1s linear;
  opacity: 1;

Nb: http://i38.tinypic.com/21l7vnr.jpg ini adalah mask berbentuk hati .

HTML:

<div class="Mask"> 
  <img src="http://i38.tinypic.com/2n84qcl.jpg"> 
 </div>

8. Reflection.

Css:


#reflection img {
  -webkit-box-reflect: below 2px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.5, transparent), to(white));
 }

HTML:

<div class="relection"> 
  <img src="image.jpg"> 
 </div>

Selesai...... banyak banget dah.. tapi cukup usefull nih.. moga berguna yah sob ?? comment nya dong ?? wkwkwkwkw .

Image Cube 3D with jQuery !

2009-10-16T04:07:00.001+07:00

Another way to present your image galery ! Akhir2 ini lagi seneng main2 sama yg namanya gambar, hehehe banyak banget cara bagus buat nampilin gambar, contohnya yang satu ini . Menampilkan gambar dengan bentuk cube / kotak yg terlihat 3D . untuk lebih jelasnya lihat demonya disini .

Demo

Gimana ?? cukup bagus juga kan untuk menampilkan image ?? langsung ajah caranya sob .

1. masukan jquery ini ..


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

Nb: untuk http://granoblog.googlecode.com/files/imagecube.js bisa di download dan di hostingkan sendiri .

2. ini sedikit css nya..


 #cube { width: 200px; height: 150px; }

3. ini sedikit javascriptnya..


<script type='text/javascript'> 
$(function () {
 $('#cube').imagecube({imagePath: 'img/'});
});
</script>

4. terkahir HTMLnya..


<div id="cube"> 
 <img alt="" src="gambar.jpg" title=""/> 
 <img alt="" src="gambar.jpg" title=""/> 
 <img alt="" src="gambar.jpg" title=""/> 
</div>

nah mudah kan... bagus lagi . hhehehehe semoga bermanfaat ya sob ??

Membuat Background Blog Berubah-ubah (Slideshow) dengan jQuery !

2009-10-14T04:45:00.004+07:00

Hola sista brotha,, saya balik lagi dengan membawa info hangat buat sobat...tetap berkelimpung di dunia jQuery sekarang saya akan share cara membuat background blog kita menjadi background slideshow . Untuk lebih jelasnya lihat demonya disni

Demo

Realy cool .. ! sedikit berbeda dari effect background blog biasanya yg berganti kalo blog melakukan refresh / reload . Yang ini akan berubah-ubah tanpa reload lagi, (namanya juga slideshow... gitu) dan juga sedikit mempercantik dengan menggunakan preloader image pada backgroundnya .

Tanpa banyak cincong.. cabut aja sob ni caranya..

1 Karena plugin jquery, masukan script ini

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

2 lalu masukan juga script dibawh ini tepat dibawah script di atas,

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

Nb: untuk script diatas bs di hostingkan sendiri, dan sekarang saya udah menemukan tempat hosting terbaik dari hostingan manapun, yaitu code.google.com
hahahhahaa (katro ah..) thanks mang beben .

3 mesukan juga scrpit js ini dibawah script di atas


<script type='text/javascript'<
  $(document).ready(function(){
   $('img.maximage').maxImage({
    verticalOffset: 91,
    horizontalOffset: 520
   });
   
   $('img.bgmaximage').maxImage({
     isBackground: true,
     verticalAlign: 'top'
    });
  
   $('img.widthmaximage').maxImage({
    verticalOffset: 91,
    horizontalOffset: 520,
    maxFollows: 'width'
   });
   
   $('img.maxAtOrigImageSize').maxImage({
    verticalOffset: 91,
    horizontalOffset: 520,
    maxAtOrigImageSize: true
   });
   
   $('img.slidemaximage').maxImage({
    isBackground: true,
    slideShow: true,
    verticalAlign: 'top',
    slideShowTitle: true,
    maxFollows: 'height'
   });
  });
 </script>

4. ini ad sedikit css juga..

.slidemaximage { display:none; } 
.loader        { position:absolute;z-index:9999;width:39px;height:39px;top:49%;left:49% }

5. Yang terakhir sob, masukan di dalam tag body yah..

<img src="images/loading.gif" class="loader" /> 
 <img src="images/slides/slide01.jpg" alt="BgSlide Tester" title="title buat imagenya" class="slidemaximage" /> 
 <img src="images/slides/slide02.jpg" alt="BgSlide Tester" title="title buat imagenya" class="slidemaximage" /> 
 <img src="images/slides/slide03.jpg" alt="BgSlide Tester" title="title buat imagenya" class="slidemaximage" /> 
 <img src="images/slides/slide04.jpg" alt="BgSlide Tester" title="title buat imagenya" class="slidemaximage" /> 
 <img src="images/slides/slide05.jpg" alt="BgSlide Tester" title="title buat imagenya" class="slidemaximage" />

Nb: untuk images/loading.gif ini gambarnya

dan untuk link2 gambarnya, itu untuk background yg akan digunakan .

nah gimana sob ? usefull gag yah ? gampang kan ? semoga bermanfaat ajah deh bro .

Membuat Menu / Image Scrolling dengan jQuery

2009-10-11T05:42:00.000+07:00

Just another way to show your image galery . hoahoahoahoa . Waktu bloging bnyk boger yg make slideshow buat nampilin image dan sebagainya, sekarang saya mau share cara nampilin image yg sedikit berbeda, tapi sama . lha ? gimana maksudnya ? coba lihat demonya disini,

Demo

yup begitulah bedanya, hahahaha langsung ajah cara buatnya, its very simple bro, sist .

1. masukin script jquerynya,

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

Nb: Kalo udah ada, tinggalin ajah .
2.Ini css nya..


div.sc_menu {
 position: relative;
 height: 145px;
 width: 500px;
 overflow: auto;
}
ul.sc_menu {
 display: block;
 height: 110px; 
 width: 1500px; 
 padding: 15px 0 0 15px; 
 margin: 0;
 background: #000;  
 list-style: none;
}
.sc_menu li {
 display: block;
 float: left; 
 padding: 0 4px;
}
.sc_menu a {
 display: block;
 text-decoration: none;
}
.sc_menu span {
 display: none;
 margin-top: 3px;
 
 text-align: center;
 font-size: 12px; 
 color: #fff;
}
.sc_menu a:hover span {
 display: block;
}
.sc_menu img {
 border: 3px #fff solid; 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
.sc_menu a:hover img {
 filter:alpha(opacity=50); 
 opacity: 0.5;
}

Nb: bs dirubah sesuka hati kog . cocokin sama template gitu..

3. ini javascriptnya..


<script type= "text/javascript">/*<![CDATA[*/
$(function(){
 //Get our elements for faster access and set overlay width
 var div = $('div.sc_menu'),
  ul = $('ul.sc_menu'),
  ulPadding = 15;
 
 //Get menu width
 var divWidth = div.width();
 
 //Remove scrollbars 
 div.css({overflow: 'hidden'});
 
 //Find last image container
 var lastLi = ul.find('li:last-child');
 
 //When user move mouse over menu
 div.mousemove(function(e){
  //As images are loaded ul width increases,
  //so we recalculate it each time
  var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding; 
  var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
  div.scrollLeft(left);
 });
});
/*]]>*/</script>

Gag banyak2 amat kan sob.. hohohoho .

4. Yg terkahir bro. The HTML .


<div class="sc_menu"> 
 <ul class="sc_menu"> 
     <li><a href="#"><img src="img/1.jpg" alt="Menu"/><span>Menu</span></a></li> 
     <li><a href="#"><img src="img/2.jpg" alt="Navigation"/><span>Navigation</span></a></li> 
     <li><a href="#"><img src="img/3.jpg" alt="Javascript"/><span>jQuery</span></a></li> 
     <li><a href="#"><img src="img/4.jpg" alt="CSS"/><span>Scroll</span></a></li> 
     <li><a href="#"><img src="img/5.jpg" alt="Horizontal"/><span>Horizontal</span></a></li> 
     <li><a href="#"><img src="img/6.jpg" alt="jQuery"/><span>jQuery</span></a></li> 
     <li><a href="#"><img src="img/1.jpg" alt="Menu"/><span>Menu</span></a></li> 
     <li><a href="#"><img src="img/2.jpg" alt="Navigation"/><span>Navigation</span></a></li> 
     <li><a href="#"><img src="img/3.jpg" alt="Graceful"/><span>Graceful</span></a></li> 
     <li><a href="#"><img src="img/4.jpg" alt="Degradation"/><span>Degradation</span></a></li> 
     <li><a href="#"><img src="img/5.jpg" alt="Progressive"/><span>Progressive</span></a></li> 
     <li><a href="#"><img src="img/6.jpg" alt="Enhancement"/><span>Enhancement</span></a></li> 
 </ul> 
</div>

nah jadi deh scrolling imagenya . bisa buat navigasi menu juga seperti judulnya . ato galery image . gimana sob ? gampang kan..

Eye in Your Blog with jQuery !

2009-10-09T04:40:00.000+07:00

Wuih... judul nya bahasa inggrisan sob, soalnya kalo pake bahasa Indonesia jadi '"Mata di Blog mu dengan jQuery !" Rasanya ada yg aneh kalo pake kata "Mata" Wkwkwkwkwk . Btw udah tau blum nih apa maksud dari dudul nya, eh judul nya ? Check the demo page here, nice plugin jquery !

Demo

gimana sob ?? bagus kan ? Blog juga bs punya mata, wkwkwkkw . Sayang gambar matanya kurang bagus, jadi gto dah mata nya . kalo mau ya bikin sendiri gmbar matanya .

langsung ajah cara buatnya sob .

1. Pertama karna plugin jQuery masukin script ini,

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

Nb: Kalu udah ada, tinggaln ajah, biar ga doble .

2. tyus kedua masukin javascript ini,

<script src='http://h1.ripway.com/fabi0/jEye2.js.js' type='text/javascript'/>

Nb: Di script di atas bs di edit sendiri, seperti letak dan gambar mata .

ini untuk background gambar mata , yg tertera dlm script di atas dengan alamat http://i37.tinypic.com/27xq7ih.jpg .

ini untuk gambar eye spotnya atau mata nya , yg tertera dalam script di atas dengan alamat http://i34.tinypic.com/1zejr0w.jpg .

dan sebaiknya di hostingkan ndiri yah..

3. Sekarang javascript buat pemanggilannya . masukan script ini dibawah ini tepat di bawah script di atas .


<script type='text/javascript'>
  $().ready(function() {
   $('body, #myBlock').jEye();
  });
 </script>

sedangkan penggunaan di bagian lain, seperti dalam demo page, mata berada di kotak .
tinggal masukan tag <div id='myBlock'>......</div>

gampang banget kan sob ?? not useful but fun ! =D

Simple jQuery Modal Window

2009-10-04T11:20:00.000+07:00

Hwalow sob, Saya datang lagi nih . Lama ga posting rasa nya, hilang semangat bloging,wah.... gawat . SEMANGAT ! hohohohoo . =D

Sekarang saya mau share cara buat modal window . Dulu waktu share tentang Dekstop Template jQuery ada modal window waktu di double klik icon dekstopnya .

Sekarang bakal share cara buat modal window yg lebih simple . Untuk Contohnya klik disini . Kalo dklik muncul window baru atau yg disebut modal window . Bisa di resize, minimaze dan juga di drag .

Langsung aja cara bro..

1. Seperti biasa karena plugin jQuery, masukan script ini,

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

Nb: Kalo udah ada biarin aja yawh..

2.Masukan script ini dibawah script di atas,

<script src='http://h1.ripway.com/r3ndra/jquery.wm.js' type='text/javascript'/>

Nb: http://h1.ripway.com/r3ndra/jquery.wm.js di hostingkan sendiri, ke hostingan favorit sobat, karena bebehari yg lalu server ripway sempet down . Jadi pilih hostingan yg menurut sobat bagus dan terpercaya .

3. Masukan Css nya,

.window {
position: fixed;
border: 1px outset #036;
background-color: #DDE;
width: 600px;
height: 500px;
}

.window.maximized {
border-width: 0;
}

#resizerproxy,#moverproxy {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999999999;
display: none;
}
#resizerproxy > div,#moverproxy > div {
position: absolute;
border: 2px solid #000;
}

.windowtitlebar {
position: absolute;
top: 1px;
left: 1px;
right: 1px;
height: 24px;
overflow: hidden;
background-color: #999;
cursor: default;
}

.window.focused .windowtitlebar {
background-color: #999;
}

.windowtitlebar > .horizbuts {
position: absolute;
top: 0;
width: 59px;
right: 0;
bottom: 0;
}

.horizbuts > * {
float: left;
width: 16px;
height: 16px;
border: 1px outset #000;
margin: 3px 1px 0 0;
background: #fff url(http://i33.tinypic.com/2pzi8ug.jpg) no-repeat scroll;
}

.horizbuts > .minimizebut {
background-position: -3px 0;
}
.horizbuts > .maximizebut {
background-position: -32px -1px;
}
.horizbuts > .closebut {
background-position: -47px -1px;
}
.horizbuts > .restorebut {
display: none;
background-position: -18px -1px;
}
.window.maximized .horizbuts > .maximizebut { display: none; }
.window.maximized .horizbuts > .restorebut { display: block; }
.window.minimized .horizbuts > .minimizebut { display: none; }
.window.minimized .horizbuts > .restorebut { display: block; }

.windowcontent {
border: 1px inset #999;
border-bottom: 0;
position: absolute;
top: 25px;
right: 1px;
left: 1px;
bottom: 2px;
overflow: auto;
background-color: white;
}
.windowcontent > iframe {
border: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.windowcontent > .iframecover {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 3;
}
.window.focused > .windowcontent > .iframecover {
z-index: 1;
}
.window.moving > .windowcontent > .iframecover {
z-index: 3 !important;
}
.resizer-tl { position: absolute; left: -2px; top: -2px; width: 6px; height: 6px; cursor: se-resize; }
.resizer-t  { position: absolute; left: 6px; right: 6px; top: -2px; height: 6px; cursor: n-resize;}
.resizer-tr { position: absolute; right: -2px; top: -2px; width: 6px; height: 6px; cursor: ne-resize;}
.resizer-r  { position: absolute; top: 6px; bottom: 6px; right: -2px; width: 6px; cursor: e-resize; }
.resizer-br { position: absolute; right: -2px; bottom: -2px; width: 6px; height: 6px; cursor: se-resize;}
.resizer-b  { position: absolute; left: 6px; right: 6px; bottom: -2px; height: 6px; cursor: s-resize; }
.resizer-bl { position: absolute; left: -2px; bottom: -2px; width: 6px; height: 6px; cursor: ne-resize;}
.resizer-l  { position: absolute; top: 6px; bottom: 6px; left: -2px; width: 6px; cursor: w-resize;}

.titlebaricon {
position: absolute;
left: 4px;
top: 4px;
width: 16px;
height: 16px;
overflow: hidden;
}

.titlebartext {
position: absolute;
color: white;
font-weight: bold;
left: 24px;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}

/* IE needs to think there is an image in some divs otherwise it optimizes them away */
.IE #resizerproxy,.IE #moverproxy,
.IE .resizer-tl, .IE .resizer-t, .IE .resizer-tr, .IE .resizer-r,
.IE .resizer-br, .IE .resizer-b, .IE .resizer-bl, .IE .resizer-l {
background: url('IEHACK');
}

Nb: http://i33.tinypic.com/2pzi8ug.jpg ini juga dihostingkan ndiri, tp klo mau pake . pake aja .

4. Terakhir Pemakaianya . Pemaikaianya Memakai target:_child Seperti ini,

<a href="link" target="_child">link</a>

untuk link bs menggunakan pemanggilan situs lain atau pemanggilan tag div .

nah gampang kan.. yup semoga bermanfaat sob .

Mouseover Spotlight Effect dengan jQuery

2009-09-29T09:22:00.000+07:00

Wooyooo.... i'm back with new post . Sesuai judulnya kali ini bakal share tentang effect spotligth, ngerti ga nih sob apa itu spotlight ? pasti ngerti kan, kalo ga ngerti pasti bakal ngerti sendiri kalo ngarahin mousenya ke bagian penulisan script dibawah . Cocok bgt deh kalo effect nya dibuat dibagian penulisan script .

Ni trik cukup gampang banget kok buat nya, gni sob..

1. Masukin script jquerinya nih sob, biasa dibagian <head>...</head>



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

Nb:
Kalo udah ada, biarin aja . Biar gag doble

2. Masukin script plugin spotlight jquery ini dibawah script di atas..



<script src='http://h1.ripway.com/r3ndra/spotlight3.js' type='text/javascript'/>

Nb:
>>http://h1.ripway.com/r3ndra/spotlight3.js, sebaiknya ini di hostingkan sendiri..

>>Untuk merubah warna dari spotlight atau mengedit yg lainya langsung edit di script plugin nya, karena cssnya dibuat langsung masuk ke javscript ini .

>> di dalam javascript nya cari

speed: 400,
color: '#333',

speed untuk fungsi seberapa cepat datang nya, dan color untuk merubah warnanya . untuk yg lainya ? ya suka2 lu mau di apain .

3. Masukan Javascrip ini juga .



<script type='text/javascript'> 
$(document).ready(function(){
 $('pre').bind('mouseover', function(){
  $(this).spotlight({exitEvent:'mouseover', speed:200});
 });
});</script>

4. Dan untuk pemaikaianya gini sob..
<pre>

ini content yg menggunakn effect spotlight saat di mouseover .

</pre>

nah mudah kan... keren lagi hahahaha . apa artinya menulis "<pre>" untuk mendapatkan effect spotlight . Gampang bgt..

Semoga postingan kali ini bermanfaat .

Windows Desktop Template dengan jQuery ??

2009-09-28T02:35:00.000+07:00

hoaaammmhh,, posting sambil ngantuk2 nih sob, hahahaha . Meski ngantuk, tetep semangat !!

Dari pada ngurusin ngantuk, mending ngurusin judul post ini, Windows Dekstop Template dengan jQuery ?? ngerti maksudnya gag sob ?? Biar ngerti langsung menuju kesini..

Demo

hmmm, gimana sob ? doubleklik pada dekstop . lalu window dengan resize..semacem dekstop di pc kita kan ?

disini saya akan sedikit menerangkan tntang pembuatnya..

1. CSS

Css nya sangat bergantung sama z-index, maka dari itu mungkin untuk IE6 demo hnya bakal gag jalan dengan baik sob.. kalo mau liat css dari dekstop template, bisa langsung di ctrl+u pada demo nya .

2. Javascript

Yakin deh, jQuery emang mantaf.. sekarang saya akan menjelaskan guna javascritp secara terperinci dalam desktop template ini,

Clock,

// Update every 60 seconds.
setTimeout(JQD.init_clock, 60000);

ini js untuk jam, yg gunanya berubah setiao 60 detik .

Resize Window

//
// Resize modal window.
//
window_resize: function(el) {
// Nearest parent window.
var win = $(el).closest('div.window');

// Is it maximized already?
if (win.hasClass('window_full')) {
// Restore window position.
win.removeClass('window_full').css({
'top': win.attr('data-t'),
'left': win.attr('data-l'),
'right': win.attr('data-r'),
'bottom': win.attr('data-b'),
'width': win.attr('data-w'),
'height': win.attr('data-h')
});
}
else {
win.attr({
// Save window position.
'data-t': win.css('top'),
'data-l': win.css('left'),
'data-r': win.css('right'),
'data-b': win.css('bottom'),
'data-w': win.css('width'),
'data-h': win.css('height')
}).addClass('window_full').css({
// Maximize dimensions.
'top': '0',
'left': '0',
'right': '0',
'bottom': '0',
'width': '100%',
'height': '100%'
});
}

// Bring window to front.
JQD.window_flat();
win.addClass('window_stack');
},

ini digunakan agar fungsi resize window dapat berjalan..

Auto Open New Tab

// Relative or remote links?
$('a').click(function() {
var url = $(this).attr('href');
this.blur();

if (url.match(/^#/)) {
return false;
}
else if (url.match('://')) {
$(this).attr('target', '_blank');
return true;
}
});

ini fungsinya untuk otomatis buka newtab saat klik link

Membuat Menu Aktif

// Make top menus active.
$('a.menu_trigger').mousedown(function() {
JQD.clear_active();
$(this).addClass('active').next('ul.menu').show();
}).mouseenter(function() {
// Transfer focus, if already open.
if ($('ul.menu').is(':visible')) {
JQD.clear_active();
$(this).addClass('active').next('ul.menu').show();
}
});

ini untuk mengaktifkan menunya..

Dekstop Icon

// Desktop icons.
$('a.icon').mousedown(function() {
// Highlight the icon.
JQD.clear_active();
$(this).addClass('active');
}).dblclick(function() {
// Get the link's target.
var x = $($(this).attr('href'));
var y = $(x.find('a').attr('href'));

// Show the taskbar button.
if (x.is(':hidden')) {
x.remove().appendTo('#dock').end().show('fast');
}

// Bring window to front.
JQD.window_flat();
y.addClass('window_stack').show();
}).draggable({
revert: true,
containment: 'parent'
});

script ini dipakai agar window akan muncul setelah double klik

Taksbar Buton

// Taskbar buttons.
$('#dock a').live('click', function() {
// Get the link's target.
var x = $($(this).attr('href'));

// Hide, if visible.
if (x.is(':visible')) {
x.hide();
}
else {
// Bring window to front.
JQD.window_flat();
x.show().addClass('window_stack');
}

// Stop the live() click.
this.blur();
return false;
});

Seperti pada pc umumnya kalo windows di minimized, akan muncul bar pada taksbar .

Wallpaper
// Add wallpaper last, to prevent blocking.
$('body').prepend('<img id="wallpaper" class="abs" src="wallpaper url" />');

seperti yg saya katakn sebelumnya, ini sangat bergantung pada z-index . sehingga wallpaper dibuat agar dapat menutup background asli .

Nah begitu javascriptnya yg udah bisa tmn2 liat lengkap disini

dan jangan lupa yg pasti menggunakan script jquery ini jquerypack.

Template yg saya buat ini sebenarnya kurang cocok untuk blog.. mekso kalo kata orang . Yg saya bingungkan gimana pemakaian teknik ajax pada "post" agar tidak load ulang semua.. ada yang punya refrensi tutorial pengguna'an ajax ga ?

Thumbnail Hover Effect dengan jQuery

2009-09-25T21:22:00.001+07:00

Hoi sobat2 giblog, saya posting lagi nih . Kali ini saya akan share cara buat effect thumbnail hover dengan jquery . Bingung apa maksud dari judul nya ??

liat contoh nya disni,

Demo

nah keren kan buat nampilin image ?? di demo saya gunain buat nampilin banner sahabat giblog, biar keren banner2nya saya kasih effect thumbnail, hehehe .

Mau gimana cara buatnya ?? mau ga mau saya mau share . hohoho .

1. Seperti biasa masukan script ajax ini,

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

Nb: kalo udah punya, biarin ajah biar ga doble .

2. Ini css nya sob.

ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
-ms-interpolation-mode: bicubic;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(thumb_bg.png) no-repeat center center; /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

Nb:
Untuk thumb_bg.png tmn2 ganti sm url gambar ini .

3. Make it life.. hohoho ini javascript nya

$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/
$(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
.animate({
marginTop: '-110px', /* The next 4 lines will vertically align this image */
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px', /* Set new width */
height: '174px', /* Set new height */
padding: '20px'
}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */

} , function() {
$(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
$(this).find('img').removeClass("hover").stop() /* Remove the "hover" class , then stop animation queue buildup*/
.animate({
marginTop: '0', /* Set alignment back to default */
marginLeft: '0',
top: '0',
left: '0',
width: '100px', /* Set width back to default */
height: '100px', /* Set height back to default */
padding: '5px'
}, 400);
});

4. Yup trakhir html nya atau pemakaian nya,

<ul class="thumb">
<li><a href="#"><img src="thumb1.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb2.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb3.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb4.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb5.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb6.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb7.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb8.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb9.jpg" alt="" /></a></li>
</ul>

nah begitu lah, gampang kan ?? semoga bermanfaat yah sob .

Membuat Effect Pageflip jQuery

2009-09-23T02:14:00.000+07:00

Hoahoahoahoa... posting lagi ni.. sekarang mau share gimana caranya buat effect pageflip pada blog . tau pagi flip ? liat demonya disini,

Demo

letak pageflip ada di pojok posting, itu namanya pageflip, hehehehe .

yup langsung ajah cara buatnya .

1. ini cssnya..

#pageflip {
position: absolute;
right: 0; top: 150px;

}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://i36.tinypic.com/vxmfsl.jpg) no-repeat right top; z-index: 98;
}

Nb:
>> position: absolute;
right: 0; top: 150px;

ini posisinya, bs dganti semaunya .

>> http://i36.tinypic.com/vxmfsl.jpg ini adalah gambar dari isi pageflip, bs diganti semaunya..

2. Masukan script ini di

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

Nb:
>> kalo udah ada sebaiknya dibiarkan ajah biar gag dobel .

3. ini javascriptnya..

<script type='text/javascript'>
$(document).ready(function(){

//Page Flip on hover

$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});

});
</script>

4. terakhir, pemanggilannya..masukan script ini d bagian body atau widget .

<div id='pageflip'>
<a href='#'><img alt='' src='http://i38.tinypic.com/2450f4l.jpg'/></a>
<div class='msg_block'/>
</div>

Nb:

Gambar ini bs di upload sndiri...

nah selesai deh.. gampang kan..

moga bermanfaat ajah deh..

Membuat Navbar Menu Dock Style jQuery

2009-09-20T17:46:00.001+07:00

Alow sob.. saya posting lagi, hihihihihi . Sebelumnya Minal aidzin yah bro, sist . Lanjut..
Sekarang saya akan share cara buat dock menu sob . Udah tau kan dimana dock menu ? Yang biasa dipake pada pc kita . Sekarang coba terapkan pada blog . Untuk contoh / demonya disini..

Demo

Gimana ? udah tau kan ? itu, menu dock yg di bagian atas blog . mau ?

langsung ajah cara buat nya sob .

1. Masukin nih css sob .
/* dock - top */
.dock {
position: relative;
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background: url(http://i37.tinypic.com/2epo6bm.jpg);
padding-left: 20px;
}
a.dock-item {
display: block;
width: 40px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: none;
padding-left: 20px;
}

NB:

Gambar ini bisa diupload sendiri .

2. Masukan javascript ini .
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://granoblog.googlecode.com/files/interface.js' type='text/javascript'/>

Nb:

--Sekali lagi saya ingatkan, sebaiknya http://granoblog.googlecode.com/files/interface.js dihostingkan sendiri di tempat hostingan sobat yg lebih terpercaya .
--Dan untuk script jquery/1.3.2 jika sudah ada sebaiknya dibiarkan saja biar ga dobel .

3 ini javascriptnya, masukin tepat dibawah script di atas,

<script type='text/javascript'>

$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);

</script>

4. Terakhir pemanggilannya sob, letakan dibagian body yak, atau di widget juga boleh .

<div class='dock' id='dock'>
<div class='dock-container'>
<a class='dock-item' href='#'><img alt='home' src='http://i38.tinypic.com/34y41hg.jpg'/><span>Home</span></a>
<a class='dock-item' href='#'><img alt='contact' src='http://i37.tinypic.com/2hpn4b8.jpg'/><span>Contact</span></a>
<a class='dock-item' href='#'><img alt='Link Exchange' src='http://i37.tinypic.com/29pdt35.jpg'/><span>Link Exchange</span></a>
<a class='dock-item' href='#'><img alt='portfolio' src='http://i34.tinypic.com/29e4ztd.jpg'/><span>Daftar Isi</span></a>
<a class='dock-item' href='#'><img alt='rss' src='http://i34.tinypic.com/346tagy.jpg'/><span>Rss</span></a>
</div>
</div>

Nb:

Gambar2 diatas bs di hosting sendiri atau bs juga diganting semaunya.. kalo mau yg praktis ? yah sok pake ajah atuh sob...

Selesai deh.. gampang kan ?? trik gampang hasilnya memuaskan..
seperti prinsip bang jquery, write less do more..

Menyembunyikan Comentar dengan Accordion Menu jQuery

2009-09-19T19:03:00.002+07:00

Nah... posting lagi deh..

Sekarang saya akan share gimana cara menyembunyikan komentar pada posting di blog dengan teknik expand collaps . Udah bisa temen2 liat gimana tampilan komentar pada blog q ini . Lumayan kan ? buat nyembunyi'in komentar yg terasa terlalu banyak atau sekedar mempercantik tampilan commentar pada blog .

Disini saya akan coba share dari awal gimana cara buat accordion menu sampai gimana cara penerapannya pada commentar .

Untuk contoh dari Accordion menunya bisa teme2 liat di sebelah kiri blog saya,,

trus cara buatnya ?? ini tutorial saya ambil dari sini

1. Masukan script jquery ini

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

NB: Kalo udah punya biarkan saja biar ga double .

2. masukan script ini dibawah script diatas .
<script src='http://granoblog.googlecode.com/files/acordion.js' type='text/javascript'/>

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

Nb : Sebaiknya dihostingkan sendiri ke hostingan favorit sobat yg sekiranya lebih cepat

3. ini css nya..

.arrow{
width: 425px; /*width of accordion menu*/
}

.arrow .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(http://i25.tinypic.com/2885cih.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}

.arrow .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(http://i28.tinypic.com/24mw0n5.jpg);
}

#main .box1 .arrow ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrow ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrow ul li a{
color: #A70303;
background: url(http://i27.tinypic.com/eldzxd.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrow ul li a:visited{
color: #A70303;
}

.arrow ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}

NB: Sesuaikan sama kebutuhan yah..

4. Sekarang penempatanya...

<div class="arrow">

<h3 class="menuheader expandable">Judul</h3>
<ul class="categoryitems">
isi..
</ul>

<h3 class="menuheader expandable">Judul</h3>
<ul class="categoryitems">
isi..
</ul>

<h3 class="menuheader expandable">Judul</h3>
<ul class="categoryitems">
isi..
</ul>

</div>

jadi deh accordion menu nya..

sekarang gimana caranya mengapplikasikan accordion menu pada kotak komentar..

1. Masuk Edit-HTML jangan lupa centang Expand Template Widget . lalu cari kode

<DL id='comments-block'>

lalu tambahkan script dibawah ini tepat diatas kode di atas,
<div class="arrow">

<h3 class="menuheader expandable">Judul</h3>
<ul class="categoryitems">

2. Lalu cari kode </DL> dan masukan kode ini tepat dibawah nya,
</ul>

</div>

nah selesai.. temen2 juga bisa pakai expand-collaps lain atau memakai accordion menu lain, asalkan benar dalam memasang/mengapplikasikannya pada comentar blog.

nah.. semoga postingan kali ini cukup bermanfaat.. kalo ada salah tolong di kasih comment.. soalnya saya bukan malaikat yg selalu benar.. hoahoahoa...

Cara Membuat Drop-in Box

2009-09-19T00:05:00.000+07:00

Sesusai petanyaan mas beben, tentang gimana caranya buat drop-in box ini, saya akan share ajah di sini .

Drop-in box . Yuph sebenernya banyak banget kegunaan dari trik ini cuy.. kalo buat saya, saya gunaan untuk menyampaikan pesan selamat hari raya idul fitri . Seperti kata bang andri-sofda, mungkin trik ini lebih cocok digunakan untuk nampilin iklan yg mungkin temen2 kebingungan dimana menempatkan iklan kalo blog udah terasa penuh .

Langsung ajah caranya cuy..

1.Masukan css ini..



<style type="text/css">

#dropinboxv2cover{
width: 450px; /*ganti width sesuai kebutuhan cuy */
position:absolute;
z-index: 100;
overflow:hidden;
visibility: hidden;
}

#dropinboxv2{
width: 450px;
border: 2px black;
background-color: white;
padding: 4px;
position:absolute;
left: 0;
top: 0;
}

</style>

2. ini javascriptnya..



<script type="text/javascript">

var dropboxleft=200 //set left position of box (in px)
var dropboxtop=100 //set top position of box (in px)
var dropspeed=15 //set speed of drop animation (larger=faster)

//Specify display mode. 3 possible values are:
//1) "always"- This makes the fade-in box load each time the page is displayed
//2) "oncepersession"- This uses cookies to display the fade-in box only once per browser session
//3) integer (ie: 5)- Finally, you can specify an integer to display the box randomly via a frequency of 1/integer...
// For example, 2 would display the box about (1/2) 50% of the time the page loads.

var displaymode="always"


if (parseInt(displaymode)!=NaN)
var random_num=Math.floor(Math.random()*displaymode)
var ie=document.all
var dom=document.getElementById

function initboxv2(){
if (!dom&&!ie)
return
crossboxcover=(dom)?document.getElementById("dropinboxv2cover") : document.all.dropinboxv2cover
crossbox=(dom)?document.getElementById("dropinboxv2"): document.all.dropinboxv2
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossbox.height=crossbox.offsetHeight
crossboxcover.style.height=parseInt(crossbox.height)+"px"
crossbox.style.top=crossbox.height*(-1)+"px"
crossboxcover.style.left=dropboxleft+"px"
crossboxcover.style.top=dropboxtop+"px"
crossboxcover.style.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropinv2()",50)
}

function dropinv2(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossbox.style.top)<0){ top="scroll_top+dropboxtop+" top="parseInt(crossbox.style.top)+dropspeed+" top="0" visibility="hidden" search =" Name" returnvalue = ""> 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

if (displaymode=="oncepersession" && get_cookie("droppedinv2")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){
if (window.addEventListener)
window.addEventListener("load", initboxv2, false)
else if (window.attachEvent)
window.attachEvent("onload", initboxv2)
else if (document.getElementById || document.all)
window.onload=initboxv2
if (displaymode=="oncepersession")
document.cookie="droppedinv2=yes"
}

</script>

wah banyak juga yaa..

3. terakhir sob ini pemanggilannya masukin dimana ajah..

<div id="dropinboxv2cover">
<div id="dropinboxv2">
ini isi dari drop-in boxnya<br/>
<p align="left"><a href="#" onclick="dismissboxv2();return false"><img src="http://i27.tinypic.com/2rmrv39.jpg"/></a></p>

</div>
</div>

NB:

--isi ganti sesuai keinginan

--http://i27.tinypic.com/2rmrv39.jpg ini adalah gambar dari close yg saya pakai bisa diganti dengan gambar lain atau lebih sederhananya pakai tulisan close aja tanpa gambar .

nah selesai.. gampang kan sob..

Memberi Title pada Judul Posting di Blog

2009-09-15T21:16:00.000+07:00

Memberi fungsi title pada posting blog sebenarnya cuma berguna bagi pengguna tooltip atau kotak keterangn kecil yg tampil pada link . Kalo judul posting kita gag ada fungsi title nya, jelas tampilan tooltip terlihat ga sempurna, alias kurang sip .

Kenapa saya share ini ? jujur saya dulu saat pertama pakai tooltip, kebingungan lihat hasil dari tooltip, kenapa ga ada title pada judul post nya yah ? (maklum.. newbie . hehehehehe). Akhirnya setelah nguprek2 isi edit HMTL ketemu juga kenapa ga ada title nya .

Sekarang temen2 coba cari <b:includable id='post' var='post'>
biasa nya dibawahnya ada script seperti ini,
<A expr:name='data:post.id'/>

nah itu harus ditambahin jadi
<A expr:name='data:post.id expr:title='data:post.title'/>

dan untuk

<A expr:href='data:post.link'><data:post.title/></A>

juga ditambahin jadi
<A expr:href='data:post.link' expr:title='data:post.title'/ ><data:post.title/></A>

nah sekiranya udah bener lalu save template, semoga jadi ada titlenya judul post kita..

Bermain-main dengan Css Positioning

2009-09-14T04:35:00.000+07:00

Salah satu fungsi css yg penting itu positioning sob.. Margin, padding, top, left, right, bottom, position, dan z-index itu adalah contoh dari fungsi positioning dalam css .

Nah untuk z-index contohnya klik ajah facebox di atas,

text bisa tumpuk, dalam arti jadi background gitu...
css nya seperti ini,
.element { font-size:75px; position:absolute; }
#element-1 { color:black; z-index:1; }
#element-2 { color:white; margin:30px 0 0 30px; z-index:2; }
#element-3 { color:black; margin:60px 0 0 60px; z-index:3; }
#element-4 { color:white; margin:90px 0 0 90px; z-index:4; }
#element-5 { color:black; margin:120px 0 0 120px; z-index:5; }
#element-6 { color:white; margin:150px 0 0 150px; z-index:6; }

Z-index dsni digunakan untuk mengatur posisi text, z-index 1 paling bawah, 2 lebih atas, 3 lebih atasnya lagi, dan seterusnya begitu..

Gmn cara pake nya ? yah biasalah sob.. kyk begini,

<div id="element-1" class="element">Bermain</div>
<div id="element-2" class="element">main</div>
<div id="element-3" class="element">dengan</div>
<div id="element-4" class="element">css</div>
<div id="element-5" class="element">positioning</div>
<div id="element-6" class="element">cuy..</div>

trus kalo yg miring itu css nya sperti ini

#rotate {
float:left;
font-size:150px;
-webkit-transform: rotate(-45deg); -moz-transform:rotate(-45deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Untuk derajat nya bisa dirubah sesuai selera kok..
cara pake nya yah sama dong..
<div id="rotate">
Tulisan nya miring nih..
</div>

nah gitu lah sekilas tentang z-index dan rotation.. lumayan lah .

Cara Membuat Tooltip Sederhana

2009-09-13T18:12:00.000+07:00

Baru ajah salah satu sobat saya bertanya gmn tuh cara buat tooltip seperti saya . Kebingungan juga nih gimana caranya saya jawab, akhirnya kepikiran untuk posting ajah deh biar gampang hehehe .

Sebenernya nih trik udah cukup lama yah, tapi yg nama nya belajar kan gag kenal waktu, ap salahnya kalo saya posting sekarang .

Udah tau kan apa itu tooltip ? Yoi, Kotak keterangan waktu mouse nyorot sebuah link ato gambar gitu . Nah tooltip yg akan saya share dsni yaitu tooltip yg saya gunakan sekarang ini, Kotak keterangn yg muncul dari tooltip ini adalah keterangn title dari sebuah link dan alamat link . Untuk contohnya sorot ajah beberapa link saya .

Langsung ajah cara buatnya . gampang kok .

1. Masukan css berikut sob .
/* Fading Tooltips By Frank Bueltge*/
body div#toolTip {
position:absolute;
z-index:1000;
min-width:150px;
background:#FFFFFF;
border:2px solid #000000;
text-align:left;
padding:5px;
min-height:1em;
}

body div#toolTip p {
margin:0;
padding:0;
color:#000000;
font:13px verdana,arial,sans-serif;
font-weight:bold;
}

body div#toolTip p em {
display:block;
margin-top:3px;
color:#000000;
font-size:11px;
font-style:normal;
font-weight:normal;
}

body div#toolTip p em span {
font-weight:bold;
color:#000000;
}
NB: Bisa di edit2 sendiri sesuai template temen2 .

2. Lalu masukan script berikut, dibawah ]]></b:skin>
<:script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

NB: Kalo udah punya sebaiknya gag usah biar gag dobel .

3. Masukan script dibawah ini juga dibawah script diatas
<SCRIPT src='http://h1.ripway.com/fabi0/AddEvent.js' type='text/javascript'/>
<SCRIPT src='http://h1.ripway.com/fabi0/title.js' type='text/javascript'/>

NB: Untuk tulisan berwarna merah sebaiknya dihostingkan sendiri ke hostingan favorit sobat yg sekiranya lebih cepat . Tapi kalo mau yg instan pake ajah .

4. Dan yg terakhir masukan javascript ini dibawah script diatas .
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("

"+content+"

");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery);
//]]>
</script>


Nah mudah kan ? silahkan dicoba, biasanya tooltip muncul setelah load page selesai . jadi jangan merasa gagal dulu sebelum load page selesai .

Pesan Selamat Datang Menurut Waktu (Javascript Alert)

2009-09-12T17:25:00.000+07:00

Tentunya udah pada tau kan gimana cara kerja alert message dari javascript ? Yuph, alert message yg biasanya digunakan sebagai pesan selamat datang di sebuah blog . Nah sekarang saya akan sedikit share alert message yang sedikit berbeda . Time Message Alert, yaitu pesan selamat datang yg bisa berubah2 menurut waktu pengunjung...

Contohnya.. Karena saya gag pake fasilitas javascript yang satu ini, saya kasih gambar preview na ajah yah sob ?

Begini, dengan js dibawah ini yg bisa temen2 masukan di antara <head></head> .

<SCRIPT language=javascript>
var date = new Date();
var hours = date.getHours();

if (hours > 0 && hours < 12) {
alert("Good Morning!");
} else if (hours >=12 && hours < 18) {
alert("Good Afternoon!");
} else if (hours > 18 && hours < 21) {
alert("Good Evening!");
} else if (hours > 21 && hours < 0) {
alert("Good Night.");
} </script>

Dengan script di atas, hasilnya akan begini..

Kalo dateng waktu jam 0-12 pagi akan muncul pesan alert

Sedangkan misal dateng waktu jam 12-18 akan muncul pesan alert

nah gitu.. gampang kan ?? untuk jam dan pesan nya bisa di edit sendiri kok...

Ganti Style Font Blog dengan Metode Cufon

2009-09-10T13:46:00.001+07:00

Di postingan sebelumnya, saya udah share gmn ganti font dengan metode css kan ?? nah sekarang untuk metode Cufon saya akan share disini, Langsung ajah sob, to the poin .

Caranya..

1. Kunjungi situs Generate Cufon untuk mengubah format font menjadi format javascript . Kalo sobat kebingungan mau menggunakan font jenis apa, temen2 bisa cari dan pilih dibawah ini

1. Font Squirrel

2. Font Cubes

3. 1001 Free Fonts

4. SearchFreeFonts.com

5. dafont.com

6. abstractfonts.com

Download fontnya, lalu generate font yg udah di download , Setelah mendapat hasil generate dalam berbentuk javascript . Upload file javascript ke hostingan favorit temen2 .

2. Tahap kedua masukan Javascript Cufon dibawah ini di bawah ]]></b:skin>
<script src='cufon.js' type='text/javascript'/>

Nb:
>> untuk cufon.js coba clik langsung di sini

3. Lalu masukan juga script dibawah ini sesudah script di atas, <script src='http://URL FONT SOBAT.JS' type='text/javascript'/>

NB : http://URL FONT SOBAT.JS adalah hasil generate font dalam berbentuk javascript yg sudah di upload .

4. Masukan juga javascript ini dibawahnya. <script type='text/javascript'>
Cufon.replace('h1', {
textShadow: '#BBB 1px 2px'
});
Cufon.replace('h2', {
textShadow: '#BBB 1px 2px'
});
Cufon.replace('h3');

</script>

5. Nah terakhir nih sob, masukan css ini..
Cufon.replace('#cufon-area h1, #cufon-area h2, #cufon-area h3');

Nah selesai.. simpan sob . lalu lihat hasil nya ..

Ganti Style Font Blog dengan Mudah

2009-09-10T13:13:00.000+07:00

Nah setelah utak utik font blog saya nih, akhirnya selesai juga . Kliatn kan bedanya ? meski gag sebagus dan sekeren blog sobat, lumayan buat nambah design blog saya . hehehehhe .

Kalo yg saya tau sih ganti font dengan 2 cara, Ganti font default dengan mengganti style css dan ganti font dengan menggunakan metode Cufon . Untuk ganti font default dengan style css jenis font tidak terlalu banyak, sedangkan ganti font dengan metode Cufon, banyak banget jenis fontnya karna kita upload sendiri fontnya sob ..

Disini saya akan coba share cara ganti font dengan css,

1. Pertama masuk Edit HTML blog sobat,

2. Lalu cari kode css body {
tamabahin ajah atao ganti jenis text/font (font-family, font-size, letter-spacing, word-spacing, line-height). Biasanya kita kesulitan untuk mengatur font-family, font-size, letter-spacing, word-spacing, line-height yg tepat buat blog kita . Tapi tenang ajah karena ada alat bantu online untuk css font style .

Beberapa alat bantu :

Nah gampang kan ? tinggal pilih, generate lalu copy code nya ke dalam body {

Misal : body {
background:#E7E2DA
font-family: "Lucida Console", Monospace;
font-size: 11px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.4em;
}

Kira2 begitu hasilnya .

NB:

font-family: "Lucida Console", Monospace;

font-size: 11px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.4em;

adalah code css hasil generate font .

Untuk Mengatur perbedaan Font antar judul blog dan judul posting, temen2 bisa cari css h1{ untuk judul blog dan h3{ untuk judul posting .

Seperti di atas temen2 tinggal masukin css kode fontnya,
Misal : h3{
font-size:28px;
text-align:center;
font-family: Comic Sans MS;
}

Mudahkan ? untuk ganti font dengan cara cufon . temen2 bisa lihat caranya disini

Intel Rilis Core i5 & Core i7 Baru

2009-09-09T22:47:00.000+07:00

Intel kemarin secara resmi merilis procesor 1156 pin Core i5 dan Core i7. Procesor baru Intel dengan socket 1156, antara Core i5 berbeda dengan Core i7.

Core i5 tidak memiliki fitur HT dan 64bit, dengan batas fitur Turbo 3.2Ghz untuk Corei5 750. Sedangkan Core i7 memiliki fitur HT dan kemampuan 64 bit computing. Keduanya memiliki jumlah L3 8MB.

Dari laporan Techreport, kemampuan Core i5 disaingin ketat oleh Core 2 Quad. Kecuali total konsumsi power, untuk Core i5 lebih hemat. Kemampuan tertinggi tetap dipegang oleh Core i7.

Hasil test game dari HotwareKemampuan Core i5 dan Core i7 mampu mendongrak kecepatan VGA dibanding Core 2 Quad.

Hasil test Tomshardware

Membuat Dropcap pada Posting

2009-09-09T18:10:00.000+07:00

Dropcap, yuph, udah pada tau kan gmn cara kerja dropcap ? Trik yg simple tapi menambah style postingan pada blog .
Disini saya akan share cara buatnya . Ada 2 cara membuat dropcap . Yang pertama dengan cara manual, dan yang kedua dengan cara otomatis .

Cara Manual,

1. Tambahkan css dibawah ini sob..
.frame{
background:transparent url(http://lh5.ggpht.com/_dfnTVAxeWMI/SmEap-CgdGI/AAAAAAAABhM/HbiEtsSoRaE/s800/strong.gif) no-repeat scroll center 2px;
display:block;
float:left;
font-size:44px;
font-weight:normal;
height:44px;
width:54px;
line-height:0.76em;
margin:0 0.18em 0 0;
padding:12px 0 0;
text-align:center;
text-transform:uppercase;
color:#333;
}

NB: >> http://lh5.ggpht.com/_dfnTVAxeWMI/SmEap-CgdGI/AAAAAAAABhM/HbiEtsSoRaE/s800/strong.gif ini adalah background gambar dari dropcap, bisa langsung temen2 ganti .

>> Untuk style lainya bisa temen2 ganti sendiri .

2. Selanjutnya, karna cara manual, butuh pemanggilan disetiap postingannya, jadi tambahin script dibawah ini disetiap awal posting,

<span class="frame">D</span>ropcap,

Nah muda, tapi cukup ribet untuk harus nambahn span disetiap posting,

sekarang cara yg otomatis,

1. Cari kode .post body { di css temen2 .
2. Lalu tambahin kode berikut .
.post-body p.dropcap:first-letter {
font-size:3em;
float:left;
margin-right:5px;
vertical-align:text-top;
} untuk mengatur besar kecil dropcapnya, ganti ajah style nya sesua kenginann .

3. Lalu cari kode
<data:post.body/>
Kalo code nya gag di apit <p> <data:post.body/> </p>

tambahin ajah, jadi <p class='dropcap'> <data:post.body/> </p>

kalo udah diapit sama <p> tinggal nambah class,

Nah selesai........ kalo yg otomatis langsung semua posting menggunakan dropcap .

Menampilkan Gambar / Teks dengan Box Style Facebook jQuery

2009-09-08T22:10:00.001+07:00

Yuph Brotha.. sekarang saya coba share cara buat modal box dengan style facebook, biasa na banyak digunakan untuk nampilin gambar ato tulisan2 tertentu gitu,

Contoh na klik ajah facebox di atas sob,

ato

untuk contoh nampilin gambar,

Klik Disini Sob

nah begitu lah contoh na..
mau ?

langsung ajah caranya..

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

2. Masukan Javascript berikut dibawah script jquery tadi,

<script src='http://www.hotlinkfiles.com/files/2644259_k5ca6/facebox.js' type='text/javascript'/>

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

3. Masukan juga css-nya sob..
/*Facebox*/
#facebox .b {
background:url(http://www.hotlinkfiles.com/files/2644245_c74zp/b.png);
}
#facebox .tl {
background:url(http://www.hotlinkfiles.com/files/2644250_gzeak/tl.png);
}
#facebox .tr {
background:url(http://www.hotlinkfiles.com/files/2644244_e9l2g/tr.png);
}
#facebox .bl {
background:url(http://www.hotlinkfiles.com/files/2644246_e5qa5/bl.png);
}
#facebox .br {
background:url(http://www.hotlinkfiles.com/files/2644247_c2fz9/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 .tl, #facebox .tr, #facebox .bl, #facebox .br {
height: 10px;
width: 10px;
overflow: hidden;
padding: 0;
}

4. Sekarang pemanggilannya.. Untuk Facebox Berisi Tulisan, pertama Sobat Masukan script dbwah ini di atas </body>
<div id="info" style="display:none;">
Isi tulisan sobat disini
</div>

Lalu, masukan script dibawah ini dtempat yg sobat mau,

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

NB: #info adalah tag pemanggil untuk div info .
rel adalah tag yg digunakan untuk memakai facebox .

Untuk Facebox berisi gambar, tanpa memasukan div, langsung memasukan script dibawah ini ditempat yg sobat mau,

<a href="http://i27.tinypic.com/t66skw.jpg" rel="facebox">Klik Disini Sob</a>

NB: http://i27.tinypic.com/t66skw.jpg adalah url gambar, ganti dengan url gambar yg sobat mau .

Selesai... gmnah ? mau coba ??

Awas Virus Deadlock, Pesannya Positif Tapi Hancurkan Komputer

2009-09-07T11:30:00.000+07:00

Waktu jalan2 naek motor nya mbah google nih . saya nemuin artikel tentang virus deadlock, langsung ajah kepikiran buat share sama temen2 .

Virus ini Pesannya terdengar positif dengan kata2 yg membangkitkan patriotisme. Tapi, jangan terbuai kata-kata manis yang dibawa sebuah virus komputer lokal baru yang bernama Deadlock .

ini pesan yg disampaikan oleh virus penipu tersebut..

Bebaskan Negeri kami Indonesia dari Terorisme, Anarkis, dan KKN (Kolusi, Korupsi & Nepotisme) pada Kubu Pemerintahan Republik Indonesia (Sipil, TNI & Polisi) serta Tangkap, Berantas dan Penjarakan ? Tanpa Kecuali. Bersihkan Negeri kami dari Portitusi, Perjudian dan Kejahatan Sosial. Merdekakan diri kami dari Kemiskinan, Kesengsaraan dan Ketidakadilan! Bersama Partai Demokrat ? SBY & BOEDIONO, Bersama Membangun Indonesia Adil, Makmur & Sejahtera

Atas Nama Bangsa Indonesia
Pangeran DEADLOCK

I?m Everyone, but NoOne
I?m Everything, but NoThing
I?m Everywhere, but NoWhere

trus kalo kompi temen2 tiba2 nampilkan gambar seperti ini,

temen2 kudu cepet2 ambil tindakan nih, tapi sebernya kalo gambar itu udah muncul, komputer temen2 udah diserang virus yang aktif dan mematikan . Virus tersebut akan menampilkan pesan tersebut dalam desktop yang telah diambil alih. Biasanya pesan ini hanya akan muncul pada waktu yang ditentukan. Seiring dengan munculnya pesan ini maka semua file yang ada di semua drive akan dihapus termasuk program dan file system Windows.

Puncaknya, Deadlock akan membuat komputer anda benar2 deadlock alias dihancurkan semua datanya, baik data di seluruh harddisk, flashdisk, dan file2 Windows sehingga menampilkan pesan NTLDR is Missing.

Cirinya,
Jika virus ini aktif di komputer Deadlock akan membuat beberapa file yang aka dijalankan pada saat komputer di nyalakan.
- C:\Windows\system32\apache.exe
- C:\Windows\system32\mysql.exe

Pemilihan nama apache dan mysql mungkin bertujuan menyamarkan diri sebagai program populer Apache dan Mysql. Agar file tersebut dapat aktif secara otomatis pada saat komputer dinyalakan, Deadlock akan membuat beberapa string pada registry berikut:
-HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\Curr entVersion\Run
-mysql = C:\Windows\system32\mysql.exe
-HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\Curre ntVersion\Run
-apache = C:\Windows\system32\apache.exe

Virus ini akan aktif secara otomatis setiap kali user mengakses suatu drive/flash disk dengan memanfaatkan autorun Windows dengan membuat 3 buah file yakni.
-[Desktop.ini] yang berisi script untuk menjalankan file [folder.htt]
-[Folder.htt], berisi script untuk menjalankan file utama yakni [flashguard.exe]
-[Flashguard.exe] merupakan file induk yang akan di jalankan

Flash Disk merupakan salah satu media yang paling banyak digunakan oleh user. Hal inilah yang akan dimanfaatkan oleh sebagian bahkan boleh dibilang semua virus untuk menyebarkan dirinya, hal ini juga akan dilakukan oleh virus Deadlock dengan cara membuat beberapa file berikut.
-Desktop.ini
-Folder.htt
-Flashguard.exe

Virus Deadlock seperti bom waktu yang akan menghancurkan komputer target pada waktu yg udah ditentukan, virus ini akan menjalankan aksinya setiap tanggal 12 - 13 sekitar jam 08.00 - 09.00 setiap bulan dengan cara MENGHAPUS SEMUA FILE/DATA TERMASUK FILE SYSTEM WINDOWS yang ada di semua drive termasuk di media Flash Disk dengan menggunakan perintah cmd.exe /c del /f /s /q /a dan cmd.exe /c rd /s /q, jadi kalo komputer tersebut di restart maka akan muncul pesan error.

Jadi, cara terbaik untuk mengantisipasinya jangan lupa melakukan back up data. Untuk mencegah terinfeksi virus ini, Anda disarankan menggunakan program antivirus yang dapat mendeteksi virus ini dengan baik.

Saat ini virus yang terdeteksi oleh Norman sebagai Deadlock belum terdeteksi oleh mayoritas antivirus yang ada di Indonesia, baik antivirus lokal maupun antivirus mancanegara. Norman Endpoint Protection mendeteksi virus Deadlock sebagai Tibs.DKKR.

Jadi temen2 harus berhati2 sama yg namanya Deadlock, serigala berbulu domba nih,,

Ubah Cursor Blog Saat Menyentuh link / Link Hover

2009-09-05T19:38:00.000+07:00

Yuph . sekarang saya coba share tentang ganti cursor di blog . Mungkin kalo ganti cursor udah pada tau yah ? Tapi waktu cursor kita nyentuh link . balik lagi jadi gambar telunjuk seperti ini ..

kan jadi gag matching kalo beda nya jauh bgt sama cursor default yang kita punya ?

kalo cursor di blog saya sih sederhana.. dari default seperti ini..

trus saat menyentuh link jadi..

mau , mau mau ? langsung ajah cara buat nya..

kalo yang udah tau jangan ktawa yah.. kan cuma share.. heheheh ..

1. Cari code sperti ini di css kamu ,

a:hover {

2. Lalu tambahin ajah css nya,

cursor:url("link cursor kamu"), default;

jadi kira2 hasil nya seperti ini..

a:hover {
color:$titlecolor;

text-decoration:underline;
background: none;
cursor:url("link cursor kamu"), default;
}

nah jadi dweh .. simpan . lalu lihat hasil nya..

moga bermanfaat ajah dweh... hihihihii ..

Aib Malaysia ??

2009-09-05T18:08:00.000+07:00

Gimana tanggepan temen2 ngliat ni pic ??

Wakakakaka... kira2 itu bandrol ap'an ya ?

Di negara sendiri ajah jaim nya gede banget.. eh di negara laen.. di obral.. hahahahaha .

Bukan maksud nngehina.. cuma sekedar info temen2..

(ketawa lagi ah.. hahahahaha)

Teks dengan Efek Matrix

2009-09-05T03:19:00.000+07:00

Yup, pasti temen2 semua udah tau kan gimana efek teks di pelm the matrix ?

Sekarang saya akan coba share cara buat nya..

contoh na gini,

GiBlog

mau ? langsung ajah, gini caranya..

1. Pertama masukan css nya...

.matrix { font-family:Lucida Console, Courier, Monotype; font-size:10pt; text-align:center; width:10px; padding:0px; margin:0px;}

2. Lalu masukan javascript di bawah ini di atas </head>

3. Sekarang ronde terakhir.. pemanggilan..

masukan script dibawah ini ke tempat yg sobat mau .

<div id="matrix">GiBlog</div>

selesai....

yuk mari...

Efek Link Nudging dengan jQuery

2009-09-04T04:49:00.000+07:00

Yah sekarang saya akan coba share tentang link nudging dengan jQuery, trik ini memang udah lama, tapi yah gpp lah, belajar kan gag kenal waktu, hehehehe .

langsung ajah yah sob,

Link 1
Link 2
Link 3
Link 4
Link 5
Link 6

mau coba efek link kyak gitu ?

caranya gini,

1. Masukan script jQuery berikut diatas </head> :

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

nb : kalo udah punya script di atas, gag usah dtambah lagi .

2. Masukan kode Javascript berikut dibawah script jQuery:

Tambahkan class='nudge' pada link yg ingin diberi efek nudging .

jadi kira2 begini
<a href="http://granoblog.blogspot.com/" class="nudge">Link 1</a>

nb : a.nudge adalah perintah untuk memberikan efek nudging, karena bnyk penggunaan di bagian label, sobat bisa mengganti a.nudge jadi #Label1 atau dengan perintah lain, .sidebar a, .menu li, .post-body a, .post h3 a, #middle a, #footer a .

sobat juga bisa memasukan semua perintah.. sperti ini,

$('.menu li, .post-body a, .post h3 a, #middle a, #footer a')

kalo a.nudge sobat ganti, gag perlu lagi nambahin class='nudge' pada link

yah sekian dulu semoga bermanfaat ..

Membuat Trial Software Agar Tidak Kadaluarsa

2009-09-02T23:35:00.000+07:00

Setelah pusing2 cari keygen gratisan buat trial software .. (hehe biasa suka yg gratisan..) akhirnya nem juga software yg menurut saya cukup berguna nih .

Never Expired versi 2.0

Seperti di atas lah gambaran freeware ini, freeware yg digunakan untuk mengatur tanggal trial software agar tidak kadalurasa /expired .

see u crack.. codes.. keygen.. serial . hahahaha

download disini

Malaysia Lagi ( Sedikit Situs tapi Menusuk Hati )

2009-09-02T22:30:00.000+07:00

Wah.. emang perang cyber gede2an nih . perang cyber antar negara .

Setelah banyak situs yang terkena deface para hacker indonesia, sekarang saya nemuin beberapa situs buatan malaysia yang sangat menusuk hati orang Indonesia . (lebay.. wkwkwk)

ni beberapa situsnya, cek ajah

terkesan saya lihat situs di atas .. sialan juga mereka .

ada situs Indonesia yang hina malaysia gag sih ?

kalo ada yang tau share dong .. hehehehe .

INDONESIA MERDEKA !!!

Cara Nyadap SMS di Ponsel Orang

2009-09-02T17:52:00.000+07:00

Mungkin udah banyak yang tau cara nyadap ponsel orang lain tapi saya punya cara buat nyadap sms orang lain,memonitoring buah hati,dan anti maling.bila sewaktu-waktu hp anda hilang, bisa diketahui lewat fasilitas m-traxnya...

caranya :

1. Masuk ke situs www.mobile-secuware.com,

download versi trialnya.oh iya aplikasi ini hanya bisa di pakai di hp yang berbasis symbian edisi 2 (symbian OS versi 7 dan 8).

2. Setelah selesai mendownload,ada dua file, file fp1demo.sis untuk di pasang di symbian OS versi 7 sedangkan fp2demo.sis digunakan untuk symbian OS versi 7 dan 8.jadi lebih baik amannya gunakan fp2demo.sis saja.

jika dalam proses instalasi diminta memilih dimana aplikasi akan di pasang ,pilih memori telepon,jangan di kartu memori.

aplikasi yang di tanam di ponsel target tidak akan terlihat meski di intip lewat "Application Manager"

sekarang tinggal menjajal kecanggihanya!

semua settingan dilakukan secara remote lewat perintah-perintah tertentu yang dikirim melalui sms.ponsel yang di fungsikan sebagai remote tidak harus berbasis symbian.

pesan perintah sms forward adalah :#password#+nomor ponsel tujuan forward dalam format internasional.kirim pesan tersebut ke nomor ponsel target.asword standarnya adalah 123.

nah pesan yang sms yang diterima target akan di forward secara sembunyi-sembunyi ke nomor yang sudah di set.

Bisa juga dengan cara alternatif berikut..

menyadap HP orang lain

syarat:

# HP adalah HP symbian. Baik HP anda maupun HP teman anda.

# Merek NOKIA

# Memiliki aplikasi simbyan smsanywherelite.sis

hp korban juga harus sama yah punya aplikasi simbyan smsanywherelite.sis

Ikuti instruksi berikut ini untuk menyadap dan sadap sms hp :

1. download smsanywherelite.sis untuk software menyadap.

direct link :

disini

kalau tidak bisa disitu, silahkan download di :

disini

2. Masukkan aplikasi symbian itu di HP anda dan korban

3. Begitu aplikasi ini diinstal, kamu tidak bisa melihat program maupun ikon aplikasi itu dalam ponsel. Seluruh pengontrolannya harus lewat sms, mulai dari pengaktifan dan mematikan program, mengubah password, hingga pengiriman sms ke ponsel lain. Tapi justru itu keuntungannya jika digunakan sebagai alat sadap. Berarti sang target kan tidak tahu kalau diponselnya telah dipasangi aplikasi tersebut. Justru itu, teman anda tidak akan tahu kan kalo smsnya disadap? Karena aplikasi symbian ini belum mendukung GUI (Graphics User Interface).

4. Siapkan hp/ponsel korban anda

5. Siapkan HP anda yang akan menerima sms masuk dari korban anda.

6. Aktifkan aplikasi ini di ponsel korban kamu dengan mengetik format sms -[ SA(spasi)(password)(spasi)ON ]-. Panjang password maksimal 8 karakter. Misal, jika password kamu adalah 123456, ketikkan SA 123456 ON kirim sms ini ke nomor ponsel kedua/ponsel kamu. Untuk mematikannya, ketik SA 123456 OFF ke nomor yang sama.

7. Lalu, jika anda ingin menyadap lebih dari 5 hari..atau setiap sms masuk di hp korban akan selalu diteruskan ke hp anda, ketik sms ini di hp korban anda : SA(spasi)(password)(spasi)R1, misal SA 1234567 R1. Untuk mematikan fungsi ini ganti parameter di belakang “R” menjadi nol. Jadi, tuliskan SA 1234567 R0. Sedangkan untuk meneruskan setiap sms keluar, kirim sms bertuliskan SA 1234567 S1 ke nomer kamu. Matikan fungsi ini dengan mengirim SMS SA 1234567 S0

8. Sekarang, setiap korban menerima dan mengirim sms..kamu akan mendapat terusannya sama persis dengan sms aslinya

Malaysia : Indonesia Harus Mohon Maaf kepada Malaysia

2009-09-02T16:56:00.000+07:00

Nie saya temuin dari forum malaysia bro...
yg isiinnya cacian-cacian malaysia buat orang indonesia...

emosi jg ngeliat kata-kata mereka bro... kita harus gmn ngadepin malaysia?? DIEM aj ntar malah ngelunjak...

Malingsial Wrote

[−]

Malingsial Wrote:Tak payah denda, sekarang ni Indonesia sibuk mau ngutang sama Australia, kalau korang tak kesian lagi ramai anak2 indonesia yang akan mati saking miskin & biaya perubatan yang tinggi, lihat saja kes Emeritus dari Subang Timur, mungkin banyak lagi yang tidak didedahkan, takut terkeluar dari G20!

Walaupun ada rakyat miskin di Malaysia tapi tidak seteruk anak2 malang di Indonesia ini serupa macam anak2 Somalia saja.

Lihat saja utang orang Indonesia ama Hospital2 Malaysia sudah mencapai RM1.2 juta malah semakin meningkat! Gi mana sih?

Malingsial Wrote:indonesia tela mencalar maruah malaysia dengan mengatakan tari pendet bali diklaim oleh malaysia.

makanya indonesia harus minta maaf kepada malaysia.

Mohon maaf kalian di topix juga diterima.

Malingsial Wrote:Ini satu lagi warga indo yang bodo!

Soal iklan itu soal pemerintah, kami tidak cuak sedikit pun dengan masalah ini, setahu saya indonesia cuma dikenali setelah mereka ke Malaysia, indonesia juga dapat manfaatnya?

Tapi soal nyawa memang kamu tiada upaya? Apa halnya? Sok negara kaya tapi masih ada anak2 mati saking kemiskinan? Jangan sombong kawan..

Malingsial Wrote:buat apa lah TV 3 dok siarkan Tahun Melawat Indonesia? nampak sangat cuba nak berbaik dengan indonesia.

walhal forumer bodoh indon di sini, ya Allah dahsyatnya, macam setan

Siapa Cinta laura yang ngaku dirinya diklaim sbg warga malaysia

siapa pula buluq kat minah gedik yang bodo tak ada pelajaran, tahu gedik saja?

Malingsial Wrote:ini berkaitan dengan tuduhan fitnah Indonesia terhadap malaysia bahwa tari pendet bali itu diklaim oleh malaysia. gak ada kenyataan dr malaysia bahawa tari bali itu diakui milik malaysia.

untuk pengetahuan anda... dalam majlis2 yg dianjurkan dimalaysia Tarian pendet Bali selalu dipersembanhkan.

Penari2 itu asal dr Bali yg diundang khas ke Malaysia.

Contoh majlis.. seperti Dinner, persembahan kebudayaan, dan lain2.

kempen Malaysia Truly Asia senang sekali untuk memperkenalkan budaya di Asia kepada dunia.

Dan... dalam upacara itu dinyatakan juga bahawa dr mana Tarian ini berasal.

Di malaysia ada banyak restuarant ala-ala Bali. dan Budaya bali diguna pakai dan tarian pendet bali ini turut dipersembahkan. Kalau mau bukti datang ke malaysia.. pergi ke One Utama atau ke Sunway Piramid.

ditegaskan sekali lagi bahwa.. orang2 bali itu ada di Malaysia bersama budaya mereka. jadi.. dalam iklan visit malaysia itu adalah untuk promosi budaya Bali. Itu tidak bermaksud malaysia mengklaim!!

kalian harus minta maaf kepada malaysia.

Ucapan maaf di topix juga bisa.

ayo....

Malingsial Wrote:budaya nusantara lah bodoh!!!! Kan malaysIa ada suku kaum Jawa. ataupun budaya indon semua dibawa oleh pedagang indon suatu ketika dahulu...sepatutnya dah tau sebelum malaya merdeka. MALAYSIA BUKAN MALINGSIA....MALAYSIA BUDAYA SATU NUSANTARA...SATU MALAYSIA!!!! MALAYSIA BOLEH........INDONESIA TIDAK LAYAK MENGAMBIL SARAWAK...SARAWAK MAJU DALAM MALAYSIA.......NOT LIKE KALIMANTAN....X JUGA MAJU.....MALAYSIA MAKMUR..... TAHNIAH KEPADA ASKAR WATANIAH DAN BEKAS PRESIDEN INDONESIA ALMARHUM SUHARTO KERANA BERJAYA MENGHENTIKAN KONFRONTASI.......PRESIDEN SUHARTO PILIHAN MALAYSIA...

Malingsial Wrote:Tv3 tu dibayar oleh Indon. hahah...kak deba Nor tu juga yg jadi promoternya.. haha..

Indonesia harus minta maaf kerana menuduh malaysia mengklaim tarian pendet bali.

mohon maaf di topix juga diterima.

ayo..

itu salah satu dari ribuan cacian dari malaysia.....

t36pj5myur

gmn bangsa indonesia?? maukah minta maaf kepada malaysia??

Multi Nick di YM dengan 1 E-mail

2009-09-01T13:35:00.000+07:00

Sekarang saya coba share buat multi nick di yahoo messager yang bisa kita gunakan tuk isengin temen chat YM kita.. hehehehe ..

Langsung ajah caranya :

1. Masuk ke Yahoo Messengger seperti biasa .

2. Masuk ke Messanger trus ke my acount info .

3. Masukkan password lagi untuk masuk ke acount info trus d publik informationnya silahkan di ganti sesukana dweh..

Nah .. begitulah cara Multi Id di YM .. Sekian dulu yak . semoga bermanfaat .

Situs Buatan Alien ???

2009-09-01T10:41:00.000+07:00

Waduh... Alien buat situs ?? beneran nih ??

Ntar bisa2 di culik alien saya.. hehehehe ..

Gini2 ceritanya.. suatu hari waktu joging di halaman nya mbah google .. eh nglirik ad situs aneh .. langsung ajah saya klik tuh situs yang bernama http://wwwwwwwww.jodi.org/ .

Bener gag sih itu situs buatan alien ? kenapa www-nya ada banyak ?

Hehehe . itu sebenrnya sub domain . sub domain bisa diganti sesuka hati kok .

Dan tentang si pembuat situs ? tenang aja cuy .. bukan alien koq .. (judul nya nipu nih .. hahaha)

yang buat situs itu adalah Joan Heemskerk dan Dirk Paensmans .

ada juga nih karya2 lain mereka..

Aneh2 aja yah 2 orang ini .. hahahahaa.. yawh udah, moga nambah informasi ajah . .

Mao Tau kalo Orang Amerika Komplain soal Komputer

2009-08-29T05:55:00.000+07:00

Kalau orang Indonesia kebanyakan merasa gaptek soal komputer, jangan kuatir.
Bukan Indonesia saja yang merasa demikian. Jim Cartlon, seorang jurnalis
Wall Street Journal,
baru-baru ini mengumpulkan keluhan dari para konsumen komputer Amerika.
Dan ternyata keluhan mereka jauh lebih “idiot” daripada yang kita kira.
Berikut petikan keluhan2 konsumen itu :

1. Compaq pernah mempertimbangkan untuk mengubah perintah “Press ANY
Key” menjadi “Press ENTER Key” dikarenakan banyaknya telefon yang
menanyakan letak tombol “ANY” di keyboard.

2. AST Technical Support menerima laporan konsumen karena kesulitan
menggunakan mouse. Saat Techinal Support berkunjung, mereka menemukan
mouse tersebut tidak bisa digunakan… karena masih terbungkus rapi di
dalam plastiknya. Penggunanya (seorang wanita) punya phobia (ketakutan)
pada mouse (tikus) sehingga tidak berani mengeluarkannya dari dalam
plastik.

3. Di tahun 1980-an, ketika disket masih berukuran besar, Teknisi Compaq
pernah menerima keluhan seorang konsumen yang disketnya tidak terbaca
oleh drive-disk komputer. Setelah diselidiki, ternyata konsumen itu
sebelumnya memasukkan disket ke dalam mesin tik dan mengetikkan label
yang tertempel di disket itu.

4. Sebuah keluhan lain dari konsumen AST yang mengatakan disket mereka
terkena virus yang sulit dibersihkan. Petugas AST meminta orang itu
mengirimkan kopi disket yang terinfeksi itu untuk dipelajari. Beberapa
hari kemudian, petugas AST menerima foto kopi disket dari konsumen
tersebut.

5. Seorang konsumen DELL mengeluhkan kalau dia tidak dapat mengirimkan
fax via komputer. Setelah diarahkan selama 40 menit lewat telepon,
petugas DELL menemukan kalau konsumen itu mencoba mengefax via komputer
dengan cara menempelkan kertas yang akan di fax di depan monitor.

6. Seorang konsumen DELL lain mengeluh karena keyboard yang digunakannya
sudah tidak bisa berfungsi sejak dibersihkan. Ketika ditanya caranya
membersihkan keyboard, dia menjelaskan, “Saya mencuci dan menggosok
semua bagian keyboard dengan sabun, lalu membilasnya dengan air, dan
menjemurnya.”

7. Seorang konsumen DELL marah besar karena tidak bisa menyalakan
komputer yang baru dibelinya. “Semua sudah terpasang dengan baik. Tapi
setiap kali saya tekan pedal kaki , tidak terjadi apa-apa.” Setelah
diselidiki ternyata “pedal kaki” yang dimaksud orang itu adalah : mouse.

8. Seorang lagi konsumen DELL marah besar karena komputer barunya tidak
nyala. Dia menjelaskan semua sudah terpasang dengan benar, dan ketika
dia menunggu selama 20 menit, tidak terjadi apa-apa pada komputernya.
Ketika teknisi DELL menanyakan apakah “power switch” sudah dinyalakan,
dia balik bertanya, “Power switch apa?”

9. Berikut adalah tanya-jawab antara petugas Novell NetWire dengan
seorang konsumen :

Penelepon : Hallo, dengan Tech Support?
Novell : Ya, bisa dibantu?
Penelepon : Tatakan gelas di PC saya patah. Apa mungkin saya bisa
menggantinya?
Novell : Tatakan gelas ? Apakah itu hadiah saat Anda membeli komputer?
Penelepon : Tidak. Tatakan gelas ini sudah ada di komputer saya. Dan
ketika saya meletakkan gelas saya di atasnya, tatakan itu patah. Yang
saya ketahui, di bagian depan tatakan itu ada tulisan “CD-ROM, 16X”.

(Saat itu juga, petugas Novell langsung mematikan telepon dan tertawa
terpingkal-pingkal. ..)

hahahaha .. ternyata ad juga orang amerika yang bego na lebih dari kita..

Cara buat Collapsible Content Box Lebih Menarik

2009-08-28T18:09:00.000+07:00

Sekarang saya akan coba share collapsible content box yang lebih bergaya,, yah langsung ajah tanpa basa basi lagi..

berikut cara buat nya..

1. Masuk ke Edit HTML blog anda

2. Jangan lupa centang "Expand Widget Template" .

3. Dibawah ini contohnya dan ikuti langkah2nya..

Show / Hide Content

[−]

1, tambah kan script berikut di antara <head>.......</head>


<script language="javascript">
var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) { if (ie4) { return document.all[id]; } else { return document.getElementById(id); } }
function toggle(link, divId) { var lText = link.innerHTML; var d = getObject(divId);
if (lText == '+') { link.innerHTML = '−'; d.style.display = 'block'; }
else { link.innerHTML = '+'; d.style.display = 'none'; } }
</script>

::=================:::================::
2. Copy script di bawah ini ke tempat yg sobat mau .

<div style="border: 1px solid #000000; padding: 0px; background: #FFFFFF; "><table border="0" cellspacing="0" cellpadding="2" width="100%" style="background: #000000; color: #FFFFFF; "><tr><td>Show / Hide Content</td><td align="right">
[<a title="show/hide" id="exp1246752708_link" href="javascript: void(0);" onclick="toggle(this, 'exp1246752708');" style="text-decoration: none; color: #FFFFFF; ">−</a>]</td></tr></table>
<div id="exp1246752708" style="padding: 3px;">ISI TEXT DI SINI</div>
</div>
<script language="javascript">toggle(getObject('exp1246752708_link'), 'exp1246752708');</script>


Note :
:: background: #FFFFFF adalah warna background content.
:: background: #000000 adalah warna background title-bar nya.
:: Show / Hide Content adalah Text untuk title-bar.
:: ISI TEXT DI SINI adalah untuk menempatkan konten. Bisa berupa text, gambar, atau keduanya.

4. Simpan dan lihat hasilnya .

Wall Comment buat Blog Pengganti Shoutmix/Shoutbox

2009-08-28T16:57:00.000+07:00

Yah.. kali ne coba share tentang wall comment . Wall comment mungkin fungsinya sama kayak shoutmix/shoutbox ,

Wall Comment .

Yah kira2 seperti d atas tampilan wall comment . kelebihannya ??

1. Yang pasti gretongan.. hahaha .
2. Foto yang dgunakan berdasarkan foto profile blogger .
3. Ada fitur replay kayak pesbuk gitu..
4. Bisa antisipasi spam..
5. Karena kerjasama dengan Google follower (GFC)sehingga messagenya hanya user yg udah follow blog kamu..

lebih kurang nya.. gitu lah..

Langsung cara buatnya :

1. Pasang widget follower tentunya..

2. Add elemen HTML/Javascript, masukan script di bawah ini .

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>

<div id="div-comment-wall" style="width:210px;border:1px solid #cccccc;"></div>

<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['DEFAULT_COMMENT_TEXT'] = '- add your comment here -';
skin['HEADER_TEXT'] = 'Comments';
skin['POSTS_PER_PAGE'] = '5';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderWallGadget(
{ id: 'div-comment-wall',
site: 'YOUR BLOG / SITE ID NUMBER',
'view-params':{"disableMinMax":"true","scope":"SITE","allowAnonymousPost":"true","features":"video,comment","startMaximized":"true"}
},
skin);
</script>

NB :

- width:210px adalah lebar widget. Silahkan sesuaikan dengan kondisi template masing-masing.

- Bagian yang di cetak merah adalah element warna. Silahkan di sesuaikan.

- skin['POSTS_PER_PAGE'] = '5'; adalah jumlah post / message yang di tampilkan per halaman. Maximum 15 post.

-site: 'YOUR BLOG / SITE ID NUMBER', Bagian ini adalah bagian yang terpenting. Untuk mengetahui ID NUMBER blog sobat caranya ...

>> Pastikan sobat log in ke blogger.

>> Dari dashboard klik menu view blog.

>> Setelah blog terbuka tekan CTRL+U (firefox) untuk melihat page source.

>> Untuk menemukan BLOG / SITE NUMBER blog sobat tekan CTRL+F (firefox) lalu cari dengan memasukkan kode ini "site:" (tanpa tanda petik). Hasil temuannya kira-kira seperti ini :

site: "15842380847662472740",      locale: 'in' },      skin);

nah angka yang bercetak merah itu site id number blog kita cuy.. sesuaikan sendiri sama site id blog sobat..

>> "allowAnonymousPost":"true", Hapus kode ini jika sobat nggag mau kasih izin untuk anonymous message. Ato kalo kasih izin yah biarkan ajah..

4. Selesai.. lalu simpan dan liat hasil nya...

Ketawa di Saat Penat

2009-08-27T23:49:00.000+07:00

Aduh.. suntuk banget dah.. tapi kalo lagi suntuk enaknya yg lucu2.. waktu jalan2,cari bahan ketawaan ala blogger.. dapet crita lucu.. buat refreshing ..

ini salah satu crita lucu yg saya baca..

Salah Kirim Email

Sepasang suami isteri setengah baya yang sama-sama dari kalangan profesional merasa penat dengan kesibukan di ibukota.

Mereka memutuskan untuk berlibur di Bali. Mereka akan menempati kembali kamar hotel yang sama dengan ketika mereka berhoneymoon saat menikah 30 tahun yang lalu. Karena kesibukannya, sang suami harus terbang lebih dahulu dan isterinya baru menyusul keesokan harinya.

Setelah check in di hotel di Bali, sang suami mendapati pesawat komputer yang tersambung ke internet telah terpasang di kamarnya.

Dengan gembira ia menulis e-mail mesra kepada isterinya di kantornya di Jalan Sudirman, Jakarta. Celakanya, ia salah mengetik alamat e-mail isterinya dan tanpa menyadari kesalahannya ia tetap mengirimkan e-mail tersebut.

Dilain tempat di daerah Cinere, seorang wanita baru kembali dari pemakaman suaminya yang baru saja meninggal. Setibanya di rumah, ia langsung mengecheck e-mail untuk membaca ucapan-ucapan belasungkawa.

Baru saja selesai membaca e-mail yang pertama, ia langsung jatuh pingsan tak sadarkan diri. Anak sulungnya yang terkejut kemudian membaca e-mail tersebut (tak lama kemudian jatuh pingsan juga), yang bunyinya :

To: Isteriku tercinta Subject: Papah sudah sampai Mah !!! Date: 18 Mei 2006 Aku tahu pasti kamu kaget tapi seneng dapat kabar dariku.

Ternyata disini mereka udah pasang internet juga, katanya biar bisa berkirim kabar buat orang-orang tercinta di rumah. Aku baru sampai dan sudah check-in. Katanya mereka juga sudah mempersiapkan segalanya untuk kedatanganmu besok. Nggak sabar deh rasanya nungguin kamu. Semoga perjalanan kamu kesini juga mengasyikkan seperti perjalananku kemaren.

Love you Mom,

Papah

PS: Disini lagi panas-panasnya. Kalau pada mau, anak-anak diajak aja .

hahahaha .. lucu juga yah.. ?? iseng iseng ilangin rasa suntuk..

Membuat Comment Blog Tampil Beda

2009-08-19T21:36:00.000+07:00

Temen-temen udah pada tau kan gimana tampilan post comment blog bawa'an dari blogger ? Yah kurang menarik.. kurang banyak option nya... kurang .. kurang..

di bawah ini ada beberapa site untuk buat post comment blog lebih menarik..

1. http://intensedebate.com

2.http://disqus.com

3.http://js-kit.com

nah.. gimanah ?? yang paling bagus yang mana yah.. ?

yawh sekian dulu... semoga bermanfaat..

Website Touch Screen dengan jQuery-gestures

2009-08-19T15:10:00.000+07:00

Udah kenal sama jQuery kan ? jQuery sangat memanjakan website atau blog kita dengan bermacam-macam plugin na.. wuih.. keren banget dweh .

Kali ini saya coba share ke temen-temen jQuery-gestures yang jika kita mengaktifkan efek dari jQuery ini maka website atau blog kita khalayak touchscreen... Kalo masih bingung temen-temen bisa liat demo nya di sini

Di dalam demo tersebut coba tahan ctrl lalu klik dan gerakan mouse .. terasa seperti touchscreen karena saat kita geser ke kiri pada gambar.. gambar akan berubah ke gambar berikutnya .. begitu juga sebalik nya..

Kalo temen-temen mao coba tinggal copy paste ajah script berikut ke HTML blog temen-temen..

yawh emang postingan kali ne sedikit aneh yak .. di pake buat ap'an nih ??

tapi gpp lah nambah info... hahahaha .. semoga bermanfaat..

Back to Top dengan Smoothscroll - jQuery

2009-08-17T14:51:00.000+07:00

Sekarang ... saya coba share cara membuat 'bac to top' yang kalo diklik gag asal loncat ajah ke atas .. tapi dengan cara semut... eh salah .. smooth.. dengan menggunakan fasilitas javascript jQuery dan smoothscroll .

hasil 'back to top' dengan jQuery ini temen temen bisa liat d blog ku.. d pojok kiri bawah . langsung ajah cara buatnya ..

1. Buka Edit HTML

2. Masukan anu kamu . eh script jquery berikut d atas </head>

3.Masukan juga kode javascript ini di bawah kode jquery tadi .

//<![CDATA[

$(function(){

$('a[href*=#top]').click(function() {

if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')

&& location.hostname == this.hostname) {

var $target = $(this.hash);

$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');

if ($target.length) {

var targetOffset = $target.offset().top;

$('html,body').animate({scrollTop: targetOffset}, 1000);

return false;

}

});

//]]>

</script>

4. Cari kode <body> dan ubah menjadi <body id='top'>

5. Masukan kode HTML berikut sebelum kode </body>

NB :

-id=top' atau '#top' anda dapat rubah, itu merupakan kunci perintah dari effect.

-temen temen bisa merubah gambar sesuai selera . kalo gambar yg d atas itu gambar blog saya . silahkan kalo mao dpake .. hehehe ..

6. tungguin ampe 1 jam.. trus klik save template.. hahahaha ..

sekian dulu dari saya kali ini... semoga bermanfaat...

Google Chrome Portable !!

2009-08-17T12:39:00.000+07:00

Siapa yang tidak kenal Google Chrome? Walaupun merupakan browser yang masih hijau, saya rasa sebagian besar dari Anda sudah mengenal aplikasi buatan Google ini. Saya yakin juga, banyak dari Anda yang jatuh cinta pada browser satu ini. Memang, banyak kelebihan yang dimilik Chrome sehingga banyak orang jatuh cinta padanya. Masalahnya, jikalau suatu saat Anda bepergian, dan Anda kebetulan membutuhkan akses internet, dan saat itu Anda belum punya laptop atau hape untuk akses internet, lalu apa yang akan Anda lakukan? Mungkin jawaban Anda adalah mampir ke warnet. Well, dengan mampir ke warnet kebutuhan Anda akan akses internet sudah terpenuhi, tapi bagaimana jika di warnet tersebut belum terinstall Google Chrome, sementara Anda sudah terlanjur cinta? Hueheueuehehe... Alhasil Anda kecewa karena tidak bisa browsing dengan browser kesayangan Anda tersebut.

Tapi tenang karena masalah tersebut tidak akan terjadi lagi, karena Anda akan tahu satu informasi penting. Yaitu...Google Chrome sudah tersedia dalam versi portable! Ya... Sekarang versi portable tersebut sudah dalam versi 2.0.172.30 Beta. Anda tertarik? Langsung saja download Google Chrome Portable di sini.

15 Rahasia di Balik Proklamasi 17 Agustus 1945

2009-08-17T11:18:00.000+07:00

17 Agustus adalah tanggal bersejarah bagi Indonesia .. 64 tahun sudah kita menikmati hasil kerja keras pahlawan kita.. MERDEKA !!! hehe semangat kemerdekaan nweh ..pada tanggal itulah Indonesia mencoba langkah pertama setelah kemerdekaan .. namun ada beberapa hal yang menarik patut kita ketahui ..

1. Soekarno Sakit Saat Proklamirkan Kemerdekaan
Pada 17 Agustus 1945 pukul 08.00 (2 jam sblm pembacaan teks Proklamasi), ternyata Bung Karno masih tidur nyenyak di kamarnya, di Jalan Pegangsaan Timur 56, Cikini. Dia terkena gejala malaria tertiana. Suhu badannya tinggi dan sangat lelah setelah begadang bersama para sahabatnya menyusun konsep naskah proklamasi di rumah Laksamana Maeda. Saat itu, tepat di tengah2 bulan puasa Ramadhan.

"Pating greges", keluh Bung Karno setelah dibangunkan dr Soeharto, dokter kesayangannya. Kemudian darahnya dialiri chinineurethan intramusculair dan menenggak pil brom chinine. Lalu ia tidur lagi. Pukul 09.00, Bung Karno terbangun. Berpakaian rapi putih-putih dan menemui sahabatnya, Bung Hatta.

Tepat pukul 10.00, keduanya memproklamasikan kemerdekaan Indonesia dari serambi rumah. "Demikianlah Saudara-saudara! Kita sekalian telah merdeka!", ujar Bung Karno di hadapan segelintir patriot-patriot sejati. Mereka lalu menyanyikan lagu kebangsaan sambil mengibarkan bendera pusaka Merah Putih. Setelah upacara yang singkat itu, Bung Karno kembali ke kamar tidurnya; masih meriang. Tapi sebuah revolusi telah dimulai...

2. Upacara Proklamasi Kemerdekaan Dibuat Sangat Sederhana
Upacara Proklamasi Kemerdekaan Indonesia ternyata berlangsung tanpa protokol, tak ada korps musik, tak ada konduktor, dan tak ada pancaragam. Tiang bendera pun dibuat dari batang bambu secara kasar, serta ditanam hanya beberapa menit menjelang upacara. Tetapi itulah, kenyataan yang yang terjadi pada sebuah upacara sakral yang dinanti-nanti selama lebih dari 300 tahun!

3. Bendera dari Seprai
Bendera Pusaka Sang Merah Putih adalah bendera resmi pertama bagi RI. Tetapi dari apakah bendera sakral itu dibuat? Warna putihnya dari kain sprei tempat tidur dan warna merahnya dari kain tukang soto!

4. Akbar Tanjung Jadi Menteri Pertama “Orang Indonesia Asli”
Setelah merdeka 43 tahun, Indonesia baru memiliki seorang menteri pertama yang benar-benar "orang Indonesia asli". Karena semua menteri sebelumnya lahir sebelum 17 Agustus 1945. Itu berarti, mereka pernah menjadi warga Hindia Belanda dan atau pendudukan Jepang, sebab negara hukum Republik Indonesia memang belum ada saat itu. "Orang Indonesia asli" pertama yang menjadi menteri adalah Ir Akbar Tanjung (lahir di Sibolga, Sumatera Utara, 30 Agustus 1945), sebagai Menteri Negara Pemuda dan Olah Raga pada Kabinet Pembangunan (1988-1993).

5. Kalimantan Dipimpin 3 Kepala Negara
Menurut Proklamasi 17 Agustus 1945, Kalimantan adalah bagian integral wilayah hukum Indonesia. Kenyataannya, pulau tersebut paling unik di dunia. Di pulau tersebut, ada 3 kepala negara yang memerintah! Presiden Soeharto (memerintah 4 wilayah provinsi), PM Mahathir Mohamad (Sabah dan Serawak) serta Sultan Hassanal Bolkiah (Brunei).

6. Setting Revolusi di Indonesia Diangkat Ke Film
Ada lagi hubungan erat antara 17 Agustus dan Hollywood. Judul pidato 17 Agustus 1964, "Tahun Vivere Perilocoso" (Tahun yang Penuh Bahaya), telah dijadikan judul sebuah film - dalam bahasa Inggris; "The Year of Living Dangerously". Film tersebut menceritakan pegalaman seorang wartawan Australia yg ditugaskan di Indonesia pada 1960-an, pada detik2 menjelang peristiwa berdarah th 1965. Pada 1984, film yang dibintangi Mel Gibson itu mendapat Oscar untuk kategori film asing!

7. Naskah Asli Proklamasi Ditemukan di Tempat Sampah
Naskah asli teks Proklamasi Kemerdekaan Indonesia yang ditulis tangan oleh Bung Karno dan didikte oleh Bung Hatta, ternyata tidak pernah dimiliki dan disimpan oleh Pemerintah! Anehnya, naskah historis tersebut justru disimpan dengan baik oleh wartawan BM Diah. Diah menemukan draft proklamasi itu di keranjang sampah di rumah Laksamana Maeda, 17 Agustus 1945 dini hari, setelah disalin dan diketik oleh Sajuti Melik.Pada 29 Mei 1992, Diah menyerahkan draft tersebut kepada Presiden Soeharto, setelah menyimpannya selama 46 tahun 9 bulan 19 hari.

8. Soekarno Memandikan Penumpang Pesawat dengan Air Seni
Rasa-rasanya di dunia ini, hanya the founding fathers Indonesia yang pernah mandi air seni. Saat pulang dari Dalat (Cipanasnya Saigon), Vietnam, 13 Agustus 1945, Soekarno bersama Bung Hatta, dr Radjiman Wedyodiningrat dan dr Soeharto (dokter pribadi Bung Karno) menumpang pesawat fighter bomber bermotor ganda. Dalam perjalanan, Soekarno ingin sekali buang air kecil, tetapi tak ada tempat. Setelah dipikir, dicari jalan keluarnya untuk hasrat yang tak tertahan itu. Melihat lubang-lubang kecil di dinding pesawat, di situlah Bung Karno melepaskan hajat kecilnya. Karena angin begitu kencang sekali, bersemburlah air seni itu dan membasahi semua penumpang.

9. Negatif Film Foto Kemerdekaan Disimpan Di Bawah Pohon
Berkat kebohongan, peristiwa sakral Proklamasi 17 Agustus 1945 dapat didokumentasikan dan disaksikan oleh kita hingga kini. Saat tentara Jepang ingin merampas negatif foto yang mengabadikan peristiwa penting tersebut, Frans Mendoer, fotografer yang merekam detik-detik proklamasi, berbohong kepada mereka. Dia bilang tak punya negatif itu dan sudah diserahkan kepada Barisan Pelopor, sebuah gerakan perjuangan. Mendengar jawaban itu, Jepang pun marah besar. Padahal negatif film itu ditanam di bawah sebuah pohon di halaman Kantor harian Asia Raja. Setelah Jepang pergi, negatif itu diafdruk dan dipublikasi secara luas hingga bisa dinikmati sampai sekarang. Bagaimana kalau Mendoer bersikap jujur pada Jepang?

10. Bung Hatta Berbohong Demi Proklamasi
Kali ini, Bung Hatta yang berbohong demi proklamasi. Waktu masa revolusi, Bung Karno memerintahkan Bung Hatta untuk meminta bantuan senjata kepada Jawaharlal Nehru. Cara untuk pergi ke India pun dilakukan secara rahasia. Bung Hatta memakai paspor dengan nama "Abdullah, co-pilot". Lalu beliau berangkat dengan pesawat yang dikemudikan Biju Patnaik, seorang industrialis yang kemudian menjadi menteri pada kabinet PM Morarji Desai. Bung Hatta diperlakukan sangat hormat oleh Nehru dan diajak bertemu Mahatma Gandhi.

Nehru adalah kawan lama Hatta sejak 1920-an dan Dandhi mengetahui perjuangan Hatta. Setelah pertemuan, Gandhi diberi tahu oleh Nehru bahwa "Abdullah" itu adalah Mohammad hatta. Apa reaksi Gandhi? Dia marah besar kepada Nehru, karena tidak diberi tahu yang sebenarnya."You are a liar !" ujar tokoh kharismatik itu kepada Nehru.

11. Bendera Merah Putih dan Perayaan Tujuh Belasan Bukan di Indonesia Saja
Bendera Merah Putih dan perayaan tujuh belasan bukanlah monopoli Indonesia. Corak benderanya sama dengan corak bendera Kerajaan Monaco dan hari kemerdekaannya sama dengan hari proklamasi Republik Gabon (sebuah negara di Afrika Barat) yang merdeka 17 Agustus 1960. Selain itu, masih menjadi perdebatan apakah lagu Indonesia Raya benar-benar merp karya asli WR Supratman, ataukah 'terinspirasi' oleh lagu Perancis, "Les Marseilles", yg memiliki nada2 yg sangat mirip.

12. Tidak Ada Nama Jalan Soekarnp-Hatta
Jakarta, tempat diproklamasikannya kemerdekaan Indonesia dan kota tempat Bung Karno dan Bung Hatta berjuang, tidak memberi imbalan yang cukup untuk mengenang co-proklamator Indonesia. Sampai detik ini, tidak ada "Jalan Soekarno-Hatta" di ibu kota Jakarta. Bahkan, nama mereka tidak pernah diabadikan untuk sebuah objek bangunan fasilitas umum apa pun sampai 1985, ketika sebuah bandara diresmikan dengan memakai nama mereka.

13. Gelar Proklamator Hanyalah Gelar Lisan
Gelar Proklamator untuk Bung Karno dan Bung Hatta, hanyalah gelar lisan yang diberikan rakyat Indonesia kepadanya selama 41 tahun! Sebab, baru 1986 Permerintah memberikan gelar proklamator secara resmi kepada mereka.

14. Indonesia Mungkin Saja Punya Lebih Dari Dua Proklamator
Kalau saja usul Bung Hatta diterima, tentu Indonesia punya "lebih dari dua" proklamator. Saat setelah konsep naskah Proklamasi Kemerdekaan Indonesia rampung disusun di rumah Laksamana Maeda, Jl Imam Bonjol no 1, Jakarta, Bung Hatta mengusulkan semua yang hadir saat rapat dini hari itu ikut menandatangani teks proklamasi yang akan dibacakan pagi harinya.
Tetapi usul ditolak oleh Soekarni, seorang pemuda yang hadir. Rapat itu dihadiri Soekarno, Hatta dan calon proklamator yang gagal : Achmad Soebardjo, Soekarni dan Sajuti Melik. "Huh, diberi kesempatan membuat sejarah tidak mau", gerutu Bung Hatta karena usulnya ditolak.

15. Jenderal Soedirman Tidak Pernah Duduki Jabatan Resmi
Panglima Besar Tentara Nasional Indonesia Jenderal Soedirman, pada kenyatannya tidak pernah menduduki jabatan resmi di kabinet RI. Beliau tidak pernah menjadi KSAD, Pangab, bahkan menteri pertahanan sekalipun!

Yah... kita sebagai penerus jasa pahlawan .. wajib kita ketahui nih yang beginian.. wajib juga kita teruskan perjuangan mereka .. meskipun lewat blog .. .. heheheh ..

Sekian... semoga bermanfaat...

Ketahui Seberapa Cepat Loading Page Blog Kamu

2009-08-13T13:10:00.000+07:00

Suatu hari saya berpikir ap sih yang buat load blog ku jadi lemod ? ap terlalu banyak widget ? atau terlalu banyak javascript ? akhirnya setelah tanya tanya d mbah google , dapet juga jawabnya lewat tool ini . Tool ini bisa nimbang seberapa berat blog kamu . dari pada berat berat bawa ke puskesmas cuma buat nimbang blog . langsung ajah test d tool d bawah ini ..

mudah kan ? kalo berat banget . yah kurangin dikit .. kurangi widget . foto foto .. atau ap lah yang sekira na berat..

Iseng iseng tapi lumayan juga nih ... semoga bermanfaat..

Software Percepat Koneksi Internet

2009-08-09T15:21:00.000+07:00

Ini ada software buat penghemat biaya internet bagi yang aksesnya melalui gprs atau yang pembayaran internet berdasarkan volume based (bukan time based). Maka Software ini bisa dicoba dan free

Dan bila yang pakai internetnya berdasarkan time based, tool ini bisa mempercepat akses internet anda dan tentunya tidak mutlak, tergantung juga dari PC ataupun perangkat lainnya..

Tool ini mirip seperti toonel, mengompress file yang diload dari internet sesuai kebutuhan
browser tetapi dengan beberapa tambahan :
1. Mempunyai cache agar browsing lebih cepat lagi.
2. Bisa blok trojan downloader maupun konten virus lain yang membahayakan.
3. Bisa blok situs yang tidak dikehendaki seperti advertiser.
4. Bisa blok konten berbau pornografi dengan menambahkan kata pada filter konten.
5. Bisa menghemat uang anda dari bandwidth yang disave dari kompresi maupun cache.

Download Di sini

Cara Mempercepat Upload Di 4share, Ziddu dan Mediafire

2009-08-09T15:10:00.000+07:00

Teman-teman, kali ini saya ingin sharing sedikit nih tentang "Bagaimana Cara Mempercepat Upload Di Ziddu, Mediafire dan 4Shared". caranya sangat mudah. yaitu dengan menggunakan software gratis. sebenernya sih software ini tidak gratis. hanya saja sudah di crack. nama softwarenya adalah speederxp.

software ini dapat mempercepat kinerja komputer dan upload hingga 200%. jadi buat komputer yang lemot dan koneksinya juga lemot. gak usah susah-susah upgrade koneksi ataupun komputernya. Jika anda ingin menggunakan software ini saya menyarankan supaya tidak menyetelnya pada kecepatan full. karena bisa membuat komputer panas. oke deh. pastinya temen-temen udah pada gak sabar nih mau download softwarenya. langsung aja download softwarenya dengan mengklik tombol di bawah ini.

SpeederXp

SMS Gratis Indosat 2009

2009-08-03T13:59:00.002+07:00

SMS Gratis Indosat ? Anda belum percaya ? Silahkan buktikan sendiri trik Indosat 2009 ini.

Dengan cara ini anda dapat SMS GRATIS ke nomor manapun memakai operator Indosat baik IM3 atau pun Mentari bahkan ke lain operator dengan charge Rp. 0,-. Tidak perlu pake aplikasi atau kirim sms melalui Portal penyedia SMS Gratis. Gimana caranya SMS Gratis Indosat ini ? Ini trik agar SMS bisa Gratis sepuasnya. Cara dan syaratnya mudah sekali yaitu :

1.Rubah Setting / Ganti nomor mesagge center pada handphone anda dengan no: +919821900035. Secara default setting Mesage center Operator Indosat anda adalah +62855000000 (IM3) dan +62816124 (Mentari) Ganti no. Mesage Center tersebut dengan no. +919821900035.

2. No. tujuan SMS haruslah dimulai dengan kode negara dan kode area jadi misal : +6285xxxxxxxx , +6281xxxxxx, +6282xxxxx dan sebagainya jadi harus ada kode +62 …. kalau hanya menggunakan no tujuan 085 xxx , 081xxx, 082 dan sebagainya maka SMS anda akan gagal terkirim

Pada tanggal 08 Februari 2009 Trik SMS Gratis Indosat ini masih berfungsi dengan baik dan lancar, namun Seperti trik-trik sebelumnya trik gratisan seperti ini pasti ada masa akhirnya. Ok selamat menikmati layanan SMS Gratis Indosat. SMS lah sepuas kamu mumpung masih ada SMS Gratis Indosat.

Update SMSC Indosat :

09 Februari 2009

SMSC +919821900035 (SMSC Sudah Mati)

12 Februari 2009

SMSC Indosat +85368008570 (Expired Sudah Mati)

6 Juni 2009

SMSC Gratis Indosat +12063130024 (SMSC sudah mati)

Update SMS Center Gratis Simpati Telkomsel :

21 Juni 2009

Update SMS Center Khusus “SIMPATI SMS Gratis Ke All Operator”

SMS Center SIMPATI +15148210053 (expired Mati)

Update SMS Center Gratis Indosat IM3 Mentari

22 Juni 2009

New Free SMS Center Indosat +919897051917 ( expired Mati)

25 Juni 2009

Simpati +15148210053 (Agak susah masuknya terkadang konfirmasi di Hp tidak terkirim tapi sebenarnya sudah sending)

Three +254770000040 (Three)

Update - Update

21 Juli 2009

Indosat Free SMS C enter +34690530168 (Expired)

Berikut ini upate SMSC Free SMS Indosat yang terbaru, ada dua macam sekaligus :

+34690525511

+525512235511

Untuk SMSC Simpati dan Three ada laporan beberapa temen masih bisa digunakan, silahkan dicoba :

Simpati +15148210053

Three +254770000040

Untuk tips tips d atas kapan saja bisa expired ... jadi buruan......

Trcik Internet / GPRS Gratis Indosat

2009-08-03T13:48:00.000+07:00

Internet Gratis ???? Ada Kabar Gembira bagi temen-teman lagi nih dibulan Agustus nih,Internet Indosat gratis lagi, Sebenarnya Internet gratis ini buka hal baru bagi temen-temen .

Memang kali ini pada waktu artikel ini saya tulis bener-bener seperti ketiban durian runtuh buat kita, gimana tidak pada kali ini ada Internet gratis Indosat Agustus 2009 ini sekaligus ada update smsc gratis indosat pada akhir Juli awal Agustus 2009 ini.

Sedang Trik Gratis ber internet kali sebenarnya sama dengan trik Internet Gratis Menggunakan Operator Indosat pertengahan tahun 2008 lalu. Yang sekian lama tidak bisa kita gunakan, namun ternyata pada akhir Juli awal Agustus 2009 ini bisa kita pergunakan kembali , Yaitu kita bisa browsing gratis sepuasnya menggunakan Opera Mini Modif, Yaitu aplikasi Opera mini yang sudah dimodifikasi.

Aplikasi Opera Mini Modifikasi Indosat yang bisa anda gunakan untuk Internetan Gratis silahkan Download di bawah ini :

Opera Mini Modif Indosat ESC Versi Indonesia

Opera Mini Modif Indosat ESC Versi English

Opera mini Modifikasi ini hanya berlaku untuk Handphone Sony Ericsson dan opertor Indosat IM3 dan Mentari. Selamat menikmati Ber - internet gratis Sepuasnya, semoga bermanfaat buat anda.

Percepat Facebook Kamu !

2009-07-30T18:22:00.000+07:00

Langsung ajah yawh . Gak pake basa basi ..
BT Fb lemot ?? coba nih ..

Boost for Facebook 9.0.18

download trus instal ajah .. di sini

Moga - moga tambah ngebut... fb na..

Hiasi Blog Kamu dengan Javascript

2009-07-30T13:29:00.000+07:00

Adakalanya kita bosan dengan halaman site kita, dan ingin memolesnya biar indah. Jika anda ingin memperindah halaman site anda dengan efek - efek berikut,

1. Script untuk efek dengan salju bertaburan,

<script src="http://h1.ripway.com/fabi0/salju.js" type="text/javascript"></script>

2. Script untuk efek dengan daun berguguran,

<script src="http://h1.ripway.com/fabi0/daun.js" type="text/javascript"></script>

3. Script untuk efek dengan bintang berjatuhan,

<script src="http://h1.ripway.com/fabi0/salju.js" type="text/javascript"></script>

4. Script untuk cursor dengan bintang kecil black,

<script src="http://h1.ripway.com/fabi0/cursor-black.js" type="text/javascript"></script>

5. Script untuk cursor dengan bintang kecil blue,

<script src="http://h1.ripway.com/fabi0/cursor-blue.js" type="text/javascript"></script>

6. Script untuk cursor dengan bintang kecil green,

<script src="http://h1.ripway.com/fabi0/cursor-green.js" type="text/javascript"></script>

7. Script untuk cursor dengan bintang kecil orange,

<script src="http://h1.ripway.com/fabi0/cursor-orange.js" type="text/javascript"></script>

8. Script untuk cursor dengan bintang kecil purple,

<script src="http://h1.ripway.com/fabi0/cursor-purple.js" type="text/javascript"></script>

9. Script untuk cursor dengan bintang kecil red,

<script src="http://h1.ripway.com/fabi0/cursor-red.js" type="text/javascript"></script>

10. Script untuk cursor dengan bintang kecil white,

<script src="http://h1.ripway.com/fabi0/bintangputih.js" type="text/javascript"></script>

11. Script untuk membuat link pelangi,

<script src="http://h1.ripway.com/fabi0/link-pelangis.js" type="text/javascript"></script>

Untuk itu , ikuti langkah berikut

1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilihan HTML/JavaScript
6. Pastekan script di atas ke kolom Konten

di coba yawh . semoga bermanfaat .

Cara Gampang Nyuri Password Situs XXX

2009-07-30T06:08:00.000+07:00

Caranya gampang banget kok, karena kita akan memanfaatkan jasa mbah google...

Dan yg perlu diinget cara ini butuh kesabaran...

Pertama buka
Code:

http://www.google.com/alerts

kemudian akan muncul "Create a Google Alert"

isi "Search terms" dgn format sbb :

Code:

@www.nama_situs.com/members/

atau

@members.nama_situs.com

atau

@http://members.nama_situs.com

ganti nama_situs dgn situs yg ingin kalian cari passwordnya...

kemudian pada "Type" pilih "News" atau "web".

pada "How Often" pilih "once a day"

kemudian isi email kamu di "your email"

Setelah itu tinggal tunggu deh...

harap bersabar namanya juga mancing...

preview di inbox email :

selamat mencoba...

INGAT KEBANYAKAN MEMANG SITUS XXX, TAPI INI BISA JUGA DIAPLIKASIKAN PADA SITUS2X BIASA (NON PORN)...

NB : contoh hasil nya bisa diliat disini http://nemesis.fileave.com/nemesis.txt

Intip Foto FB

2009-07-30T05:06:00.000+07:00

Buat yg suka intip foto FB, skrg kita bisa liat foto target walaupun belum jd temen (blm di add).
caranya sangat mudah tinggal masukin NAMA, ID or PROFIL URL target yang mo kita intip

CODE

http://apps.facebook.com/josh_owns/

screenshot :

ato search "photo stalker" trus pasang aplikasi ini di akun kamu.

semoga membantu.

Software Penyalin Website

2009-07-30T05:00:00.000+07:00

Beberapa hari lalu, saya diberitahu teman saya tentang software ini setelah saya konsultasi dengannya. Karena sekarang saya sedang punya keterbatasan untuk online, jadi saya kurang sempat menyempatkan blogwalking ke beberapa blog dan membaca artikel. Kalo satu artikel di blog itu ga apa2, tapi kalo banyak artikel yang menarik saya selalu tergoda untuk membacanya.

Lalu oleh teman saya, dia merekomendasikan suatu software yang bisa menyalin website sehingga bisa membacanya secara offline. Software ini adalah HTTrack, Anda bisa mendownloadnya di situs resminya http://www.httrack.com.

Cara menggunakannyapun sangat mudah, caranya :

Buatlah nama proyek dan tempat menyimpannya

Ketikan atau drag & drop satu alamat website atau lebih

Di bagian ini Anda bisa setting lebih lanjut untuk efektivitas kerja software, bagian ini juga termasuk apakah akan melewati aturan robots.txt atau tidak. Jadi selama mentaati aturan pada robots.txt atau melalui tag meta serta dengan tidak mengganti identitas software penyalin yang digunakan dengan nama browser yang memang diperkenankan misalnya, saya pikir tidak ada masalah. Karena tanpa batasan pemilik website melalui file robots.txt tadi, berarti pemilik website membolehkannya.

Jika Anda mau, Anda bisa otomatis terkoneksi dengan provider dan atur jadwalnya

Lalu tinggal menunggu saja prosesnya..

Lalu check hasilnya deh..

Mudah kan? Ada yang ingin menambahkan ?

Sedikit Tweak Speed untuk Browser Firefox Anda

2009-07-30T04:34:00.001+07:00

Anda pengguna Browser Firefox? Mungkin sedikit tweak ini berguna bagi Anda. Tweak Firefox ini berguna mengurangi beban RAM dan mempercepat loading.

Cara ini saya temukan di Blog JamesPoling. Berikut beberapa caranya :

Mengurangi Penggunaan RAM Firefox dari Fitur Cache

1. Ketik “about: config” (tanpa tanda kutip) pada kolom alamat di browser.

2. Cari “browser.sessionhistory.max_total_viewer”

3. Set nilai “0“; (nol)

Mengurangi RAM Sampai 10Mb ketika Firefox di Minimized

1. Ketik about: config kemudian tekan Enter.

2. Klik kanan pada halaman dan pilih New -> Boolean.

3. Pada kotak yang muncul masukkan “config.trim_on_minimize“. Tekan Enter.

4. Sekarang pilih yang true dan kemudian tekan Enter.

5. Restart Firefox.

Meningkatkan Kecepatan Firefox untuk Me-Load Halaman

1. Ketik “about: config” di address bar dan tekan Enter.

2. Cari dan ubah entri sebagai berikut:

Set “ network.http.pipelining ” menjadi “ true”

Set “ network.http.proxy.pipelining ” menjadi “ true”

Set “ network.http.pipelining.maxrequests ” ke angka seperti 10.

Ini artinya akan membuat 10 requests sekaligus dalam satu waktu.

3. Terakhir, klik kanan di mana saja dan pilih New-> integer. Namakan “nglayout.initialpaint.delay” dan set nilainya ke “0“;. (nol)

Dan untuk opsi lain agar lebih cepat adalah :

1. Ketikan about: config

2. Klik Kanan -> New -> Integer atau String

3. Cari dan ubah (kalau belum ada berarti dibuat) entri berikut ini :

“ network.dns.disableIPv6 “ : set “ false “;

“ content.notify.backoffcount ”: set “ 5 “; (Lima)

“ plugin.expose_full_path ”: set “ true ”.

“ ui.submenuDelay ”: set “ 0 “; (nol)

Cara diatas sudah saya coba dan memang terlihat sedikit lebih cepat, bagaimana dengan Anda?

Membuat FireFox Lebih Cepat Dengan Add-on Tweak Network

2009-07-30T04:23:00.001+07:00

Apakah anda pengguna browser firefox? Ada banyak cara untuk membuat firefox anda bekerja lebih cepat, mungkin anda pernah membaca berbagai tips di internet untuk membuat firefox lebih cepat. Nah, sekarang kang Rohman akan memberikan satu tips untuk membuat fireox anda lebih cepat yaitu dengan menginstall add-on Tweak Network. Untuk mendapatkan add-on Tweak Network caranya sangat mudah, anda tinggal download di sini!

Cara penggunaannya sangat mudah. Setelah anda menginstall add-on Tweak Network silahkan ikuti langkah-langkah berikut ini :

firefox anda.
Klik menu Tools. Setelah keluar pilihan, silahkan klik Tweak Network settings.
Klik Tombol Power, kemudian klik tombol Apply
Klik Tombol OK
Selesai.

SEmoga dengan penambahan Tweak Network Add-on ini firefox anda bias berjalan lebih dari biasanya.

Mengoptimalkan Kinerja Vista Ultimate Windows Tweaker

2009-07-30T04:01:00.000+07:00

Mengoptimalkan Kinerja Vista Ultimate Windows Tweaker:
"Ultimate Windows Tweaker otomatis akan mendeteksi apakah Windows yang digunakan adalah Windows Vista / Windows 7, sehingga pilihan yang tampil otomatis disesuaikan. Apa saja fitur program ini ?

System Information :
- Menampilkan Informasi Sistem operasi, version + build no, system rating, processor, RAM, deskripsi komputer dan lainnya.

Personalization
- Windows Explorer, berbagai opsi yang berkaitan dengan tampilan/menu yang ada di Windows Explorer.

- Customize Start Menu, seperti menyembunyikan beberapa menu items dan lainnya.
- Taskbar Appearance seperti Disable Aero Peek preview, lock taksbar, disable windows preview (thumbnails), menghilangkan beberapa icon dan lainnya.

User Account & UAC
- Mengubah beberapa menu di Welcome Screen
- Mengubah efek text di Welcome Screen, juga background
- Beberapa pengaturan di User Account Control

System Performance
- Pengubahan Tooltip menampilkan nilai aktual dalam milidetik
- Perbakan “Menu Action”
- Tweak untuk sistem performance, seperti auto end non-respondins applications, otomatis restart shell, Uload DLL dari memory, dan lainnya.
- Optimasi services, seperti Disable Superfetch service, Windows Security Center, Windows Time service, PRinter spooling, Tablet PC, Windows Update dan Windows Aero user interface.

Security Settigs
- Administrative restriction, seperti disable Registry editor, command prompt, Task manager, MMC snap-ins, WinKey Control, System Restore, pengubahan warna dan tampilan, COntrol panel, autoplay dan lainnya.
- Windows Explorer Restriction : Disable folder options, menghilangkan tab security, fitur CD burn dan menghilangkan contect menu bawaan explorer.
- WIndows Application Restriction, seperti disable Windows media center, sound recorder, Windows Defender, sidebar, error reportin dan windows mobility center.
- Windows Update Setting

Network Tweaks
- Berbagai tweak tentang jaringan
- Otimalisasi bandwidth

Internet Explorer
- Reset IE ke setting bawaan (defaut)
- General, seperti mengubah judu window, download directory dan lainnya
- Berbagai setting di Tab dan Advanced configuration

Additional Tweaks
- Menampilkan context menu untuk drive dan folder juga file and folder.
- Berbagai tweak lainnya, seperti disable Hibernation, windows startup sound, pagefile, encryption dan lainnya.

Download
http://www.thewindowsclub.com/ultimate-windows-tweaker-v2-a-tweak-ui-for-windows-7-vista (Ukuran zip 139 KB, file exe sekitar 345 KB)

Buat Virus dengan Terabit Virus Maker

2009-07-30T00:30:00.000+07:00

Ini gambar TeraBit terbaru, baru rilis beberapa bulan yang lalu (12/05/09).

Sebenarnya gw udah dapat beberapa hari setelah di rilis, tapi baru sekarang sempet naruhnya di blog dan buat dibagi-bagi sama kalian semua. Sesuai dengan janji gw kemaren-kemaren, gw akan ngasih link buat downloadnya.

Tapi jangan disalah gunakannya TeraBitnya, jangan gunkan untuk tujuan merusak atau hal-hal yang bertentangan dengan tujuan pembuatannya.

Ya udah langsung aja download di sini.

Software Pencuri Data ( Rampok v2.0 )

2009-07-30T00:14:00.000+07:00

Setiap Flashdisk atau kamera atau mp3/mp4 player yang dicolokan ke komputer, otomatis akan tercopy tanpa tanda dan pemberitahuan, ini menggunakan Aplikasi Rampok V.20, menggunakan button on/off untuk mengaktifkan dan menonaktifkan kerja program dan bisa memilih alamat folder dan nama folder yang akan digunakan menampung hasil copyan .

Download Rampok v2.0

Hack Facebook Dengan Fake Login

2009-07-22T14:32:00.000+07:00

Kali ini saya akan mengajak facebook'er untuk belajar hacking facebook. Namun tidak menggunakan software facebook freezer melainkan meng-hack facebook dengan fake login atau halaman login palsu untuk mendapatkan username dan password facebook si korban. Cara hack meng-hack ini sebenarnya merupakan cara jadul yang dilakukan para hacker. Tapi ampuh lho ! Penasaran ? Mau ?

Hacking facebook dengan fake login :

1. Buatlah akun dengan mendaftar di webhosting gratisan yang mendukung/support PHP. Seperti :

- Byethost
- Ripway
- Fileave, dll

2. Download Script Fake Login disini(file.rar)

3. Extrak file tersebut dan simpan/upload di satu direktori di webhosting yang telah anda daftar, contoh http://NamaAnda.fileave.com/facebook/. 3 file tersebut yaitu :

- Index.html
- logs.php
- logs.txt

4. Buatlah email palsu dengan memberikan embel-embel admin facebook tujuannya agar si korban percaya. contoh :

admin_facebook@yahoo.com / admin.facebook.gmail.com / admin.fb@plasa.com

5. Terus download isi pesan untuk email palsu disini . (file.doc)

6. Buka isi file tersebut. Lalu ganti nama Cinta yang berwarna merah dengan nama anda dan ganti alamat_email_anda@gmail.com yang berwarna merah dengan alamat email palsu anda. Terus pada URL :

http://www.facebook.com/n/?reqs.php&mid=883451G4a3b0e7eG88f1e5G2

Yang berwarna biru ganti dengan URL halaman fake login yang telah anda buat. contoh :

http://h1.ripway.com/fabi0/index.html

7. Setelah semuanya anda edit, segera kirim isi pesan tersebut ke alamat email si korban .. Alamat email + password si korban akan datang sendirinya ke email palsu anda kalau si korban ketipu ... hehehe

Memasukan Script ke dalam Gambar / Image

2009-07-18T19:55:00.000+07:00

Ini adalah trik dasar Hacking Web yg di kembangkan lanjut menjadi media penyebaran Virus, Trojan, Phissing dll... dan juga bisa digunakan utk menyisipkan script/code dc (restarter), script hang hp, dll ke dalam image...

Trik lama ini aku munculkan disini, guna antisipasi atas maraknya aksi penyebaran picture/image bermuatan script, baek script virus, restarter, trigger, dll..

Metode Injeksi (insert) script ke dalam suatu picture adalah sebagai berikut:

Bahan-bahan:

Script yg sesuai tujuan penggunaan... Bisa script injection, virus, code utf, dll.
Image/picture berekstensi jpg, bmp, gif dan png serta image lainnya.
Sebagai contoh: script dengan namatest.txtdan image berupaicon.bmp,disimpan bersama-sama dalam folder c:\jpgofdeath

Langkah-langkah

Buka Command Prompt.. Soal ini udah pada tau kan.
START > RUN > ketik "cmd" tekan [enter].
Ketik "cd \(nama folder tempat file2 bersangkutan)" tekan [enter]
contoh: ketik "cd \jpgofdeath" dimana jpgofdeath adalah nama folder tempat file-file utk uji coba.
Ketik "dir", tekan [enter] untuk melihat isi direktori folder dan nama file dalam command prompt, (biasanya berbeda nama file dalam windows eksplorer dan command prompt).
Untuk mengecek/melihat isi file gunakan perintah "type [nama file]" tekan [enter]
Tidak usah khawatir dgn munculnya suara noise saat membuka file image dlm command prompt.. abaikan saja, hanya peringatan bahwa kita membuka file dgn aplikasi yg tidak disarankan.
Sebagai contoh seperti pada gambar di bawah ini:
Langkah terakhir adalah menyisipkan/menginjeksi script dalam file text ke dalam file image.
Ketik "type [nama file text] >> [nama file image]" tekan [enter].
Nama file harus lengkap dengan ekstensi file bersangkutan. Jika berhasil maka resultnya PC tidak akan berbunyi nyaring atau tidak akan menampilkan pesan kesalahan.
Sebagai contoh seperti pada gambar di bawah ini:

NOTE:

_{Perintah2 dalam langkah2 diatas jalankan tidak menggunakan tanda kutip}
_{Kode ">>" itu pada tombol yg ada titik ( [shift] [.] )}

Perhatikan hasil menyisipkan script dalam kotak berwarna biru kedua.
Bandingkan dgn image icon.bmp yg asli dalam kotak biru diatasnya (pertama).

Untuk attacking di PC, trik ini sudah di antisipasi dengan windows xp patch service pack 2 keatas. Sehingga bagi pengguna PC di bawah windows xp service pack 2.0 masih rentan dengan bug ini. Bagi pengguna windows vista dan windows 7 sudah include patch terhadap bug dgn metode ini.

Kendala adalah pada sistem operasi HP yg berbasiskan Java, Symbian maupun mobile OS. Walaupun sementara ini masih berkutat pada injeksi script sederhana (virus, restarter, dll), tidak menutup kemungkinan adanya bug pada pembacaan Header Image yg sudah di injeksi script. Karena cara kerja metode ini adalah dengan memanfaatkan pembacaan header file image.

Perkembangan dari metode injeksi script ini, adalah dengan menginjeksi script virus, restarter, zombie, dan lain2.Antisipasi terhadap trik ini adalah dgn berhati2 terhadap tiap file image yang masuk . Sehingga jika menerima kiriman file misterius, anda bisa memeriksa file tersebut .

KAIJIN dictionary (Kamus Bahasa Jepang)

2009-07-17T01:29:00.000+07:00

Selamat datang di KAIJIN dictionary

KAIJIN dictionary adalah software yang dapat menterjemahkan kata dalam bahasa Jepang ke Indonesia dan bahasa Indonesia ke Jepang. KAIJIN dictionary meng-claim sebagai software kamus Jepang - Indonesia offline gratis pertama di dunia. KAIJIN dictionary adalah program yang bersifat publik dan freeware (tanpa biaya) silahkan di unduh....

Download KAIJIN Dictionary 1.40
Info :
Size : 1,9 MB
System Requirements : Windows XP, Windows Vista Ultimate.

.Warning :

Jika anda menggunakan Windows XP, KAIJIN dictionary memerlukan Microsoft .NET Framework Runtime 2 sebelum bisa di jalankan !!Jika belum terinstall di komputer, Anda bisa men-download di sini. (22,4 MB)

.Screenshot :

Cara membuat background blog bergaya slide show

2009-07-16T19:34:00.000+07:00

Menghias atau mempercantik blog dengan memasang background yang bisa berubah-ubah atau bergaya slideshow barangkali merupakan pertimbangan tersendiri bagi anda yang ingin tampil sedikit beda. Bosan baragkali dengan template lama atau templatenya keliwat canggih ??? apa salahnya kita mencoba membuat, lebih tepatnya mengedit template dari minima klasik biasa, tokh ternyata bisa kita hias sedemikian rupa, kita tambah-tambahin kolom misalnya atau kita hiasi dengan background. Hitung-hitung buat belajar ngobok-ngobokin kode HTML, ya ngga ??? ...

Baik, tanpa berpanjang lebar lagi kita langsung praktek nih ...

PERSIAPAN

1. Buat sebuah blog baru dengan menggunakan template standar dari blogspot yaitu template minima putih biasa yang 2 kolom. Kalo kepengen memakai yang tiga kolom, boleh sobat download di sini. Atau kepengen yang multi kolom alias kebanyakan kolom? download di sini.

2. Setelah blogmu jadi, isi dengan sembarang posting, jangan lupa cantumkan beberapa buah label di kotak labels for this post pada ruang postingmu.

3. Pasang read more nya.

5. Pasang widget label di sidebar blogmu.

Nah, sekarang kita masuk ke tahap pembuatan backgroundnya.

A. MEMASANG BACKGROUND UTAMA

1. Kopi kode di bawah ini, lalu edit dengan menggunakan worpad atau document txt.

background-image:url('http://i32.tinypic.com/5bb489.jpg');background-color:transparent;
background-attachment: fixed;
background-position:top left;
background-repeat:no-repeat;

Ganti url gambar yang berwarna merah dengan url gambarmu.

kode top left yang berwarna biru bisa kamu ganti dengan top right, bottom left, bottom right, left, center atau right. Sesuaikan dengan besarnya gambarmu. Bila menggunakan gambar berukuran besar ganti saja dengan center.

Kode no-repeat yang berwarna hijau adalah kode yang menyatakan bahwa gambar yang kamu pasang tidak memerlukan pengulangan, Nah, kalau memakai gambar berukuran kecil semisal gambar texture, hapus saja kode no-repeat tersebut.

2. Login ke blogger --> Klik Customize --> Layout --> Edit html. Cari kode seperti di bawah ini :

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

3. Rubah kode di atas dengan menambahkan kode hasil editan kamu tadi sehingga hasilnya menjadi seperti di bawah ini : Perhatikan baik-baik penempatan kode hasil editan yang berwarna biru.

body {
background:$bgcolor;
background-image:url('http://i32.tinypic.com/5bb489.jpg');
background-color:transparent;
background-attachment: fixed;
background-position:top left;
background-repeat:no-repeat;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

4. Simpan hasil pekerjaanmu dengan mengklik tombol SAVE TEMPLATE.

B. MEMASANG BACKGROUND HALAMAN DEPAN/FRONT PAGE

Tahap pertama

1. Kopi kode seperti di bawah ini, edit terlebih dahulu dengan menggunakan worpad atau document txt.

Ganti url gambar yang berwarna biru dengan url gambarmu.

Atur letak gambar dengan merubah kode bottom right yang berwarna kuning

Atur pengulangan gambar bila diperlukan dengan menghapus kode no-repeat yang berwarna hijau. Bila tidak biarkan saja, jangan di hapus.

Tahap ke_dua

Tahap ke dua adalah tahap pemasangan kode hasil editan tadi ke sidebar blog anda, caranya sebagai berikut :

1. Login ke blogger --> Klik Customize --> Layout --> add a gadget --> HTML/JavaScript.

2. Isi title/judul dengan (misalnya) css1.

3. Pastekan kode hasil editan tadi ke ruang content.

4. Klik save untuk menyimpan hasil hasil kerjamu.

Tahap ke_3

Tahap ini adalah tahapan dimana kita akan mengatur css background yang bkita beri nama css1 tadi untuk tampil di halaman depan saja dan akan menghilang bila kita bergerak ke halaman selanjutnya.

1. Login ke blogger --> Klik Customize --> Layout --> Edit html. Centeng kotak Expand Widget Templates

2. Cari nama css background tadi, lalu selipkan dua buah script seperti tampak di bawah ini. Perhatikan penempatan kode yang berwarna biru.

<b:widget id='HTML20' locked='false' title='CSS1' type='HTML'>
<b:includable id='main'>
<b:if cond="data:blog.url == data:blog.homepageUrl">

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Secara default, setiap penambahan elemen halaman yang kita lakukan akan dinamai secara otomatis oleh blogspot denag HTML1, HTML2 dan seterusnya.

CSS1 nama dari elemen halaman yang kita tambahkan tadi untuk memudahkan kita mencari elemen yang bersangkutan di ruang edit HTML. Jadi sebaiknya setiap widget/aksesoris kita beri nama.

Kode

<b:if cond="data:blog.url == data:blog.homepageUrl">

dan kode

</b:if>

adalah kode yang membuat elemen halaman yang kita pilih hanya tampil di halaman depan dan akan menghilang bila kita bergerak ke halaman selanjutnya.

C. MEMASANG BACKGROUND UNTUK HALAMAN SELANJUTNYA

Di sini kerja kita sedikit mudah. Bukankah tadi anda punya kode css background yang anda edit dengan worpad atau document txt lalu anda pasang di side bar dan anda beri nama css1? Nah manfaatkan kode tersebut. Ikuti langkah-langakahnya seperti di mulai dari pengeditan css tersebut hingga css background tersebut terpasang di sidebar blog. Ingat !!! untuk memudahkan kita mencari css backround tersebut, berilah nama misalnya css2.

Untuk mengatur agar css backround yang kita beri nama css2 tadi anda tinggal mengikuti langkah MEMASANG BACKGROUND HALAMAN DEPAN/FRONT PAGE tahap ke_tiga, point 1 sampai 2. Kemudian selipkan 2 baris script seperti tampak pada kode di bawah ini : perhatikan letak penempatan kode yang berwarna biru.

<b:widget id='HTML21' locked='false' title='CSS2' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Nah, ngga terlalu sulit khan bloggers, selamat dech ... sekarang blog anda bisa tampil dengan background yang berbeda pada setiap halamannya.

Cara Buat Blog

2009-07-15T17:42:00.000+07:00

Blog adalah singkatan dari Weblog. Orang pertama yang memperkenalkan blog adalah Jorn Barger tahun 1997 pada bulan Desember.

Blog bisa dianggap sebagai hlaman web pribadi. Ia bisa dijadikan sebagai catatan harian pribadi, majalah pribadi, rumah pribadi, kedai pribadi dan buku pribadi.

Kita bisa menuliskan apa saja di dalam blog tersebut.
Jika anda ingin menuliskan isi hati anda dan ingin diketahui oleh umum, maka blog ini adalah salah satu jalan keluar.

Anda juga bisa mengajar orang banyak dengan menggunakan blog.
Jadi amatlah banyak fungsi blog ini mengikut keinginan penulisnya.

Dan bagusnya blog ini adalah gratis,anda bisa gunakan blog sebagai toko anda.
Dengan itu anda bisa mengiklankan barang-barang yang ingin anda jual atau apa-apa produk yang anda pasarkan.

Karena saya juga sedang belajar dalam membuat blog ini, maka saya akan mengajar anda dasar-dasar membuat blog yang saya ketahui.

Anda beruntung karena menemukan blog ini yang akan mengajar anda langkah demi langkah dari awal.

Ikutilah langkah-langkah dengan sabar dengan banyak latihan.
Tentunya pada tahap permulaan anda belajar membuat blog ini, anda akan mengalami banyak kesalahan.

Tetapi hal itu biasa dan jangan takut kerana setiap kesalahan dapat anda perbaiki dan edit di kemudian hari.

LANGKAH PERTAMA

Pertama-tama anda perlu membuka situs :https://www.blogger.com/start/>. Setelah itu klik pada perkataan CREATE YOUR BLOG NOW.
Jika paparan baru sudah muncul, maka anda isikan sahaja apa yang di dalam kotak-kotak:
email address sehingga word verification.
Jika sudah terisi semua, anda tinggal mengklik CONTINUE.

MEMBUKA AKUN BLOG ANDA

Setelah mengklik CONTINUE maka akan muncullah paparan seperti di sebelah. Anda membuka akaun dulu yaitu dengan mengisikan email anda, dan ulangi sekali lagi. Kemudian buatlah password anda dan isikan semula password anda sekali lagi.

Anda tidak boleh lupa email dan password anda ini, karena diperlukan sekali ketika anda ingin mengisi tulisan pada blog anda atau mengedit dan menambah apa-apa dalam blog anda. Kemudian tuliskan huruf yang ada pada word verification, dan klik CONTINUE.

LANGKAH KEDUA

Setelah mengklik CONTINUE maka akan muncullah paparan seperti di sebelah. Anda namakan blog anda. Seperti blog ini, saya beri nama CARA BUAT BLOG. Anda boleh menamakan apa sahaja mengikut selera anda.

Di bawahnya anda tuliskan alamat blog anda. Seperti blog saya ini, alamatnya :
http://www.cara-buat-blog.blogspot.com/>. Nah anda bisa menamakan apa sahaja alamat blog anda, dengan syarat belum ada orang lain yang membuat lebih awal nama yang sama dengan alamat yang anda tuliskan. Jadi ulangilah lagi sehingga nama itu diterima. Jika diterima maka akan diberi tanda "available".
Kemudian tuliskan huruf yang ada pada word verification, dan klik CONTINUE.

LANGKAH KETIGA

Langkah selanjutnya anda perlu memilih salah satu tamplate yang akan digunakan oleh blog anda. Anda bisa memilih warna dan model yang anda sukai.
Setelah anda pilih salah satu, maka anda lanjutkan dengan mengklik CONTINUE.
Anda tidak perlu risau tentang tamplate ini karena jika anda kurang cocok dengan pilihan anda tadi, maka anda bisa mengganti tamplate lain pada setiap saat anda kehendaki.
Bahkan banyak situs-situs yang memberikan tamplate gratis selain yang ada di dalam situs blogger ini.

ANDA TELAH BERHASIL MEMBUAT BLOG

Langkah ketiga tadi adalah langkah terakhir dalam pembuatan blog secara dasar. Setelah anda mengklik CONTINUE pada langkah ketiga, maka muncullah paparan seperti pada gambar sebelah. Dengan itu anda telah berhasil membuat blog anda. Selanjutnya anda bisa menuliskan apa sahaja pada blog anda. Selamat dan Tahniah.
Untuk menambah variasi pada blog anda, maka akan saya lanjutkan pada waktu yang akan datang. Silahkan anda berlatih dulu pada pelajaran-pelajaran yang telah saya berikan.