2

Memasang tirai di blog dengan Sentuhan Jquery

1.letakan Script di bawah ini,tepat dibawah kode
<head>

<script type="text/javascript" src="<a class="linkification-ext" title="Linkification: http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" href="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js">http://jqueryjs.googlecode.com/files/jquery-1.3.2.js</a>"></script> 


2.letakan juga script dibawah ini tepat diatas kode
</head>

<script src="http://apadewa.co.cc/jquery.easing.1.3.js" type="text/javascript"></script>


3.lalu,letakan kode dibawah ini tepat di atas kode
</body>


<div class="leftcurtain"><img src="http://buildinternet.com/live/curtains/images/frontcurtain.jpg"/></div>
<div class="rightcurtain"><img src="http://buildinternet.com/live/curtains/images/frontcurtain.jpg"/></div>
<img class="logo" src="http://i293.photobucket.com/albums/mm48/dhoony_bucket/w-1.gif"/>
<a class="rope" href="#"><img src="http://buildinternet.com/live/curtains/images/rope.png"/></a>

note:leftcurtain dan right curtain adalah alamat gambar yang akan dijadikan tirai pada blog kamu.ganti gambar tirai,dengan kreasi mu,atau copy paste gambar yg sudah saya sediakan..

nah,sekarang masukan CSS ini,di atas kode </style>

*{
margin:0;
padding:0;
}
body {
text-align: center;
background: #4f3722 url('http://buildinternet.com/live/curtains/images/darkcurtain.jpg') repeat-x;
}
img{
border: none;
}
.leftcurtain{
width: 50%;
height: 495px;
top: 0px;
left: 0px;
position: absolute;
z-index: 2;
}
.rightcurtain{
width: 51%;
height: 495px;
right: 0px;
top: 0px;
position: absolute;
z-index: 3;
}
.rightcurtain img, .leftcurtain img{
width: 100%;
height: 100%;
}
.logo{
margin: 0px auto;
margin-top: 150px;
}
.rope{
position: absolute;
top: -40px;
left: 70%;
z-index: 4;
}

saya membuat dua div kelas untuk dua tirai (. Leftcurtain dan. Rightcurtain) yang dikunci untuk ditunjuk sisi mereka. Ini dilakukan di CSS dengan menggunakan atas, kiri, dan posisi atribut.
Anda akan melihat bahwa kita ditentukan untuk masing-masing lebar tirai, 50% dan 51%. Lebar yang berbeda-beda adalah untuk mengkompensasi beberapa tepi berombak ketika tirai tertutup yang dapat menyebabkan unsur-unsur di bawahnya untuk puncak melalui. Untuk mengatasi hal ini kita membuat tirai kanan sedikit tumpang tindih yang kiri, dengan menggunakan z-indeks. Z-index ini nilai-nilai juga memastikan bahwa tirai tetap di atas segala sesuatu yang seharusnya di balik tirai.
Gambar tirai yang sebenarnya ditetapkan menjadi 100% lebar / tinggi sehingga divs tirai saat ini menyusut divs lebar gambar menjadi berkumpul, seperti mereka dalam kehidupan nyata.
The. Logo berisi apa yang saya ingin bersembunyi di balik tirai, Anda dapat menggantinya dengan apapun yang Anda inginkan.
Akhirnya. Tali hanya tempat tali grafik di atas segalanya dan menyembunyikan sebagian gambar dari layar sehingga kami dapat menyelesaikan "menarik tali" efek kemudian.
langkah terakhir,anda masukan script dibawah ini, di Bawah kode </style>



<script type="text/javascript">
$(document).ready(function() {
$curtainopen = false;
$(".rope").click(function(){
$(this).blur();
if ($curtainopen == false){
$(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".leftcurtain").stop().animate({width:'60px'}, 2000 );
$(".rightcurtain").stop().animate({width:'60px'},2000 );
$curtainopen = true;
}else{
$(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".leftcurtain").stop().animate({width:'50%'}, 2000 );
$(".rightcurtain").stop().animate({width:'51%'}, 2000 );
$curtainopen = false;
}
return false;
});
});
</script>





SELAMAT MENCOBA!!!
read more
0
BLOG MASIH DALAM MASA PERBAIKAN JADI MAKLUM KALO MASIH BERNTAKAN...
read more
3

Auto-Moving Parallax Background - JQUERY



paralaks adalah efek di mana ada berbagai lapisan latar belakang bahwa semua bergerak pada tingkat yang berbeda menciptakan efek 3D yang sangat unik (Sonic the Hedgehog berpikir). Dalam demo yang asli, satu-satunya cara untuk melihat aksi paralaks terjadi adalah mengubah ukuran jendela browser.

Baru-baru ini, Paulus Hayes yang mengambil contoh dan berlari dengan itu. Dia menggunakan sangat dingin-WebKit-transisi atribut untuk membuat efek paralaks bergerak tanpa perlu mengubah ukuran jendela browser atau menggunakan javascript. Paulus melakukan pekerjaan yang mengagumkan dan demo karya besar, tapi tentu saja karena dia menggunakan perpanjangan css proprietary, hanya bisa bekerja di browser sangat modern berbasis WebKit (Safari 4 dan Google Chrome).

Walaupun contoh Paulus adalah ideal bagaimana jenis efek ini akan dilakukan di masa depan, aku pikir mungkin keren untuk melemparkan sedikit JavaScript asli dan mendapatkan versi auto-pindah di luar sana yang harus bekerja di semua browser *. (saya kutip dari web http://css-tricks.com/)

untuk penjelasannya mari kita coba

untuk bagian Html sebagai berikut :

<div id="background"></div>
<div id="midground"></div>
<div id="foreground"></div>

untuk bagian CSS seperti ini :

#background {
background: url(../images/background.png) repeat 5% 5%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 100;
}

#midground {
background: url(../images/midground.png) repeat 20% 20%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 200;
}

#foreground {
background: url(../images/foreground.png) repeat 90% 110%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 300;
}


Gambar background yang berulang dan ditetapkan dengan persentase. Persentase adalah apa yang membuat efek paralaks bekerja normal. Tapi dalam hal ini JavaScript versi baru, akan menimpa background yang ada dan menghidupkan nilai-nilai sebagai gantinya. Hal ini membutuhkan penggunaan backgroundPosition plugin untuk jQuery, sebagai out-of-the-box jQuery tidak dapat menghidupkan properti backgroundPosition.
kemudian pemanggilan jquery dan pemasangannya.

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.backgroundPosition.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){

$('#midground').css({backgroundPosition: '0px 0px'});
$('#foreground').css({backgroundPosition: '0px 0px'});
$('#background').css({backgroundPosition: '0px 0px'});

$('#midground').animate({
backgroundPosition:"(-10000px -2000px)"
}, 240000, 'linear');

$('#foreground').animate({
backgroundPosition:"(-10000px -2000px)"
}, 120000, 'linear');

$('#background').animate({
backgroundPosition:"(-10000px -2000px)"
}, 480000, 'linear');

});
</script>

Catatan sebelum kita melakukannya dari animasi kita harus mengatur ulang backgroundPosition di dalam JavaScript.tapi itu adalah persyaratan untuk plugin untuk bekerja dengan baik.

Memperluas panjang animasi

Angka-angka besar dalam fungsi animasi (misalnya 120.000) berdiri untuk perseribu detik. Jadi, 120.000 = 120 detik = 2 menit. Mengubah angka-angka Anda dapat memperpanjang atau memperpendek jangka waktu animasi yang Anda peroleh. Ini tidak terbatas meskipun ... Mungkin ada cara untuk mendapatkan yang dilakukan, saya hanya tidak berpikir itu semua melalui. Mungkin abstrak animasi untuk fungsi yang dapat dipanggil dan kemudian menelepon lagi selama panggilan balik (atau sesuatu).

* Hal paralaks ini sangat tergantung pada transparansi. Jika Anda membutuhkannya bekerja di IE 6, memeriksa memperbaiki Unit PNG atau DD_belatedPNG tersebut.
sekian cukup sekian artikel kali ini..
semoga dapat dikembangkan lagi...
read more
0

Membuat icon menu animasi di blog - JQUERY



haloo semua ..hemz...
Menu yang atraktif pasti lebih disukai daripada menu biasa, salah satunya dengan icon gambar.
Icon Gambar yang sesuai dapat membercantik tampilan blog kita.Tapi bukan cuma sekedar menu biasa! menu kali ini akan membesar jika diekati oleh kursor.
seperti tampilan menu yang aku pakai..
pengen tau cara pembuatannya.. okey
kita bahas disini..

* Login ke Blogger lalu masuk ke "Rancangan" -> "Edit HTML"
* paste kode dibawah ini dibawah </body>

<script src='http://motaro44.freetzi.com/motaroquery.js' type='text/javascript'/>
<script src='http://motaro44.freetzi.com/interfacenyamotaro.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(
function()
{
$(&#39;#dock&#39;).Fisheye(
{
maxWidth: 50,
items: &#39;a&#39;,
itemsText: &#39;span&#39;,
container: &#39;.dock-container&#39;,
itemWidth: 90,
proximity: 90,
halign : &#39;center&#39;
}
)
}
);

</script>

<style type='text/css'>
.dock {
position: relative;
height: 50px;
padding-left:0px;
margin-top:50px;

}
.dock-container {
position: absolute;
height: 50px;
padding-left: 20px;

}
a.dock-item {
display: block;
width: 60px;
color: #adf558;
position: absolute;
top: 20px;
text-align: center;
text-decoration: none;
font: 14px Arial, Helvetica, sans-serif;
}

.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}

.dock-item span {
display: block;
padding-left: 20px;
}
</style>

<div class='dock' id='dock' style='display: block;'>
<div class='dock-container' style='left: -7.48972px; width: 814.979px;'>
<a class='dock-item' expr:href='data:blog.homepageUrl' style='width: 90px; left: 0px;'><img alt='home' src='http://1.bp.blogspot.com/_rJyl7MtUcdY/TAyA07avoHI/AAAAAAAAAlA/3TtIsI-_vBg/s320/homeijo.png'/><span style='display:block;'>Home page</span></a>

<a class='dock-item' href='link 2' style='width: 90px; left: 90px;'><img alt='Gi���¡���»�¯�¿�½i thi���¡���»�¯�¿�½u' src='http://i342.photobucket.com/albums/o433/bkprobk/about.png'/><span style='display:block;'>Introduce</span></a>

<a class='dock-item' href='link 3' style='width: 90px; left: 180px;'><img alt='D���¡���»�¯�¿�½ch v���¡���»���¥' src='http://1.bp.blogspot.com/_rJyl7MtUcdY/TAyC6lEcjKI/AAAAAAAAAlo/0BVFRFGBsi8/s320/dichvuijo.png'/><span>Service</span></a>

<a class='dock-item' href='link 4' style='width: 90px; left: 270px;'><img alt='Site ����¯�¿�½������£ thi���¡���º���¿t k���¡���º���¿' src='http://3.bp.blogspot.com/_rJyl7MtUcdY/TAyCmgAWQ8I/AAAAAAAAAlg/8RPcu3vqLOU/s320/sanphamijo.png'/>Customer</a>

<a class='dock-item' href='link 5' style='width: 90px; left: 360px;'><img alt='Template' src='http://i342.photobucket.com/albums/o433/bkprobk/template.png'/><span style='display: block;'>Template</span></a>

<a class='dock-item' href='link 6' style='width: 90px; left: 450px;'><img alt='history' src='http://1.bp.blogspot.com/_rJyl7MtUcdY/TAyCUc_lnwI/AAAAAAAAAlY/qAel-yDD4eA/s320/historyijo.png'/><span style='display:block;'>Advisor</span></a>

<a class='dock-item' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' style='width: 134.979px; left: 540px;'><img alt='calendar' src='http://2.bp.blogspot.com/_rJyl7MtUcdY/TAyBoe8GjcI/AAAAAAAAAlI/6m2y3iHvTyQ/s320/doitacijo.png'/><span style='display:block;'>RSS</span></a>

<a class='dock-item' href='link 8' style='width: 140px; left: 674.979px;'><img alt='rss' src='http://2.bp.blogspot.com/_rJyl7MtUcdY/TAyCGGEDiQI/AAAAAAAAAlQ/nCHjMSTA3y4/s320/emailijo.png'/><span style='display:block;'>Contact</span></a>

</div>
</div>

Terakhir, jangan lupa simpan template!
taraaa.... dah jadi deh simple kan...
untuk pertanyaan silahkan komen aja ea... hihi
read more
0

membuat photoshop online


Assalamualaikum...ato-ato. (haha.. upin dan ipin)
halo semua para pembaca motaro blog's..
bagaimana kabarnya..?baik kan ? haha
basa-basi dl .. hehe
inie cuma mau share caranya buat photoshop online (online-online:saykoji)..hihi


g susah kok aku cuma framing aja dari situs pixlr.com ada yang tau ?
ini bisa dmasukin dengan extensi .html atau .php

langsung aja deh nie ...

<html>
<head>
<title>Online Photoshop</title>
<script>
var icon = document.createElement("link");
icon.rel = "SHORTCUT ICON";
icon.href = "http://www.planetsmilies.com/smilies/sad/sad0016.gif";
document.getElementsByTagName("head")[0].appendChild(icon);
</script>
</head>
<frameset rows="*" framespacing="0" border="0" frameborder="NO">
<frame src="http://www.pixlr.com/editor/" name="Online Photoshop" scrolling="auto" noresize>

</frameset>
<noframes>
<body>
</body>
</noframes>

</html>
}


dicoba dulu ya buka notepad terus save as terserah namanya tapi dengan catatan harus berekstensi .html atau .php

mudah kan ? ?
cukup sekian posting hari nie..

semoga bermanfaat !!!!
read more
0

Efek Teks Glow Seperti Lampu Neon


Kalau di postingan sebelumnya, kita udah membahas tentang membuat teks terbalik memakai CSS3 nah kali ini kita akan mencoba membuat efek teks yang bersinar (glow) seperti lampu neon.
Itu lho! Seperti kolong pada mobil-mobil di game NFS Underground yang ada lampu neonnya.
Contoh teksnya sendiri udah keliatan kan? karena udah aku terapkan di postingan ini!
Sebenarnya kode yang dipakai sangatlah simple dan sebenarnya merupakan modifikasi dari efek teks shadow
{text-shadow: 0px 0px 7px #23FF0A;}
7px adalah efek blur pada bayangan sedangkan #23FF0A adalah warna dari efek teks.penulisannya kurang lebih sebagai berikut

<div style="text-shadow: 0px 0px 7px rgb(35, 255, 10); color: rgb(255, 204, 0);"><span style="font-size:130%;">TEXT GLOW KAMU</span></div><span style="font-size:130%;">

Tapi bisa juga dengan cara yang praktis seperti ini:
Copy CSS dibawah ini dan paste diatas

#neon {
text-shadow: 0px 0px 7px #FF0000;
}

Simpan Template!

Kalau udah, sekarang tiap ingin membuat teks dengan efek glow tinggal menambahkan class="neon" pada elemen div
Contoh

<div style="color: rgb(255, 204, 0);" class="neon"><span style="font-size:130%;">TEXT GLOW KAMU</span></div><span style="font-size:130%;">

Mudah bukan? Selamat berekspresi kawan!
read more

Membuat Teks Terbalik dengan CSS3


Kayak kurang kerjaan aja! Ngapain coba ngebolak-balik tulisan gak jelas kayak gini?
Justru karena kurang kerjaanlah aku jadi punya ide tuk membuat tulisan terbalik.
Mungkin dulu aku pernah posting tentang membuat tulisan terbalik menggunakan teks generator, namun yang dilakukan generator tersebut hanyalah mengganti karakter supaya teks terlihat terbalik (contoh: menulis m dengan w)
Tapi trik itu kayaknya terlihat kurang rapi, sebab ada beberapa huruf yang terlihat dipaksakan
Bandingkan aja 2 teks terbalik di bawah ini:
Dengan menggunakan generator:
˙ʞılɐqɹǝʇ uɐsılnʇ ʇɐnqɯǝɯ ʞnʇ ǝpı ɐʎund ıpɐɾ nʞɐ ɥɐluɐɐɾɹǝʞ ƃuɐɹnʞ ɐuǝɹɐʞ nɹʇsnɾ
¿ıuıƃ ʞɐʎɐʞ sɐlǝɾ ʞɐƃ uɐsılnʇ ʞılɐq-ʞɐloqǝƃu ɐqoɔ uıɐdɐƃu ¡ɐɾɐ uɐɐɾɹǝʞ ƃuɐɹnʞ ʞɐʎɐʞ
Dengan Menggunakan CSS3:
Kayak kurang kerjaan aja! Ngapain coba ngebolak-balik tulisan gak jelas kayak gini?
Justru karena kurang kerjaanlah aku jadi punya ide tuk membuat tulisan terbalik.


Menurut kamu bagus yang mana?
Trik yang kedua sebenarnya memakai kode CSS3 kurang lebih kodenya

transform:rotate(180deg)
-moz-transform:rotate(180deg);
-webkit-transform:(180deg);
-o-transform:(180deg);
-icab-transform:(180deg);
-khtml-transform:(180deg);

Untuk membuatnya dengan HTML style kodenya kurang lebih:

<div style="transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg); -icab-transform:(180deg); -khtml-transform:(180deg);">TEKS YANG MAU DIBUAT TERBALIK</div>

Atau kalau mau yang lebih praktis gunakan cara berikut:

#kuwalik {
transform:rotate(180deg)
-moz-transform:rotate(180deg);
-webkit-transform:(180deg);
-o-transform:(180deg);
-icab-transform:(180deg);
-khtml-transform:(180deg);
}

Paste kodenya diatas kode ]]></b:skin>
Nah setiap ingin membuat tulisan terbalik kamu tinggal menambah kode class pada elemen div
Maksudnya kayak dibawah ini:

<div class="kuwalik">TEKS YANG INGIN DIBALIK</div>

Inilah salah satu kehebatan CSS3, semoga membantu kalian dalam membingungkan pembaca!
Jangan lupa komentar!
read more
0

Mengenal Penulisan CSS3


Haduh! Kayaknya aku agak telat nih posting tentang CSS3nya, duh maaf ea kawan!
CSS3 sebenarnya merupakan pengembangan dari kode CSS sebelumnya, fungsinya sendiri sangat beragam dan bahkan bisa untuk menggantikkan penggunaan gambar maupun Javascript.
Untuk penulisannya sebenarnya sama dengan CSS biasa namun sayangnya sering tidak terbaca di browser lain, jadi setiap browser memiliki penulisan CSS3 yang berbeda
Contohnya pembuatan border radius (pelengkungan garis)
CSS normalnya yaitu:

border-radius:8px;

namun kode tersebut gak akan terbaca di browser Mozilla Firefox dan agar terbaca kamu harus menambahkan kode -moz- sebelum kode CSS3 normal sehingga menjadi

-moz-border-radius:8px;

Begitu pula untuk browser lainnya juga butuh penyesuaian
Browser Safari dengan penambahan -webkit-
Sehingga menjadi

-webkit-border-radius:8px;

Opera dengan penambahan -o-
Sehingga menjadi:

-o-border-radius:8px;

Jadi agar terbaca di browser Firefok, Safari, Opera kita harus menuliskan semua kode sehingga menjadi:

border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-o-border-radius:8px;

Lalu masih ada 2 kode lagi yang aku masih belum tahu bekerja pada browser apa
kode tersebut adalah -icab- dan -khtml-
penulisannya sama hanya saja aku masih belum tahu kode ini bekerja pada browser apa
Jadi pada intinya untuk menulis suatu CSS3 dibutuhkan beberapa penulisan seperti di bawah ini:

border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-o-border-radius:8px;
-icab-border-radius:8px;
-khtml- border-radius:8px;

Sayangnya hingga saat ini masih ada browser yang belum support CSS3 yaitu Internet Explorer, (sebenarnya cuma beberapa kode yang support)

Semoga sedikit memberi pengetahuan ya kawanku!
Keep Blogging dan jangan lupa komentar!
read more
 
Copyright © Motaro BLog

Selamat Datang

Selamat datang di Kotretan motaro - saya senang Anda berada di sini, dan berharap Anda sering datang kembali. Silakan berselancar di sini dan membaca lebih lanjut tentang artikel kami. Ada banyak hal tentang kami, Anda mungkin akan menemukan sesuatu yang menarik. Selengkapnya tentang kami

Sepintas Tentang Kotretan motaro blog

Nama saya mochamad taufik romdony, saya hanya seorang biasa

Info
chimney