Cara Mengoptimasi Gambar Di Blog

Assalamualaikum Wr. Wb.

     Cara mengoptimasi gambar di blog sebenarnya cukup mudah. Optimasi ini bisa meningkatkan relevansi blog anda pada google, dan gambar yang anda buat bisa tampil bagus di google image. Jadi, rugi jika tidak mengoptimasi gambar. Ini juga termasuk dalam optimasi Onpage SEO. Untuk mengenal lebih dalam mengenai optimasi SEO, bisa anda baca: 2 Teknik SEO Search Engine Optimizatio.

     Untuk melakukannya silahkan ikuti langkah-langkah berikut :


  • Gunakan Nama Gambar Yang Sesusai Dengan Keyword
Jika nama gambar sesuai dengan keyword anda maka semakin mudah blog anda ditemukan oleh pengguna search engine. Lalu, bagaimana cara menggantinya ? Saat kalian mendownload atau mengunduh sebuah gambar, apa nama gambar tersebut ? Pastinya seperti image01, index, dll. Nah, jangan menggunakan nama tersebut, kalian harus menggantinya seperti contoh : tutorial blog, tips-seo dan yang lainnya.

  • Re-size Gambar Dengan Benar
Pada umumnya mere-size gambar ini berfungsi agar artikel blog kita terlihat rapi. Tapi, sebagian blogger termasuk saya, mere-size gambar di artikel menggunakan menu small, medium, large dan X-large yang terdapat di bawah gambar. Tetapi, cara tersebut justru membuat gambar tidak berkualitas. Lalu bagaimana caranya ? Sebaiknya crop atau kecilkan ukuran gambar terlebih dahulu sebelum diupload menggunakan photoshop atau editor foto lainnya.

  • Pasang Alt Text dan Title Pada Gambar 
Apa gunanya memasang ini ? Ini sangatlah penting, karena jika tidak memasang Alt Text dan Title, robot google akan kesulitan untuk meng-index gambar kita. Bagaimana cara memasangnya ? Kita lihat di bawah ini
  • Upload dulu gambar di artikel blog
  • Klik pada gambar
  • Klik properties
  • Lalu akan muncul sebagai berikut
klik gambar jika ingin melihat lebih jelas
cara optimasi gambar pada blog
  • Isi title text dan alt text sesuai dengan kata kunci yang anda targetkan.
     Setelah anda sudah mengoptimasi gambar, ada baiknya anda juga harus mengetahuk hal yang harus diperhatikan dalam optimasi gambar.

  • Ukuran Gambar.
Ukuran suatu gambar harus diperhatikan. Mengapa ?? karena pemakain ukuran gambar yang tepat sangatlah penting dalam menjaga loading halaman tetap ringan. Loading berat akan mempengaruhi pengunjung, tentu pengunjung akan merasa jengkel berada di halaman tersebut. Pastilah halaman anda mendapatkan posisi yang buruk, begitu juga gambar yang berada di halaman tersebut juga akan mendapat posisi yang buruk di Google Image.

Halaman yang berat juga dapat membuat bounce rate. kenapa demikian? karena jika ada pengunjung yang tidak suka dengan halaman anda karena berat dan kemudian pengunjung itu mencari blog lain. Maka bounce rate anda bertambah. Jadi, semakin banyak bounce rate maka semakin jelek blog anda di mata search engine.

Saya disini menyarankan kepada anda untuk memakai ukuran yang sedang, dan gunakan berbagai tools untuk mengcompress gambar tersebut tanpa mengurangi kualitasnya agar loading halam menjadi ringan.

  • Kualitas Gambar
Kualitas gambar juga menjadi prioritas Google Image untuk menempatkan suatu gambar dalam penilaiannya. Google memberikan data data kepada pembaca dari yang paling baik kualitasnya, sama hal nya dengan Google Image juga memberikan hasil pencarian dengan kualitas yang paling baik.

Buatlah gambar semenarik mungkin, ini bisa saja menjadi peluang sobat untuk menjaring visitor dari Google Image.

  • Memberikan Credit Gambar.
jika anda mengambil gambar dari situs penyedia gambar, maka sobat harus memberikan kredit kepada pencipta gambar tersebut. Dengan melakukan ini kita akan menghormati pencipta gambar dan anda akan berada di tempat yang aman setelah memberi credit pada gambar.

Saya katakan berada di tempat yang aman karena beberapa gambar memiliki hak cipta dan sobat bisa berada dalam kesulitan saat menggunakan gambar tersebut dalam konten blog sobat tanpa izin. Jadi hargailah mereka (pencipta gambar).

  • Relevansi Gambar Pada Konten.
Saya telah melihat banyak blogger yang menggunakan gambar tidak relevan dalam artikel. Sebagai contoh sobat membuat konten tentang Blogging Tips, tetapi memakai gambar "Doraemon" apakah relevan ??? TIDAK.
Jadi, pakailah gambar yang relevan !!!...

Terima kasih sudah datang berkunjung dan membaca artikel ini ^o^)~
 
Wassalamualaikum Wr. Wb.

Cara mengoptimasi gambar di blog?

Cara Membuat Artikel Terkait Vertikal Thumbnail

 Assalamualaikum Wr. Wb.

     Cara Membuat Artikel Terkait Vertikal Thumbnail amatlah gampang. Artikel berkenaan ini banyak dipakai untuk menolong blogger yang kesusahan lakukan interlink antar artikel. Faedah lain pemakaian artikel berkenaan ini yaitu membantu menambah pageview situs (blog) anda dengan terus tawarkan artikel-artikel yang lain ke pengunjung situs (blog).

Untuk bikin artikel berkenaan tampak dibagian bawah tulisan cukup kerjakan prosedur sederhana di bawah ini :
  • Masuk ke akun blogger anda
  • Masuk ke menu TEMPLATE, kemudian klik EDIT HTML
  • Cari kode </head>
  • Copy kode di bawah ini dan paste tepat di atas kode </head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related_posts{}
#related_posts h4{ border-top:1px solid #333;  border-bottom:1px solid #333;  color:#333;  font-size:14px;  letter-spacing:0;  line-height:20px;  margin:0 0 5px;  padding:5px 10px; background:#03C}
#relpost_img_sum{/* height:320px; overflow:auto; */margin:0; padding:0px; line-height:16px}
#relpost_img_sum:hover{background:none}
#relpost_img_sum ul{list-style-type:none; margin:0; padding:0}
#relpost_img_sum li{border:1px solid #ccc; background:#fff; margin:0 0 5px; padding:5px; height:65px; list-style:none}
#relpost_img_sum .news-title{display:block; font-weight:bold !important}
#relpost_img_sum .news-text{display:block; text-align:justify; font-weight:normal; text-transform:none; color:#333}
#relpost_img_sum img{float:left; margin-right:5px; padding:4px; border:solid 1px #ccc; width:50px; height:50px; background:#fff}
</style>
<script type='text/javascript'>//<![CDATA[
var relnum = 0;
var relmaxposts = 5;
var numchars = 150;
var morelink = "selengkapnya";

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a><17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnum|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxposts|li|span|text|split|join|relpostimgthum|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|relatpost|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]></script>
</b:if>
  • Cari kode <data:post.body/> 
  • Copy kode di bawah ini dan taruh tepat di bawah kode <data:post.body/> tadi
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts' style='margin-top:35px;'>
<h4 style='color:#ffffff; text-shadow:none; border-radius:5px; border:2px solid #ddd; background:#6fa8dc;'>Artikel Terkait</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<ul id='relpost_img_sum'>
<script type='text/javascript'>relatpost();</script>
</ul>
</div>
</b:if>
Hasil dari pemasangan kode ini akan terlihat seperti gambar di bawah ini:

Pertanyaan yang mungkin anda cari:
  1. Mengapa artikel terkait di blog saya tidak muncul?
  2. Apa artikel terkait muncul otomatis?
  3. Apakah kode ini bisa dipasang di widget?
  4. Apa ada artikel terkait selain kode ini?
Jawaban:
  1. Mungkin karena anda meletakkan kode salah, seperti <data:post.body/>, kode ini bisa lebih dari satu. Bagaimana cara mengatasi nya kalau begitu? anda tinggal meletakkan kode dibawah <data:post.body/> yang lain.
  2. Artikel terkait ini memang sudah otomatis memunculkan artikel yang label nya sama dengan artikel yang dibaca.
  3. Kode di atas bukan untuk widget, tapi untuk ditaruh di EDIT HTML, perhatikan tanda kutip tunggal yang digunakan dan bukan tanda kutip ganda...
  4. Artikel terkait banyak ragamnya, salah satu seperti ini. Jika kurang suka, anda bisa cari di google untuk mencari artikel terkati yang lain
Ok, mudah-mudahan bisa dimengerti. Semoga bermanfaat untuk anda. Dan terima kasih sudah datang berkunjung dan membaca artikel...

Cara Membuat Artikel Terkait Vertikal Thumbnail

Cara Memasang Like Facebook Di Postingan Versi 1



Assalamualaikum Wr. Wb.

     Hai ;) bertemu lagi :D pada kali ini saya akan membagi sebuah Tutorial Blog, yaitu Cara Memasang Like Facebook Di Postingan. Mau tahu caranya ? yuk ikuti langkah langkah berikut :

✔ Login Ke Blog Sobat
✔ Pergi Ke Template
✔ Edit HTML
✔ Lalu cari kode Kode <data:post.body/>
✔ Masukkan kode beriku tepat di atas (bila ingin di atas postingan) atau dibawah (bila ingin di bawah postingan) kode <data:post.body/>

Ctrl + C Untuk Meng Copy


✔ Simpan Template dan lihat hasilnya :)

     Sekian dulu dari saya :) kalo ada yang kurang jelas silahkan berkomentar :)

Wassalamualaikum Wr. Wb.

Cara Membuat Efek Harlem Shake pada Blog/Website

Assalamualaikum Wr. Wb.

     Setelah kemarin saya membagikan Tutorial Blog kepada Sobat Sekalian, kali ini saya juga membagikan Tutorial Blog yang gak kalah kerennya, yaitu Cara Membuat Efek Harlem Shake pada Blog/Website. Bagi sobat yang belum tau berikut saya perjelas.


Mengenai Video Harlem Shake

     Video Harlem Shake belakangan ini sangat marak dibicarakan, bahkan di internet dan youtube sudah tersebar ratusan Video Harlem Shake, dari rekaman orang di luar negeri bahkan di Indonesia yang tidak mau kalah. Saya sendiri sering melihat Harlem Shake Video yang lokal, kebanyakan video tersebut dibuat di sekolahan, kos-kosan, dsb. Sepintas video ini norak dan tidak berpendidikan, namun masih ada nilai seninya asalkan videonya tidak mengandung sara, menghina, pulgar, dan melanggar hukum.

     Tidak mau ketinggalan peminat anime atau kartun juga ikut-ikutan membuat Video Harlem Shake ini. Sepertinya gaya goyangan ini benar-benar akan populer seperti sebelumnya video Gangnam Style. Sobat putrakomputer.com bisa melihatnya dengan mudah. Hanya perlu ketikkan "Harlem Shake" di google ataupun di youtube akan banyak ditemukan videonya.

     Lalu, bagaimana dengan Harlem Shake for website ? Oke sobat berikut ini saya akan berikan panduan bagaimana membuat efek Harlem Shake pada blog/website. Efeknya akan terlihat seakan gambar-gambar, widget, dan tab-tab post akan bergoyang bagaikan menari ala Harlem Shake dan musik Harlem Shake akan terdengar di Handshet/Speaker sobat Hehe :)


Cara Membuat Efeknya :

Ingat! Tunggu beberapa saat setelah blog/website sobat dibuka, karena efeknya akan aktif setelah musiknya berjalan setengah :D Yaudah deh :v kalo minat yuk ikuti langkah-langkah barikut :
  • Klik Disini
  • Lalu pada kotak yang tersedia masukkan url website/blog yang ingin kita goyang seperti tarian harlem, sobat bisa coba dengan blognya sendiri ataupun web lain seperti facebook, twitter, dsb. nih SSnya : 


  • Setelah Kotak tsb diisi dengan blog/website, klik SHAKE IT. nih SSnya :


  • Tunggu beberapa saat, halaman website tersbut akan bergoyang ala harlem shake, serta musinya akan terdengar dengan  sendirinya.


     Sekian dulu dari saya yah Sob ;) semoga Tutor ini bisa membuat anda sedikit tersenyum ^o^)~

Wassalamualaikum Wr. Wb.
 
- ©2013 - 2016 Yogi Irhandi Simamora V.3 -