Rabu, 03 November 2010

Cara Optimasi SEO pada Gambar di Blog

Banyak dari teman-teman blogger pemula yang mungkin melupakan aturan ataupun penggunaan gambar yang tepat untuk SEO di dalam blog. Mungkin ini memang hal yang sepele. Namun hal sepele semacam inilah yang dapat pula menaikkan blog kita di dalam pencarian search engine. Mengapa saya katakan demikian? Karena kadang kala orang mencari gambar di dalam search engine, ataupun browser yang mereka gunakan dinonaktifkan tampilan gambarnya. Dengan demikian tampilan gambar yang kita upload di blog tidak akan terlihat. Namun dengan menggunakan aturan gambar yang tepat masalah itupun akan teratasi.

Pada dasarnya penggunaan aturan gambar yang tepat adalah memberi nama pada gambar dengan menggunakan kode HTML. Maksudnya bila suatu browser dinonaktifkan tampilan gambarnya, maka gambar di dalam blog kita akan tertulis nama gambar tersebut. Sehingga orang akan tahu itu gambar apa. Dan juga di search engine akan lebih besar peluang untuk ditemukan. Karena pada dasarnya tiap search engine itu menggunakan bentuk tulisan di dalam sistem pencariannya.

1. Menambahkan Atribut Alt dan Title yang mengandung Kata Kunci


  • Alt Text
Seperti yang sudah saya jelaskan diatas, fungsi dari atribut alt ini pada gambar adalah menjelaskan, "apa sebenarnya gambar itu?" Sehingga dapat memberi tahu mesin pencari tentang gambar terkait. Karena mesin pencari seperti google dan bing tidak mengetahui gambar, mereka hanya mengetahui tulisan (text). Mudah untuk di ilustrasikan, ketika anda mencari gambar di google, tentu anda akan mengetik tulisan mengenai gambar yang ingin anda cari bukan?

Selain itu apabila load images pada browser anda mati, tentunya gambar akan tidak ditampilkan. Dengan penambahan alt, maka deskripsi dari gambar terkait akan ditampilkan untuk mengganti load image yang di non-aktifkan. Maka dari itu sangat penting untuk menambahkan attribute alt pada setiap gambar agar mesin pencari tahu arti dari gambar itu. Jangan lupa untuk menambahkan kata kunci yang pas di atribut alt pada gambar dengan artikel terkait.

  • Title Text
Title text adalah tulisan yang muncul apabila kursor didekatkan pada suatu gambar. Fungsinya hampir sama, untuk menjelaskan arti dari gambar terkait secara kasat mata. Jangan lupa juga untuk menambahkan kata kunci yang pas di atribut title pada gambar di artikel terkait.

  • Cara Menambahkan Alt dan Title Text
Cara 1.  Klik kiri pada gambar --> Properties --> isi Title Text dan Alt Text yang sesuai dengan gambar dan mengandung kata kunci dengan artikel terkait --> Ok

Menambah alt dan title

Cara 2. Menggunakan mode HTML pada editing post blogger. Masukkan kode alt dan title di dalam setiap gambar blog sewaktu mengedit postingan. Caranya Klik mode HTML.

Contoh:
<img src="GAMBAR.jpg" alt="NAMA GAMBAR" title="JUDUL GAMBAR"/>

2. Gunakan Width dan Height

Secara otomatis gambar di blogger akan menggunakan width dan height, entah anda menyetelnya berukuran small, medium, large, extra-large ataupun original size. Anda dapat melihatnya pada mode HTML pada editing post blogger.

Fungsi dari kode width dan height ini adalah menentukan ukuran lebar dan tinggi dari suatu gambar. Jadi broswer nantinya tidak perlu lagi untuk mencari tahu dan memastikan ukuran gambar yang sebenarnya karena sudah diberi tahu ukuran dari gambar yang akan dirender melalui kode width dan height. Sehingga proses rendering untuk menampilkan gambar terkait akan lebih cepat dan google sudah memberitahu bahwa kecepatan loading mempengaruhi ranking di pencariannya.

Contoh:
<img src="GAMBAR.jpg" alt="NAMA GAMBAR" title="JUDUL GAMBAR" width="640px" height="250px"/>

3. Gunakan Compressing Gambar

Mode compress yang telah diketahui adalah lossless dan lossy. Anda wajib untuk mengkompress gambar sebelum diupload. Sehingga proses rendering gambar akan lebih cepat yang dapat membuat pengunjung lebih puas, berpengaruh pada rasio pemantulan dan berpengaruh pada SEO di ranking pencarian google. Sebetulnya google telah menggunakan format baru yaitu WebP untuk gambarnya dengan menggabungkan mode compress lossless dan lossy. Namun saya secara pribadi belum dapat mengkonversi format gambar menjadi .webp

Untuk website online yang saya gunakan untuk mengkompress format gambar .jpeg, .png atau .gif yaitu compressor.io karena menurut saya untuk sekarang ini situs tersebutlah yang paling banyak mengurangi tiap byte data dari gambar yang dikompres. Namun kekurangannya yaitu tidak multi tasking, yaitu satu per satu untuk dikompresnya.

4. Gunakan Nama File yang Sesuai dengan Gambar Terkait

Sebelum anda mengupload gambar, ada baiknya anda memberi nama file yang sesuai dengan gambar dan posting anda. Karena pada dasarnya nama file anda akan dijadikan alamat setelah diupload. Untuk nantinya gambar itu ditampilkan.

Contoh:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwetiZtsggcSKBC35Jv522scKg3VqwGpsZES6Vchc-IaB9Fxls2rinsS4gVLfe897N66IN_iiUMeRRsDtprsnU_PWCJkC9Pu-dmwP__nc7QJbuUV2V5E9BcZyyGFZ55peks9ZCAWVHpNNn/s1600/alt%2Bdan%2Btitle%2Bgambar.gif

Sekian dan semoga bermanfaat bagi sahabat blogger sekalian :).

Cara Membuat Scrollbar pada Blog


Cara Membuat Scrollbar pada Blog

Membuat scroll bar di halaman blog itu cukup berguna nampaknya. Tadinya banner-banner ataupun tulisan blog yang cukup panjang dapat memenuhi halaman. Tapi dengan menggunakan scroll bar, tulisan yang terlihat hanya beberapa saja, selanjutnya kita dapat menggeser naik dan turun scroll bar tersebut untuk melihat banner ataupun tulisan yang disembunyikan.




Berikut cara membuat scroll bar :

1. Login ke akun blog Anda --> pilih Layout

2. Pilih gadget yang mau dibuat scroll bar

3. Tambahkan script berikut di atas sendiri
<div id="scroll" style="border: 1px solid rgb(255, 255, 255); overflow: auto; width: 200px; height: 150px; background-color: rgb(255, 255, 255);">
(GADGET YANG DIBERI SCROLL)
</div>
4. Save

NB : untuk mengubah lebar dan panjang scroll bar, ubahlah angka px pada "width" dan "heigth".

Sekian.

Cara Memasang Related Post pada Blog

Artikel yang berkaitan atau related post merupakan sebuah cara untuk menampilkan link-link artikel yang berkaitan dengan artikel utama yang diposting.

Pemasangan fiture ini biasanya dikelompokkan berdasarkan label atau kategori. Jadi jika ada salah satu artikel dari label tertentu ditampilkan maka artikel-artikel lain yang mempunyai label sama juga akan ikut muncul dibawah artikel tersebut.

Tujuan pemasangan artikel yang berkaitan ini agar pengunjung mudah untuk membaca artikel yang berkaitan dengan artikel utama. Sehingga pengunjung tidak perlu repot lagi untuk mencari satu persatu artikel dalam menu label atau kategori.

Cara Memasang Related Post pada Blog 

Cara Memasang Related Post:

1. Pada dashboard Blogger. Pilih menu Template -> Edit HTML

2. Klik pada kotak Edit HTML dan cari (CTRL+F) kode:
<data:post.body/>
    Pilih kode yang ke-2 atau yang paling Akhir (biasa terjadi bila Anda pernah meng-edit HTML template)

3. Jika sudah ketemu, letakkan kode berikut ini dibawah <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>Baca juga artikel yang lain :</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>
Catatan : 
*Baca juga artikel yang lain : dapat Anda ganti sesuai keinginan Anda
*10: Jumlah posting yang akan tampil

Selamat mencoba.

Selasa, 08 Juni 2010

Cara Mengubah Replay Dota w3g.exe ke video


Membuat replay dota 1 w3g.exe ke video dengan format .avi, .flv, .mp4 atapun .mkv itu sangat mudah. Mungkin bagi kamu yang ingin video dotanya atau warcraft, dkknya tampil kedalam format video, tentu berpikir - pikir bagaimana membuatnya. y kan? Agar dapat tampil di youtube ataupun web lainnya. Pada dasarnya replay game dari warcraft adalah berformat w3g.exe dan itu hanya dapat ditonton menggunakan aplikasi warcraft tentunya dengan persayaratannya. 
Fraps

Tapi untuk menontonnya dalam format video itu ada caranya. Dan sangat mudah. Dan itu tidak menggunakan software converter apapun untuk mengubah format w3g.exe ke format video. Karena pada dasarnya itu tidak mungkin! Setahu pengalaman saya, belum ada software seperti itu. Karena mungkin Blizzard entertainment pencipta warcraft tidak membuatnya. Bagi Anda yang belum tau tentunya ingin tau kan?

Cara Mengubah Replay Dota 1 ke Video

#UPDATE
Software perekam video yang bagus untuk game sekarang adalah Bandicam (Free dengan watermark) dan Open broadcaster (Free).

Mengubahnya bukan menggunakan software converter w3g.exe ke video, melainkan menggunakan software PEREKAM (capture). Software tersebut adalah Fraps, Camtasia studio, dkk. Software tersebutlah yang perlu kamu gunakan.



Yang paling bagus adalah Fraps. Mengapa? Karena hanya fraps yang dapat merekam dengan jernih dan bagus. Sedangkan camtasia? Camtasia bisa juga merekam, namun hasilnya kurang memuaskan. Karena pada dasarnya camtasia cocok digunakan untuk merekam apa saja yang ada dilayar. Istilahnya apa yang kamu gerakkan dilayar (mouse, keyboard dan gerakan lainnya), tentunya akan terekam oleh camtasia. Bukan untuk game.



Kalo Fraps, sangat cocok untuk game. Fraps hanya dapat merekam jenis video saja. Hasilnya pun sangat bagus. Contohnya seperti video saya tentang Bug linken's sphere 6.66 dan 6.67. Tapi hanya jenis video yang akan direkam, layaknya replay dota, film, dll. Itulah kelebihan dan kelemahan antara Fraps dan Camtasia studio.



Menggunakan Fraps


Langkah 1. install fraps ---> Buka Aplikasinya ---> lalu buka replay dota kamu (nanti akan muncul angka pada pojok atas) --> Tekan key F9 dan jalankan replay dota. Setelah selesai, jangan lupa menekan F9 lagi untuk mengakhiri perekaman.

Langkah 2. View hasil rekaman video replay dota kamu di C:\ Fraps atau double klik ikon fraps pada taskbar yang sejajar dengan menu start ---> Movie ---> View

Download Fraps

Untuk mendownload Fraps silahkan anda cari di kickass.to atau google saja. Saya tidak dapat mengupload-nya dikarenakan materi tersebut memiliki hak cipta yang dapat mengganggu blog ini. Jadi saya mohon maaf. :)

Selamat Mencoba.

Jumat, 04 Juni 2010

Cara Membuat Label Blog


Cara membuat label itu sangat mudah. Mungkin bagi para blogger pemula yang tentunya masih belajar, belum tau apa itu label? Fungsi label?, dll. Label itu bisa berbentuk Tag cloud Blogumus ataupun Gadget tulisan. Untuk itu saya buat posting ini. Berikut caranya :

1. Sign in Blogger --> Posting --> Edit Entri atau Post

2. Lalu beri tanda Centang pada salah satu posting kamu yang ingin diberi label.
Cara Membuat Label Blog



3. Lalu klik menu drop down
 
dibagian atas kiri dan pilih Label baru --> Tulis nama label

4. Selesai.. Mudah bukan? winking


Rabu, 02 Juni 2010

Blogumus : Wpcumulus buat Blogger

Blogumus : Wpcumulus buat Blogger

Awalnya Wpcumulus dibuat oleh Roy Tanck untuk wordpress. widget ini merupakan tag cloud berbasis flash untuk label Blog Anda. Kalau Anda belum membuat label, maka tampilan pada widget ini tentunya akan kosong. Maka dari itu, Anda harus membuat label terlebih dahulu. Serta widget ini membutuhkan aplikasi Flash pada browser Anda. Apabila tidak, maka tentunya tidak akan muncul pada Blog Anda. Maka dari itu sebaiknya download adobe flash terbaru. Dan juga apabila JavaScript Anda tidak aktif, maka widget ini tidak akan muncul juga. Bagi Anda yang menggunakan Firefox, ada baiknya memberi pengecualian pada alamat Blog Anda.

Tampilan dari widget ini pun sangat menarik untuk dilihat apalagi bagi Anda yang ingin mempercantik Blog. Coba lihat pada sidebar Blog saya. Dan tentunya fitur ini hanya dapat digunakan oleh pengguna wordpress. Namun, Amanda dari Bloggerbuster berhasil membuat Tag Cloud wordpress ini ke dalam blogger dengan nama Blogumus.

Bagaimana Cara Memasangnya ?
Cara memasang Blogumus sangat mudah, Anda hanya perlu copy dan paste kode ke dalam templete blog Anda. Berikut caranya : Sign in blogger --> Layout --> Edit HTML, lalu cari kode dibawah ini atau YANG SERUPA :
<b:section class='sidebar' id='sidebar' preferred='yes'>
Setelah itu, copy kode di bawah ini dan paste dibawah kode yang Anda cari tadi :
<b:widget id='Label99' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/> <div id='flashcontent'>Widget is <a href='http://www.dewainside.blogspot.com/'>Blogumus</a></div> <script type='text/javascript'> var so = new SWFObject(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;); // uncomment next line to enable transparency //so.addParam(&quot;wmode&quot;, &quot;transparent&quot;); so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;); so.addVariable(&quot;mode&quot;, &quot;tags&quot;); so.addVariable(&quot;distr&quot;, &quot;true&quot;); so.addVariable(&quot;tspeed&quot;, &quot;100&quot;); so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;); so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;); so.write(&quot;flashcontent&quot;); </script> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

Lalu, Preview Blog Anda. Jika terinstal dengan benar, maka akan muncul Blogumus pada sidebar blog. Setelah itu, Save Templete.

Note : Kalau Anda ingin mengubah ukuran lebar, panjang, dkk. Rubah pada kode dibawah ini, TAPI Anda harus mengulang memasukkan kode HTML diatas :
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
Lebar (yang 240), Tinggi (yang 300), Warna (yang #ffffff)..

Selesai.. Selamat Mencoba..

Logo Pacman di Google Berharga $120,483,800

game pacman
 Saya sempat bermain minggu lalu sewaktu Google mengganti logonya dengan Game Pacman. Mungkin diantara Anda juga ada yang pernah memainkannya. Penggantian logo itu untuk memperingati berdirinnya game pacman yang sudah 30 tahun.

Dan ternyata Google Pacman tersebut digunakan seluruh dunia dan menghasilkan 4,819,352 jam per waktu atau senilai $120,483,800. Waw.. Angka yang sangat besar.


Perhitungan itu dihitung oleh google dengan menjumlahkan waktu dan pengunjung yang memainkannya. Dan ternyata memiliki hasil pengunjung yang lebih besar dibandingkan pengunjung website lainnya. Jumlah pengunjung tiap harinya adalah 503,703,000.
Dan rata – rata pengguna google meghasilkan $25 tiap jamnya bagi site tersebut. Itu lebih tinggi daripada pendapatan website lainnya di internet.

Jika kamu ingin memainkannya lagi walaupun Google telah merubah logonya, kamu hanya perlu googling karena sudah cukup banyak yang menyediakannya.


Sekian..