Kumpulan Tutorial Blogspot

Tips Blog | Tutorial Blog | Belajar Blog

Home → Semua Post

Cara Membuat Status Loading

ajax-loader3 Tutorial kita kali akan membahas cara membuat status loading, maksudnya adalah pada waktu sobat membuka halaman blog milik sobat, nantinya akan muncul sebuah image / gambar animasi loading yang atraktif sebelum blog tampil keseluruhan.

Pemasangan status loading ini akan mengubah sedikit kode HTML yang ada di template, jadi saya sarankan gunakan blog cadangan untuk mencoba tutorial ini, atau backup template sobat sebelum mengubah kode HTML-nya.


Karena kode yang di ubah adalah <body> dan saya tidak tau pasti apakah dengan mengubah kode tersebut akan melanggar TOS Blogger atau tidak. Makanya saya sarankan sebaiknya gunakan blog cadangan saja untuk mencoba membuat status loading ini. Baiklah, lanjut ya.

Untuk pilihan animasi status loading-nya bisa sobat lihat di Ajax Load.

Silahkan upload kode Javascript berikut ini ke tempat penyimpanan online. Pastikan file yang di upload berkhiran .js
var ld=(document.all);var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
Cara upload file javascript-nya, copy paste semua kode diatas kedalam notepad, kemudian simpan file tersebut dengan extension atau akhiran .js dan setelah itu upload ke tempat penyimpan online atau jika mau lebih mudah upload saja di google sites.

Kemudian ikuti langkah berikut ini :
  1. Silahkan login dulu ke Blogger.
  2. Kemudian tuju halaman Edit HTML.
  3. Klik Expand Template Widgets.
  4. Cari kode <body> dan ganti kode tersebut dengan kode dibawah ini :

    <body onLoad='init()'><div id='loading' style='position:absolute; width:100%; text-align:center; top:300px;'> <img border='0' src='http://tempat-simpan.com/gambarpreloader.gif'/></div> <script src='http://tempat-simpan/preloader.js' type='text/javascript'/>
  5. Simpan Template.
Keterangan :
  Kode yang berwarna hijau adalah url dimana sobat menyimpan gambar animasi status loading-nya.
  
  Kode yang berwarna merah adalah url tempat sobat mengupload kode javascript animasi status loading-nya.

Jika sobat malas untuk menyimpan gambar animasi status loading, saya punya beberapa gambar yang bisa sobat gunakan dibawah ini :


ajax-loader8 ajax-loader
ajax-loader7 ajax-loader2
ajax-loader6 ajax-loader3
ajax-loader9 ajax-loader4
ajax-loader10 ajax-loader5
ajax-loader12 ajax-loader11
ajax-loader14 ajax-loader15

Selamat Mencoba !
Write a comment √ Read More... »

Kompress CSS Percepat Loading Blog

CSS Ada beberapa hal yang mempengaruhi loading suatu blog, selain pemakaian kode HTML dan Javascript yang berlebihan yang tentunya akan membuat loading blog jadi lambat, pengaturan atau pemakaian kode css yang salah juga berpengaruh terhadap loading blog.

 

Jika sobat banyak menggunakan kode HTML atau javascript dan diletakkan di sidebar sebelah kiri, itu akan membuat loading blog terasa sangat berat, kenapa ?

karena browser selalu membaca blog berurutan dari kiri atas sampai kiri bawah, kemudian akan berlanjut ke bagian kanan atas sampai kanan bawah, dan bagian footer atau bawah blog tentunya yang akan kebagian terbaca paling akhir.

 

Jadi saya sarankan gunakanlah template dengan kolom postingan yang terletak di sebelah kiri, atau jika sobat menggunakan sidebar di sebelah kiri, usahakan jangan terlalu banyak memakai kode HTML atau Javascript di sebelah kiri karena akan membuat loading blog jadi sangat berat.

 

Berlanjut pada topik utama kita, kompress kode css ini bisa kita lakukan secara manual maupun dengan menggunakan tools kompress css yang sekarang sudah banyak tersedia di internet. Saya akan berikan contoh kasusnya, perhatikan kode css berikut ini :

 

a:link {
color:#006699;  text-decoration:none;
}

a:visited {
color:#006699;  text-decoration:none;
}

a:hover {
color:#006699;  text-decoration:underline;
}

#main .post-body a:link {
color:#006699;  text-decoration:underline;
}

#main .post-body a:visited {
color:#006699;  text-decoration:underline;
}

#main .post-body a:hover {
color:#006699;  text-decoration:none;
}

kode css diatas adalah kode standard yang biasa sobat jumpai di HTML template, jika saya kompress secara manual maka hasilnya akan seperti dibawah ini :

 

a:link,a:visited,#main .post-body a:hover {
color:#006699;
text-decoration:none
}

a:hover,#main .post-body a:link,#main .post-body a:visited {
color:#006699;
text-decoration:underline
}

apa yang membedakan kedua bagian diatas ? jika sobat cermat melihat seluruh kode css yang paling atas (sebelum saya kompress) bahwa semua bagian dalam kurung {....} yang membedakan hanya dua bagian yaitu pada penulisan text-decoration:none dan text-decoration:underline. Pemakaian spasi juga sangat berpengaruh dalam penulisan css, jika saya rapatkan maka hasilnya menjadi seperti berikut ini :

 

a:link,a:visited,#main .post-body a:hover{color:#006699;text-decoration:none}
a:hover,#main .post-body a:link,#main .post-body a:visited{color:#006699;text-decoration:underline}

 

Untuk mengkompress kode css pada template, sobat tidak perlu susah payah mengkompress-nya secara manual, karena sekarang sudah banyak tools gratisan yang menyediakan fasilitas kompress css, salah satu yang biasa saya gunakan adalah  situs http://www.csscompressor.com

 

  1. Untuk mengkompress css-nya silahkan kunjungi situs tersebut.

     

  2. Kemudian pada halaman depan, ada pilihan jenis kompress dari yang low, standard, high sampai highest, kemudian masukkan kode css milik sobat kedalam kotak kosong yang tersedia lalu klik compress.

     

    css 1

     

  3. Maka akan terlihat hasil kompress dibawahnya, seperti pada gambar berikut

     

    css 2

     

  4. Kemudian klik Select All dan copy semua kode yang sudah di kompress tadi.

Ada banyak tools lainnya yang bisa sobat coba, sobat bisa cari di search engine..oke sob, selamat mengkompress ria, semoga dengan di kompress-nya kode css blog sobat akan menjadi lebih enteng..Open-mouthed

Write a comment √ Read More... »

Google Update Page Rank

google-pagerank Tadi siang saat jam istirahat kantor saya sempatkan membuka internet dan melihat-lihat isi blog tercinta ini, saya cukup terkejut sewaktu melihat button page rank milik blog go blog di halaman bawah template, angka yang biasanya 2 tiba-tiba berubah jadi 3.

Kemudian saya cek and ricek di semua tools yang menyediakan fasilitas untuk melihat page rank, dan memang hasilnya sama semua, blog ini naik kelas satu strip. Google Update Page rank !

Google agak telat untuk update PR, karena biasanya google update 3 bulan sekali. Dan seingat saya, terakhir kali google update PR pada bulan juni yang lalu. Kalau di hitung-hitung berarti goolge update page rank mundur 1 bulan lebih lama dari jadwal rutin yang biasa google lakukan. Memang google update page rank tidak melulu per 3 bulan, karena pernah google update lagi hanya dalam jeda waktu 1 bulan, kalau tidak salah waktu itu google update bulan mei dan pada bulan juni update lagi.

Ada senang, ada sedih, ada pula yang biasa-biasa saja melihat update PR pada akhir bulan oktober ini. Begitu pula dengan saya yang biasa-biasa saja dalam menanggapi hal ini, karena target saya untuk blog ini adalah 4 atau naik 2 tingkat. Tapi apa mau di kata, google belum mengizinkan blog ini menyandang PR4. Mungkin saya kurang gencar mencari backlink, makanya mbah google hanya memberikan segitu aja buat blog ini. Tapi ada juga yang membuat saya cukup senang, karena blog mind author naik dari N/A jadi 2 dan saya juga ikut senang dengan naiknya PR blog teman saya rozani yang semula nol naik jadi 1, selamat ya sob.

Oke deh, selamat ya buat temen-temen yang sudah dapat PR dan yang naik, buat yang turun jangan kecewa. thumbs_up
Write a comment √ Read More... »

Tombol View Pop Up

canvas Membuat tombol view pop up ini sebenarnya tidaklah sulit, dan fungsinya lumayan sangat bermanfaat buat sobat yang ingin memancing pengunjung untuk melihat halaman link yang ingin sobat tampilkan. Misalnya, jika ingin mengajak pengunjung untuk ikut program yang sudah sobat ikuti dari situs affiliasi, yang biasanya ditampilkan dalam bentuk banner, atau tulisan biasa.

 

Jika memakai tombol view pop up ini, saya yakin pengunjung lebih penasaran untuk mengklik link yang sobat ingin tampilkan ketimbang menggunakan banner atau tulisan biasa.

Kenapa ? karena banner yang sobat pasang sudah memperlihatkan isi dari link yang dimaksud, so..yang liat juga males, soalnya sudah pada tau isinya..�oh bisnis online yang itu ya�, atau �ehmm..kalo bisnis tabungan online yang begitu sih males ah�. Nah loh, jadi ga diklik deh tuh banner atau tulisan sobat, bener ga tuh. Ya udah deh langsung aja, begini nih contoh tombol view pop up yang dimaksud.

 

 

Untuk membuatnya, silahkan sobat copy saja scripnya dibawah ini :

 

<center><form onsubmit="window.open('http://ALAMAT URL','popupwindow','scrollbars=no, width=300,height=100');return true"><input type="submit" value="TULISAN PADA TOMBOL"></form></center>

 

Copy paste kode tersebut di tempat yang sobat inginkan, di sidebar, header atau dipostingan juga bisa.

 

Keterangan :

 

   <center> : untuk tombol yang terletak ditengah, jika ingin letaknya di sebelah kanan tinggal sobat ganti saja dengan <right> jangan lupa ditutup dengan </right>  
   Tulisan yang berwarna biru adalah alamat url yang ingin sobat pasang.  
   Tulisan yang berwarna merah adalah tulisan pada tombol.

Silahkan kreasikan sendiri tombol view pop up milik sobat..Happy

Write a comment √ Read More... »
Cara Membuat Efek Zoom Pada Gambar

Cara Membuat Efek Zoom Pada Gambar

Pada dasarnya membuat efek zoom pada gambar cukup banyak manfaatnya, selain menghemat tempat, sekaligus mempercantik tampilan blog kita. Ada kalanya dimana kita mempunyai gambar yang sangat besar dan harus di tampilkan dalam ukuran yang besar, wah tempatnya ga cukup nih mas, itu bisa menjadi kendala dalam optimasi gambar yang hendak ditampilkan. Sementara sobat tidak ingin gambar tersebut berlalu begitu saja tanpa sentuhan pengunjung sedikitpun.

 

Tutorial membuat efek zoom pada gambar ini sangat mudah, cukup menambahkan kode css pada template dan sedikit mengedit kode gambar yang sobat miliki. Ga usah panjang lebar ya, langsung praktek aja. Sip, sekarang silahkan siapkan komputer sobat dulu, plus kopi dan rokok sebagai pelengkap..Hot

 

  1. Silahkan login ke Blogger terlebih dahulu.

     

  2. Kemudian klik Tata Letak.

     

  3. Tuju halaman Edit HTML.

     

  4. Letakkan kode css berikut ini, tepat diatas / sebelum kode ]]></b:skin>

     

    /* Zoom Efek */

    .thumbnail{position:relative;z-index:0}

    .thumbnail:hover{background-color:transparent;z-index:50}

    .thumbnail span{position:absolute;left:-1000px;visibility:hidden;color: black;text-decoration: none}

    .thumbnail span img{border-width:0;padding:2px}

    .thumbnail:hover span {visibility: visible;top: 0;left: 60px}

     

  5. Jangan lupa Simpan Template.


## Untuk membuat gambarnya zoom-nya, berikut contoh gambar yang saya punya :

 

<a href="http://s643.photobucket.com/albums/uu155/miskahiper/?action=view&current=vaio-zoom-1.jpg" target="_blank"><img src="http://i643.photobucket.com/albums/uu155/miskahiper/vaio-zoom-1.jpg" border="0" alt="Photobucket"></a>

 

Kemudian hapus tulisan yang berwarna hijau, tambahkan dengan tulisan yang berwarna merah, sehingga menjadi seperti berikut :

 

<a class="thumbnail" href="#thumb"><img src="http://i643.photobucket.com/albums/uu155/miskahiper/vaio-zoom-1.jpg" border="0" alt="Photobucket"><span><img src="http://i643.photobucket.com/albums/uu155/miskahiper/vaio-zoom-1.jpg" width="380px" height="300px";/></span></a>

 

coba sekarang sobat sorot gambar dibawah ini 

 

Photobucket

 

 

Sedangkan kode HTMl untuk text adalah sebagai berikut :

 

<a class="thumbnail" href="#thumb">Contoh Gambar<span><img src=http://i643.photobucket.com/albums/uu155/miskahiper/vaio-zoom-1.jpg /></span></a>

 

coba di sorot tulisan berwarna hijau dibawah ini :

 

Contoh Gambar

 

Ukuran besarnya gambar yang akan di zoom silahkan sobat atur sesuai keinginan, silahkan ganti angka yang berkelip yang berwarna merah dengan ukuran yang sobat inginkan saat di zoom, sesuaikan juga dengan ukuran asli gambar agar gambar yang di zoom tidak pecah atau kabur. Oke sob, selamat mencoba ya, semoga berhasil !Thumbs-up
Write a comment √ Read More... »