Kesalahan Fatal SEO (Search Engine Optimization)

Dunai SEO memang sangat menarik untuk dikaji, selain karena menantang, SEO merupakan teknik yang sangat misteri. Hal ini disebabkan tidak ada satu pun search engine (mesin pencari) yang membuka tentang teknologinya dalam mengindeks blog atau website yang ada didunia. Dunia SEO hampir bisa dikatakan sebagai dunia teka-teki, keberadaannya nyata namun entah bagaimana mereka bekerja. Kebanyakan master blogger melakukan research dengan teknik trial and error pada blogger atau website yang di kelolanya. SEO atau Search Engine Optimization adalah cara yang digunakan untuk mengoptimasi atau untuk meningkatkan kualitas website atau blogger dimata mesin pencari sehingga suatu situs atau website akan menempati peringkat pertama pada daftar pencarian (SERP=Search Engine Result Page) dengan kata kunci tertentu di berbagai mesin pencari.

Siapa pun pemilik website atau blogger berharap bahwa blog atau website yang dikelolanya menempati peringkat terbaik dimata mesin pencari apapun kata kunci yang digunakan dalam kategori tertentu. Namun hal ini sangat sulit diimplementasikan dan membutuhkan kesabaran, sehingga proses-proses yang dilakukan untuk mengoptimasi suatu blog atau website agar menempati peringkat terbaik pada mesin pencari adalah suatu perkara yang membutuhkan waktu tidak sebentar. Bahkan banyak blogger yang terjebak pada teknik Black Hat SEO atau teknik SEO dengan jalan pintas dan tidak jujur, hal ini justru merugikan blognya sendiri ketika suatu mesin pencari menemukan teknik-teknik licik untuk meningkatkan peringkat blog atau website bahkan kemungkinan terbesar blog atau website yang menerapkan teknik Black Hat SEO akan di hempaskan (dikeluarkan) dari daftar indeks mesin pencari. Keluarnya blog atau website dari daftar indeks mesin pencari sering dikenal dengan istilah Sandbox (Google Penalty).

Pada artikel kali ini Blogger Tune-Up tidak akan membahas apa itu Black Hat SEO maupun White Hat SEO, namun akan membahas beberapa kesalahan fatal yang sering dilakukan para blogger dalam penerapan SEO pada blog atau situs yang dikelolanya. Hal-hal dibawah ini harus dihindari agar kegiatan ngeblog anda tidak terganggu.

Kesalahan Fatal SEO

1. Keyword

Keyword yang salah target, bahkan hal ini tidak hanya terjadi pada para blogger, justru perusahan-perusahaan besar pun banyak melakukan kesalahan dalam hal keyword yang salah sasaran. Hal ini bisa terjadi karena kesalahan persepsi terhadap "kata kunci" yang sering digunakan oleh para pengguna mesin pencari. Misal kita menggunakan kata kunci "jQuery" pada blog yang kita kelola, padahal para pengguna mesin pencari tidak pernah menggunakan kata kunci tersebut sehingga sehebat apapun artikel yang ada pada blog tersebut, jelas mesin pencari tidak akan mengarahkan para penggunanya ke blog yang menggunakan kata kunci "jQuery". Agar kita tidak salah sasaran/target pengunjung, tidak ada salahnya kita menggunakan perangkat (tool) bantuan dalam menganalisis dan menemukan kata kunci (keyword) yang paling sering digunakan oleh para pengguna mesin pencari yang kira-kira cocok untuk blog yang kita kelola. Contoh tool gratisan yang bisa kita gunakan adalah Keyword Suggestions.

2. Meta Tag

Terlalu terfokus pada meta tag adalah kesalahan berikut yang sering dilakukan oleh para pengelola blog atau website. Para pemilik blog menghabiskan banyak waktu hanya untuk mengoptimisasi meta tag, padahal search engine memiliki teknologi baru dengan alogaritma dari crawler dan robot search engine yang sama sekali tidak melihat lagi meta tag sebagai acuan utama. Hal terpenting bagi blogger sekarang akan lebih baik jika memperkaya konten dari blog atau website yang dikelolanya hal ini untuk memberikan kesempatan lebih besar kepada search engine untuk melakukan indeks blog dari kata kunci yang tersedia banyak pada konten.

3. Blog Gratis

Inilah kelemahan alami para blogger gratisan. Sebenarnya bukan kesalahan fatal namun kesempatan dan kemauan yang sulit terealisasi. Siapapun pasti ingin memiliki/menyewa hosting sendiri dalam kegiatan blog-nya. Namun terkadang keadaan memaksa kita untuk memanfaatkan yang tersedia. Hal ini harus kita akui sebagai para pengguna blog gratisan termasuk diakui oleh Blogger Tune-Up bahwa kelemahan menggunakan blog gratisan adalah sulit meningkatkan kualitas SEO. Bahkan Blogger Tune-Up menemukan hal yang sangat menyedihkan ketika beberapa artikel asli justru diakui oleh blogger lain yang menggunakan layanan hosting sendiri dan lebih menyedihkan lagi ketika menggunakan kata kunci tersebut justru blog bajakan yang nangkring di posisi pertama. Namun Blogger Tune-Up yakin, dengan kualitas artikel yang selalu original dan murni hasil pemikiran akan menggeser dominasi blogger hosting berbayar yang ternyata hasil plagiat. (Ayo kita buktikan!!!)

4. Backlink

Backlink bagaikan dua sisi mata uang, ada sisi yang menguntungkan namun ada sisi lain juga yang merugikan. Backlink yang baik itu berasal dari blog, website atau forum dengan kategori dan konten yang sama/mirip dengan konten dari blog yang kita kelola. Kesalahan para blogger dalam meraih backlink salah satunya dengan bertukaran link dengan blogger lain tanpa memperhatikan materi yang di buat oleh blogger lain. Seandainya satu materi dengan blog kita merupakan keuntungan bagi blog kita, namun jika berbeda materi itulah yang merugikan, karena terlalu banyak backlink yang berasal dari blog yang berbeda materi sering menjadikan backlink tersebut sebagai spamming backlink. Terlalu banyak spamming backlink akan membuat blog kita di banned oleh mesin perncari, maka berhati-hatilah dalam backlink, dan akan lebih baik melakukan pertukaran link itu dalam suatu konten atau artikel, misal dengan saling membahas suatu materi yang saling terkait. Satu blog membahas suatu materi yang ada pada blog lain dan blog yang dimaksud juga melakukan pembahasan materi unik lainnya dari blog sahabatnya. Itu hal terbaik dalam teknik backlink.

5. Image (Gambar)

Gambar merupakan bagian untuk memperkaya konten blog, namun kesalahan yang sering dilakukan yaitu tanpa memberi keterangan pada gambar, sehingga search engine tidak menemukan apa-apa dan tidak dapat mengkaitkan gambar dengan konten artikel. Ini merupakan salah satu kerugian bagi para pemilik blog, gambar tanpa keterangan kurang bermakna bagi konten dan lebih baik kita memberikan keterangan pada gambar yang berfungsi sebagai pelengkap konten blog. Keterangan gambar bisa diberikan dibawah atau diatas gambar, atau memberikan keterangan gambar melalui tag alt, tag title atau dengan memanfaatkan kedua tag tersebut.

6. URL

Nah, ini merupakan kesalahan lainnya yang sering dilakukan oleh para blogger. Pernahkah kita mencoba menggunakan kata kunci tertentu pada mesin pencari dan mesin pencari menampilkan URL dari kata kunci yang kamu masukan? Jika pernah mencoba namun keyword yang kita gunakan tidak menampilkan URL yang menuju blog anda, itu menunjukan bahwa URL yang kita sertakan pada blog tidak mengandung keyword dan itu berarti ini kerugian lagi bagi pemilik blog. Gunakan tag title atau tag alt untuk memasukan keyword pada URL yang kita sertakan pada blog kita, hal ini bisa merupakan bagian dari SEO.

Selamat mengkaji kembali blog yang kita kelola, dan jadilan blogger yang mampu menganalisis SEO dengan baik tanpa kesalahan-kesalahan lagi seperti yang disebutkan diatas. Jika mempunyai masukan lain, silahkan tinggalkan pada komentar. Selamat mencoba dan semoga berhasil. Happy Blogging :)

Bisnis Blogging SEO

Artikel Terkait dengan Gambar Mini dan Ringkasan

Alhamdulillah. Widget artikel terkait yang dilengkapi gambar mini (thumbnail image) dan ringkasan artikel (summary content) telah selesai dibuat, mungkin jika di tulis dalam bahasa Inggris menjadi Related Post with Thumbnail Image and Summary Content. Diantara artikel terkait yang pernah Blogger Tune-Up tulis dan coba, versi ini merupakan versi yang sangat menguras waktu, selain tingkat kerumitannya yang cukup tinggi juga kurangnya pengetahuan penulis tentang bahasa JSON Feed sehingga proses penulisan script cukup dan bahkan memakan waktu yang sangat lama. Dari sisi tampilan dan kelengkapan, versi ini sangat berbeda jauh dengan yang lainnya dan bahkan boleh dikatakan memiliki fitur yang sama persis dengan yang dikembangkan oleh para pengguna Wordpress. Versi ini masih menggunakan inti JSON Feed dan merupakan gabungan dari Membuat Artikel Terkait (Versi 3.0) dan jQuery News Ticker Recent Post Plus Thumbnails. Namun untuk versi Related Post Ticker with Thumbnail and Summary akan dituliskan dalam artikel terpisah, hal ini untuk mempermudah pemahaman, penerapan dan penggunaannya, juga untuk mengurangi kesalahan penerapan pada template blogger.

Demo Related Post Thumbnail and Summary

Fasilitas Artikel Terkait dengan Gambar Mini dan Ringkasan Artikel

Artikel terkait dengan fasilitas gambar mini dan ringkasan artikel (Related Post with Thumbnail Image and Summary Content) ini memiliki beberapa kelengkapan yang sangat menarik diantaranya:

• Menggunakan bahasa JSON Feed turunan JavaScript
• Mampu menampilkan gambar yang diambil gambar yang diupload pada artikel
• Jika artikel tidak mengandung gambar maka gambar akan digantikan dengan gambar default yang sudah dituliskan pada script
• Mampu menampilkan ringkasan artikel sehingga mempermudah para pengunjung untuk menemukan artikel terkait yang dibutuhkan
• Artikel terkait ini kedepannya akan dikembangkan dalam versi Ticker dan versi Accordion yang tentunya menggunakan sentuhan animasi jQuery
• Lebih ringan karena versi ini hanya akan diload pada saat artikel yang dituju sedang dibuka, sedangkan pada saat membuka halaman utama script ini tidak akan diload
• Konfigurasinya sangat mudah
• Blog lebih tampak profesional

Integrasi Artikel Terkait dengan Gambar Mini dan Ringkasan Artikel

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cheklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:

</head>

Langkah 5
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 4:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related_posts h4 {
background: none repeat scroll 0 0 #333;
color: #FFF;
font-family: Arial,Tahoma,Verdana;
font-size: 11px;
font-weight: bold;
margin: 0;
padding: 2px 5px 1px 8px;
text-shadow: 1px 1px #000000;
text-transform: uppercase;
}
#relpost_img_sum {
/* height: 320px;
overflow: auto; */
margin: 0;
padding: 4px;
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 #DDD;
margin: 0;
padding: 5px;
height: 65px;
list-style: none;
}
#relpost_img_sum li:hover {
background-color: #E6E6E6;
}
#relpost_img_sum a {
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#relpost_img_sum .news-title {
display: block;
font-weight: bold !important;
margin-bottom: 4px;
}
#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: 14px;
padding: 4px;
border: solid 1px #DDD;
width: 55px;
height: 55px;
}
</style>
<script type='text/javascript'>//<![CDATA[
var relnojudul = 0;
var relmaxtampil = 10;
var numchars = 200;
var morelink = "readmore";
/*
Related Post with Thumbnail & Summary 1.0 (May 02, 2011)
copyright (c) 2011 Hendriono from http://modification-blog.blogspot.com/
*/
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|relnojudul|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|relmaxtampil|li|span|text|split|join|relpostimgcuplik|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|artikelterkait|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]></script>
</b:if>

Langkah 6
Cari kode dibawah ini (rekomendasi) :

<div class='post-footer-line post-footer-line-3'/>

atau kode dibawah ini (alternatif) :

<data:post.body/>

Langkah 7
Ubah kode pada langkah 6 (jika menggunakan kode rekomendasi) menjadi seperti dibawah ini:

<div class='post-footer-line post-footer-line-3'>
<!-- Untuk kode artikel terkait -->
</div>

Langkah 8
Masukan (copy paste) kode dibawah ini menggantikan kode <!-- Untuk kode artikel terkait --> pada langkah 7:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts'>
<h4>Related Posts</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=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<a href='http://modification-blog.blogspot.com/' style='display:none;'>Related Posts with thumbnails and summary post for blogger</a>
<ul id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</ul>
</div>
</b:if>

Jika anda menggunakan kode alternatif (lihat langkah 6), masukan (copy paste) kode diatas, dibawah kode <data:post.body/>.
Langkah 9
Simpan template blogger
Langkah 10
Preview blog anda...

Keterangan:

• var relnojudul = 0; ubah nilai 0 jika ingin menampilkan jumlah artikel yang terkait dalam setiap kategori, nilai 0 artinya artikel dalam kategori tertentu akan ditampilkan semua (direkomendasikan tetap bernilai 0 karena dalam beberapa kasus, jika kita ubah nilainya maka artikel terkait akan menampilkan keterangan "undefined". Hal ini bisa terjadi jika ada artikel dalam kategori tertentu yang hanya terdiri dari 1 artikel)
• var relmaxtampil = 10; ubah nilai 10 untuk menentukan jumlah artikel yang terkait sesuai kategori
• var numchars = 200; ubah nilai 200 untuk menentukan jumlah karakter yang akan ditampilkan pada ringkasan artikel. Karakter termasuk spasi dan tanda baca
• var morelink = "readmore"; ubah kata readmore sesuai dengan keterangan link akhir ringkasan artikel yang akan menuju pada artikel yang dimaksud pada saat di klik

Tunggu artikel terkait dengan tampilan yang lebih menarik dan animasi cantik pada artikel mendatang. Selamat mencoba dan semoga berhasil. Happy Blogging :)

Bloghack Widget

Perpustakaan jQuery pada Blogger

Sebenarnya artikel tentang perpustakaan jQuery pernah dibahas lengkap pada beberapa artikel Blogger Tune-Up, namun entah karena arsipnya sudah lama atau karena malas menjelajah Blogger Tune-Up sehingga masih ditemukan beberapa kesalahan-kesalahan dan kekurang telitian para blogger dalam menggunakan perpustakaan jQuery. Perpustakaan jQuery di sebut juga jQuery Library, jQuery Framework atau sering di sebut jQuery saja.

Apa sebenarnya jQuery?

jQuery adalah sebuah perpustakaan JavaScript lintas-browser (cross-browser JavaScript library) yang dirancang untuk menyederhanakan client-side scripting dari HTML. jQuery Versi 1.0 dirilis pada bulan Januari 2006 di BarCamp NYC oleh John Resig. Perpustakaan jQuery telah digunakan oleh lebih dari 43% dari 10.000 website yang paling sering dikunjungi, jQuery adalah pustaka JavaScript yang paling populer dan paling banyak digunakan saat ini.
jQuery dapat digunakan secara bebas karena merupakan bagian dari perangkat lunak sumber terbuka (open source software), memiliki dual-lisensi yaitu di bawah MIT License dan GNU General Public License. Sintak-sintak jQuery Versi 2 dirancang lebih mudah untuk menangani navigasi dokumen, memilih elemen DOM, membuat animasi, menangani event, dan pengembangan aplikasi Ajax. jQuery juga menyediakan kemampuan bagi pengembang untuk membuat plugin di atas perpustakaan JavaScript. Dengan disediakannya fasilitas ini, pengembang dapat menciptakan abstraksi interaksi untuk tingkat rendah (low-level interaction) dan animasi, efek canggih dan tingkat tinggi (high-level), tema-widget. Hal ini memberikan kontribusi untuk penciptaan halaman web yang hebat dan dinamis.
Microsoft dan Nokia telah mengumumkan rencananya untuk membundel jQuery di dalam platform mereka, Microsoft mengadopsinya lebih awal dalam bahasa pemrograman Visual Studio untuk digunakan dalam kerangka kerja Microsoft AJAX ASP.NET dan ASP.NET MVC Framework sementara Nokia telah mengintegrasikannya ke dalam platform pengembangan widget Web Run -Time mereka. jQuery juga telah digunakan pada MediaWiki sejak versi 1.16.

Artikel Perpustakaan jQuery

Blogger Tune-Up pernah membahas jQuery ini dalam beberapa artikel terdahulu. Dibawah ini arsip artikel yang berhubungan dengan Perpustakaan jQuery dan lebih baik anda membaca artikel-artikel dibawah ini dengan seksama supaya lebih mudah untuk memahami jQuery.

• Mempercepat Pemuatan Perpustakaan JavaScript
• Memahami dan Mengatasi Konflik Script jQuery
• Manajemen Script jQuery
• Percepat Script jQuery

Pemasangan Perpustakaan jQuery pada Blogger

Dibawah ini akan dijelaskan kembali beberapa cara untuk melengkapi Blogger dengan perpustakaan jQuery dan silahkan gunakan salah satu cara yang dianggap paling mudah untuk diterapkan.

Cara I - Memanfaatkan Perpustakaan jQuery pada CDN

Karena kehebatan jQuery yang mampu mengubah suatu website menjadi lebih dinamis dan canggih ini membuat beberapa perusahaan terkenal rela menjadi CDN Perpustakaan jQuery. CDN adalah kepanjangan dari content delivery network atau content distribution network yaitu sebuah sistem komputer yang memiliki salinan data yang sama dengan aslinya. Data salinan ini ditempatkan di berbagai titik tempat pada suatu jaringan untuk memaksimalkan bandwidth dalam mengakses keseluruhan data jaringan klien. Dibawah ini beberapa perustakaan jQuery pada CDN yang dapat kita gunakan untuk kita gunakan pada blog kita:

CDN - Google Ajax API
Perpustakaan jQuery dibawah ini terdapat pada server Google dan sangat direkomendasikan menggunakan CDN ini.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'/>

CDN - Microsoft
Perpustakaan jQuery dibawah ini terdapat pada server Microsoft, CDN ini dapat digunakan sebagai alternatif.

<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js' type='text/javascript'/>

CDN - jQuery
Perpustakaan jQuery dibawah ini terdapat pada server jQuery itu sendiri, CDN ini sangat tidak direkomendasikan.

<script src='http://code.jquery.com/jquery-1.5.2.min.js.' type='text/javascript'/>

Cara II - Memanfaatkan Google API Load

Selain menggunakan Cara I, dibawah ini merupakan cara lain yang merupakan teknik cara cepat untuk memanggil perpustakaan jQuery. Cara ini dibagi menjadi 2 bagian yaitu tanpa menggunakan API Key dan yang menggunakan API key.

(1) Tanpa API Key
Cara dibawah ini tanpa menggunakan API Key:

<script src='https://www.google.com/jsapi' type='text/javascript'/>
<script language='Javascript' type='text/javascript'>//<![CDATA[
google.load("jquery", "1.5.2");
//]]></script>

(2) Menggunakan API Key

Cara dibawah ini menggunakan API Key, dan cara ini direkomendasikan untuk digunakan. Karena API Key merukapan identitas unik dari suatu website sehingga Google API akan dengan mudah untuk mengidentifikasi perpustakaan apa saja yang digunakan dan akan memilihkan cara tercepat untuk mengidentifikasi perpustakaan-perpustakaan yang digunakan. Untuk mendapatkan API Key blog anda silahkan klik link ini. Setelah mendapatkan API Key, ganti XXXX pada script dibawah ini.

<script src='https://www.google.com/jsapi?key=XXXX' type='text/javascript'/>
<script language='Javascript' type='text/javascript'>//<![CDATA[
google.load("jquery", "1.5.2");
//]]></script>

Cara III - Memanfaatkan Google API AutoLoad

Cara III ini diklaim sebagai cara yang paling cepat untuk memanggil perpustakaan jQuery. Cara III ini dibagi lagi menjadi 3 teknik, silahkan pilih salah satunya saja.

(1) Tanpa API Key
Cara dibawah ini tanpa menggunakan API Key namun lebih cepat dibanding cara II (1)

<script src="http://www.google.com/jsapi?autoload={"modules" : [{"name" : "jquery","version" : "1.5.2"}]}" type="text/javascript"/>

(2) Menggunakan API Key

Cara dibawah ini mengguankan API Key dan pemanggilan perpustakaan jQuery lebih cepat dari cara diatas. Klik link ini untuk mendapatkan API Key blog anda dan ubah XXXX sesuai dengan API Key yang anda dapatkan sesuai dengan blog yang anda daftarkan.

<script src="http://www.google.com/jsapi?autoload={"modules" : [{"name" : "jquery","version" : "1.5.2"}]}&amp;key=XXXX" type="text/javascript"/>

(3) Menggunakan URL Encoder

Cara yang terakhir ini adalah cara yang paling rumit namun merupakan cara yang paling cepat untuk memanggil perpustakaan jQuery dibanding semua cara diatas.
Kode dibawah ini adalah kode asli yang digunakan untuk memanggil perpustakaan jQuery (perhatikan Cara III - 2 diatas)

{"modules" : [{"name" : "jquery","version" : "1.5.2"}]}

Kemudian kode tersebut di Encode untuk memudahkan dan mempercepat browser dalam membaca dan memanggil perpustakaan jQuery. Gunakan URL DEncoder buatan Blogger Tune-Up untuk meng-encode kode diatas, sehingga akan dihasilkan kode hasil encode seperti dibawah ini:

%7B%22modules%22%20%3A%20%5B%7B%22name%22%20%3A%20%22jquery%22%2C%22version%22%20%3A%20%221.5.2%22%7D%5D%7D

Setelah dilakukan encode pada kode diatas, gabungkan kode sehingga menjadi seperti dibawah ini:

<script src="https://www.google.com/jsapi?autoload=%7B%22modules%22%20%3A%20%5B%7B%22name%22%20%3A%20%22jquery%22%2C%22version%22%20%3A%20%221.5.2%22%7D%5D%7D&amp;key=XXXX"/>

Klik link ini untuk mendapatkan API Key yang sesuai dengan blog anda dan ubah XXXX pada kode diatas.

Ketentuan Memasang Perpustakaan jQuery

Dibawah ini beberapa ketentuan yang harus diperhatikan oleh para blogger agar kesalahan-kesalahan menggunakan jQuery tidak menjadi beban blog anda.

• Pilihlah salah satu cara pemasangan perpustakaan jQuery pada blogger
• Sebaiknya perpustakaan jQuery diletakan pada template blog diantara tag <head> dan tag </body>
• Setiap blog atau web sebaiknya hanya memasang satu perpustakaan jQuery, jadi jika kita pernah memasang perpustakan jQuery maka tidak perlu lagi memasang perpustakaan jQuery lagi walau dalam suatu tips trik di sertakan perpustakaan jQuery, sebaiknya anda membuang perpustakaan jQuery tersebut tanpa mengikut sertakannya jika anda pernah memasang sebelumnya.
• Hindarilah memasang perpustakaan jQuery berulang-ulang karena hal tersebut akan membuat ukuran blog menjadi lebih besar dan load halaman menjadi lebih lambat.

Google API Key

URL DEncoder

Selamat mencoba dan semoga berhasil. Happy Blogging :) Write Less, Do More

jQuery Tips Trik

Animasi CD/DVD Promosi dengan CSS 3

CSS atau Cascading Style Sheet telah mengalami perkembangan yang semakin hari semakin menakjubkan. Animasi yang sebelumnya di dominasi oleh file-file flash sekarang sudah mulai ditinggalkan dan para profesional desainer web beralih pada penggunaan jQuery dan CSS 3 sebagai animasi pada tampilan website yang dibuatnya. Selain ukuran file lebih kecil sehingga waktu load halaman lebih cepat juga proses penulisan script yang semakin hari semakin sederhana namun tanpa berpengaruh pada hasil akhir yang tetap menakjubkan. Bagi para pemula yang baru saja berkecimpung di dunia web desain mungkin agak sulit untuk membedakan mana animasi yang dihasilkan dari flash dan mana animasi yang dihasilkan dari jQuery atau CSS 3.

Pada artikel kali ini Blogger Tune-Up tidak akan menyuguhkan animasi menggunakan jQuery tetapi kita akan mengeksplorasi kekuatan CSS 3 dalam menciptakan dan menampilkan animasi pada website. Walaupun hanya menggunakan CSS 3 namun hasilnya sangat menawan dan menarik perhatian sehingga tampilan website akan tampak lebih dinamis dan hidup. Bagaimana animasi CD/DVD promosi ini bekerja? Ketika kita mengarahkan pointer mouse pada cover CD/DVD maka cover akan bergerak kesamping agak miring beberapa derajat. Sedangkan kepingan cakram CD/DVD akan berputar keluar dari cover-nya. Ketika kita menggeser pointer mouse keluar dari cover CD/DVD maka cover akan kembali pada posisi semula. Sedangkan kepingan cakram CD/DVD akan berputar dan masuk kedalam cover-nya.
Penasaran ingin mencoba? Lihat demonya pada link dibawah ini dan rasakan kekuatan animasi yang dihasilkan walaupun hanya menggunakan CSS 3.

Demo Animasi CD/DVD Promosi

Integrasi kode CSS 3 pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:

div.dvd-promo {
width : 940px;
margin : 0 auto 3em auto;
}
div.dvd-promo:after {
content : "\0020";
display : block;
height : 0;
clear : both;
visibility : hidden;
overflow : hidden;
}
div#dvd-promo-wadah {
position : relative;
float : left;
width : 240px;
margin-right : 60px;
padding : 320px 0 1.5em 0;
}
div.dvd-promo img[alt*="Cover"] {
z-index : 2;
position: absolute;
top : 0;
left : 0;
}
div.dvd-promo img[alt*="Disc"] {
z-index : 1;
position: absolute;
top : 70px;
left : 85px;
}
div.dvd-promo a:hover img[alt*="Cover"] {
-moz-transform : rotate(-1deg);
-moz-transform-origin : 50% 100%;
-o-transform : rotate(-1deg);
-o-transform-origin : 50% 100%;
-webkit-transform : rotate(-1deg);
-webkit-transform-origin : 50% 100%;
transform : rotate(-1deg);
transform-origin : 50% 100%;
}
div.dvd-promo a:hover img[alt*="Disc"] {
-moz-transform : translate(40px,0) rotate(300deg);
-o-transform : translate(40px,0) rotate(300deg);
-webkit-transform : translate(40px,0) rotate(300deg);
transform : translate(40px,0) rotate(300deg);
}
div.dvd-promo img[alt*="Cover"], div.dvd-promo img[alt*="Disc"] {
-moz-transition : all .5s ease-in-out;
-o-transition : all .5s ease-in-out;
-webkit-transition : all .5s ease-in-out;
transition : all .5s ease-in-out;
}

Langkah 5
Simpan template dan lanjutkan...

Memasang Animasi CD/DVD Promosi pada Blogger

Langkah 6
Masuk ke "Rancangan - Elemen Laman"
Langkah 7
Tambahkan sebuah widget dengan jenis HTML/JavaScript
Langkah 8
Masukkan (copy paste) kode dibawah ini pada bagian konten pada widget

<div class="dvd-promo">
<!-- awal bagian -->
<div id="dvd-promo-wadah">
<a href="http://modification-blog.blogspot.com">
<img src="http://hosinganda.com/dvd_cover_promo.png" alt="DVD Cover">
<img src="http://hosinganda.com/dvd_disc_promo.png" alt="DVD Disc">
</a>
</div>
<!-- akhir bagian -->
</div>

Langkah 9
Simpan widget dan preview blog anda

Unduh Animasi CD/DVD Promosi

Keterangan:

• Unduh seluruh source code Animasi CD/DVD Promosi dengan CSS 3 pada link diatas
• Ubahlah URL http://modification-blog.blogspot.com sesuai dengan alamat yang anda maksud
• Buatlah sendiri gambar yang anda perlukan dan upload-lah pada situs file hosting anda kemudian gantilah http://hosinganda.com/dvd_cover_promo.png (lihat langkah 8) sesuai dengan alamat URL pada file hosting
• Perhatingkan kode yang diblok pada langkah 8, Cover dan Disc pada tag alt harus selalu tersedia, karena tag ini terkait dengan kode CSS yang ada pada langkah 4 dan digunakan untuk memberikan animasi pada DVD Cover dan DVD Disc
• Jika anda ingin menambahkan jumlah CD/DVD Cover Disc lainnya silahkan tambahkan kode yang diapit tag <!-- awal bagian --> sampai dengan tag <!-- akhir bagian --> namun semua kode penambahan ini harus berada didalam tag <div class="dvd-promo"> dan </div> paling akhir

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Bloghack Tips Trik Widget

Mohon Bantuan - Akun Facebook di Palsukan

Entah apa maksud orang ini sehingga melakukan pemalsuan akun. Mungkin karena saya punya salah dimasa lalu atau mungkin bentuk sentimen pribadi saja, yang jelas orang tersebut telah melakukan tidakan yang tidak menyenangkan kepada saya. Untuk itu kepada teman-teman blogger, mohon bantuannya untuk memblok dan melaporkan akun palsu facebook Dede Hendriono.

Beberapa alasan kuat bahwa akun tersebut duplikat dan memalsukan akun saya yang asli adalah sebagai berikut:

• Foto profile yang digunakan merupakan foto lama
• Foto profile yang digunakan merupakan foto asli dan saya tidak pernah mengunggah foto yang asli pada akun apapun
• Akun tersebut memiliki identitas yang sama dengan keadaan saya sekarang
• Pada saat artikel ini dibuat akun tersebut baru selesai dibuat

Untuk itu saya berharap bantuan teman-teman blogger untuk melaporkan akun ini bahwa akun tersebut adalah palsu dan merupakan tindakan tidak menyenangkan. Berikut dibawah ini cara untuk melaporkan bahwa akun tersebut palsu atau sahabat blogger bisa menggunakan cara yang lain yang dirasa lebih enak untuk melaporkan.

Ini link akun asli Dede Hendriono :

Akun Asli Dede Hendriono

Ini link akun palsu Dede Hendriono :

Akun Palsu Dede Hendriono

Atas segala peduli, partisipasi, apresiasi dan bantuannya saya mengucapkan banyak terima kasih.

Banjarsari, 16 April 2011

Dede Hendriono

Basic

jQuery Image Hover Fade Effect

Bismillah. Tips trik jQuery kali ini digunakan untuk memberikan sentuhan lembut memudar pada gambar blog. Ketika halaman blog dipanggil (load) maka semua gambar pada blog akan tampak memudar (fade). Dan ketika pointer mouse berada diatas (hover) gambar pada blog maka gambar akan ditampilkan dengan jelas namun ketika pointer mouse meninggalkan (mouse out) gambar maka gambar akan kembali memudar. Demikian penjelasan pintas tentang jQuery Image Hover Fade Effect...

Demo jQuery Image Hover Fade Effect

Integrasi jQuery Image Hover Fade Effect pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

</head>

Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('slow', 0.5);
$('img').hover(function() {
$(this).fadeTo('slow', 1.0);
}, function() {
$(this).fadeTo('slow', 0.5);
});
});
</script>

Langkah 5
Simpan template dan preview blog anda, kemudian perhatikan gambar-gambar memudar yang ada pada blog

Memahami Script Code jQuery Image Hover Fade Effect

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>

Kode diatas untuk memanggil framework jQuery, jika anda pernah memasangnya, maka kode ini tidak perlu diikutsertakan.

<script type='text/javascript'>

Script identitas bahwa selanjutnya dikenali sebagai JavaScript

$(document).ready(function() {

Fungsi script jQuery telah siap di-load

$('img').fadeTo('slow', 0.5);

Efek fade sebagai efek default (opacity 0.5) pada semua gambar dengan tag img pada seluruh halaman yang di-load

$('img').hover(function() {

Ketika mouse pointer berada di atas gambar (hover) maka...

$(this).fadeTo('slow', 1.0);

Gambar dengan tag img akan diperjelas hingga 1.0

}, function() {

Jika mouse pointer meninggalkan gambar maka...

$(this).fadeTo('slow', 0.5);

Gambar dengan tag img akan memudar (opacity 0.5) lagi.

});
});

Fungsi script jQuery dihentikan

</script>

Fungsi JavaScript di tutup

Unduh Script Code jQuery Image Hover Fade Effect

Demikianlah integrasi jQuery Image Hover Fade Effect pada blogger template. Selamat mencoba dan semoga berhasil. Happy Blogging :)

jQuery

5 Pratinjau Dinamis Baru dari Blogger

Hebat!!! Itulah komentar yang terucap spontan saat melihat 5 tampilan dinamis yang dipersembahkan oleh Blogger. Tepat tanggal 31 Maret 2011 Blogger memperkenalkan prantinjau baru untuk template Blogger yang sedang direncanakan, dengan harapan para pengguna Blogger akan terbiasa dengan tampilan yang masih dalam pengembangan tersebut. 5 pratinjau tampilan Blogger ini menggunakan teknologi web terbaru termasuk didalamnya Ajax, HTML 5, dan CSS 3.

Sekarang Blogger mengejutkan penggunanya dengan pratinjau dan fasilitas baru diantaranya:

• Infinite scrolling; fasilitas ini memberikan kemudahan kepada para pemilik blog dan para pengunjung dengan tampilan satu halaman yang tersusun rapi disertai efek yang lembut, sehingga kita tidak perlu memanggil (load) halaman baru ketika ingin membaca suatu artikel. Cukup klik halaman yang akan dibaca maka slide halaman akan segera muncul dengan cepat tanpa reload.
• Layout baru; penampilan yang sangat menarik dan berbeda dari sebelumnya, lebih terkesan futuristik dan canggih sehingga cocok untuk berbagai tipe blog.
• Kecepatan; menampilkan gambar hanya ketika kita melihatnya, tanpa ditampilkan semua dihalaman muka. Teknik jitu mengakali bandwitdh yang rendah, sehingga bagi blogger yang memiliki koneksi internet lambat hal ini sangat menguntungkan. Gambar tidak semuanya didownload dari server pada saat awal membuka halaman dan gambar ditampilkan hanya ketika browser diarahkan ke gambar tersebut. Brilian!!!
• Interakitivitas; banyak cara sekarang untuk bisa merasakan dan melibatkan konten blog. Lebih mudah, lebih cepat, lebih menarik, lebih canggih dan semua kemudahan ini didapatkan dengan gratis.
• Keyboard Shortcut; ini memudahkan para pengunjung dalam memperlakukan halaman yang sedang dibaca. Kombinasi tombol yang digunakan adalah; J untuk posting lama, K untuk posting baru, dan Escape untuk kembali ke halaman utama.

Video Blogger Dynamics View

Silahkan klik pada salah satu link ini untuk menikmati pratinjau baru dan rasakan kecanggihannya baik dari sisi kecepatan, tampilan dan efek-efek yang dihasilkan dari penampilan blogger baru. Inilah hasil dari pratinjau dinamis baru Blogger :

Pratinjau Dinamis Flipcard

Pratinjau Dinamis Mosaic

Pratinjau Dinamis Sidebar

Pratinjau Dinamis Snapshot

Pratinjau Dinamis Timeslide

Pratinjau Dinamis Blogger Jenis Flipcard

Cara memperlakukan halaman flipcard:

• Arahkan mouse salah satu kartu untuk melihat judul posting dan jumlah komentar. Ketika kita menggulung layar kebawah, posting tambahan akan terus di-load.
• Klik kartu untuk melihat posting di tampilan penuh. Anda dapat menggunakan navigasi pada halaman posting menggunakan J (posting lama) dan K (posting baru) atau tombol panah. Tombol Escape atau klik Back to all posts untuk kembali ke halaman utama Flipcard.
• Pada kiri atas, klik untuk mengurutkannya menurut Tanggal, Penulis dan Kategori.

Pratinjau Dinamis Blogger Jenis Mosaic

Cara memperlakukan halaman mosaic:

• Klik pada salah satu ubin maka halaman akan ditampulkan penuh, dan klik halaman posting maka halaman akan kembali ke posisi semula.
• Posisi ubin ditentukan secara acak setiap kali halaman blog dipanggil, tetapi tampilan akan muncul secara kronologis dari kiri atas ke kanan bawah.
• Setelah posting ditampilan secara penuh, kita dapat berpindah halaman dengan menggunakan tombol panah kiri dan kanan serta J dan K.
• Tampilan ini dioptimalkan untuk tampilan tablet, dan mendukung rotasi layar.

Pratinjau Dinamis Blogger Jenis Sidebar

Cara memperlakukan halaman sidebar:

• Ini merupakan tampilan halaman yang dioptimalkan untuk penelusuran dan membaca cepat.
• Sidebar kiri adalah daftar posting yang disusun secara kronologis, dengan jumlah komentar dan tampilan thumbnail untuk setiap posting.
• Tombol J dan tombol K atau panah digunakan sebagai menavigasi perpindahan halaman, dan komentar dapat ditampilkan pada halaman yang sama dengan mengklik link Tampilkan/Show.

Pratinjau Dinamis Blogger Jenis Snapshot

Cara memperlakukan halaman snapshot:

• Tampilan ini hanya akan menampilkan tulisan yang memiliki gambar.
• Mengklik salah satu foto yang mana saja akan menampilkan halaman posting secara penuh, dengan link navigasi digunakan untuk berpindah posting baru dan lama
• Ketika mengarahkan mouse diatas foto apapun maka akan ditampilkan potongan posting

Pratinjau Dinamis Blogger Jenis Timeslide

Cara memperlakukan halaman timeslide:

• Pandangan ini membagi konten blog ke dalam tiga wilayah yang berbeda:
• Kolom Kiri : Pembesaran gambar dengan potongan artikel, judul, dan snipppet ditampilkan dalam urutan kronologis
• Kolom Tengah: Hanya menampilkan judul posting dan sedikit potongan artikel
• Kolom Kanan : Hanya menampilkan judul posting
• Saat mencari posting pada tampilan timeslide ini, kata kunci yang terkandung dalam artikel hasilnya akan disorot (highlight).

Untuk menikmati prantinjau dinamis pada blog anda sendiri cukup dengan menambahkan "/view" pada akhir url blog anda^[1], misal http://tutsadobe.blogspot.com/view. Menurut informasi dari Blogger Help^[2] bahwa pratinjau dinamis ini dapat bekerja sempurna dengan mengikuti beberapa hal seperti dibawah ini:

• Blog anda tersedia sebagai blog public bukan blog private. Siapapun pengunjungnya dapat melihat blog anda tanpa harus sign in.
• Fasilitas feed diaktifkan secara keseluruhan pada blog anda. Silahkan periksa pada Pengaturan - Feed Situs dan pastikan terpilih Penuh pada opsi Umpan Entri Blog, sedangkan tampilan penuh pad artikel atau terpenggal (Jump Break) tidak berpengaruh (diperbolehkan).
• Fasilitas Tampilan Dinamis diaktifkan. Silahkan periksa pada Pengaturan - Format dan terpilih Ya pada opsi Aktifkan Tampilan Dinamis.

Jika hal diatas tidak dipenuhi maka tampilan pratinjau dinamis baru tidak akan berjalan dan justru akan diteruskan (redirect) pada tampilan asli blog anda dalam beberapa detik.

Jika anda memiliki saran, kritik atau masukan tentang Pratinjau Dinamis Baru Blogger (Dynamic Views in Blogger) silahkan berkontribusi pada pooling yang disediakan Blogger disini.

Referensi:
[1] All about Dynamic Views for Readers
[2] All about Dynamic Views for Authors
[3] Blogger Buzz: Fresh new perspectives for your blog

Basic Blog