Cara Membuat Tombol Back To Top Keren Di Blog

 

Cara Membuat Tombol Back To Top Keren Di Blog

• Pertama masuk ke Blogger lalu pilih Layout terus Add a Gadget dan tambahin HTML/JavaScript gan. Terus tinggal loe pastein kode di bawah ini di kotak kosongnya.

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

<script type="text/javascript" >


var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="URL Gambar Back To Top" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

    state: {isvisible:false, shouldvisible:false},

    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },

    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },

    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },
 
    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Scroll Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}

scrolltotop.init()

</script>

• Kalo udah di pastein sekarang tinggal di ganti URL Gambar Back To Top sama url gambar punya loe gan lalu di Save. Coba sekarang buka blog loe pasti udah ada tombol back to topnya gan.

Cara Meletakan Prase Generator Di Blog

Baiklah kita langsung aja…simak petunjuk2 dibawah ini…!

1.silahkan sobat mengunjungi situs  www.gmodules.com

2.setelah itu sobat akan dibawa ke halaman seperti di bawah ini…!

3.silahkan sobat atur sendiri  ukurannya sesuai selera

4.jika sudah selesai mengedit silahkan klik Lihat dulu Perubahan , yaitu untuk melihat hasil tool yg sobat sudah edit tadi…!

5.setelah itu silahkan klik tulisan Dapatkan Kode untuk mengambil kodenya , setelah itu copy kode tersebut…!

6.Silahkan sobat pastekan kode tadi ke widget atau postingan sobat…! Tapi saya lebih menganjurkan agar sobat mempastekan tool Parse HTML-nya ke Postingan Halaman Baru agar kesannya lebih statis dan tidak menimbulkan loading lambat pada blog

Cara Membuat Buku Tamu Auto Hide di Blog

Cara Membuat Buku Tamu / Guestbook Auto Hide di Blog - Apa kabar sobat blogger???  Oke kalo uda pada penasaran langsunga aja kita bahas artikel ini....

Auto hide Shuotbox adalah efek yang akan membuat buku tamu muncul tanpa di klik dan tersembunyi tanpa di klik pula ( di lewati pointer mouse ), hanya beda sedikit dengan buku tamu show / hide. Sobat yang tertarik memasang widget ini, silahkan masukkan kode berikut di HTML/Javascript blog sobat.

<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}

.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i1108.photobucket.com/albums/h405/christian410/ghtrf.png') no-repeat;
}

.gbcontent {
float:left;
border:1px solid #000000;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
background: #F2F2F2; url() no-repeat bottom;
padding:10px;
}

</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){

var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 5);}
}</script>

<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>

<div class="gbcontent">
<center>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="300" height="275" src="http://www4.cbox.ws/box/?boxid=4100717&amp;boxtag=ebc39c&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4100717" style="border:#FFFFFF 1px solid;" id="cboxmain4-4100717"></iframe></div>
<div><iframe frameborder="0" width="300" height="75" src="http://www4.cbox.ws/box/?boxid=4100717&amp;boxtag=ebc39c&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4100717" style="border:#FFFFFF 1px solid;border-top:0px" id="cboxform4-4100717"></iframe></div>
</div>
<!-- END CBOX -->
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-buku-tamu-auto-hide-di.html"> widget! </a></span>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

</div>
  

Caranya :

1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
2. Masukkan kodenya di kotak yang di sediakan.
3. Klik Save 

Tambahan :
Ganti kode yang berwara biru dengan kode buku tamu milik sobat. Sobat yang belum punya buku tamu silahkan buat terlebih dahulu di cbox ( seperti blog ini) , fibox, shoutchamp atau pada penyedia chatbox gratisan lainnya.

 posted by Eko Hardiansyah

Kumpulan Efek - Efek Blog ( Lengkap )

Kumpulan Efek - Efek Blog ( Lengkap ) - Memang selalu ada cara untuk mempercantik penampilan blog. Setelah sebelum memposting cara memasang animasi di blog, kali ini saya akan kasih sobat berbagai macam / jenis efek - efek blog yang bisa di pasang di blog.

Sebelum kita masuk ke intinya, terlebih dahulu saya ingatkan pada sobat  bahwa efek, animasi dan widget - widget serupa akan menambah beban loading blog sobat, jadi mohon di perhitungkan sebelum sobat memasang efek ini. Efek yang akan saya posting kali ini, akan saya bagi 2 yaitu efek ringan ( loading ringan ) dan efek menegah hingga berat. ( kayak tinju aja.. ) .

Sobat yang tertarik memasangnya silahkan ikuti tutorial memasang efek - efek pada blog berikut.

A. Efek Ringan
Mungkin Ini adalah efek yang biasa sobat lihat saat sobat blogwalking.

1. Efek salju berjatuhan

<script src='http://tateluproject.googlecode.com/files/snow.js' type='text/javascript'></script>

2. Efek hati bertaburan
<script src='http://tateluproject.googlecode.com/files/lovingheart.js' type='text/javascript'></script>

3. Efek bintang bertaburan
<script src='http://tateluproject.googlecode.com/files/bintang.js' type='text/javascript'></script>

4. Efek kembang api
<script src='http://tateluproject.googlecode.com/files/kembangapi.js' type='text/javascript'></script>

5. Efek Gelembung
<script src='http://tateluproject.googlecode.com/files/efek-gelembung.js' type='text/javascript'></script>

5. Efek Kupu - Kupu Terbang
<script language="JavaScript1.2" src="http://imtikhan.googlecode.com/files/Kupu-kupu1.js"></script>

Cara pemasangan :

    Klik rancangan --> Edit html
    Letakkan script efek di atas kode </body>
    Klik Save


B. Efek Menengah - Berat
Efek ini saya ambil dari http://www.netdisaster.com. Untuk demo dari salah satu script berikut, silahkan lihat di sini.. DEMO

1.Meteor Jatuh
<script language="javascript">
nd_mode="meteor";
nd_control="on";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

 2. Banjir
<script language="javascript">
nd_mode="flood";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

 3. Bunga Mekar
<script language="javascript">
nd_mode="flowers";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

4.  Bom Atom
<script language="javascript">
nd_mode="bomb";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

5. Ufo
<script language="javascript">
nd_mode="ufo";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

6. Graffity
<script language="javascript">
nd_mode="graff";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

7. Shaver
<script language="javascript">
nd_mode="shaver";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

8. Gun
<script language="javascript">
nd_mode="gun";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

9.Bloody gun
<script language="javascript">
nd_mode="blood";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

10. Paint ball
<script language="javascript">
nd_mode="paint";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

11. Chainsaw
<script language="javascript">
nd_mode="chainsaw";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

12. Dinosaur
<script language="javascript">
nd_mode="dino";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

13. Lebah
<script language="javascript">
nd_mode="wasp";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

14. Lalat
<script language="javascript">
nd_mode="fly";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

15. Semut
<script language="javascript">
nd_mode="ants";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

16. Siput
<script language="javascript">
nd_mode="snail";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

17. Cacing
<script language="javascript">
nd_mode="worms";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

18. Mold
<script language="javascript">
nd_mode="mold";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

19. Bayi merangkak
<script language="javascript">
nd_mode="baby";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

20. Telur mata sapi
<script language="javascript">
nd_mode="eggs";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

21. Kopi tumpah
<script language="javascript">
nd_mode="coffee";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

22. Terbakar
<script language="javascript">
nd_mode="burn";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

23. Tomat
<script language="javascript">
nd_mode="tomato";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

24. Creampie
<script language="javascript">
nd_mode="creampie";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

25. Murka
<script language="javascript">
nd_mode="god";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

26. Sapi Jorok
<script language="javascript">
nd_mode="cow";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

27. Anjing Jorok
<script language="javascript">
nd_mode="dog";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

28. Kencing Sembarangan
<script language="javascript">
nd_mode="pee";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://fauzischolovers.blogspot.com/2013/05/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

Cara pemasangan :

    Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
    Masukkan script efek di dalam kotak yang di sediakan
    Klik save dan lihat hasilnya.

Tambahan :
Efek yang ke 2 berbeda dengan efek yang pertama. di efek ke 2, efek bisa dimatikan secara manual, sedangkan yang pertama sebaliknya ( tidak bisa dimatikan selama masih memasang scriptnya ).  so, pilih mana yang terbaik menurut sobat.. salam..

Animasi page loader keren di blog

Posted by: Eko Hardiansyah

Baiklah jika sobat tertarik untuk memasangnya, maka silahkan ikuti langkah-langkah berikut.

1. Login blogger
2. Rancangan, Edit Html, Cari kode]]></b:skin>

Dan Simpan kode berikut diatasnya :

/* PageLoader V2*/
#pageLoadaka {
position: fixed;top:0;left:0;background-color:rgba(5,5,5,0.9);z-index: 9999;text-align:center;
width:100%;height:100%;padding-top:22%;font-size:25px;color:#fff;display:none;}
.loader {
background-color:rgba(0,0,0,0);
border:5px solid #fff;
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:60px;
box-shadow:0 0 35px #fff;-moz-box-shadow:0 0 35px #fff;-webkit-box-shadow:0 0 35px #fff;
width:100px;
height:100px;
margin:0 auto;
-moz-animation:berputar 1s infinite ease-in-out;
-webkit-animation:berputar 1s infinite linear;
}
.loader3 {
background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTnnvDLPoPKr53-xNUyUsxUqaTRQHLYhGu4PX1cOaGl0i6AcxyDEpwWf4NxTPf-9PU24IV2m5ojbcP3lrcF4gkFinj3nsoc79_iXLg7UWPRTSEYtDH54P7S3L_smB9lo5bDRW1E_s2ii4d/s1600/cyrle.png) no-repeat center;
background-repeat: no-repeat
border:1px solid #fff;
opacity:.9;
border-radius:45px;
box-shadow:0 0 35px #fff;-moz-box-shadow:0 0 35px #fff;-webkit-box-shadow:0 0 35px #fff;
width:70px;
height:70px;
margin:0 auto;
position:relative;
top:-181px;
}
.loader2 {
background-color: rgba(0,0,0,0);
border:5px solid #fff;
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:45px;
box-shadow:0 0 35px #fff;-moz-box-shadow:0 0 35px #fff;-webkit-box-shadow:0 0 35px #fff;
width:80px;
height:80px;
margin:0 auto;
position:relative;
top:-100px;
animation:berputarkecil 1s infinite linear;
-moz-animation:berputarkecil 1s infinite linear;
-webkit-animation:berputarkecil 1s infinite linear;
}
@-moz-keyframes berputar {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #fff;}
50% { -moz-transform:rotate(145deg); opacity:1; }
100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes berputarkecil {
0% { -moz-transform:rotate(360deg); }
100% { -moz-transform:rotate(0deg);  }
}
@-webkit-keyframes berputar {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #fff; }
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes berputarkecil{
0% { -webkit-transform:rotate(360deg); }
100% { -webkit-transform:rotate(0deg); }
}

4. Selanjutnya Masukkan kode javascript berikut diatas </body>.
<!-- Start pageloader -->
<div id='pageLoadaka'>
<div class='loader'/>
<div class='loader2'/>
<div class='loader3'/>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function() {
    var siteURL = "http://" + top.location.host.toString();
    var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']");
    $internalLinks.click(function() {
        $('#pageLoadaka').fadeIn(500).delay(2000).fadeOut(1200);
    });
    $('#pageLoadaka').click(function() {
        $(this).hide();
    });
});
//]]>
</script>
<!-- End pageloader -->
5. Simpan Template dan Selesai.

CARA MEMASANG RATING BINTANG PADA HASIL PENCARIAN GOOGLE

posted by: EKO HARDIANSYAH
1. Masuk ke dashboard > Template > Edit HTML > Proceed > Expand Template Widget
2. Cari kode  dengan menggunakan ctrl+f kemudian pastekan kode dibawah ini setelahnya

<div itemscope='' itemtype='http://data-vocabulary.org/Review'>
Description: <span itemprop="description"><data:post.title/></span><br/>
Rating: <span itemprop='rating'>4.5</span><br/>
Reviewer: <span itemprop='reviewer'><data:post.author/></span><br/>
ItemReviewed: <span itemprop='itemreviewed'><data:post.title/></span></div>

3. Setelah itu klik Save Template
4. Setelah itu cek halaman postingan dengan Richsnippets Google masukan url postingan yang akan dicek, jika rating bintang sudah muncul maka kamu telah berhasil menerapkan tutorial ini

cara membuat rating bintang

Demikian.... semoga bisa bermanfaat bagi kamu salam blogger dan semoga sukses.

50 Widgets untuk Pernak-Pernik Blog Anda

Nah sob... kali ini saya akan saya berikan link penyedia widget untuk blog sobat

Berikut ini 50 more great widgets untuk blog sobat :
1. MyBlogLog’s Recent Readers – Widget ini memperlihatkan avatar dari pengunjung blog Anda.Dengan kepopuleran widget ini manajemen MyBloglog mampu meyakinkan Yahoo untuk membeli sahamnya, anda harus mempunyai account yahoo untuk mendapatkan widget ini.
2. Mashable – Widget ini menyediakan semacam news reel (headline news) dalam element blogger yang memberikan cuplikan berita/postingan dari sosial networking. Ada pilihan warna yang bisa disesuaikan dengan layout blog Anda.
3. Flickr Flash Photo Stream Badge –Menampilkan photo-photo dari profil flickr dengan sentuhan flash. Untuk mendapatkan widget ini Anda memerlukan account yahoo.
4. Preview Anywhere – bagi pengguna blogger disebut snapshots untuk wordpress widget ini tersedia di pengaturan. Fungsinya untuk melihat preview link keluar dengan tampilan small popup ketika pengunjung mengarahkan mouse pada teks atau banner yang “mengandung” link.
5. Twitter Badge – Jika kehidupan Anda banyak hal-hal menarik serta ingin agar orang lain tahu kegiatan apa yang sedang anda lakukan setiap saat, anda bisa menampilkan cuplikan kalimat-kalimat pendek ‘satu paragraf misalnya’ Maka widget ini cocok untuk dipasang pada blog Anda.Widget ini akan menampilkan “tweet” terbaru Anda.
6. Digg News – Manampilkan Link terakhir yang masuk ke Digg (sebuah sosial bookmarking) dengan pilihan theme dan mudah untuk diatur sesuai dengan template blog Anda.
7. FEEDJIT – Menampilan real time data pengunjung blog secara langsung, yang bisa dipasang di sidebar blog anda.
8. LineBuzz – inline komentar untuk Blog Anda. Sangat support untuk blog dengan frekuensi tinggi diatas 900 mhz diskusi/komentar yang berkepanjangan.
9. Flixn – Jika laptop Anda terpasang webcam, maka widget ini bisa menampilkan/ memperlihatkan ekspresi Anda langsung melalui blog Anda .Jadi pengunjung blog tidak hanya membaca postingan Anda tapi bisa menyaksikan ‘konser’ Anda didepan monitor, mirip webcam yahoo.
10. 3Jam – Pengunjung blog dapat berinteraksi dengan Anda dengan mengirimkan SMS pada handphone Anda,tanpa mereka tahu nomor HP Anda.
11. Jaxtr – Seperti halnya widget 3jam di atas, dengan widget Jaxtr ini, pengunjung blog bisa menghubungi HP Anda tanpa mereka tahu nomor HP Anda, nomor HP Anda dijamin kerahasiaannya.
12. LinkedInABox – Menampilkan profile Anda di LinkedIn. Dan widget ini sangat cocok untuk personal blog.
13. Box Widget – Dengan widget ini, memudahkan pengunjung blog Anda untuk mengupload file ke tempat penyimpanan online box.net melalui widget box.net pada blog Anda.
14. Price of gas – Menampilkan harga bahan bakar kendaraan bermotor secara online (US$), “sangat cocok” dipasang untuk blog yang membahas masalah traffic/traveling (caranya tidak perlu mendaftar hanya mengcopas script yang disediakan Gas-Cost.Net)
15. iBegin Weather Widget – Menampilkan informasi laporan cuaca di sidebar blog anda. Seperti widget Price of Gas, widget ini hanya cocok untuk blog yang memang membahas masalah yang sama.
16. ClockLink – Menampilkan jam dalam berbagai macam daerah waktu dengan sentuhan flash yang bagus.
17. Film Loops – Menampilkan kesimpulan film terakhir yang Anda tonton melalui account FilmLoops Anda.
18. Daily Painters – menampilkan lukisan-lukisan dari pelukis terkenal di dunia di blog anda.
19. WhoLinked – Memperlihatkan kepada pengunjung blog Anda situs-situs yang telah melink pada blog Anda,tidak perlu mengupdate karena WhoLinked ini otomatis mengupdate sendiri web/blog yang melink blog Anda.
20. Criteo AutoRoll – memperlihatkan link menuju blog-blog yang serupa dengan blog Anda.
21. Bitty Browser – Menampilkan mini web browser pada sidebar blog Anda.
22. Leafletter – Widget ini membuat mini website dan menyimpannya pada blog Anda.
23. WikiSeek – Menampilkan widget untuk pencarian pada Wikipedia.
24. FeedCount – Menampilkan jumlah pengunjung blog Anda melalui banner kecil dan widget ini berhubungan dengan account feedburner Anda.
25. Technorati Link Count – Menampilkan reaksi jumlah link yang menuju blog Anda dari salah satu directory blog terbesar dan terpopuler.
26. MyPageRank – Inilah cara lain untuk menunjukkan betapa hebat dan bermanfaatnya blog Anda dengan menampilkan Ranking Google atau Google PageRank (PR). Penilaian PR google dihitung berdasarkan rangking 1 sampai 10, semakin besar berarti blog anda semakin populer.
27. CheckPageRank – Pilihan lain untuk menampilkan PR blog Anda, namun kelebihannya widget ini menampilkan juga ranking Alexa anda.
28. BlinkxIt – Menampilkan banner kecil dibawah setiap postingan blog Anda, ketika banner BlikxIt itu di klik maka keluar mini popup seperti snapshot dan menampilkan video yang berhubungan dengan postingan blog Anda.
29. Skype button – Seperti widget yang menampilkan status online YM pada blog Anda, widget ini hampir sama cuma bedanya status online/offline pada account skype Anda yang ditampilkan.
30. RockYou Horoscope – Widget ini menampilkan primbon/ramalan dan dirancang bagus didalam kotak penuh warna, Tidak menganjurkan/sebaiknya widget ini tidak dipasang pada blogger muslim.
31. del.icio.us Tagometer – Widget ini menampilkan berapa banyak pengguna del.icio.us membookmark blog Anda.
32. del.icio.us Linkrolls – Widget ini menampilkan bookmarks terakhir Anda dari del.icio.us.
33. Timelines – Perlu membuat timeline untuk blog Anda? Maka widget ini cukup mudah digunakan, hanya perlu memasukan RSS blog Anda lalu memasukkan ukuran lebar dan tingginya.
34. PollDaddy – PollDaddy memberikan Anda kemudahan membuat sebuah poling atau survey interaktif dengan theme yang sangat cantik dan menampilkannya dib log anda.
35. Vizu – Pilihan widget lain untuk membuat poling pada blog Anda, kelebihannya widget ini cocok dengan platform blog manapun.
36. AnswerTips – Menampilkan jawaban dari Answers.com untuk berbagai macam istilah yang terdapat pada blog Anda.
37. AnswerBoxes – Masih widget dari Answer.Com hanya saja widget ini memberikan kesempatan pada pengunjung blog Anda untuk memasukan istilah yang tidak dimengerti dan memperoleh jawaban dari Answer.Com.
38. Now Playing – Jika Anda ingin sharing playlist musik yang sedang Anda dengarkan dan ingin agar pengunjung blog Anda juga mendengarkan,Signamp yang akan melakukan triknya bagaimana hal itu bisa terjadi.
39. BuzzBoost – Menampilkan headline dari RSS FeedBurner blog Anda, atau blog lainnya.
40. LibraryThing – memperlihatkan buku terakhir yang telah Anda baca.
41. Plaxo Address Book – Izinkan pengunjung setia Anda untuk mengakses buku tamu mereka langsung dari blog Anda.
42. AuctionAds – Widget yang menampilkan pelelangan barang dari eBay, dan memberi anda persentase dari harga yang dibayar jika suatu saat ada yang membeli barang.
43. aStore – Serupa dengan AuctionAds di atas, hanya saja widget ini datangnya dari Amazon. Buat ’toko online sederhana’ di blog anda, anda akan mendapatkan bonus jika sesorang membeli barang melalui toko online anda.
44. Plazes – Widget ini menampilkan peta dimana posisi Anda berada sekarang.
45. Stockalicious – Perlihatkan portfolio Anda dengan widget ini, dan sharing dengan blogger lain. Biar semua orang tahu berapa banyak dana yang telah Anda keluarkan untuk ngeblog.
46. Yahoo! For Good – Widget ini untuk membuat ‘kotak amal’ dan akan didonasikan kepada yang berhak menerimanya.
47. Giftspace –Teman anda tidak pernah tahu apa yang akan dibelinya untuk hadiah ulang tahunmu? Nah melalui widget ini biarkan mereka tahu kado apa yang sebenarnya Anda inginkan.
48. MixMap – Melihat dimana pengunjung profile MySpace Anda dari sebuah Peta.
49. Google Map Widget – Menampilkan pencarian pada peta google dari blog Anda.
50. Google Video Search – Menampilkan form pencarian video dari video pilihan pada blog Anda.
51. Shoutbox – Fungsi shoutbox adalah untuk menampung pesan singkat teman atau para blogger yang tengah blogwalking.
52. This Day in History – Widget ini menampilkan cuplikan bahwa hari ini ada sejarah apa pada masa lalu.
53. Headline News – Seperti widget mashable, widget ini pun menampilkan cuplikan headline berita dari situs-situs di seluruh penjuru dunia.
54. Calendar – meskipun di platform wordpress widget calender sudah tersedia, namun widget ini masih bisa dipasang baik di wordpress maupun blogger.
55. Counter Statistic – Bagi Anda yang ingin melihat jumlah pengunjung Anda sehari-hari, maka widget ini adalah salah satu yang menyediakan fasilitas tersebut.
56. Histats.Com web counter – Widget ini memungkinkan Anda bisa melacak pengunjung datang dari mana saja, dan menghitung berapa jumlah pengunjung blog Anda sehari-hari, melihat IP Address pengunjung blog Anda dan lain-lain.
57. Bravenet Horoscope – Seperti halnya widget RockYou Horoscope, bravenetpun menyediakan widget horoscope untuk blog Anda.
58. Deal of The Day – Masih dari Amazon.com, merupakan widget paling baru yang direlease amazon.com. Yang menarik dari widget ini adalah diskon besar-besaran yang ditawarkan untuk pengunjung blog sobat.
Sebenarnya masih banyak lagi widget-widget untuk mempercantik blog anda yang betebaran di internet yang sesuai dengan template blog sobat dan yang sobat sukai, namun setidaknya artikel “50 more great widgets for your blog” ini membantu sobat menemukan widget-widget yang sobat inginkan.
Selamat mencoba, semoga bermanfaat bagi Blog sobat…

posted by: EKO HARDIANSYAH