Tes Kecepatan Loading dan Optimasi Blog

Tiga buah situs yang sering saya gunakan untuk mengecek kecepatan loading blog agar mudah untuk dioptimasi. 

Mungkin 3 Situs ini sudah sangat familiar bagi para webmaster :D

1. PageSpeed Insight From Google

Link : https://developers.google.com/speed/pagespeed/insights/

Ini adalah tool besutan google yang dapat mengukur seberapa besar performa blog kita. Dengan tool ini kita bisa meneliti masalah-masalah apa saja yang mempengaruhi performa kecepatan blog kita, mulai dari High Priority sampai Low Priority, selain itu tool ini juga menyediakan fitur Experimental Rules yaitu kamu akan diberikan masukan-masukkan yang berguna untuk meningkatkan kecepatan loading blog kamu

2. Website Speed and Performance Optimization by GTmetrix

Link : http://gtmetrix.com/

Ini tool dari GTmetrix, fungsinya sama saja seperti PageSpeed Insight, melalui tool ini kita bisa melihat lamanya waktu blog kita untuk dimuat 100%, ukuran halaman blog kita (dalam kb), serta total request ketika blog kita diakses. Situs ini juga memberi masukan / saran untuk meningkatkan performa blog kita, tapi sayangnya kalau sobat tidak mendaftar menjadi pro member maka akan diberi batasan dalam menggunakan situs ini, yaitu hanya boleh 20 kali test dalam sehari.

3. Pingdom Tools by Pingdom

Link: http://tools.pingdom.com/fpt/

 Tool ini fungsinya sama saja seperti GTmetrix, hanya saja di pingdom kita tidak diberi batasan mengetest speed blog dalam satu harinya tidak seperti di GTmetrix yang hanya boleh 20 kali dalam sehari. Dan fitur khusus pingdom ini kita bisa memilih mau mengetest menggunakan server Amsterdam, Dallas, atau New York.

Read More

Cara Membuat Spoiler di Blog

Sobat mungkin tidak asing lagi dengan yang namanya spoiler. Spoiler biasanya dipakai untuk menyembunyikan gambar atau tulisan, saat klik tombol [open] baru tulisan atau gambar tersebut terbuka.

Spoiler berasal dari kata 'spoil'. Spoil adalah bahasa Inggris, terjemahan bahasa Indonesia-nya menurut Google Translate Spoil adalah merusak. Dalam bahasa Inggris, kata kerja yang ditambahi akhiran 'er' biasanya jadi objek pelaku. Jadi, Spoil=merusak maka Spoiler=perusak. 

Menurut ane sih gan disebut spoiler karena biasanya pelaku/pembuat spoiler bertujuan untuk menampilkan langsung isi/gambar yang bisa membuat jengkel pembuka spoiler tersebut. karena biasanya isi spoiler itu gambar tipuan / ngerjain dengan menampilkan gambar / teks yang tidak diinginkan sipembuka spoiler. jadi hati - hati ya kalo membuka spoiler, jangan ketipu dan langsung senang jika ada spoiler bisa saja akan membuat agan frustasi dan kecewa. :P

Dibawah ini adalah contoh spoiler.

 

dan hasilnya seperti ini :

Check It Out :

Lalu, bagaimana cara membuat spoiler di blog? baca dan praktikkan ya! :D

• Saat membuat postingan, pindah ke mode menulis HTML.
• Copy kode Spoiler berikut:

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b> : <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;"><div style="display: none;">

ISI SPOILER DISINI

</div></div></div>

• Paste di lokasi yang akan dipasangi spoiler.
• Ganti tulisan warna biru dengan judul spoiler yang diinginkan.
• Ganti tulisan warna merah dengan isi spoiler
• Isi spoiler gambar, kodenya <img src="lokasi_file-gambar" height="tinggi-gambar" width="lebar-gambar">

Demikian tutorial cara buat spoiler diblog seperti yang ada di Kaskus. Semoga bermanfaat.

Read More

Membuat Social Icon Dengan Gambar Berputar

 Membuat Social Icon Dengan Gambar Berputar - Kali Ini Saya Mau Posting Tutorial Blog Lagi, Bagi Sobat Yang Belum Tahu Cara Membuat Social Icon Dengan Gambar Berputar Saya Akan Jelaskan Tutorialnya.

Berikut Tutorailnya :

• Login Blogger
• Tata Letak
• Tambah Gadget
• HTML/JavaScript
• Copy Kode Dibawah, Lalu Paste Di Form HTML/JavaScript

<style type='text/css'>
/* 3D Social Icon by Monster Zila */
#social a:hover {background-color: transparent;opacity:0.7;}
#social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; }
#social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
</style>
<center>

<div id="social">
<!--Start Rss Icon-->
<a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img src="http://icons.iconarchive.com/icons/graphics-vibe/media-pin-social/64/rss-feed-icon.png" alt="Icon"/></a>
<!--End Rss Icon-->
<!--Start Facebook Icon-->
<a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img src="http://icons.iconarchive.com/icons/graphics-vibe/media-pin-social/64/facebook-icon.png" alt="Icon"/></a>
<!--End Facebook Icon-->
<!--Start Twitter Icon-->
<a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img src="http://icons.iconarchive.com/icons/graphics-vibe/media-pin-social/64/twitter-icon.png" alt="Icon"/></a>
<!--End Twitter Icon-->
<!--Start Google+ Icon-->
<a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img src="http://icons.iconarchive.com/icons/graphics-vibe/media-pin-social/64/google-icon.png"/></a>
<!--End Google+ Icon-->
</center>

Keterangan !!! :
Ganti Kode Dibawah :
YOUR-FEED-URL-HERE Dengan URL Feed Blog Sobat
YOUR-FACEBOOK-PAGE-URL-HERE Dengan URL Facebook Sobat
YOUR-TWITTER-URL-HERE Dengan URL Twitter Sobat
YOUR-GOOGLE-PLUS-URL-HERE Dengan URL G+ Sobat

sources : sumur

Read More

Cara Membuat Favicon Blog

Apa sih favicon? favicon adalah gambar /logo blogger sobat sekalian. favicon muncul pada tab browser bukan didalam posting blog. supaya lebih jelasnya. lihat gambar dibawah ini:

Membuat Sendiri Maksudnya ialah Anda membuat Gambar Favicon yang anda inginkan, trik ini cocok untuk menunjukan Kreatifitasan anda. Cara Membuat Favicon Blog Menarik :
Upload Gambar 1. Klik link ini  http://www.favicon.co.uk/index.php
2. Lihat pada bagian ini. ( Lihat Gambar ) Cara Membuat Favicon di www.favicon.co.uk
3. Pada tulisan Source Image, anda pilih gambar yang akan dijadikan Favicon.
4. Pada tulisan Favicon Size, anda pilih ukuran gambar yang akan dijadikan Favicon.
5. Kemudian klik Generate Favicon.
6. Terakhir anda klik Download Your Favicon Here. ( Lihat Gambar )

 Cara Membuat Favicon di www.favicon.co.uk Membuat Sendiri
1. Klik link ini http://www.favicon.cc/
2. Kemudian anda akan terlihat tampilan seperti ini. ( Lihat Gambar ) Cara Membuat Favicon di www.favicon.cc
3. Setelah itu, Klik pada kotak - kotak yang hasilnya akan menjadi Favicon Blog anda. ( Lihat Gambar ) Cara Membuat Favicon di www.favicon.cc
4. Jangan lupa untuk menggunakan Fitur yang telah disediakan. ( Lihat Gambar ) Cara Membuat Favicon di www.favicon.cc
 5. Terakhir, Scroll sedikit kebawah kemudian klik Download Favicon. ( Lihat Gambar )Semoga artikel saya sangat bermanfaat buat anda semua. Terima Kasih

Read More

Cara Mengatur Jumlah Posting Blog

Mengatur jumlah posting dalam blog itu sangat penting, agar tampilan blog menjadi rapi jangan sampai postingan blog terlalu banyak dan memanjang kebawah atau sebaliknya terlalu sedikit sehingga terkesan Admin malas untuk mengelolanya.

Berikut simak cara mengatur jumlah posting yang ditampilkan pada blog :

1. Login akun blogger Anda.
2. Pilih Setelan/Setting ---> Pos dan komentar. 

 3. Setelah itu atur jumlah posting yang akan ditampilkan, ubah angka pada pilihan 'Tampilkan sebanyak mungkin ?'

 

4. Simpan setelan.

Nah, demikian cara mengatur jumlah posting yang ditampilkan pada blog, selamat mencoba. 

Read More

Cara memasukkan video youtube di blog

Sobat rempas kali ini saya akan berbagi bagaimana cara meng-embed video youtube di blog. untuk menampilkan video dari youtube tidak usah download videonya dan diupload pada blog hal ini menghabiskan banyak waktu. tapi jika sobat punya video yang belum diupload sebelumnya maka harus diupload manual pada blog.

This is how to do it :
1. buka youtube > share > copy link nya.

2. ke html dan paste link embed yang dicopy pada html tersebut.

contoh embeded video imagine the lennon


(jika sobat mau ada 2 video jangan lupa tambahkan kode:

<br />
<br />

setelah link embed video pertama.

turn down for what. video clip gokil bin aneh

danza kuduro vs papa americano. semoga terhibur.

Read More

cara membuat table diblog

Membuat table menggunakan program pengolah kata seperti microsoft office word, excel dll. memang mudah. tapi bagaimana jika kita mau membuat table pada blog. pada kolom menu tulis/write blog tidak ada insert table(pusing deh hehe).
ok lihat penampakkan menu blog, tidak ada insert table:

Saya sendiri saat pertama kali membuat table diblog langsung membuat table di word/excel kemudian di ss/screenshoot. tapi liat hasilnya seperti ini. sungguh kurang professional  :D. hasilnya berantakkan dan kolom table terakhir tidak tampil semuanya.

jadi, gimana caranya. langsung saja  kunjungi blog ini , lah ko. iah gan maklum saya pribadi masih mempelajarinya dan baru mau mengaplikasikannya diblog saya. jadi yu kita belajar bareng cara membuat table yang benar di blog.

ok. kalo saya sudah membuat tablenya saya langsung update blog ini. syukron.

Read More

Menambah Icon I Love Indonesia

Icon I love Indonesia merupakan seuatu kebanggaan tersendiri bagi para Blogger Indonesia.. Dengan Anda dan saya (Khusunya warga negara Indonesia) memasang Icon ini akan mencerminkan bahwa para Blogger Indonesia itu cinta akan tanah dan negaranya. Postingan kali ini memang merupakan cara lama yang saya temukan pada saat jalan-jalan ke Blog orang lain, tetapi akan sedikit saya rubah...^^
Caranya adalah kita akan memasang pada Widget tertentu(boleh yang sudah ada maupun yang baru akan dibuat):
Loggin ke Blogger

Klik Rancangan, pada halaman Elemen Laman Klik Tambah Gadget tipe HTML/Javascript atau jika sudah ada, klik edit dan tambahkan kode dibawah ini:

<script language="JavaScript" src="https://sites.google.com/site/asalsuka01/home/WidgetIloveIndonesia..js" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("https://sites.google.com/site/asalsuka01/home/iluvindonesia.png")</script>

Lalu disimpan..


Kode diatas merupakan kode original yang saya dapat dari akibat jalan-jalan yang saya katakan tadi.
Saya pernah baca, jika kita menggunakan script terlalu banyak makan akan membuat blog/web kita menjadi berat. Jadi saya cari ide untuk tidak menggunakan script, dan hasilnya saya menemukan alternatif kode tersebut, dengan mengganti kode diatas dengan kode seperti ini:

<!-- ILOVE INDONESIA -->
<a style="display:scroll;position: fixed; top:0px;right:0px;" href="http://asal-suka.blogspot.com/"><img border="0" src="https://sites.google.com/site/asalsuka01/home/iluvindonesia.png" title="Asal Suka Love Indonesia" alt="IloveIndonesia" /></a>
<!-- ILOVE INDONESIA -->

Anda dapat mengedit tulisan yang berwarna merah

Alternatif yang saya berikan ini lebih menguntungkan ,selain pada kode pertama memberatkan blog Anda, juga pada script diatas, jika kita mengklik gambarnya kita akan masuk ke dalam URL yang ditentukan oleh sumber.(saya) tetapi pada script diatas, Anda tenang saja sebab saya tidak membuat directlink yang saya tentukan.
Jadi Anda tinggal pilih mau menggunakan yang mana. Yang pertama atau kedua. Anjuran saya baik menggunakan yang kedua...^^


Terima kasih sudah berkunjung...
Happy Blogging ^^....

Read More