Asynchronous Javascript Loading Untuk Tombol Like Twitter, Facebook dan Google+

Tombol Like Button yang dirancang oleh beberapa media sosial seperti Google+, Twitter dan Facebook bisa katakan tombol yang wajib dipasang pada halaman blog, karena fungsi dari tombol ini selain untuk berbagi juga sangat penting untuk mengetahui seberapa bagus pengunjung untuk menilai kualitas artikel pada suatu halaman, tapi dengan memasang tombol sosial ini dapat menyebankan proses onload halaman menjadi makin berat, hal ini terjadi karena ada beban pemuatan javascript terlebih dahulu dari pihak ketiga ketika pertama kali halaman tersebut melakukan proses loading.

Solusi terbaik untuk menangani masalah loading pada pemuatan tombol sosial media bisa menggunakan tehnik Asynchronous Javascript Loading, teknik ini bekerja dengan menunda pemuatan javascript sementara sampai halaman yang diakses benar-benar selesai terbuka sempurna, barulah saat itu proses pemuatan tombol sosial media ini dijalankan. Untuk saat ini hanya Google+ saja yang saya ketahui sudah mengaplikasikan pilihan untuk Asynchronous Loading dengan Javascript, sedangkan untuk Twitter dan Facebook sepertinya masih melakukan akses onload pada obyek global yang memberatkan halaman karena prosesnya saat itu juga langsung memeriksa javascript pada widget dan tombol like button.



Cara memasang Asynchronously Javascript Loading:



Silahkan letakan kode dibawah ini diatas tag </body>

<!-- Asynchronous Javascript Loading for Facebook, Twitter, G+ -->
<script type='text/javascript'>
//<![CDATA[
/*
* Async Sharing Buttons (G+, Facebook, Twitter)
* http://www.narga.net
*/
(function(doc, script) {
var js, fjs = doc.getElementsByTagName(script)[0],
frag = doc.createDocumentFragment(),
add = function(url, id) {
if (doc.getElementById(id)) {
return;
}
js = doc.createElement(script);
js.src = url;
id && (js.id = id);
frag.appendChild(js);
};
// Google+ button
add('http://apis.google.com/js/plusone.js');
// Facebook SDK
add('http://connect.facebook.net/en_US/all.js#xfbml=1', 'facebook-jssdk');
// Twitter SDK
add('http://platform.twitter.com/widgets.js');
fjs.parentNode.insertBefore(frag, fjs);
}(document, 'script'));
//]]>
</script>
<!-- End Asynchronously Javascript -->

Selanjutnya kalian bisa memasang dimana saja tombol Like Button Facebook, Twitter dan Google+ dengan kode dibawah ini (sesuaikan tulisan warna merah dibawah dengan alamat blog kalian) :

<!-- Google+ -->
<div class="g-plusone" data-size="medium" data-count="true" data-href="http://www.zoomtemplate.com">

<!- Twitter -->
<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-url="http://www.zoomtemplate.com">Tweet</a>

<!- Facebook -->
<div id="fb-root"></div>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="1" data-show-faces="false" data-href="http://www.zoomtemplate.com"></div>

Untuk memasang Tombol Like Facebook, Twitter dan Google+ dalam halaman postingan silahkan gunakan kode dibawah ini:

<!-- Google+ -->
<div class='g-plusone' data-count='true' data-size='medium' expr:href='data:post.url'/>

<!- Twitter -->
<a class='twitter-share-button' data-count='horizontal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>

<!-- Facebook -->
<div id='fb-root'/>
<div class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='1' expr:data-href='data:post.url'/>

Untuk contoh nyata penggunaan Asynchronous Javascript Loading kalian bisa melihatnya langsung diblog saya saat ini Blogger Tutorial atau disini Blogger Templates 2013.



Ok, semoga setelah mencoba tutorial ini loading halaman sobat semua bisa jadi makin cepat :)

Title: Asynchronous Javascript Loading Untuk Tombol Like Twitter, Facebook dan Google+
Posted by:Unknown
Published :2013-06-30T21:46:00-07:00
Rating: 4.5
Reviewer: 7 Reviews
Asynchronous Javascript Loading Untuk Tombol Like Twitter, Facebook dan Google+

Read More

Menampilkan iklan ditengah posting berdasarkan Label

Cara memasang Adsense atau iklan lain ditengah postingan pada Platform Blogger sebenarnya sudah basi, sayapun sudah mencobanya sekitar 2 tahun yang lalu, namun jika iklan tersebut bisa kita seting dan hanya muncul jika kita menambahkan label tertentu itu tentu sesuatu yang baru dan tentu saja sangat memudahkan kita kedepannya untuk mengontrol iklan mana yang ingin ditampilkan atau tidak pada semua posting sekaligus. Jadi maksud saya seperti ini, ada kalanya penayangan iklan tidak ingin kita tampilkan pada posting tertentu misalkan pada halaman About, Contact, Privacy Policy atau halaman yang tidak pantas untuk ditayangkan iklan, cara ini sangatlah berguna jika kita memiliki banyak posting tanpa harus merubah kode dalam postingan kita satu-persatu.



Script untuk menampilkan iklan di tengah posting secara otomatis

Script dibawah ini digunakan untuk memasang iklan ditengah posting secara otomatis, tapi menurut saya script ini rada aneh dan letak iklan yang ditampilkan kadang tidak sesuai dengan harapan kita, jadi saya tidak menyarankan script ini, tapi jika kalian ingin mencobanya ya silahkan saja. Untuk caranya sangat mudah, kalian tinggal mengganti saja kode <data:post.body/> dengan kode dibawah ini

<!-- star setting ads dalam posting -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div expr:id='"iklan1" + data:post.id'/>
<div style="clear:both; margin:10px 0">
<!-- Hapus dan letakan disini kode Iklan/PPC/Adsense  -->
</div>
<div expr:id='"iklan2" + data:post.id'>
</b:if>
<data:post.body/>
</div>
<script type="text/javascript">
var obj0=document.getElementById("iklan1<data:post.id/>");
var obj1=document.getElementById("iklan2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(" ");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+1);}
</script>
<!-- stop setting ads dalam posting -->

Jika kalian ingin mengontrol iklan tersebut tampil atau tidak menggunakan label silahkan gunakan kode dibawah ini:

<!-- star setting ads dalam posting -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div expr:id='"iklan1" + data:post.id'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;NamaLabel&quot;'>
<div style="clear:both; margin:10px 0">
<!-- Hapus dan letakan disini kode Iklan/PPC/Adsense  -->
</div>
<div expr:id='"iklan2" + data:post.id'>
</b:if>
</b:loop>
</b:if>
<data:post.body/>
</div>
<script type="text/javascript">
var obj0=document.getElementById("iklan1<data:post.id/>");
var obj1=document.getElementById("iklan2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(" ");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+1);}
</script>
<!-- stop setting ads dalam posting -->

Saya jelaskan cara kerja script diatas:

1. Kode yang berwarna merah diatas merupakan area tempat kalian memasang script iklan entah itu adsense atau iklan apa saja.

2. Kode yang berwarna pink merupakan nama label yang bisa kalian tentukan sendiri nama labelnya.

Untuk menampilkan iklan tinggal tambahkan saja nama labelnya dan jika kalian tidak ingin menampilkan iklan tinggal hapus aja nama labelnya.



Script untuk menampilkan iklan ditengah posting secara manual

Cara yang kedua ini lebih saya sarankan karena penempatan iklan bebas kita atur letaknya. Kelemahan kode ini kita harus memasang script tambahan pada halaman posting dengan menggunakan kode ini <!--nomore--> . Disinilah pengontrol iklan dengan label sangat diperlukan jika kita sudah menambakan kodenya pada banyak posting.



Untuk caranya juga sangat mudah, kalian tinggal mengganti saja kode <data:post.body/> dengan kode dibawah ini.

<!-- star setting ads dalam posting -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div expr:id='&quot;aim1&quot; + data:post.id'/>
<div style="clear:both; margin:10px 0">
<!-- Letakan disini kode Iklan/PPC/Adsense -->
</div>
<div expr:id='&quot;aim2&quot; + data:post.id'>
</b:if>
<data:post.body/>
</div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;aim1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;aim2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var r=s.search(/\x3C!--nomore--\x3E/igm);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+13);}
</script>
<!-- stop setting ads dalam posting -->

Jika kalian ingin mengontrol iklan tersebut tampil atau tidak menggunakan label silahkan gunakan kode dibawah ini.

<!-- star setting ads dalam posting -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div expr:id='&quot;aim1&quot; + data:post.id'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;NamaLabel&quot;'>
<div style="clear:both; margin:10px 0">
<!-- Letakan disini kode Iklan/PPC/Adsense -->
</div>
</b:if>
</b:loop>
</b:if>
<div expr:id='&quot;aim2&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;aim1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;aim2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var r=s.search(/\x3C!--nomore--\x3E/igm);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+13);}
</script>
<!-- stop setting ads dalam posting -->

Saya jelaskan cara kerja script diatas:



1. Kode yang berwarna merah diatas merupakan area tempat kalian memasang script iklan entah itu adsense atau iklan apa saja.

2. Kode yang berwarna pink ditandai dengan NamaLabel merupakan nama label yang bisa kalian tentukan sendiri nama labelnya.

3. Kode berwarna coklat ditandai dengan <!--nomore--> adalah kode yang diletakan dalam halaman posting (dalam editor HTML bukan Compose), kalian bisa menentukan sendiri dimana iklan tersebut akan tampil.



Untuk menampilkan iklan tinggal tambahkan saja nama labelnya dan jika kalian tidak ingin menampilkan iklan tinggal hapus aja nama labelnya. gampang kan :)

Ok semoga tutorial diatas berguna :) Salam.

Title: Menampilkan iklan ditengah posting berdasarkan Label
Posted by:Unknown
Published :2013-06-20T07:58:00-07:00
Rating: 4.5
Reviewer: 7 Reviews
Menampilkan iklan ditengah posting berdasarkan Label

Read More

Rahasia Optimasi Meta Tag di New Blogger

Optimasi Meta Tag kali ini merupakan salah satu rahasia besar yang tersimpan dengan rapi di blog saya selama ini dan kalian tidak akan mungkin menemukan tutorial ini diluar sana karena tehnik kali ini merupakan asli hasil resep saya pribadi jikapun ada itupun hanya mirip apalagi kalau sampai sama, nah itu berarti saya yang copy-paste :p



Bagi kalian yang sudah berpengalaman menangani SEO untuk Platform Blogger mungkin tidak begitu kesulitan untuk melakukan optimasi pada Meta Tag, namun bagi yang pemula biasanya cuma bisa pasrah saja dengan Script XML standarnya Blogger. Meski kita ketahui saat ini Blogger sebenarnya sudah melakukan perubahan besar pada Optimasi Meta Tag mereka tapi menurut saya itu saja belum cukup, tetap harus ada perubahan besar jika ingin menjadi no.1 dihalaman percarian. ok walaupun konten kalian saat ini sangat Super Quality disetai Backlink yang bejibun dari negeri antah berantah sana ditambah lagi dengan desain blog yang cantik bak bidadari bermata jeli semua itu sama aja bo'ong, tanpa adanya optimasi dari dalam (One Page SEO) itu sama saja ibarat sayur tanpa garam (ngawur :p)



Lihat script dibawah, itu merupakan hasil optimasi untuk semua Meta Tag yang saya gunakan pada blog saya saat ini, tidak ada pengurangan satu rahasiapun disana. Dan maaf, untuk cara meletakan kode dibawah ini pada blog kalian saya tidak akan mengajarkannya lagi, silahkan bongkar semua postingan lama saya atau bisa langsung kunjungi di link ini kalau lagi males! Cara pasang Meta Tag

<!-- Meta Title Halaman Error/404 --> 
<b:if cond='data:blog.pageType == "error_page"'>
<title>404: Maaf halaman yang ada cari tidak ada | Namablog</title> 
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<!-- Meta Title Halaman Search -->
<b:if cond='data:blog.searchQuery'>
<title>Pencarian keyword untuk :: <data:blog.searchQuery/> :: | NamaBlog</title>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<!-- Meta Title Halaman Arsip --> 
<title>Arsip Artikel Bulan <data:blog.pageName/> | NamaBlog</title>
<!-- Meta Descriptin Halaman Arsip --> 
<meta expr:content='"Arsip Artikel Bulan " + data:blog.pageName + " selengkapnya silahkan kunjungi di NamaBlog"' name='description'/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<!-- Meta Title Halaman Pages --> 
<title><data:blog.pageName/> | NamaBlog</title> 
<b:if cond='data:blog.metaDescription'>
<!-- Meta Description Halaman Pages Aktif--> 
<meta expr:content='data:blog.metaDescription'  itemprop='description'/>
<b:else/>
<!-- Tampilkan jika Meta Description Halaman Page tidak aktif-->
<meta expr:content='data:blog.pageName + ". Silahkan baca artikel " + data:blog.pageName + " selengkapnya di NamaBlog"' name='description'/>
</b:if>
<b:else/>
<!-- Meta Title Halaman Label -->
<b:if cond='data:blog.searchLabel'>
<title>Pencarian pada Label :: <data:blog.pageName/> :: | NamaBlog</title>
<!-- Meta Description Halaman Label --> 
<meta expr:content='"Pencarian pada kategori ::" + data:blog.pageName + ":: selengkapnya silahkan kunjungi di NamaBLog."' name='description'/>
<b:else/>
<!-- Meta Title Halaman Utama --> 
<title><data:blog.pageTitle/> | NamaBlog</title> 
<!-- Meta Description Halaman utama --> 
<meta expr:content='data:blog.pageTitle + " Tulis deskripsi blog anda disini."' name='description'/> 
</b:if>
</b:if>
</b:if>
<!-- Meta Keyword Halaman utama--> 
<meta content='keyword1, keyword2, dst' name='keywords'/>
<b:else/>
<!-- Meta Title Halaman Post --> 
<title><data:blog.pageName/> - NamaBlog</title>
<!-- Meta Description Halaman Post aktif --> 
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription'  itemprop='description'/>
<b:else/> 
<!-- Tampilkan jika Meta Description Halaman post tidak aktif-->
<meta expr:content='data:blog.pageName + ". Silahkan baca artikel " + data:blog.pageName + " selengkapnya di NamaBlog"' name='description'/>
</b:if>
<!-- Meta Keyword Halaman post --> 
<meta expr:content='data:blog.pageName + ", keyword1, keyword2, dst"' name='keywords'/>
</b:if>

Optimasi SEO Meta tag diatas sangat manjur dan sangat SEO Friendly, kalian bisa mengeditnya sesuai dengan kebutuhan. Sedangkan untuk melihat perubahan Meta Tag diatas kalian bisa melihatnya langsung dengan cara membuka Source Code-nya melalui Browser atau gunakan extention untuk firefox yang saya rekomendasikan di sini http://www.quirk.biz/searchstatus



Sering-sering aja sambangi  blog saya karena kedepannya insya Allah akan saya bongkar semua rahasia yang tersembunyi untuk Optimasi SEO di Blogger. Salam :)

Title: Rahasia Optimasi Meta Tag di New Blogger
Posted by:Unknown
Published :2013-06-12T20:26:00-07:00
Rating: 4.5
Reviewer: 7 Reviews
Rahasia Optimasi Meta Tag di New Blogger

Read More

Mengatasi Duplikasi Meta Tag Deskripsi pada Halaman Post

Hampir 2 tahun lebih saya tidak ngeblog ternyata tampilan Dashboard Blogger banyak yang berubah ya, terus terang pertama saya juga bingung melihatnya, meski tangan sampai keriting otak-atik sana sini dan  ternyata banyak juga fiitur baru yang membuat Platform Blogger semakin canggih saja. Dan yang paling menarik sempat mencuri perhatian saya yaitu adanya setingan pada Meta Tag Deskripsi dimana kita di bebaskan memasukan secara manual setiap deskripsi pada halaman postingan, ini sungguh perubahan besar tidak seperti 2 tahun lalu :)



Ok kembali pada bahasan utama.Jika diperhatikan Blogger memang sudah menanam item Meta Tag Deskripsi ini pada halaman postingan, nah yang jadi masalah bagaimana jika kita tetap ingin mempertahankan Meta Tag Deskripsi yang lama tanpa harus melakukan editing manual semua postingan kita, bayangkan saja semisal ada 500 artikel yang sudah kalian publikasikan, apa mau ngeditnya satu-persatu hehehe...Alangkah baiknya jika kalian hanya menempatkan Meta deskipsi tersebut hanya pada postingan terbaru saja dan membiarkan deskripsi postingan kalian tetap menggunakan deskripsi yang lama.



Kode dibawah ini dapat langsung digunakan untuk menangani masalah Duplikasi Meta Tag Deskripsi:

<b:if cond='data:blog.pageType != "item"'>
<!-- Title Halaman Utama --> 
<title><data:blog.pageTitle/> | JudulBlog</title> 
<!-- Desc Halaman utama --> 
<meta content='bla..bla..bla...' name='description'/>
<b:else/>
<!-- Title Halaman Post --> 
<title><data:blog.pageName/> - JudulBlog</title>
<!-- Deksripsi post aktif --> 
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
<b:else/> 
<!-- Tampilkan jika Desc Halaman post tidak aktif-->
<meta expr:content='data:blog.pageName + " bla..bla..bla..."' name='description'/>
</b:if>
</b:if>

Saya beri penjelasan cara kerjanya, lihat baris kode diatas itu yang akan menangani masalah Meta Deskripsi pada blog kalian, sebelum kalian memasangnya pastikan jika ingin postingan kalian menggunakan Meta Deskripsi yang lama maka pada halaman postingan Meta Deskripsinya dibiarkan kosong saja, sedangkan jika kalian ingin menambahkan Meta Deskripsi terbaru pada postingan maka kode diatas secara otomatis akan langsung menampilkan Deskripsi sesuai dengan input kalian yang ada pada postingan. Oh iya jika kalian menggunakan meta deskripi pada halaman utama (index) langsung pada item Dashboard Blogger silahkan hapus saja meta deskripsi yang berwarna pink diatas.



Kalian pasti bingung kenapa gak ada meta keywordnya? ini RAHASIA SEO 2013 Boss... saya pribadi juga sudah mengabaikannya :)

Title: Mengatasi Duplikasi Meta Tag Deskripsi pada Halaman Post
Posted by:Unknown
Published :2013-06-09T21:50:00-07:00
Rating: 4.5
Reviewer: 7 Reviews
Mengatasi Duplikasi Meta Tag Deskripsi pada Halaman Post

Read More