Cara Buat Tombol Back To Top di Blogspot

Cara membuat/memasang tombol back to top/go top di blogger, tombol back to top adalah sebuah tombol yang berfungsi untuk membuat/mempercepat scrolling dari bawah keatas di sebuah web page ataupun blog page sehingga akan mempermudah reader ataupun visitor untuk kembali´pada bagian atas dari blog/website dengan cepat ketika berada dibagian bawah halaman dengan hanya sekali klik pada tombol back to top tersebut. 


Cara Membuat/Memasang Tombol Back To Top Dengan jQuery di Blogger

  • Silahkan login di Blogger
  • Pilih Template > Edit HTML > klik Expand Widget Template
  • Cari kode </body>  (gunakan CTRL+F)
  • Copy kode dibawah ini dan Paste tepat diatas kode </body>  (jika kode dibawah sudah ada di template sobat, kode dibawah tidak usah dipasang lagi)
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
  • Kemudian Copy lagi kode dibawah ini dan kemudian Paste tepat dibawah kode diatas
<script src='http://bloggerpeer.googlecode.com/files/backtotop.js' type='text/javascript'/>
<!-- Back to top designed by Blogger Peer - bloggerpeer.blogspot.com -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQlFEmYupOufG-xEOotSC5sYkyOhOOnOJvpYkSlI8DQ-q9sQCSgxPwZYEudOLFbgXC7N2Eo7ZpTkBqVGuXte_cwcUxChQoZb76OETe6lHP9VorbRUJ1WYKc9g5brSUjiu9MgYINXA8XMA/s1600/back-to-top.gif'/></a>
  • Terakhir simpan template sobat dan tombol back to top sudah bisa dipakai
Moga bermanfaat ^^

0 komentar:

Cara membuat efek bintang jatuh di kursor pada blog.


Cara membuat efek bintang jatuh dari cursor di blog, animasi bintang jatuh adalah sebuah animasi kursor yang berupa bintang bertaburan yang jatuh dari cursor atau mouse ketika digerakkan, hal ini sangat menarik untuk dipasang di sebuah blog atau website karena animasi nya yang indah dan unik sehingga akan menarik visitor blog untuk betah tinggal lama-lama untuk membaca blog sobat
Cara Buat Bintang Jatuh dari Kursor
Buat sobat yang senang me-modifikasi blog nya dengan sesuatu yang beda dan unik mungkin perlu mencoba animasi bintang jatuh yang satu ini. Cara membuat bintang jatuh ini juga tidak susah-susah amat dan sobat tidak perlu meng-edit kode yang ada di template, cukup hanya copy paste kode-kode yang akan saya berikan dibawah nanti ke edit html pada bagian add gadget dan juga untuk mengganti warna bintang nya pun sobat bisa rubah sesuai dengan warna background template blog sobat dengan bantuan Colorpic software, tertarik? silahkan ikuti tutorial blogger dibawah ini

Pemasangan Efek Bintang Jatuh Pada Cursor di Blogger

  • Login di Blogger
  • Pilih Design > Add gadget > HTML/Javascript
  • Masukkan kode dibawah ini ke kolom HTML/Javascript
<script type='text/javascript'>
// <![CDATA[
var colour="#52D8ED";
var sparkles=100;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>
Cari kode yang berwarna merah diatas dan gantilah sesuai dengan kode warna keinginan sobat
Terakhir simpan dan efek bintang jatuh dari cursor sudah dapat sobat lihat

happy blogging ^^

3 komentar:

Cara memasukan buku tamu tersembunyi di blog.




Cara membuatnya:
  1. Masuk ke account Blogger kamu, pilih "Layout" - "Page Elements"
  2. Tambahkan widget baru dengan mengklik "Add a Gadget" - "HTML/JavaScript"
  3. Tidak usah diberi judul, dan copy kode di bawah ini sebagai konten widget kamu:
    <style type="text/css">
      .gb_fixed{
          position:fixed;
          top:0px;
          right:0px;
          z-index:+10;
      }
      * html .gb_fixed {position:relative;}
      #hidden_gb2 {
          display:none;
          border:2px solid #88C900;
          background:#E5E5E5;
          padding:10px;
          padding-top:0px;
      }
    </style>
    <div class="gb_fixed">
      <table id="hidden_gb2" cellpadding="0" cellspacing="0">
        <tr><td>
          <div> <a href="javascript:void(0)" onclick="gb_showHideGB()">[x]</a> </div>
    
          <!-- Kode buku tamu kamu -->
    
          <div style="text-align:right; font-size:10px">
              Widget by
              <a href="http://infotentangblog.blogspot.com/2009/08/buku-tamu-tersembunyi-versi-2.html">
                  Info Blog
              </a>
          </div>
      </table>
    </div>
    
    <script src="http://sites.google.com/site/copycatgroup/Home/jsfile/hiddengb2.js">
    
    <div class="gb_fixed" style="z-index:+5">
    <a href="javascript:void(0)" onclick="gb_showHideGB()">
      <img border="0" style="border:0px"
           src="http://lh4.ggpht.com/_jn57XA2jLxY/SpS8DmNReHI/AAAAAAAAAc8/OZmZfpilhh4/gbbutton.png" />
      </a>
    </div>
    </script>
  4. Posisi buku tamu jika kamu tidak mengganti kode di atas adalah di bagian kanan atas. Kalau kamu mau mengganti jadi kiri, ubah right jadi left. Dan kalau kamu mau menempatkannya di bawah, ubah top jadi bottom,
  5. Kalau kamu mau mengganti gambar tombolnya, ganti kamu bisa mengganti source gambar yang ditebalkan di atas,
  6. Dan juga jangan lupa untuk mengganti kode <!-- Kode buku tamu kamu --> jadi kode buku tamu kamu.
  7. Klik "Save" kalau sudah selesai.
Semoga bermanfaat!

0 komentar:


Sobat, kali ini aku akan membahas tentang cara membuat tulisan berwarna-warni. Cara ini bisa kamu gunakan kalau kamu mau mempercantik blog kamu ataupun menarik pengunjung untuk membaca artikel kamu.
Lihat contohnya di bawah:

Tulisan berwarna-warni

Tulisan tersebut awalnya berwarna biasa saja, tapi setelah semuanya selesai diproses, akan langsung berubah jadi berwarna-warni

Caranya:
  1. Masuk ke account Blogger kamu, pilih "Layout" - "Page Elements",
  2. Tambahkan widget JavaScript dengan mengklik "Add a Gadget" - "HTML/JavaScript",
  3. Tidak usah diberi judul, dan copy-paste kode di bawah ini sebagai kontennya:
    
    
    <script
    src="http://sites.google.com/site/copycatgroup/Home/jsfile/rainbowtext.js">
    </script>
    
    
    
    
    
  4. Klik "Save",
  5. Kalau kamu ingin membuat tulisan berwarna-warni di post kamu, tambahkan kode di bawah ini saat kamu menulis post untuk blog kamu:
    <span class="rainbow_text"> Tulisan yang ingin dibuat berwarna-warni </span>
Selamat mencoba! :D

0 komentar:

cara membuat link target :D


Sobat, kali ini saya akan membahas macam-macam target yang ada di sebuah link. Mungkin ada yang bertanya, "target itu apa, sih?" Sebenarnya saya juga masih kurang jelas dalam definisi target itu, tapi kurang lebih target itu menentukan di mana sebuah link akan dibuka.

Untuk memperjelas definisi target, coba klik 2 link di bawah ini:
Link 1 dan Link 2

Link 1 membuka link tersebut di window kamu bekerja sekarang, sedangkan Link 2 membuka link tersebut di window yang baru.

Cara membuat target adalah dengan menambahkan atribut target di dalam tag <a> kamu. Contohnya:
<a href='suatulink' target='jenistarget'>Suatu teks</a>
Kalau kamu menggunakan blogger, tambahkan atribut tersebut dari menu "Edit HTML" saat kamu menulis post kamu.

Jenis-jenis target ada beberapa macam, yaitu:
  1. _blank
    Selalu membuka link di window yang baru. Ini berguna agar pembaca yang mengklik link tidak meninggalkan blog kamu. Contoh: Target Blank
  2. _self
    Membuka link di window kamu saat itu. Contoh: Target Self
  3. _parent
    Membuka link di parent window. Ini bisa diterapkan jika link tersebut berada dalam suatu frame. Jika tidak, hasilnya akan sama saja dengan _self.
  4. _top
    Sebenarnya saya kurang tau perbedaan ini dengan _parent, jadi kalau ada yang tahu perbedaannya, bisa komen di bawah. :D
  5. nama_frame
    Yang ini untuk membuka link di window yang tertentu. Kalau kamu pengguna Blogger, kamu pasti lebih familiar dengan jenis ini, jika kamu sudah mengedit sesuatu, ada link "View Blog" atau "View Blog in a new window". Link tersebut menggunakan nama frame sebagai targetnya.
    Untuk lebih jelasnya, kamu bisa membandingkannya dengan _blank dengan mengklik berkali-kali kedua link di bawah ini:
    Target Blank dan Nama_Frame.
Itu saja yang saya tahu tentang target sebuah link. Semoga bermanfaat! :D

0 komentar:

Tips Menyembunyikan Judul Widget yang Berjudul


Sobat, pernah punya masalah seperti gambar di bawah, ga?
Di gambar tersebut, kita punya widget HTML/JavaScript tanpa judul yang kebanyakan, sehingga sulit untuk membedakan widget-widget tersebut.

Kenapa kita harus membuatnya tanpa judul?? Alasan utamanya adalah agar judulnya tidak tampil sehingga tidak mengganggu desain web kita, seperti widget headline news dan buku tamu dari blog ini. Tapi akibatnya seperti di atas, kita jadi kesulitan membedakan widget-widget tersebut.

Saya akan memberikan trik agar judul widget tersebut tidak tampil meskipun judulnya tidak kosong.

Caranya:
  1. Masuk ke bagian "Edit HTML" Layout blog kamu,
  2. Cari kode ]]></b:skin>, dan tambahkan kode di bawah ini sebelum kode tersebut:
    #hidden_widget h2 {
    display:none;
    }
  3. Kemudian cari lagi kode </b:section> yang paling bawah, kemudian tambahkan kode di bawah ini setelah kode tersebut:
    <div id='hidden_widget'>
    <b:section id='sidebar_hidden' preferred='yes'>
    </b:section>
    </div>
  4. Klik "Save Template",
  5. Kemudian masuk ke bagian "Page Elements" Layout kamu, dan kamu akan melihat ada sebuah area baru untuk widget.
  6. Sekarang pindahkan widget-widget "tak berjudul" kamu ke tempat itu, dan kamu bisa memberinya judul tanpa menampilkan judul tersebut di blog.
    Ini yang saya pakai di blog ini:
    Seperti yang kamu lihat, widget-widget tersebut mempunyai judul, tapi apakah kamu melihat judul widget tersebut di blog ini?
Semoga bermanfaat! :D

0 komentar:

Pages