MEMBUAT TOMBOL BACK TO TOP

Back To Top atau dalam bahasa Indonesianya adalah kembali keatas adalah gadget berbentuk tombol yang jika diklik akan membawa anda ke tampilan paling atas di blog anda. berikut ini langkah membuatnya:

1. Login ke Blogger.
2. Masuk kehalaman Tata Letak.
3. Klik Tambahkan Gadget di area Sidebar blog atau di area Footer nya.
4. Cari Gadget HTML/JavaScript dan klik.
5. Kosongkan judul dan masukkan kode Script dibawah ini.
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCmGSRLPi0VLX-PV2UkKtOkWYRnbQjonFlLm7V7ey_LERocG51bhjs4Bl5fOp_HCWjETLWE5fsubcZcXznqXBUaNvjMmmH2N5LSqodoG4JqIAFAvPHuz-3wPJJ-XWbvm2l2_alLnY3jcE/s400/Back-to-top.png" />', //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>


6. Klik tombol Simpan dan lihat blog anda.

 

Hasil Jadi Back To Top

EFEK WARNA BERKEDIP PADA LINK

Warna Berkedip Pada Link

Mengganti atau memberi warna pada teks yang berisi link adalah hal yang biasa. Bagaimana jika warna link berubah-ubah layaknya lampu LED yang berkedap-kedip? Anda bisa menampilkan efek tersebut pada halaman blogger hanya dengan menambah beberapa baris kode javascript.

Baik langsung kita mulai saja membuat Efek Warna Berkedip Pada Link dengan mengikuti langkah dibawah ini.

1. Login ke Dashboard blogger.
2. Berikurnya buka halaman Template >> Edit HTML.
3. Cari baris kode: </head>.
4. Copy semua kode script dibawah ini dan Paste diatas baris kode: </head>.
<script type='text/javascript'> //<![CDATA[ var blink_ = 20; if (document.getElementById) window.onerror=new Function("return true") var objek; var nilai_1 = 0; var Nilai_2 = 0; var Nilai_3 = 128; var Nilai_4 = 255; var bersih; var waktu; if (document.all) { document.onmouseover = acak_warnaAnchor; document.onmouseout = stop_acakAnchor; } else if (document.getElementById) { document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT); document.onmouseover = Mozilla_acak_warnaAnchor; document.onmouseout = Mozilla_stop_acakAnchor; } function acak_warna(obj) { if (nilai_1 == 0) { nilai_1 = 1; if (obj) objek = obj; else objek = event.srcElement; bersih = objek.style.color; waktu = setInterval("ganti_warna()",100); } } function stop_acak() { if (nilai_1) { objek.style.color = bersih; clearInterval(waktu); nilai_1 = 0; } } function acak_warnaAnchor() { if (nilai_1 == 0) { var obj = event.srcElement; while (obj.tagName != 'A' && obj.tagName != 'BODY') { obj = obj.parentElement; if (obj.tagName == 'A' || obj.tagName == 'BODY') break; } if (obj.tagName == 'A' && obj.href != '') { objek = obj; nilai_1 = 1; bersih = objek.style.color; waktu = setInterval("ganti_warna()",100); } } } function stop_acakAnchor() { if (nilai_1) { if (objek.tagName == 'A') { objek.style.color = bersih; clearInterval(waktu); nilai_1 = 0; } } } function Mozilla_acak_warnaAnchor(e) { if (nilai_1 == 0) { obj = e.target; while (obj.nodeName != 'A' && obj.nodeName != 'BODY') { obj = obj.parentNode; if (obj.nodeName == 'A' || obj.nodeName == 'BODY') break; } if (obj.nodeName == 'A' && obj.href != '') { objek = obj; nilai_1 = 1; bersih = obj.style.color; waktu = setInterval("ganti_warna()",100); } } } function Mozilla_stop_acakAnchor(e) { if (nilai_1) { if (objek.nodeName == 'A') { objek.style.color = bersih; clearInterval(waktu); nilai_1 = 0; } } } function ganti_warna() { objek.style.color = buat_warna(); } function buat_warna() { if (Nilai_3 == 0) { elmR = Nilai_4; elmG = Nilai_4; elmB = Nilai_4; } else { t1 = Nilai_4; t2 = (255 - Nilai_3) * Nilai_4 / 255; t3 = Nilai_2 % 60; t3 = (t1 - t2) * t3 / 60; if (Nilai_2 < 60) { elmR = t1; elmB = t2; elmG = t2 + t3; } else if (Nilai_2 < 120) { elmG = t1; elmB = t2; elmR = t1 - t3; } else if (Nilai_2 < 180) { elmG = t1; elmR = t2; elmB = t2 + t3; } else if (Nilai_2 < 240) { elmB = t1; elmR = t2; elmG = t1 - t3; } else if (Nilai_2 < 300) { elmB = t1; elmG = t2; elmR = t2 + t3; } else if (Nilai_2 < 360) { elmR = t1; elmG = t2; elmB = t1 - t3; } else { elmR = 0; elmG = 0; elmB = 0; } } elmR = Math.floor(elmR).toString(16); elmG = Math.floor(elmG).toString(16); elmB = Math.floor(elmB).toString(16); if (elmR.length == 1) elmR = "0" + elmR; if (elmG.length == 1) elmG = "0" + elmG; if (elmB.length == 1) elmB = "0" + elmB; Nilai_2 = Nilai_2 + blink_; if (Nilai_2 >= 360) Nilai_2 = 0; return '#' + elmR + elmG + elmB; } //]]> </script>
5. Simpan Perubahannya
6. Buka ulang halaman blog anda dan letakkan kursor mouse pada semua link yang ada dihalaman blognya. Teks yang memiliki link akan berkedap-kedip dengan berganti warna secara acak.

TITLE DENGAN TEKS BERJALAN

Title blog adalah tampilan teks dari judul blog pada title bar browser. Anda bisa membuat title blog tersebut bergerak, dengan menyisipkan beberapa baris kode javascript di pengaturan blog.

Title Bar

1. Login ke blogger anda dan buka menu Template >> Edit HTML.
2. Salin kode yang ada di bawah ini dan letakkan setelah baris tag html : </head>.
<script type='text/javascript'> //<![CDATA[ teks = "MASUKKAN TITLE TEKS DI SINI";posisi = 0; function animasi_teks() { document.title = teks.substring(posisi, teks.length) + teks.substring(0, posisi); posisi++; if (posisi > teks.length) posisi = 0 window.setTimeout("animasi_teks()",200); } animasi_teks(); //]]> </script>

Catatan:
• Baris teks = "MASUKKAN TITLE TEKS DI SINI" adalah kalimat yang akan ditampilkan pada title bar dengan animasi, anda bisa meengubahnya sesuai keinginan, misal: teks = "Internet Blog Eltibiz".
• Baris window.setTimeout("animasi_teks()",200);, nilai 200 adalah menentukan jedah animasi ketika huruf bergerak dari kanan ke kiri, semakin besar nilainya akan semakin lama jedahnya atau semakin lambat.
3. Simpan perubahan kode template dan hasil penambahan kode akan terlihat seperti gambar di bawah ini.

   

   Posisi Kode

4. Kembali ketampilan blog anda dan teks pada title bar akan bergerak dari kanan ke kiri.

NAVBAR AUTOHIDE

NavBar atau Navigator Bar berada bagian paling atas halaman blog. Anda bisa menyembunyikan dan menampilkan secara otomatis dengan melakukan sedikit perubahan pada baris kode template.

NavBar

1. Login ke blogger anda dan buka menu Template >> Edit HTML.
2. Copy kode di bawah ini dan letakkan sebelum baris perintah: ]]></b:skin> pada halaman kode di template.
   #navbar-iframe { opacity:0.0; filter:alpha(Opacity=0) } #navbar-iframe:hover { opacity:1.0; filter:alpha(Opacity=100,FinishedOpacity=100) }

   

   Posisi Kode

3. Setelah selesai, simpan hasil perubahan kode pada template blog anda.
4. Terakhir lihat tampilan blog anda. Setelah menambahkan baris kode tersebut, navbar pada blog tidak akan tampil. Letakkan kursor mouse pada bagian atas halaman dan otomatis navbar akan tampil kembali.

NavBar Hilang

NavBar Muncul

SAVOIR ADORE - DREAMERS (Lirik)

 

Won't you come here?
You know the way, it's the one you made.
Built it in the sky,
all that's in your eye now, not the same.
Watch it tumble down, falling all around.
Can you stand watching it undo
all that's made of you?
You can stay where you are.
I will wake you.
I will wake you in the morning.
You can stay where you are, so don't you worry.
Don't you worry, keep on sleeping.