Bocah Gemblung

Simple Animation Menu

2009-12-23T20:49:00.000-08:00

Menu ini sangat unik, lucu dan sangat layak untuk di gunakan di blog anda. selain unik dan lucu menu navigasi ini juga simple dalam pemasangannya, script yang digunakan pun gak sebanyak menu navigasi yang lain. ikuti langkah langkah di bawah ini jika anda ingin mengaplikasikannya di blog anda.
Sebelum mencoba lebih baik lihat dulu demonya di setelah itu filenya jika anda merasa cocok dengan menu navigasi ini.

Gini nih caranya :

login ke blog anda

pilih edit html

copy kan kode ini tepat diatas </head>

     <link rel="stylesheet" href="http://masukan alamat hostingan file anda/animated-menu.css"/>
     <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
     <script src="http://masukan alamat hostingan file anda/js/jquery.easing.1.3.js" type="text/javascript"></script>
     <script src="http://masukan alamat hostingan file anda/animated-menu.js" type="text/javascript"></script>

lalu copykan kode dibawah ini tepat di bawah animated-menu.js

<script type='text/javascript'>

$(document).ready(function(){

    //When mouse rolls over
    $("li").mouseover(function(){
        $(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

    //When mouse is removed
    $("li").mouseout(function(){
        $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

});

</script>

copykan script CSS dibawah ini tepat diatas </b:skin>

body{
    font-family:"Lucida Grande", arial, sans-serif;
    background:#F3F3F3;
}

ul{
    margin:0;
    padding:0;
}

li{
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}

a{
    color:#FFF;
    text-decoration:none;
}

p{
    padding:0px 5px;
}

    .subtext{
        padding-top:15px;
    }

/*Menu Color Classes*/
.green{background:#6AA63B;
}
.yellow{background:#FBC700;
}
.red{background:#D52100;
}
.purple{background:#5122B4;
}
.blue{background:#0292C0;
}

cari kode <div id='outer-wrapper'><div id='wrap2'>

kemudian copykan script html ini tepat di bawah kode <div id='outer-wrapper'><div id='wrap2'>

<div id='animated-menu'>
<ul>
        <li class="green">
            <p><a href="masukkan link anda">Home</a></p>
            <p class="subtext">The front page</p>
        </li>
        <li class="yellow">
            <p><a href="masukkan link anda">About</a></p>
            <p class="subtext">More info</p>
        </li>
        <li class="red">
            <p><a href="masukkan link anda">Contact</a></p>
            <p class="subtext">Get in touch</p>
        </li>
        <li class="blue">
            <p><a href="masukkan link anda">Submit</a></p>
            <p class="subtext">Send us your stuff!</p>
        </li>
        <li class="purple">
            <p><a href="masukkan link anda">Terms</a></p>
            <p class="subtext">Legal things</p>
        </li>
    </ul>
</div>

kemudian save template anda

* Catatan Untuk background css nya saya sediakan di alamat berikut ini :

http://www.sigmirror.com/files/48596_miugm/blue-item-bg.jpg
http://www.sigmirror.com/files/48597_aqywz/green-item-bg.jpg
http://www.sigmirror.com/files/48598_ctpbn/purple-item-bg.jpg
http://www.sigmirror.com/files/48599_s02i2/red-item-bg.jpg
http://www.sigmirror.com/files/48600_ityye/yellow-item-bg.jpg

silahkan anda sesuaikan dengan kebutuhan anda serta anda dapat merubah background nya sesuai dengan
selera anda atau keinginan anda. Selamat mencoba

Gaya Sebuah Blog

2009-12-23T05:40:00.000-08:00

Style atau gaya sebuah blog ada bermacam macam, dari yang 2 kolom sampai 4 atau bahkan lebih, ada juga yang simple bahkan sampai yang ribet, rata rata seorang blogger akan melengkapi blognya dengan pernak pernik jquery, mootools, serta penambahan widget. disini setiap blogger punya sudut pandang serta cara berpikir yang berbeda untuk menngunakannya. Seperti yang anda lihat di blog ini, saya sangat minim menggunakan widget selain fungsinya yang saya banyak yang tidak tahu atau bisa juga saya disebut sebagai orang yang ketinggalan widget....hehehe...bukan karena apa apa seh sebenarnya, tapi yang paling mendorong saya untuk tidak menggunakan widget secara berlebihan adalah waktu loading blog yang bakalan molor alias lelet...tapi sekali lagi itu sudut pandang saya...bagaimana dengan anda dan cara anda mempercantik tampilan blog anda??? itu adalah suatu HAB anda ( Hak Asasi Blogger ) mudah mudahan segera ada undang undangnya...

Back to top makin smooth dengan sentuhan jquery

2009-12-23T02:33:00.000-08:00

Pada awalnya sebelum tau smooth scroll ini, saya menggunakan mode lama yang terlihat cepet n kilat yang kata dokter bisa bikin juling loh.hehehehe makanya buruan pindah ke jquery, biar makin smooth. Setelah ngubek ngubek google akhirnya sampailah aku di

gini nih caranya mengaplikasikan pada blog anda:

Langkah pertama login ke blog anda.

Pilih edit html

Copy lalu paste script jquery dibawah ini tepat diatas kode </head>

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

Lalu tambahkan kode javascript berikut dibawah script jQuery yang baru saja anda copy :

<script type='text/javascript'>
//<![CDATA[

$(function(){

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

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

var $target = $(this.hash);

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

if ($target.length) {

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

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

return false;

}

}

});

});
//]]>
</script>

Kemudian cari kode <body>

Lalu ubah menjadi seperti ini <body id='top'>

Kemudian masukkan kode HTML dibawah ini tepat diatas kode </body>

<div id='goingtop'>
<a href='#top' title='Top'><img src='http://masukkan alamat hosting gambar /goto_top.gif' style='right:20px; bottom:20px; position: fixed;'/></a></div>

sumber:

Banner Teman Mbah Goblog

2009-12-20T04:56:00.000-08:00

Dibawah ini adalah teman blogger dari Mbah Goblog silahkan klak klik sana sini dan temukan apa yang anda cari dari blog blog yang Mbah rekomendasikan ini.

Mengaplikasikan Easy Tooltips ( Jquery )

2009-12-19T11:42:00.000-08:00

Easy tooltips ini yang saya aplikasikan pada blog ini adalah hasil dari pengembangan dari cssglobe. Jika anda ingin mengaplikasikan pada blog anda, maka anda dapat mengikuti langkah langkah di bawah ini.

Masukkan Script dibawah ini tepat di atas </head>

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

Lalu paste kode ini tepat dibawah kode diatas

<script type='text/javascript'>
$(document).ready(function(){
    $("a").easyTooltip();
    $("a#link").easyTooltip({
        tooltipId: "easyTooltip2"
    });
});
</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>

Selanjutnya anda harus memasukkan kode CSS berikut ini. caranya cari kode : ]]></b:skin> lalu masukkan kode di dawah ini tepat diatas kode : ]]></b:skin>

#easyTooltip{
padding:5px 10px;
border:2px solid #ffffff;
background:#195fa4 url(http://www.masukkan alamat hostingan anda/bg.gif)repeat-x;
color:#E0EFE0;
width:150px;
font-weight:bold;
text-shadow: 2px 1px 1px #021564;
font-family: Verdana;
-moz-border-radius: 5px;
}

Simpan Template

selanjutnya anda perlu melakukan konfigurasi pada setiap link yang anda buat untuk melakukan pemanggilan terhadap fungsi dari easy tooltips dengan cara seperti ini :

<a style="font-weight:bold;" class="tooltip" href="http://alamat yang dituju.com/" title="Terserah anda disi apa">Link Anda</a>

Begini nih Hasilnya

Test Post

2009-12-18T10:21:00.000-08:00

Css Globe