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.

MENGENAL TATA LETAK TEMPLATE

Kalau materi sebelumnya Mengganti Tampilan Template, materi Selanjutnya anda akan mengatur Tata Letak dari template yang sudah anda gunakan. Setiap template memiliki tata letak yang berbeda, semua bagian bersifat dinamis dan dapat anda atur dari halaman Tata Letak. Anda dapat menambahkan komponen baru dalam template, atau memindahkan letak dari satu komponen, atau bahkan menghapus yang tidak dipakai. Adapun tata letak yang ada pada template blogger terbagi menjadi Tiga bagian:

• Header Blog 

Header blog dalam istilah blogger adalah sebagai kepala blogger, header dalam blogger biasanya dinamakan sebagai #header-wrapper. Pada bagian header ini berisikan tentan judul blog yang akan kita isi sesuai dengan tema atau isi blog kita biasanya blogger - blogger yang kreatif pada bagian header ini bisa di isikan dengan gambar - gambar yang menarik atau dengan kata - kata yang dapat menraik pengunjung untuk terus berkunjung ke blog kita.

• Content Blog

Bagian ini biasanya menggunakan istilah #content-wrapper atau #outer-wrapper. Pada bagian content blogger berisi dua bagian lagi yaitu :

1. Post blog, bagian ini adalah tempat dimana bagian postingan yang telah kita post kan dan berisikan berbagai postingan terbaru blog kita. Tempat untuk mengatur lebar halaman psotingan kita namun untuk dapat mengeditnya kita harus masuk ke editing template dan merubah kode - kode html nya istilah ini biasanya dikenal sebagai #main-wrapper. Pada bagian ini juga sangatlah sensitif untuk bisa terindex oleh google kalau bisa kita membuat postingan suatu blog dengan judul yang pas dan mudah untuk terindex oleh Google.
2. Sidebar blog, bagian ini beisikan profil blog kita atau tempat - tempat dimana kita bisa menambahkan beberapa widget yang akan kita pasang di blog kita, biasanya sidebar berada di sisi kanan atau di sisi kiri dan ada juga yang ke dua - dua nya ada. Dalam istilah blogger sidebar dikenal sebagai #sidebar-wrapper. Bagian sidebar ini dapat membuat blog kita menjadi indah caranya dengan memasang widget - widget yang menarik atau hanya memasang berbagai animasi dan mungkin memasang widget yang berbentuk java-script. Biasanya blog sudah menyediakan beberapa widget yang bisa kita pasang di bagian sidebar ini contohnya : Kalender, Populer Post, Profil dan masih banyak yang lainnya.

• Footer Blog 

Bagian ini adalah bagian kaki blog biasanya bagia ini menjelaskan bagian dari penjelasan dan hak cipta atau nama pembuat blog karna posisinya berada di bawah, footer blog jarang untuk dimodifikasikan sehingga jarang menjadi perhatian pembaca. Tapi apa salahnya apabila kita menjadikan halaman ini sebagai halaman untuk berbagai fungsi. Apabila kita download template dan dibawah footer blog adalah nama orang yang membuat templater tersebut, maka kita bisa mengganti nama tersebut dengan nama kita atau di bagian ini kita bisa mengisikan beberapa link.

Tata Letak

MENGGANTI TAMPILAN TEMPLATE DAN TUGAS

Baik materi Internet Blog kita hari ini adalah bagaimana mengganti tampilan Template, Sebelumnya saya minta maaf karena tidak bisa menyampaikan langsung materi ini karena masih ada kegiatan ELTIBIZ yang tidak bisa saya tinggalkan. Apabila dalam materi ini atau materi sebelumnya masih ada yang belum dipahami, INSHAA ALLAH nanti akan kita bahas satu-persatu dipertemuan berikutnya. Atas pengertiannya saya ucapkan Terima Kasih.

Tampilan Template Sebelum diganti

Oke, kita kembali ke materinya, "MENGGANTI TAMPILAN TEMPLATE". Sebelumnya apa itu template yang ada di blogger, berikut sedikit penjelasannya. Template bisa anda sebut dengan Tema blog atau tampilan blog, yang mana Template adalah komponen blog yang mengatur tata letak tampilan.Anda dapat mengganti template jika tampilan template kurang sesuai dengan keinginan. Blogger suda menyediakan pilihan template, dan anda tinggal menggantinya, berikut langkahnya:

• Jika anda sudah dihalaman Entri kli menu Template

Pilih Menu Template

• Pilih model tampilan yang adan inginkan, klik tampilan template yang akan dipilih

Pilih Tampilan Template Baru

• Setelah memilih template akan muncul jendela pratinjau template baru yang akan anda gunakan, kalau sudah cocok klik tombol Terapkan ke blog.

Pratinjau Template

• Untuk melihat hasil tampilan template yang sudah diganti klik Lihat Blog.

Tampilan Template yang sudah diganti

Selamat Mencoba....

TUGAS INTERNET BLOG Silahkan download

EDIT ARTIKEL YANG SUDAH DI POSTING

Biasanya bagi blogger yang baru pertama kali mem-posting artikel terkadang masih ada kelasahan dalam artikel yang sudah di posting jangankan bagi pemula, bagi blogger yang sudah sering posting artikel saja masih ada saja yang salah, bisa karena terburu-buru menulis artikel dan banyak kata yang tertinggal, gaya bahasa atau peletakan gambar yang kurang tepat. Tapi jangan khawatir karena artikel yang sudah anda posting masih bisa diperbaiki atau di edit kembali. Berikut caranya:

• Klik buka entri pada halaman Dasboard blogger anda

Buka Entri

•  Pilih artikel mana yang ingn di edit. Arahkan mouse ke artikel yang akan di edit maka akan muncul tombol Edit yang bisa di klik untuk selanjutnya masuk kehalaman edit artikel.

Klik Edit

• Berikut lampilan halaman edit artikelnya, anda bisa melakukan edit sekarang, dari mengganti font, menambahkan gambar atau megubah posisi gambar yang sudah ada, atau anda bisa juga menambahkan Label (1) pada artikelnya sesuai tema artikel yang anda edit. Setelah artikel selesai di edit anda bisa klik Perbaharui (2).

Edit Artikel

 Selamat Mencoba....