Wednesday 31 July 2013

Daftar Situs Penyedia Widged Gratis




Widged tentunya sangat penting untuk mempercantik tampilan blogger nah pada postingan ini saya akan share beberapa situs widged gratis untuk blog anda jika anda tertarik untuk mencobanya silahkan kunjungi sits situs dibawah ini...

Kalender



Hit counters



Widged Lainnya


itu saja yang dapat saya bagikan gan mungkin diantara agan masih tau situs yang lainnya silahkan ditambahkan...
selamat mencoba semoga bermanfaat...

Membuat Twitter Box Melayang Untuk Blog





Assalamualaikum pada kesempatan ini saya akan share mengenai cara membuat twitter box melayang untuk blog tentu dengan cara yang sangat gampang dan sederhanajika agan berminat menggunakannya silahkan ikuti langkah dibawah ini...
Masuk blog agan
pilih menu tata letak/add gadged
kemudian pilih html javascript
jika sudah letakan kode dibawah ini pada box yang telah tersedia


<style type="text/css">
/*<![CDATA[*/
#twitplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}.twitplbadge {background-color:#1E90FF;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7Asn3Y2TaZleIJlXLWlVFMVBDS6RZTwfjI6sEpQbgU_NG7bBOKrgzMrOXhGp22sD3JQ3zEet_3foi4Ozjrt9KBG0U0k0D65HuZa5Z3Q5v8FXW2ATElNgXaEPfxOc-QJaYwWoZcVLw5WGM/s1600/md_vertical-right.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}.mdtwitplikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}.mdtwitplikebox span a{color: #808080;text-decoration:none;}.mdtwitplikebox span a:hover{text-decoration:underline;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
(function(makingdifferent){
makingdifferent(document).ready(function(){
var $dur = "medium"; // Duration of Animation
makingdifferent("#twitplikebox").css({right: -300, "top" :100 })
makingdifferent("#twitplikebox").hover(function () {
makingdifferent(this).stop().animate({
right: 0
}, $dur);
}, function () {
makingdifferent(this).stop().animate({
right: -300
}, $dur);
});
makingdifferent("#twitplikebox").show();
});
})(jQuery);
/*]]>*/
</script>
<div class="mdtwitplikebox">
<div id="twitplikebox" style="display:none;">
<div class="twitplbadge"></div>
<iframe name="fbfanIFrame_0" frameborder="0" allowtransparency="true" src="http://moopz.com/connect.php?user=lindamarlina40" class="FB_SERVER_IFRAME" scrolling="no" style="width: 300px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial;"></iframe>
<span></span></div></div>


Catatan : kode warna biru menunjukan warna box twitter silahkan ganti dengan warna kesukaan agan
               untuk kode warnanya
   kode warna merah merupakan user name twitter silahkan diganti dengan user name agan

Selesai silahkan simpan template agan dan lihat hasilnya...
Selamat mencoba semoga bermanfaat...

Sharing Button Widged Dengan Tampilan Karikatur Rumah






Assalamualaikum pada kesempatan ini saya akan share mengenai cara membuat sharing button widged dengan tampilan baru di blog anda sebenarnya ada banyak sekali tampilan tampilan menawan yang ditawarkan oleh widged ini tetapi mungkin apa yang akan saya bagikan sekarng bisa menjadi salah satu pilihan anda jika anda tertarik silahkan ikuti langkah dibawah ini....

Masuk blog anda
pilih menu tata letak/add gadged
kemudian pilih html javascript
setelah itu letakan kode dibawah ini pada box yang tersedia

    <style>

    #PTTHOME img {

        -moz-transition: all 0.8s ease-in-out;

        -webkit-transition: all 0.8s ease-in-out;

        -o-transition: all 0.8s ease-in-out;

        -ms-transition: all 0.8s ease-in-out;

        transition: all 0.8s ease-in-out;

    }

    #PTTHOME img:hover {

        -moz-transform: rotate(360deg);

        -webkit-transform: rotate(360deg);

        -o-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

        transform: rotate(360deg);

    }

    </style>

    <center><p id="PTTHOME">

        <a href="https://www.facebook.com/arieadie30 "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif5ZFsAVQfW8MAjPsOsQEkNGBufK4zOszw2VAb7lh88cUYtDJOzofSXXFVTpyEY0KzkYNgLG-sST_0ArGnmDPzZBOMAfRpcQgcSp2kfIDf8FfnfVzRGa-FX_49ZuroX3TgthFsCklgsGA/h120/Facebook-Home.png"  title="Like Our Facebook Page" /></a>

        <a href="https://www.twitter.com/lindamarlina40"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEjscxKYXFhjCvvXrtDxOWcaouJka5y8IEmLbUkr14MIu_pm8_SLUpBb-z_CiI2VSygVlS_dJ2LGP8xJ3Ol89nbnssIj9EsZeQhjJpwhJ7BIbkbDKJmbevhy8GhecciOLSaoHwiWmWX-g/h120/Twitter-Home.png" title="Follow Our Updates On Twitter" /></a>

        <a href="https://plus.google.com/u/0/112756918350798570373"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyF31DCG2kyxOjfIs1azbzeR8sCpVGH65WgBqsOvCv2kkU62gmHILFDkywRU3k6M5n4WG-gMAPNmh-z5FyFPMTG8smhty_do3_iEC0Cv3IIGKqZymUJp8hYs6EUnzj0bOn1qURxvEQ3cU/h120/Google-Social-store.gif" title="Follow Us On Google+" /></a>

        <a href="http://www.feeds.feedburner.com/pengembarabiru"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvEHKuezOulVPffBFB6YQvwcABqm8FC-G60QRNMOYLIKQWpgB0xp8Di7g43XrwDHaelAPwO_E60B_L72VMSykLkEP4pO__sqsdltFUvTzVyOUWWW8UlWsvdsQdDakS47SvekInegPYiVQ/h120/RSS-Home.png" title="Grab Our Rss Feed" /></a>

    </p></center>


Catatan : saya kira agan sudah mengerti silahkan ganti kode yang berwarna merah sesuai dengan akun agan masing - masing
setelah itu simpan template agan dan lihat hasilnya..
semoga agan menyukainya selamat mencoba semoga bermanfaat....

Back To Top Menarik Dengan CSS dan jQuery



Assalamualaikum Pada kesempatan ini saya akan share mengenai cara membuat tombol back to top dengan menggunakan css dan jQuery caranya cukup sederhana jadi mudah untuk diterapkan
nah jika tertarik lansung saja ikuti langkah dibawah ini

Masuk blog agan
pilih menu template/edit html
kemudian gunakan ctrl + f untuk menemukan kode  </body>
jika sudah ketemu letakan kode dibawah ini diatas tag  </body>

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

<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>

<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

Catatan : silahkan hapus kode berwarna merah jika sebelumnya sudah ada di template anda

Selanjutnya gerakan kursor kebagian atas untuk menemukan kode ]]></b:skin>
jika sudah ketemu letakan kode dibawah ini diatas tag ]]></b:skin>

/* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:Darkred;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: Darkred url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd7nPLxfYFxq15uMefCSzQP9tgi-vOpQ8pJ5bDBD_qDzelm_znDgSZyTFhZTO4fFBEQ04xPJWG2nNLvh2OGx6mPn4pHWam_1_3IrIa3qlChSzWWsD4_KaRMP5nzE66FeSiHxmZYBFYDdQ/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:Darkred;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: Darkred url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4queF0EN6W1boO1C05wZgAF7iQpSHEUy08wrAVyHmW98ckTW6ycXY7J9bZoAIk1OmD8t9nLCWm0JZmWLA5w4v0bryXSI4MP9vtrOvdO7t4OYKTppUvr7qUMCyxjqXAPFHUrJyjMFiB4/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}


Terakhir silahkan simpan template anda dan lihat hasinya
 selamat mencoba semoga bermanfaat.....

Pilihan Daftar Isi Menawan Untuk Blog Anda




Assalamualaikum jika kemaren saya membagikan cara membuat daftar isi dengan tema galery
Pada kesempatan ini saya akan share mengenai cara membuat daftar isi tetapi dengan tampilan sedikit berbeda dengan daftar isi daftar isi sebelumnya langkahnya tidak jauh beda dengan daftar isi yang lain lansung saja gan kita ke langkah pembuatannya....

Masuk blog anda
pilih menu laman/laman baru
kemudian pada box postingan pilih mode html






Jika sudah segera letakan kode dibawah ini pada box yang tersedia


<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="https://farhanshare-blogspot-com.googlecode.com/files/sitemap%20%281%29.js" type="text/javascript"></script><script src="http://ngeblogbarengbareng.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
</div>


Catatan : untuk kode berwarna merah silahkan diganti dengan URL Blog agan 
jika sudah silahkan dipublikasikan dan lihat hasilnya
saya kira penjelasannya sudah cukup jelas selamat mencoba semoga bermanfaat...

Membuat Recent Post Dengan Menampilkan Fungsi Next Previous


Pada Postingan ini saya akan  share mengenai cara membuat Recent post terbaru dilengkapi dengan fungsi next previous ok lansung aja gan untuk menampilkannya sangat gampang kok gan silahkan agan ikuti langkah laqngkah dibawah ini...

masuk blog agan
pilih menu template
segera cari kode </head> dengan menggunakan ctrl + f
jika sudah letakan kode dibawah ini diatas tag </head>

<script type='text/javascript'>
    //<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://ngeblogbarengbareng.blogspot.com";
    var charac = 100;
    var urlprevious, urlnext;

    function dhffeed(dharla, banget) {
        var showfeed = dharla.split("<");
        for (var i = 0; i < showfeed.length; i++) {
            if (showfeed[i].indexOf(">") != -1) {
                showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">") + 1, showfeed[i].length);
            }
        }
        showfeed = showfeed.join("");
        showfeed = showfeed.substring(0, banget - 1);
        return showfeed;
    }

    function showterbaru(json) {
        var entry, posttitle, posturl, postimg, postcontent;
        var showblogfeed = "";
        urlprevious = "";
        urlnext = "";
        for (var k = 0; k < json.feed.link.length; k++) {
            if (json.feed.link[k].rel == 'previous') {
                urlprevious = json.feed.link[k].href;
            }
            if (json.feed.link[k].rel == 'next') {
                urlnext = json.feed.link[k].href;
            }
        }
        for (var i = 0; i < numfeed; i++) {
            if (i == json.feed.entry.length) {
                break;
            }
            entry = json.feed.entry[i];
            posttitle = entry.title.$t;
            for (var k = 0; k < entry.link.length; k++) {
                if (entry.link[k].rel == 'alternate') {
                    posturl = entry.link[k].href;
                    break;
                }
            }
            if ("content" in entry) {
                postcontent = entry.content.$t;
            } else if ("summary" in entry) {
                postcontent = entry.summary.$t;
            } else {
                postcontent = "";
            }
            if ("media$thumbnail" in entry) {
                postimg = entry.media$thumbnail.url;
            } else {
                postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjogakWc4hXhDWY5l4BSA-Nl6xAomnJ4vY4gQlOimoBxJNSB54_K-cZf3rrkevQ0Ss0tbNe7C6-8fWAsArQNEldlUELXr4_k44vuH5280rrgDTorzNXGFUWrF9XPmvOVsOlZ4_nR5X-gZU/s1600/no+image.jpg";
            }
            showblogfeed += "<div class='dhf-elemen'>";
            showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
            showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
            showblogfeed += "<p>" + dhffeed(postcontent, charac) + "...</p>";
            showblogfeed += "</div>";
        }
        document.getElementById("terbaru").innerHTML = showblogfeed;
        showblogfeed = "";
        if (urlprevious) {
            showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
        } else {
            showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
        }
        if (urlnext) {
            showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
        } else {
            showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
        }
        showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
        document.getElementById("dhf-navigasifeed").innerHTML = showblogfeed;
    }

    function navigasifeed(url) {
        var p, parameter;
        if (url == -1) {
            p = urlprevious.indexOf("?");
            parameter = urlprevious.substring(p);
        } else if (url == 1) {
            p = urlnext.indexOf("?");
            parameter = urlnext.substring(p);
        } else {
            parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
        }
        parameter += "&callback=showterbaru";
        incluirscript(parameter);
    }

    function incluirscript(parameter) {
        if (startfeed == 1) {
            removerscript();
        }
        document.getElementById("terbaru").innerHTML = "<div id='dhf-loading'></div>";
        document.getElementById("dhf-navigasifeed").innerHTML = "";
        var archievefeed = urlblog + "/feeds/posts/default" + parameter;
        var terbaru = document.createElement('script');
        terbaru.setAttribute('type', 'text/javascript');
        terbaru.setAttribute('src', archievefeed);
        terbaru.setAttribute('id', 'DHFLABEL');
        document.getElementsByTagName('head')[0].appendChild(terbaru);
        startfeed = 1;
    }

    function removerscript() {
        var elemen = document.getElementById("DHFLABEL");
        var parent = elemen.parentNode;
        parent.removeChild(elemen);
    }
    onload = function () {
        navigasifeed(0);
    }
    //]]>
</script>


Setelah itu barilah keatas halaman untuk mencari kode ]]></b:skin>
jika sudah ketemu letakan kode dibawah ini tepat diatas tag ]]></b:skin>

#dhf-terbaru {
    border: 1px solid #585858;
    width: 100%;
    margin: 0 auto;
}

#terbaru {
    margin: 0px;
}

.dhf-elemen {
    border: 1px solid #ccc;
    margin: 5px 0;
    padding: 5px;
    height: 79px;
}

.dhf-elemen img {
    background: #999;
    padding: 4px;
    float: left;
    height: 70px;
    margin-right: 8px;
    width: 70px;
}

.dhf-elemen h6,.dhf-elemen h6 a {
    font-size: 12px!important;
    font-weight: 700!important;
    margin: 0;
    color: #111;
}

.dhf-elemen:hover {
    background-color: #c3c3c3;
}

.dhf-elemen p {
    font: 14px PT Sans Narrow;
    text-align: justify;
    color: #555;
    line-height: 14px;
    margin: 5px 0;
}

#dhf-loading {
    color: #888;
    font-family: Tahoma;
    font-size: 100px;
    letter-spacing: -10px;
    text-align: center;
    text-shadow: -5px 0 1px #444;
    background: #141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwi3F8ZJ8yOKtvEBVoIh0ci87CY0nPPWRSLrVQb1sr69eZGiILTQfuuY2qDP-B0kwKMy1ZWTqtCZZ8wLmfb0XKoeKfYlpCZCtwYXYDNBPv5uL0BTBWrCZOJuIL5ZqDwRrw5Dtbcrj3kyg/s1600/loading.gif) no-repeat 50% 50%;
    height: 470px;
    border: 1px solid #c3c3c3;
}

#dhf-navigasifeed {
    border: 1px solid #c3c3c3;
    color: #bbb;
    font-family: Verdana;
    font-size: 12px;
    text-align: center;
    margin: 0px;
}

#dhf-navigasifeed:hover {
    background-color: #c3c3c3;
}

#dhf-navigasifeed a {
    color: #141414!important;
    font-family: Tahoma!important;
    font-size: 12px!important;
    font-weight: 400!important;
    display: block;
    padding: 5px 10px;
}

#dhf-navigasifeed span {
    padding: 5px 10px;
}

#dhf-navigasifeed .next {
    float: right;
}

#dhf-navigasifeed .previous {
    float: left;
}

#dhf-navigasifeed .home {
    text-align: center;
}

#dhf-navigasifeed a:hover,#dhf-navigasifeed span.noactived {
    color: transparant!important;
}


Catatan : silahkan diganti semua kode yang saya tandai dengan warna merah

jika sudah kita beralih ke halaman
tata telak/add gadged
kemudian letakan kode dibawah ini pada box yang tersedia

<div id="terbaru"></div>
<div id="dhf-navigasifeed"></div>

Selesai Silahkan simpan template anda dan lihat hasinya
semoga agan suka dengan Recent Post ini
selamat mencoba semoga bermanfaat....

Memodifikasi Tampilan Widged Google+ Followers

Pada kesempatan ini saya akan membagikan sedikit trips untuk memodifikasi tampilan Google+ Followers jika anda bosan dengan tampilan widged anda yang masih standar maka tidak ada salahnya anda mencoba widged yang satu ini gan tampilannya cukup enak dimata hehehe...
lansung aja ke langkah langkahnya gan...

Masuk blog agan
pilih menu tata letak/add gadged
pilih html javascript
jika sudah silahkan letakan kode dibawah ini pada box yang tersedia

<style>
.techprevue-fb-like-box-pure{width:280px;height:160px;border-radius:3px;position:relative;background:#FFF;padding:10px}.techprevue-fb-like-box-pure,.techprevue-fb-like-box-pure:before,.techprevue-fb-like-box-pure:after{background:#FFF;border:1px solid #0072C4}.techprevue-fb-like-box-pure:before,.techprevue-fb-like-box-pure:after{position:absolute;content:"";bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.techprevue-fb-like-box-pure:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #0072C4}
</style>
<div class="techprevue-fb-like-box-pure">
<div style="height:155px;overflow:hidden">
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/u/0/112756918350798570373" data-source="blogger:blog:followers" data-width="300">
</div>
<script type="text/javascript">
      (function() {
        window.___gcfg = {'lang': 'en'};
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
      })();
    </script>
</div>
</div>

Catatan : Silahkan disesuaikan kode yang saya tandai dengan warna merah
               misalnya pada ID google plus silahkan diganti dengan ID google plus anda
               pasti agan sudah tau dach hehehe silahkan berkreasi sendiri...

Terakhir silahkan simpan template anda dan lihat hasilnya
selamat mencoba semoga hasilnya memuaskan dan bermanfat.....

Menampilkan Fungsi Spoiler Pada Postingan



Padapostingan ini saya akan share sedikit mengenai cara menampilkan spoiler pada postingan
spoiler pada postingan ini sangat membantu untuk menampung kode yang terlalu panjang pada postingan kita jika agan berminat menggunakannya silahkan ikuti angkah dibawah ini...

Caranya sangat gampang gan
silahkan agan sisipkan kode dibawah ini pada postingan agan

<div id="spoiler" style="display:none">

Kode yang ingin disembunyika

</div>
<button title="Klik untuk melihat/menyembunyikan" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Open/Close</button>

Catatan kode berwarna kuning adalah kontan yang ingin disembunyika
             kode berwarna merah silahkan ganti dengan kata kata agan sendiri

 Nah jika selesai silahkan dipublikasikan postingannya hehehe...

saya kira penjelasannya sudah cukup dimengerti selamat mencoba semoga bermanfaat......

Membuat Spoiler Sederhana Untuk Blog


Pada kesempatan ini saya akan share mengenai tata cara membuat spoiler sederhana untuk blog anda
ada beberapa blogger yang memakai widged terlalu banyak pada halaman blog mereka sehingga akan merusak pandangan padatampilan blog tersebut nah untuk itu spoiler ini sangat bermanfaat untuk menampung widged yang berlebihan pada blog anda misalnya banner sahabat ataupun widged lain jika anda berminat menggunakannya silahkan ikuti langkah dibawah ini...

Masuk blog anda
pilih menu template/edit html
kemudian cari kode ]]></b:skin> gunakan ctrl + f  untuk memudahkan pencarian
jika sudah ketemu letakan kode dibawah ini diatas tag  ]]></b:skin>

input.trigger {
  display:inline-block;
  margin:0;
  padding:0;
}

.spoiler {
  overflow:hidden;
  background-color:white;
  margin:10px 0 0;
  padding:0 30px;
  height:0;
  visibility:hidden;
  -webkit-transition:all 1s ease-in-out;
  -moz-transition:all 1s ease-in-out;
  -ms-transition:all 1s ease-in-out;
  -o-transition:all 1s ease-in-out;
  transition:all 1s ease-in-out;
}

input.trigger:checked + .spoiler,
input.trigger:checked + br + .spoiler {
  padding:15px 30px;
  visibility:visible;
  height:300px;
  overflow:auto;
}

Selesai simpan template anda terlebih dahulu...

Untuk Menjalankan fungsi Spoilernya tentunya memrlukan kode pemanggil
Nah masuk pada halaman tata letak/add gadged
kemudian letakan kode dibawah ini pada box yang tersedia

<input type="checkbox" class="trigger"/> Buka/Tutup Spoiler
<div class="spoiler">
Letakan Konten/kode di sini.....!!!
</div>

Catatan silahkan ganti kode berwarna merah dengan  konten/kode widged yang ingin anda gunakan
Saya kira penjelasa tentang spoilernya cukup jelas selamat mencoba semoga bermanfaat...

Menambahkan Icon Bendera Unik Pada Label


Pada postingan kali ini kita akan beljar membuat tampilan berbeda pada label blog dengan menambahkan icon berdera yang unik hanya dengan beberapa ode css saja untuk membuat tampilan seperti ini..baiklah gan lansung saja ke tutorialnya...

Masuk blog anda
pilih menu template/edit html
cari kode ]]></b:skin> gunakan ctrl + f untuk memudahkan pencarian
jika sudah ketemu segera letakan kode dibawah ini diatas tag ]]></b:skin>

#Label1 ul{
       list-style:none outside none;
       margin:0 auto;
       padding:0;
       width:98%;
}
#Label1 ul li{
       padding:5px 0;
}
#Label1 ul li a{
       background:url('https://sites.google.com/site/gubhugreyotprojects/mart-2012/images/icon/flag-icon-label.png') no-repeat scroll left center transparent;
       display: inline-block;
       padding-left: 20px;
       transition:0.5s ease;
       -o-transition:0.5s ease;
       -ms-transition:0.5s ease;
       -moz-transition:0.5s ease;
       -webkit-transition:0.5s ease;
}
#Label1 ul li a:hover{
       margin-left:20px;
}

Jika sudah silahkan simpan template anda dan lihat hasilnya...
selamat mencoba semgoga bermanfaat.....

Vertical Menu keren Untuk Blog Anda





kali ini saya akan share mengenai cara membuat menu veertical keren untuk blog menu vertical indah akan segera mewarnai tampilan blog anda hanya dengan beberapa tambahan kode CSS saja jika anda tertarik menggunakannya silahkan ikuti langkah langkah dibawah ini...

Masuk ke blog anda
pilih menu template/edit html
kemudian cari kode ]]></b:skin> gunakan ctrl + f  untuk memudahkan sobat
jika sudah ketemu letakan kode dibawah ini diatas tag ]]></b:skin>

<style type="text/css">

.urbangreymenu{
width: 190px; /*width of menu*/
}

.urbangreymenu .headerbar{
font: bold 13px Verdana;
color: white;
background: #606060 url(http://img407.imageshack.us/img407/6162/arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}

.urbangreymenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}

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

.urbangreymenu ul li a{
font: normal 12px Arial;
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}

.urbangreymenu ul li a:visited{
color: black;
}

.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}

</style>


Setelah itu silahkan simpan template anda terlebih dahulu
kemudian kita beralih ke menu tata letak/add gadged
letakan semua kode dibawah ini pada box yang tersedia

<div class="urbangreymenu">

<h3 class="headerbar">arieadie</h3>
<ul>
<li><a href="http://ngeblogbarengbareng.blogspot.com/">Tutorial Blogger</a></li>
<li><a href="http://ngeblogbarengbareng.blogspot.com/">Template</a></li>
<li><a href="http://ngeblogbarengbareng.blogspot.com/">Tips and Trik</a></li>
<li><a href="http://ngeblogbarengbareng.blogspot.com/">Widged</a></li>
<li><a href="http://ngeblogbarengbareng.blogspot.com/">Komentar</a></li>
<li><a href="http://ngeblogbarengbareng.blogspot.com/">Animation</a></li>
<li><a href="http://ngeblogbarengbareng.blogspot.com/">Download</a></li>
<li>
<ul>
<li><a href="http://ngeblogbarengbareng.blogspot.com/" >lainnya</a></li>
<li><a href="http://ngeblogbarengbareng.blogspot.com/">Kode Warna</a></li>
<li><a href="http://ngeblogbarengbareng.blogspot.com/">Tukar Link</a></li>
<li><a href="http://ngeblogbarengbareng.blogspot.com/">Back Link</a></li>
<li><a href="http://ngeblogbarengbareng.blogspot.com/">Sitemap</a></li>
<li><a href="http://ngeblogbarengbareng.blogspot.com/">Disclaimer</a></li> 
</ul>

</li></ul></div>


Catatan : silahkan sesuaikan kode tersebuat dengan nama dan URL tujuan menu masing masing
               kode berwarna merah merupakan nama menu dan yang berwarna kuning URL tujuan

Saya kira penjelasannya sudah cukup jelas silahkan dicoba semoga bermanfaat....

Membuat Tombol Sosial Media Keren Menggunakan CSS3



Pada postingan ini saya saya akan share tentang bagaimana cara menambahkan tombol sosial media keren di blog menggunakan CSS 3 caranya sangat mudah gan dan agan patut mencobanya hehe...
baikalah gan lansung saja pada langkah langkahnya..

Masuk blog agan
pilih menu template/edit html
cari kode ]]></b:skin> gunakan ctrl + f untuk memudahkan pencarian
jika sudah ketemu lansung aja letakan kode dibawah ini tepat diatas tag ]]></b:skin>

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}

.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}

.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

Setelah itu silahkan save template anda terlebih dahulu
kemudian kita beralih ke munu tata letak/add gadged
lalu letakan kode dibawah ini pada box yang tersedia

<center><ul class="bubblewrap">
<li><a href="Kode agan disini "><img src="http://img42.imageshack.us/img42/7086/stumbleuponlj.png" title="Add to Stumbleupon" /></a></li>
<li><a href="Kode agan disini "><img src="http://img253.imageshack.us/img253/835/facebookv.png" title="Add to Facebook" /></a></li>
<li><a href="Kode agan disini "><img src="http://img832.imageshack.us/img832/5893/twittermx.png" title="Add to Twitter" /></a></li>
<li><a href="Kode agan disini "><img src="http://img4.imageshack.us/img4/2004/rssqn.png" title="Add RSS Feed" /></a></li>
</ul>
</center>


Catatan : Silahkan sesuaikan kode berwarna merah dengan kode sosial media anda



Jika sudah silahkan simpan template agan dan lihat hasilnya...

Selamat mencoba tombol sosial media barunya semoga bermanfaat....

Widget Artikel Terkait Blogger: 6 dalam 1



Contoh tampilan widget artikel terkait Blogger yang paling populer
Contoh-contoh tampilan widget. Klik untuk memperbesar gambar.
Saat ini terdiri dari 6 jenis tampilan yang bisa Anda sesuaikan sendiri. Widget ini merupakan pengembangan dari konsep random post ringan yang pernah Saya tuliskan . Hanya saja, karena pemanggilan feed posting difilter melalui label posting yang spesifik, maka widget random post ini sekarang bisa dijadikan sebagai widget artikel terkait (random post dengan sortir label otomatis berdasarkan posting).
Widget-widget artikel terkait yang lama kurang bersahabat menurut Saya, sehingga Saya membuatnya lagi secara pribadi. Dan untuk menyingkat jumlah posting, maka model-model widget artikel terkait yang sudah populer kini telah Saya gabungkan menjadi satu kesatuan. Tujuan utamanya tetap. Mencoba untuk menampilkan posting-posting lama dengan jarak waktu penerbitan yang tidak terbatas namun dengan tenaga sesedikit mungkin:
Buka Generator Widget 1122                                                                          1122 Kode Sumber


Klik tombol Preview & Get Code! Di situ nanti Anda akan mendapatkan kode CSS dan XML template. Masuk ke halaman editor HTML template kemudian letakkan kode CSS yang dihasilkan di atas kode ]]></b:skin>. Kode XML bisa Anda letakkan di mana saja di dalam elemen <b:includable id='post' var='post'/>, tapi Saya sarankan untuk meletakkan kode tersebut di atas kode ini karena posisinya yang mudah ditemukan dan lebih minim resiko:
<div class='post-footer'>

Tabel Pengaturan

Pengaturannya tidak banyak, dan karena Saya sudah membuat generatornya, jadi Anda sebenarnya tidak perlu lagi menyentuh variabel-variabel di dalam widget ini secara langsung. Tabel ini Saya buat untuk kepentingan dokumentasi saja:
OpsiKeterangan
widgetStyleKode model widget artikel terkait berupa angka. Mengubah nilai variabel ini akan mengubah markup HTML widget, sehingga kode CSS harus disesuaikan ulang. Lebih baik gunakan generator.
homePageDigunakan untuk menentukan URL blog Anda. Nilai sudah diotomatisasikan melalui elemen <data:blog.homepageUrl/>
widgetTitleMarkup HTML untuk judul/kepala widget. Bisa digunakan untuk menyisipkan kode HTML lain juga jika mau. Kode tersebut nantinya akan tampil di atas daftar item posting di dalam widget.
numPostsDigunakan untuk menentukan jumlah posting yang ingin ditampilkan.
summaryLengthDigunakan untuk menentukan panjang karakter ringkasan posting.
titleLengthDigunakan untuk memotong jumlah karakter judul posting sesuai dengan besar angka yang dituliskan. Ubah menjadi "auto" untuk menonaktifkan pemotongan karakter pada judul posting.
thumbnailSizeDigunakan untuk menentukan lebar/tinggi thumbnail posting yang berbentuk kotak.
noImageIsi dengan URL gambar cadangan untuk posting yang tidak memiliki gambar.
containerIdID elemen HTML untuk menampung daftar posting yang berhasil terpanggil.
newTabLinkUbah nilainya menjadi true untuk membuat tautan-tautan di dalam widget ini membuka di tab/jendela baru secara otomatis ketika diklik.
moreTextTeks “Baca Selengkapnya”.
callBackFungsi tambahan yang akan bekerja setelah daftar posting termuat ke dalam kontainer widget. Lihat penjelasannya di bawah.

Menerapkan Fungsi callBack Widget

Opsi ini berfungsi untuk menciptakan perilaku tambahan pada widget. Fungsi ini akan bekerja setelah widget berhasil dimuat. Cocok digunakan untuk menambahkan efek-efek khusus. Dasar penerapannya adalah seperti ini. Kode di bawah ini akan menampilkan pesan peringatan bahwa widget telah berhasil termuat jika widget berhasil termuat:
var relatedPostConfig = {
callBack: function() {
alert('Widget successfully loaded.');
}
};

Contoh 1: Membuat Efek Transisi Hover pada Tooltip

Set tampilan widget menjadi artikel terkait dengan tooltip, kemudian buat fungsi JQuery seperti ini:
var relatedPostConfig = {
...
widgetStyle: 4,
containerId: "random-post",
callBack: function() {
$('#' + this.containerId + ' li').hover(function() {
$('.related-post-item-tooltip', this).filter(':not(:animated)').animate({
marginBottom: -5,
opacity: "show"
}, 400);
}, function() {
$('.related-post-item-tooltip', this).animate({
marginBottom: 10,
opacity: "hide"
}, 200);
}).find('.related-post-item-tooltip').css('margin-bottom', 10);
}
};
Hapus efek :focus dan :hover pada CSS:
.related-post-style-4 .related-post-item:focus .related-post-item-tooltip,
.related-post-style-4 .related-post-item:hover .related-post-item-tooltip {display:block}

Contoh 2: Membuat Efek Sliding pada Tabir Judul

Set tampilan widget menjadi artikel terkait dengan tabir tooltip:
var relatedPostConfig = {
...
widgetStyle: 5,
titleLength: 50,
thumbnailSize: 130,
containerId: "random-post",
callBack: function() {
$('#' + this.containerId + ' li').hover(function() {
$('.related-post-item-tooltip', this).filter(':not(:animated)').animate({
marginTop: "50%"
}, 400);
}, function() {
$('.related-post-item-tooltip', this).animate({
marginTop: "100%"
}, 200);
}).find('.related-post-item-tooltip').css('margin-top', '100%');
}
};
Hapus deklarasi display:none pada selektor tooltip widget, hapus juga efek :focus dan :hover pada CSS:
.related-post-style-5 .related-post-item-tooltip {
display:block;
background-color:black;
background-color:rgba(0,0,0,.9);
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
padding:10px;
line-height:normal;
font-style:italic;
color:white;
overflow:hidden;
display:none;
}
.related-post-style-5 .related-post-item:focus .related-post-item-tooltip,
.related-post-style-5 .related-post-item:hover .related-post-item-tooltip {display:block}

Contoh 3: Membuat Efek News Ticker

Set tampilan widget menjadi artikel terkait tipe thumbnail dan summary:
var relatedPostConfig = {
...
numPosts: 10,
widgetStyle: 2,
containerId: "random-post",
callBack: function() {
var $container = $('#' + this.containerId + ' > ul'),
$list = $container.find('li'),
innerHeight = $list.first().height(),
outerHeight = $list.first().outerHeight(true);
// Container & list height setup
$container.css({
"height": outerHeight * $list.length / 2,
"overflow": "hidden"
});
$list.css({
"height": innerHeight,
"overflow": "hidden"
});
// Animation
function newsTicker() {
window.setTimeout(function() {
$container.find('li:last').stop().animate({
opacity: 0
}, 1000, function() {
$(this).hide().prependTo($container).slideDown(1000, function() {
$(this).stop().animate({
opacity: 1
}, 1000, newsTicker);
});
});
}, 3000);
} newsTicker();
}
};
Dan seterusnya. Buat efek-efek baru yang lain sesuka hati melalui opsi callBack.
Catatan: Saat menerapkan beberapa fungsi di atas, mungkin template Anda nanti menjadi tidak bisa disimpan. Cobalah untuk mengelilingi fungsi callBack dengan komentar CDATA seperti ini:
var relatedPostConfig = {
callBack: function() {
//<![CDATA[

Tuliskan fungsi di sini...

//]]>
}
};
Atau baca posting ini sebagai referensi tambahan.

Membuat Daftar Isi Galery Pada Blog




Pada kesempatan ini saya akan share sedikit mengenai cara membuat daftar isi galery keren di blog pada dasarnya kode yang digunakan cukup simple dan ringan jika agan berminat lansung saja ikuti langkah langkahnya dibawah ini...
Masuk blog agan
pilih menu Laman/Laman Kosong
Lalu pada Kolom postingan Pilih Mode Html







Jika Sudah Letakan kode dibawah ini pada laman yang telah tersedia
 
 
<link rel="stylesheet" type="text/css" href="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/theme/light.min.css"/>
<div id="dte-masonry-container"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/js/jquery.masonry.min.js" type="text/javascript"></script>
<script src="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/js/post.brick.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$('#dte-masonry-container').bloggerMasonry({

// JSON Configuration
viewMode: "summary", // Widget mode? "summary" || "thumbnail"
homePage: "http://nama_blog.blogspot.com", // Your blog homepage
numPosts: 10, // Number of posts to display per request
numChars: 270, // Length of summary post
squareImage: false, // Set thumbnail mode to square
newTabLink: false, // Auto open links in new window/tab?
columnWidth: 200, // Width of the image (also will resize the brick item width)
subHeaderText: ["Diposting oleh ", "<br>pada "], // `Diposkan oleh FOO pada BAR`
monthNames: [ // Month array
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
commentLabel: "&nbsp;", // Label text after total comments
navText: {
prev: "Sebelumnya", // Previous navigation label
next: "Berikutnya", // Next navigation label
disabled: "&times;", // Disabled navigation label
data: ["Halaman ", " dari "] // `Halaman # dari #`
},
postCategory: null, // Change to a label name to sort posts by specific label
fallbackThumb: "http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/img/meee.png", // Fallback thumbnail for posts without images
loadingText: "Loading...", // `Loading...` text for loading indicator
loadedText: "Loaded.", // `Loaded.` text for loading indicator
infiniteScroll: false, // Enable infinite scroll?
bottomTolerance: 30, // Bottom tolerance for the end of page indicator in infinite scroll

// Shortcuts for Masonry Plugin Configuration (And Some Local Configuration)
masonryConfig: {
itemSelector: '.json_post',
fadeSpeed: 400, // Speed of thumbnail fading effect
resizeSpeed: 1000, // Speed of thumbnail resizing effect
isAnimated: false,
animateWithTransition: true, // Animate each brick with CSS transition instead of JQuery `.animate()`?
animationOptions: {
queue: false,
duration: 1000,
easing: null
},
isFitWidth: true,
gutterWidth: 0,
isRTL: false
}

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


Catatan : silahkan anda ganti  kode berwarna kuning dengan Url blog anda
Selesai Terakhir silahkan di Publikasikan gan....
Selamat mencoba semoga bermanfaat.....

Membuat Menu Cantik dan Elegan Dengan jQuery dan CSS




Pada postingan ini kita akan belajar tentang tata cara menambah daya pikat blog kita dengan menu cantik yang elegan di blog menu ini berbentuk icon icon yang sangat indah dari hasil penambahan css
dan jQuery baiklah sobat lansung saja ke pembahasannya..

Masuk blog anda
pilih menu template
cari kode ]]></b:skin> gunakan ctrl + f untuk mempermudah anda
jika sudah ketemu letakan kode dibawah ini diatas tag ]]></b:skin>

/*----------------------------------------------------
{--------}  Menu {--------}
----------------------------------------------------*/
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;   
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.8;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
ul#navigation .home a{
    background-image: url(http://img163.imageshack.us/img163/1473/homehc.png);
}
ul#navigation .about a      {
    background-image: url(http://img156.imageshack.us/img156/4176/idcardqx.png);
}
ul#navigation .search a      {
    background-image: url(http://img21.imageshack.us/img21/7365/searchl.png);
}
ul#navigation .podcasts a      {
    background-image: url(http://img834.imageshack.us/img834/8079/camerae.png);
}
ul#navigation .rssfeed a   {
    background-image: url(http://img263.imageshack.us/img263/5871/rssd.png);
}
ul#navigation .photos a     {
    background-image: url(http://img508.imageshack.us/img508/2226/ipodl.png);
}
ul#navigation .contact a    {
    background-image: url(http://img808.imageshack.us/img808/5498/mailos.png);
}



kemudian cari kode </head> tetap gunakan ctrl + f
jika sudah ketemu letakan kode dibawah ini diatas tag </head>


<script type="text/javascript">
            $(function() {
                $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
                    }
                );
            });
        </script> 


Dan yang terakhir cari kode </body> biasanya kode ini berada pada deretan bawah
 atau gunakan ctrl + f  agar lebih mudah
jika sudah ketemu letakan kode dibawah ini diatas tag </body>

<ul id="navigation">

            <li class="home"><a href="Kode anda disini" title="Home"></a></li>

            <li class="about"><a href="Kode anda disini" title="About"></a></li>

            <li class="search"><a href="Kode anda disini" title="Search"></a></li>

            <li class="photos"><a href="Kode anda disini" title="Photos"></a></li>

            <li class="rssfeed"><a href="Kode anda disini" title="Rss Feed"></a></li>

            <li class="podcasts"><a href="Kode anda disini" title="Podcasts"></a></li>

            <li class="contact"><a href="Kode anda disini" title="Contact"></a></li>

        </ul> 


 Catatan : silahkan sesuaikan kode berwarna merah dengan kode anda masing masing

Saya kira penjelasannya sudah cukup jelas selamat mencoba semoga bermanfaat..