Cara Membuat Efek Animasi Page Loading di Blog

Efek animasi pada blog ini merupakan suatu efek page loading yang terbaru namun sangat sederhana sekali, tetapi animasi page loading di blog ini sangat keren sekali dengan efek-efek animasi loading yang begitu menarik dan banyak pilihan efek loadingnya. Banyak sekali website yang menyediakan ajax loading page untuk blog, dan saya juga akan membagikan beberapa efekanimasi loading page yang saya ambil dari salah satu web penyedia ajax animasi page loading.

Untuk membuat efek animasi page loading di blog kita hanya menggunakan sebuah CSS dan jQuery agar bisa menjadi sebuah efek animasi page loading di blog. Dengan menggunakan efek animasi page loading ini tidak akan terlalu memberatkan Loading Blog Anda, sehingga Anda tidak perlu khawatir dengan penggunaan efek animasi page loading pada blog Anda.

Untuk itu blog Ilmu Komputer akan membagikan sebuah tutorial membuat animasi loading pada blog terbaru 2014, dengan memberikan efek animasi loading maka akan terlihat begitu indah dan keren ketika Anda atau pengunjung blog sedang berada pada blog Anda lalu berpindah halaman maka efek animasi loading page ini akan terlihat. Baiklah langsung saja bagi Anda yang ingin membuat atau menambahkan efek animasi loading page di blog terbaru silahkan baca tutorialnya dibawah ini :

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]</b:skin> atau </style>
4. Copy kode css dibawah ini, lalu Paste diatas kode ]]</b:skin> atau </style>

/* Loading Page */
#page-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDUJdSpUFEBCrcgZONuoXIf_wxpEbgFit9HT3RuQLVnAg-FcRXuhwYhLSE6Ex8nJuhE6oIcrEBaA8Whd_M3bfXGjqTtyd3octpqB00HiffuU9RQFk-hi7uFzGGSu0mEEvk097-jNgH7FnE/s128-no/loading.GIF') no-repeat 50% 50%;padding:1em 1.2em;display:none}

5. Cari kode </body>
6. Copy kode jQuery dibawah ini, lalu Paste diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
</script>

7. Klik Simpan Template

Catatan :
- Anda bisa mengganti efek animasi loading dengan mengunjungi website ini http://preloaders.net.
- Anda juga bisa mengganti efek animasi loading yang sudah saya siapkan dibawah.

Kumpulan Efek Animasi Loading Page .Gif

Inilah beberapa efek ajax animasi loading page yang saya ambil dari salah satu web penyedia ajax loading page, silahkan bisa Anda pilih dibawah ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw4Q9PLDgSxHfWfhk4iw10w7I_KS8wRDmwE6PMnn_qXXInQDUUkU1srJxHifNj9PJj59bAFxNGDKeZVBazz9fF4xeLiBGIubNWgLdzAj9F7oVd5CimO2I_1ugeKpHtauiMOpTMzSLOv74/s128-no/Loading1.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqniGbZrSs1bexjKLoZNSfLw3dzXdF0rNkdlbcBAUtYOX91IXr-MCxrnkL0dFIWp1we8jGacTQA0ADJfxZ35bGCVb3sGVBNcvG_dObhdN3hTUvCc4MC6mPEXqK_ENYM5KyEEN5B0oyj_M/s128-no/Loading2.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLZKeYRixBmT4RHq-FwlRcYIyWsYCj7Fus-GPhWSPzIi9fR3jO8HuU6UxI9wlij5AN1lUz1Wd4ZPKnH3-5Rv36xIp7lorjVSz3Gm-AJbXx32tOSLkA92O6spoxewgY-vTb8VoRP0-OGfE/s128-no/Loading3.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78CriC2D5vKV68PoZs7kKoGUqzBpT_w-16HgpkzJZ-p8O_uiNj9LfDf1LUoLtnIQg-AkPnTqY-HOt_o_WcW470st9rOQANCHkeS1SCgjo2pymEuUJGluRTAz5GBu1oz4HvXzvJVnWXx0/s128-no/Loading4.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOjEqwhzH32V8i0SN8F4gOCjgpWAjMMYCZKZgGbseXuJJLMPDsMDdUqpij1QfkGBpyRdepm6FErxAm9WOB7lsVvUW5EWff5LXSkl5_GrX4ix2EbQd1L2dH35p-kAEREBd7aZwUZ5S-7I0/w124-h128-no/Loading5.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9IVaTca_0t8qAJiL84hKh90U9bAnWnmR8JzOqcbDgZlR_3IMaIRmGse-Q7t_WwXuDj_WH9D_xu8SkivNWAOXebshViTRSty0BmKwPCqsqHGfkQc6JIoHAC_b0uLVHpeHsc3FCe6cD5KU/s128-no/Loading6.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj62DsLxDaI1CNue_ByPZKznViRk9Z-JxttMcx9sn6furqqSjKvuZSPgpw8PhnCJCBTbiEcwSFFPKciUxD445JNy5qtwfd8925zrXgxli4ds3QIg5kaMkBv2hSjCTeioY_InCTS5O35KRs/s128-no/Loading7.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-f7C_AFxvnB1cbcJOvJDkf12HT0GZV9S2OHz00YOOnc9Ot43ozycm-JnIga8FIiYRpd3IXqMkJOUZYa-xCa6lPJZlC2UhsdrEe73qVgBAqyxIKHJaIZWuG0dGztG2mZgqpMim9vurr6E/w128-h54-no/Loading8.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjENtRhUZviRMCVBTphp7N_SzjpIr13Qo_fKd5XPD9JuJYrs5lw3DiD1c3otsdt3Tgp34AHqo7YKkFzqdNlPf6AcQW2kQPmK7bQF40lyi5umbASZrNAeuFT9XAIRr0lty0I8NH30c2j7Y0/s128-no/Loading9.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0ihn2PP2bLCW4Oo0Dgvz7nOn_BvQrMYiQogGstZFM_tHQas4SGZb2y44IwMmE4_2Z_xS0STEqtC074ueXmA-t_essthNxQFWf9AunyW4P9w1I32G0Ndll_opeWQvcRBQUptXbWwEqLZ8/w128-h40-no/Loading10.GIF

 

Semoga Bermanfaat.....

Read More

Cara Memasang Widget Yahoo Messanger Pada Blog

Sobat Ilmu - Komputer, pernahkah kalian berfikir bagaimana memberikan keterangan kepada pengunjung Blog bahwa kita sebagai admin Blog sedang online/offline. Nah salah satunya dengan Widget Yahoo Messenger ini,
kita bisa memberitahu pengunjung bahwa kita sebagai Admin Blog sedang dalam keadaan online/offline. Untuk Cara Pembuatanya saya akan bahas pada artikel Membuat Widget Yahoo Messenger di Blog, silakan simak yah sobat.

• Pertama sobat harus memiliki software Yahoo Messenger pada PC sobat. Silakan klik disini, atau masuk akun Yahoo>>Messengger, untuk Download Yahoo Messenger. Sebenarnya jika tidak memiliki software Yahoo Messenger pun bisa, karena pada Yahoo>>Mail  pun ada Messenger. Namun jika ingin status widget sobat online, maka sobat harus masuk yahoo mail pada browser sobat dan ganti status Messenger menjadi "Ada/Terlihat".

• Setelah Yahoo berhasil didownload maka instalkan. Setelah berhasil terinstal, buka software Yahoo Messenger dan sign in seperti biasa sobat melakukan sign in di akun Yahoo.

•   Jika sobat telah mempunyai softaware Yahoo Messenger dan mengetahui ID YM sobat, silakan teruskan ke langkah berikutnya.

• Langkah berikutnya, login ke akun Blogger sobat. Masuk pada bagian Tata Letak>>Tambahkan Gadget (diposisi yang sobat inginkan)>>HTML/Javascript.
• Berikan judul ataupun tidak, terserah sobat. Masukan kode HTML di bawah ini.

<a href="ymsgr:sendIM?masdoery.ilham"> <img src="http://opi.yahoo.com/online?u=masdoery.ilham&amp;m=g&amp;t=14&amp;l=us"/></a>

# Ubahlah tulisan berwarna merah dengan ID YM sobat. Ubahlah kode berwarna biru dengan tampilan yang sobat inginkan. Berikut daftar kode dan tampilan yang akan dihasilkan.

• Setelah sobat selesai menentukan ID YM dan kode tampilanya, maka klik Simpan dan lihat hasilnya.

Read More

Cara Membuat Blog Pada Blogger

Sobat Ilmu Komputer, Kali Ini Admin Mau Bagi-Bagi ILmu Tentang Bagaimana Cara Membuat Blog Menggunakan Blogger, Mengapa Menggunakan Blogger? Karena Blog Ini Gratis Sob, Selain Blogger Banyak Situs Penyedia Web Gratis Seperti Wordpress Dll. Namun Kali Ini Kita Membahas Tentang Blogger.

Adapun langkah-langkahnya untuk membuat blog gratis di blogspot adalah sebagai berikut:

1. Buka browser anda dan ketikan alamat : http://www.blogger.com. Dan natinya tampilannya adalah seperti gambat di bawah ini:
   
   
   
2. Bagi anda yang telah memiliki akun gmail anda tinggal memasukkan akun anda
3. Namun kalau anda belum mempunyai akun e-mail gmail, maka anda pilih menu daftar yang tempatnya di pojok kanan atas! 
4. Selanjutnya silahkan anda masukkan data anda pada form yang telah di sediakan dan apabila telah dirasakan cukup silahkan klik lanjutkan, seperti gambar di bawah ini
   
5. Selanjutnya silahkan kirim verifikasi keamanan akun anda dengan menggunakan nomor hp anda.
   
6. Setelah mendapatkan sms verifikasi keamanan, masukkan pada form yang di sediakan lalu klik lanjutkan
   
7. Selanjutnya anda anda telah selesai membuat email gmail anda.
   
   
   
   
8. Selanjutnya anda akan disuguhkan 2 pilihan untuk membuat akun g+ atau akun biasa. Nah pada hal ini saya membuat akun g+
   
9. Selanjutnya masukkan nama g+ yang anda inginkan dan lanjutkan
   
10. Selanjutnya cari teman di g+, atau anda bisa lewati saja menu ini, karena di lain waktu bisa kita ulangi lagi untuk mencari teman.
    
11. Membuat akun g+ telah selesai, klik menu kembali ke membuat blog
    
12. Silahkan pilih dan tentukan nama blog anda, serta alamat url blog anda yang dalam hal ini saya menggunakan judul Tutorial Tentang Blog dan alamat urlnya adalah: http://tutorial-ngeblog99.blogspot.com/, serta jangan lupa silahkan pilih tema blog anda
    
    
13. Selesai sudah cara membuat blog di blogspot kali ini, dan hasilnya seperti gambar di bawah ini

Gimana Sobat, Mudah Bukan Membuat Blog Di Blogger?? Nah Selanjutnya Yang Harus Sobat Lakukan Yaitu Mengisi Blog Sobat Dengan Beberapa Tulisan Dari Sobat Yang Inginkan. Masih Bingung Bagaimana Cara Membuat Postingan Buat Blog Yang Sudah Sobat Buat. Nantikan Kelnjutannya Di Cara Membuat Postingan Pada Blog.


Sumber : Andik Rasida

Read More

Cara Menambahkan Widget Visitor Pada Blog

Mempunyai blog tentunya kita menginginkan tampilan blog kita tersebut indah di pandang mata dan membuat nyaman serta memudahkan pengunjung didalam mencari sesuatu yang di inginkannya. Salah satu widget tersebut adalah widget visitor atau pengunjung blog kita.

Penyedia widget visitor ini banyak bertebaran di internet silahkan anda googling sendiri. Pada tutorial ini saya mengunakan jasa pihak ke tiga yaitu flagcounter. Nah widget visitor yang di tawarkan di flagcounter tersebut kita dapat mengetahui pengunjung blog kita melalui tampilan bendera negara si pengunjung blog kita tersebut.

Adapun cara menambahkan widget tersebut adalah:

A. Silahkan kunjungi flagcounter.com dan tampilanya kira-kira seperti gambar di bawah ini:

Penjelasan gambar di atas adalah:

Tampilan widget ini ada dua pilihan yaitu Top Cauntries dan Mini Counter dan penjelasan gambar yang di lingkari adalah:

1. Menu pengaturan jumlah bendera yang di tampilkan, jumlah kolom, dan penamaan label widget kita.
2. Menu untuk mengatur background, warna teks, dan border widget kita.
3. Menu  untuk mengatur label bendera pengunjung, page view, dan jumlah bendera yang kita koleksi dari pengunjung.

B. Langkah selanjutnya adalah kita isikan di form pengaturan (no.1) sesuai keinginan anda dan tampilan blog anda, seperti contoh gambar di bawah ini:

C. Kemudian isikan juga di form pengaturan (no.2) warna background,teks, dan border yang anda inginkan, seperti gambar di bawah ini:

D. Untuk selanjutnya silahkan contreng di pengaturan (no.3) sesuai yang anda inginkan, seperti contoh di bawah ini :

E. Dan hasilnya untuk tutorial ini adalah seperti gambar ini:

F. Langkan selanjutnya silahkan buat kode script counter flag anda dengan cara klik menu Get Your Flag Counter, kemudian anda akan di suguhkan tampilan form untuk pengisian alamat email anda (anda bisa memilih "Skip atau Continue) yang pada tutorial ini saya memilih "Skip".

Kemudian kita akan mendaptkan kode yang nanti dapat di pasang di widget blog yang kita kelola, dan tampilannya seperti ini:

G. Selanjutnya kita tinggal memasang kode tersebut di blog kita. Silahkan buka dashboard blog anda.

H. Kemudian silahkan buka menu Tata Letak

I. Selanjutnya silahkan klik menu tambahkan gadget

J. Kemudian Silahkan pilih HTML/Java Script

K. Selanjutnya silahkan Copy Pastekan kode yang anda dapatkan dari falg counter dan simpan.

L. Langkah selanjutnya silahkan geser gadget anda untuk diletakkan sesuai dengan keinginan anda.

M. Langkah terahir silahkan simpan perubahan.

Selesai sudah cara menambahkan widget visitor di blog kita, semoga tutorial ini dapat membantu Sobat Sekalian.

Belum Tau Cara Membuat Blog? Klik Disini Untuk Tutorial Membuat Blog Pada Blogger

Read More