Google Translator

English French German Spain Italian Dutch

Russian Brazil Japanese Korean Arabic Chinese Simplified
**ADJAW CORP** Translate by Google

Sabtu, 02 April 2011

EFEK LINK BERJALAN "NUDGING"

04.58 AdJaw c0rp 2 comments

1. Sign In Di Blogger
2. Klik Menu Rancangan
3. Klik Menu Edit HTML
4. Copy Kode Dibawah Ini, Lalu Pastekan Di Bawah Kode <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#BlogArchive1 li&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script><!-- end LinkNudging -->
5. Klik Simpan Template
6. dan Arahkan Kursormu Pada Sembarang Link yang Ada di Widget Arsip Blog
Perintah BlogArchive1 adalah Perintah yang Memberikan Efek Link Berjalan "Nudging" Pada Semua Link yang ada di Widget Arsip Blog
Kamu dapat Menambah atau Merubah BlogArchive1 tersebut Dengan ID Widget Yang Ingin di Berikan Efek Link Berjalan "Nudging"
Kamu dapat Mengetahui ID Widget yang Ada di Blogmu dengan Mencari Kode <b:widget id='BlogArchive1'  dan di Sana Terlihat Semua ID Widgetmu
Read more »

Posted in:

EFEK KEREN PADA READ MORE

04.56 AdJaw c0rp No comments

 
Efeknya Adalah Efek Animasi Pada Tombol Read More atau Baca Selengkapnya. Namun, Efek Animasinya Hanya Dapat Terlihat Google Chrome. Selengkapnya, Silahkan Klik Baca Selengkapnya
Kode CSSnya Adalah
.button{
padding:8px 10px;
background-repeat:no-repeat;
background-position:bottom left;
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;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
float:right;
}


.button:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.blue.button{
color:#0f4b6d;
border:1px solid #84acc3;
-moz-radial-gradient(center bottom, circle, rgba(177,159,217,1) 0,rgba(177,159,217,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoFuc0eWzK1aASdgsU6vv3_eQfAZy-lwBlBTgcWQtWr_pT2-mBa0U-9OvKoZTlgCrlIu4E7WwYJiJrlSnuRjef1go9D0b-74hnWxqfbUbIKNrb8NfFyVrqypiPpmH4cKlW84s8SZkEfzw/s320/button_bg.png'),
-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(177,159,217,1)), to(rgba(177,159,217,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#8BC2C5), to(#8CDBDF));
}


.blue.button:hover{
background-color:#63c7fe;
-moz-radial-gradient( center bottom, circle, rgba(177,159,217,1) 0,rgba(177,159,217,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoFuc0eWzK1aASdgsU6vv3_eQfAZy-lwBlBTgcWQtWr_pT2-mBa0U-9OvKoZTlgCrlIu4E7WwYJiJrlSnuRjef1go9D0b-74hnWxqfbUbIKNrb8NfFyVrqypiPpmH4cKlW84s8SZkEfzw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoFuc0eWzK1aASdgsU6vv3_eQfAZy-lwBlBTgcWQtWr_pT2-mBa0U-9OvKoZTlgCrlIu4E7WwYJiJrlSnuRjef1go9D0b-74hnWxqfbUbIKNrb8NfFyVrqypiPpmH4cKlW84s8SZkEfzw/s320/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, from(rgba(177,159,217,1)), to(rgba(117,159,217,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D2506C), to(#DF8196));
}
CSS Tersebut Letakkan di Atas Kode ]]></b:skin>
Atau di HTML/Java Script dengan Menambahkan Kode <script>KODE CSS DI ATAS</script>
Kemudian Klik Rancangan, Edit HTML dan Klik Tanda Expand Template Widget
Cari Kode <div class='jump-link'>
dan Tambahkan Kode <div class='button blue'> di Bawahnya
Kemudian Cari Kode <data:post.jumpText/> di Sekitar Kode Tersebut, Terdapat Kode </a>
Setelah Menemukannya, Letakan Kode </div> Setelah Kode </a> Tersebut ...
Read more »

Posted in:

MENGENAL WEBKIT "BOX-REFLECT"

04.54 AdJaw c0rp No comments

Webkit Box Reflect


dari Contoh di Atas, Sudah Tahukan Apa Itu "Webkit Box Reflect"???
CSS3 Ini Adalah Sebuah Efek "Cermin" yang Dapat di Gunakan pada Obyek Gambar, Tulisan dan Border Atau Box. Namun CSS3 Ini Hanya Dapat di Lihat Untuk Browser Berbasis Webkit, Seperti Google Chrome. Mungkin Bisa di Lihat di Browser Lain, Namun Saya Kurang Mengetahuinya.

CSS3nya Adalah
-webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.5)));
0.5 Adalah Ke Kaburan (Opacity) Pada Reflectnya. Opacity Dapat Kamu Sesuaikan. Misalnya, 0.1 (Kabur Banget) Atau 1 Saja.
Belum Ngerti, Nich Contohnya...
<div style="-webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.3))); font: 20px Arial; color: #000:">TULISANNYA</div>
Read more »

Posted in: ,

Jumat, 01 April 2011

MEMBUAT KETERANGAN LINK LEBIH KEREN DNGAN TOOLTIP

04.51 AdJaw c0rp No comments

1. Sign In Di Blogger
2. Klik Menu Rancangan
3. Klik Menu Edit HTML
4. Copy Kode Dibawah Ini, Lalu Pastekan Di Atas Kode </body>

<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<!-- begin Tooltips -->
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;a.tooltip&quot;).easyTooltip();
});
</script>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'>"+content+"</div>");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery);
//]]>
</script>
<!-- end tooltips -->
5. Cari Kode ]]></b:skin>
6. dan Letakan Kode Sript di Bawah Ini di Atasnya
#easyTooltip{
padding:5px 10px;
border: 1px solid #ddffff; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 0px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-right-radius: 15px; -moz-box-shadow: 0 0 40px #87CEFA;-webkit-box-shadow: 0 0 40px #87CEFA;box-shadow: 0 0 40px #87CEFA;
background: #f6f6f6;
color:#000;
text-shadow:4px 4px 4px #708090;
7. Klik Simpan Template
8. Untuk Membuat Link dengan Efek Keterangan Tooltip, Perhatikan Script di Bawah Ini
<a class='tooltip' href='http://www.Blogmu.com/' title='Keteranganmu di Tooltip'>Beranda</a>
Ubah http://www.Blogmu.com/ dengan Linkmu, dan Beranda dengan Nama Linkmu
dan Ubah Keteranganmu di Tooltip dengan Keterangan Link Tersebut
Read more »

Posted in:
Twitter Delicious Facebook Digg Stumbleupon Favorites More
RSS FeedSubscribe to Our RSS feed!
Follow Us on Twitter!Follow Us on Twitter!

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Modern Warfare 3