CARA MENGUKUR KECEPATAN BLOG

Pada postingan kali ini, gue pengen share bagaimana cara mengecek kecepatan blog sobat, Karena baru-baru ini google telah meluncurkan beberapa fitur baru dan salah satunya toolnya adalah untuk mengecek kecepatan blog.


Udah gue coba di blog saya ini dan hasilnya lumayan cepet. Ok lah...ga usah panjang lebar lagi, berikut langkah-langkahnya.


1. Buka Google Page Speed Online


2. Masukkan url blog loe pada kolom yang tersedia

Read More

Membuat 3 Kolom Footer

Halloo sobat semuanya langsung aja dibawah ini adalah cara membuat footer 3 kolom . Artinya kita menambahkan 3 bagian untuk menambah gadget baru di bagian bawah BLOG kita. Dan waktu itu Footer Blog saya cuma 2 kolom dan saya rubah 3 kolom. Setelah saya browsing ternyata cara ya seperti dibawah ini. 

Tanpa basa basi lagi, sekarang kita ke langkah-langkah pembuatannya.

1. Masuk ke Menu Layout/Tata Letak
2. Masuk ke mode Edit HTML dan jangan lupa untuk mencentang Expand Widget Template
3. Back up terlebih dahulu template sobat untuk mengantisipasi terjadinya ERROR.
4. Cari kode seperti dibawah ini, tekan CTRL+F untuk mempercepat pencarian:

Read More

Kode Warna ( Color Code )

Kode warna sangat penting diperlukan buat teman-teman yang sering mengotak-atik kode HTML template Website/Blog. Oleh karena itu saya memasang kode warna blogspot. 

Ini adalah contoh mesin kode warna yang akan kita buat

Kode warna yang terpilih :

Silahkan pilih warna anda pada kotak diatas Semoga bermanfaat... buat kita semua...

9 out of 10 based on 10 ratings. 9 user reviews.

Read More

Membuat Back To Top Button (100% OK)

Tombol Back To Top Adalah Tombol yang berfungsi untuk kembali ke bagian teratas suatu website atau blog setelah kita membaca atau melihat isi postingan sampai bagian bawah dan tidak perlu mengarahkan mouse pada scroll bar Browser untuk melihat bagian atas, cukup dengan meng klik tombol tersebut. Dan dibawah ini adalah langkah-langkahnya. ( Bypass to Top Blog / Website View )

Silahkan Ikuti Langkah-langkah berikut :

1. Silahkan login akun Blog Anda

2. Pilih menu Rancangan dan Pilih Elemen Laman

3. Setelah itu pilih Tambah Gadget 

4. Kemudian Tambahkan (Add)  HTML/JavaScript

5. Dan Copy dan kode di bawah ini :

<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;">
<img src="http://i1104.photobucket.com/albums/h326/Gedhank_Godhoq/BackToTop-1.jpg" /></a>

6. Gantilah tulisan yang berwarna Merah diatas dengan URL gambar keinginan anda.

7. Setelah selesai silahkan klik simpan dan lihat hasilnya.

Dan cara ini telah saya coba hasilnya Ok.... dan ga ribet

Read More

Effect Scroll Text pada artikel tertentu

Scroll text adalah text yang berada di dalam kotak yang luas dan tingginya di batasi dalam ukuran tertentu sehingga untuk melihatnya hingga ke bawah dibutuhkan mouse scrolling. Trik ini lazim digunakan untuk menghemat ruang di dalam post body maupun sidebar, sehingga keseluruhan halaman yang dimuat oleh browser menjadi tidak terlalu panjang.
 

Ini adalah contoh text yang menggunakan efek manual scrolling text. Secara normal, text ini akan terlihat sebagai paragraf yang telah diberi pengaturan default di dalam template HTML.

Style diatas dibentuk dengan menggunakan div styling, dengan menambahkan atribut pembatasan lebar (width) dan tinggi (height) pada area text, dimana area text tersebut sebenarnya lebih tinggi dan atau lebih lebar dari batasan yang diberikan. Lalu, untuk memberikan notifikasi pada browser bahwa elemen text harus dapat dilihat tetapi dalam luas area yang telah ditentukan tersebut, digunakanlah atribut overflow: scroll untuk memberikan efek scroll, ataupun overflow: auto yang secara otomatis akan memberikan efek scroll jika area text disempitkan. Logikanya, hal ini sama dengan area suatu halaman blog /website atau dokumen-dokumen lain di PC. Jika halaman tersebut lebih panjang dari area browser (juga berdasarkan resolusi layar monitor), maka akan muncul scroller di sebelah kanan browser, dan jika lebih lebar, maka akan muncul scroller di bagian bawah browser.

Read More

Translate Google + Flag

Widget Google Translate yang berbentuk bendera yang akan kita pasang adalah seperti di bawah ini .silakan kamu sorot gambar benderanya maka nanti akan muncul nama negara dari pemilik bendera tersebut.











Buat kamu yang ingin memasang Widget Google Translate berbentuk bendera tersebut,silakan ikuti langkah-langkahnya berikut ini.


1.LOGIN ke Blogger dengan ID

2.Klik Tata Letak.

3.Klik tab Elemen Halaman.

4.Klik Tambah Gadget.

5.Kemudian Pilih HTML/Javascript.

6.Selanjutnya Copy Kode HTML berikut dan Paste di dalam kolom HTML/Javascript tadi.

<center><a style="cursor: pointer;" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7cen&amp;hl=en'); return false;"><img border="0" alt="English" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/inggris.gif" height="20" title="English" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7cfr&amp;hl=en'); return false;"><img border="0" alt="French" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/francis.gif" height="20" title="French" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7cde&amp;hl=en'); return false;"><img border="0" alt="German" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/jerman.gif" height="20" title="German" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7ces&amp;hl=en'); return false;"><img border="0" alt="Spain" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/spnyol.gif" height="20" title="Spain" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7cit&amp;hl=en'); return false;"><img border="0" alt="Italian" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/italia.gif" height="20" title="Italian" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7cnl&amp;hl=en'); return false;"><img border="0" alt="Dutch" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/belanda.gif" height="20" title="Dutch" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7cru&amp;hl=en'); return false;"><img border="0" alt="Russian" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/rusia.gif" height="20" title="Russian" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7cpt&amp;hl=en'); return false;"><img border="0" alt="Portuguese" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/brazilia.gif" height="20" title="Portuguese" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7cja&amp;hl=en'); return false;"><img border="0" alt="Japanese" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/jepang.gif" height="20" title="Japanese" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7cko&amp;hl=en'); return false;"><img border="0" alt="Korean" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/koreautara.gif" height="20" title="Korean" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7car&amp;hl=en'); return false;"><img border="0" alt="Arabic" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/saudiarabia.gif" height="20" title="Arabic" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7czh-cn&amp;hl=en'); return false;"><img border="0" alt="Chinese Simplified" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/cina.gif" height="20" title="Chinese Simplified" align="absbottom"/></a></center><br/>
<br />

7.Setelah itu Klik tombol Save

Setelah saya coba ternyata Ok... selamat mencoba dan sukses buat anda..!!!!

Read More

Memberi Warna Teks atau Background Posting

Kode untuk memberi warna pada teks (hi-lite) atau background (latar belakang) posting ini aku dapatkan dari BlogBulk, Blogger templates and Blog help.

Kodenya singkat aja, dan diletakan pada HTML posting yang diinginkan untuk diberi warna, jadi bisa bikin warna latar belakang setiap posting berbeda satu sama lain.
Caranya adalah sebagai berikut:
Ketika telah selesai menulis posting, masuklah ke mode Edit HTML, dan pada bagian yang ingin diberi warna, masukan baris kode berikut dibagian atasnya:

<div style="background:#FFE1FF; padding:5px 8px 5px 8px;">

Ini adalah bagian posting yang diberi warna. Pada akhir bagian yang ingin diberi warna, masukan kode berikut:

</div>

Lalu kembali ke mode Tulis untuk melihat hasilnya.

Catatan:

Baris kode warna hijau adalah kode warna yang dipakai sebagai background posting, dapat diganti sesuai dengan warna yang dinginkan, misalkan biru (#0000ff), kuning (#ffff00), merah(#ff0000), hijau (#008080), hitam (#000000), atau putih (#ffffff). Untuk mengetahui kode warna lebih lanjut bisa lihat disini.
Jarak/padding antara tulisan dengan tepi warna (border) dapat disesuaikan dengan yang diinginkan. Angka pertama menunjukan jarak bagian atas, angka kedua menunjukan jarak bagian kanan, angka ketiga menunjukan jarak bagian bawah, dan angka keempat menunjukan jarak bagian kiri.
Kode akan mengalami sedikit perubahan setelah diletakan pada Edit HTML, tidak menjadi masalah karena tetap kode yang sama hanya saja dengan tampilan yang sedikit berbeda.
Lakukan pemberian kode ini setelah penulisan posting selesai.

Selamat mencoba.

Read More

Membuat FORM

Dibawah ini saya coba kasih info meskipun sudah usang/kuno... Tapi mungkin buat teman-teman yang baru bisa buat blog saya kira bisa di coba. Yaitu membuat Form tanpa Edit HTML kita hanya menggunakan fasilitas JavaScript, tampilannya seperti pada BLOG INI.

Name             

Email Address:

Feedback:
 
Sex: Male: Female:

Hobbies: Tennis
Reading
Basketball

Agree to Terms?

 
Script ada dibawah ini :
 
<form id="myform" class="cssform" action="">

<p>
<label for="user">Name</label>
<input type="text" id="user" value="" />
</p>

<p>
<label for="emailaddress">Email Address:</label>
<input type="text" id="emailaddress" value="" />
</p>

<p>
<label for="comments">Feedback:</label>
<textarea id="comments" rows="5" cols="25"></textarea>
</p>

<p>
<label for="comments">Sex:</label>
Male: <input type="radio" name="sex" /> Female: <input type="radio" name="sex" /><br />
</p>

<p>
<label for="comments">Hobbies:</label>
<input type="checkbox" name="hobby" /> Tennis<br />
<input type="checkbox" name="hobby" class="threepxfix" /> Reading <br />
<input type="checkbox" name="hobby" class="threepxfix" /> Basketball <br />
</p>

<p>
<label for="terms">Agree to Terms?</label>
<input type="checkbox" id="terms" class="boxes" />
</p>

<div style="margin-left: 150px;">
<input type="submit" value="Submit" /> <input type="reset" value="reset" />
</div>

</form>

Selamat mencoba semoga sukses selalu...

Read More

Memasang gambar animasi lucu di Blog

Cara menampilkan gambar animasi di pojok blog. Terkadang untuk menghias blog agar tampak lebih menarik maka bisa memasang gambar animasi di blog.Bisa ditempatkan di pojok atas (kiri dan kanan), pojok bawah kiri dan kanan, atau semua pojok diisi gambar lucu-lucu.

Untuk menampilkan gambar lucu, cukup copy salah satu script html di bawah ini kemudian masukkan ke dalam gadget html. Script ini saya buat menggunakankode html ditambah gambar dari situs sweetim.

Contoh dan scriptnya bisa dilihat di bawah ini :

1.Gajah loncat

Script:

<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi</a></center></small></div>

 2. Boring

            

Script :

<div style="position: fixed; bottom: 0px; left: 20px;width:80px;height:120px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002016B.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi</a></center></small></div>

3. Bayi Tertawa 

Script:

<div style="position: fixed; bottom: 0px; right: 20px;width:82px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002031F.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi</a></center></small></div>




4.Boneka joget


Script :

<div style="position: fixed; bottom: 0px; left: 20px;width:82px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002013F.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi</a></center></small></div>

5. Panda main bola


Script :

<div style="position: fixed; bottom: 0px; right: 30px;width:160px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002032D.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi-Blog</a></center></small></div>

6. Tuyul baring


Script :

<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:100px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/0002031E.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Free-Widget-Animasi</a></center></small></div>

7. Panda biru



Script:

<div style="position: fixed; bottom: 0px; left: 20px;width:100px;height:100px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/0002033D.gif" title="Click to get more." /></a>
<small><center><a href="http://www.komputerseo.com" target="_blank">Free-Widget-Animasi</a></center></small></div>

8. Panah



Script:

<div style="position: fixed; bottom: 0px; left: 10px;width:210px;height:120px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020236.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

9. Bunga




Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:100px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020322.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

10.Anjing laut


Script:

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203B5.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

11.Lumba-lumba


Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BA.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

12.Kucing tidur



Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:140px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203C0.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

13.Kelinci


Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203A0.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

14.Dragon


Script:

<div style="position: fixed; bottom: 0px; left: 10px;width:150px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020478.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

15.Ikan


Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:100px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020479.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

16.Pinguin


Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020484.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

17. Helikopter


Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

Anda bisa memilih salah satu script di atas kemudian masukkan ke gadget html/javascript. Jika menggunakan blog wordpress gratisan / blogdetik bisa copy script di atas ke widget text html.

Cara memasang widget animasi ke blog : 

1. Pilih script yang tersedia

2. Di Dashboard blogger pilih Rancangan - Elemen halaman

3. Pilih Tambah Gadget

4. Pilih HTML/Javascript

5. Masukkan script animasi ke dalam kotak kontent HTML/Javascript

Catatan:


1.Contoh blog yang sudah terpasang widget di atas bisa dilihat disini widget animasi atau disini widget blog
2. Untuk mengganti posisi widget dari sebelah kiri ke kanan ganti tag leftmenjadi right
Untuk mengubah posisi dari kiri ke kanan ganti tag right menjadi left
Contohnya bisa dilihat di bawah ini

<div style="position: fixed; bottom: 0px; left: 30px;width:160px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002032D.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi-Blog</a></center></small></div>

 Selamat Mencoba....!!!!

Read More