Memasang Widget AddThis Terbaru 2014 Dengan Asynchronous

Memasang Widget AddThis Terbaru 2014 Dengan Asynchronous

Bola Hero Gawai

Memasang Widget AddThis Terbaru 2014 Dengan Asynchronous

Kenapa banyak blog yang sepertinya sedikit alergi untuk memasang sebuah widget dari pihak ketiga? Alasan utamanya adalah loading blog. Dengan memasang sebuah widget dari pihak ketiga, maka loading blog akan bertambah berat karena peramban harus menambah waktu untuk mengakses js dari server pihak ketiga tersebut.

Salah satu widget dari pihak ketiga yang banyak dihindari yaitu widget sharing tool. Oleh karena itu banyak blogger yang mengakalinya dengan membuat widget sharing dengan script manual dengan hanya menggunakan CSS atau meminimalkan penggunan js pada template blog.
Memasang Widget AddThis Terbaru 2014 Dengan Asynchronous

Namun sebenarnya penggunakan sharing tool pihak ketiga ini bisa kita atasi untuk mengoptimalkan loading blog dengan menggunakan asynchronous pada js-nya. Kita bisa mengoptimalkan sharing button Facebook ataupun Twitter dengan asynchronous seperti yang sudah saya sharing pada postingan terdahulu di link di bawah ini.


Dengan asynchronous, maka akses browser terhadap js pihak ketiga akan dilakukan setelah seluruh blog berhasil dimuat.

Dan salah satu widget sharing tool pihak ketiga yang bisa kita gunakan dan dioptimalkan dengan menggunakan asynchronous adalah widget sharing AddThis. Banyak blogger yang menghindari penggunaan widget sharing AddThis ini karena alasan klasik yaitu memberatkan loading blog. Padahal tampilan widget ini cukup bagus dengan beberapa jenis tampilan dan posisi yang bisa kita sesuaikan dengan tempat dan kebutuhan. Dan sekarang ini penggunaannya semakin mudah saja.

Anda hanya perlu membuat akun AddThis gratis untuk dapat menggunakan widget sharing-nya. Bagi Anda yang ingin mencobanya silahkan masuk ke websitenya dengan link berikut: http://www.addthis.com/

Saya yakin Anda bisa dengan mudah untuk membuat akun AddThis ini. Setelah akunnya berhasil dibuat, silahkan pilih widget yang Anda suka dan kemudian aktifkan. Setelah itu silahkan copy kodenya. Biasanya kodenya akan seperti di bawah ini. Saya mengunakan widget sharing yang melayang di pinggir blog.


<!-- AddThis Pro BEGIN -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-50f568026cf55xxx"></script>
<!-- AddThis Pro END -->

Silahkan tambahkan kode async='async' pada kode di atas sehingga penampakannya seperti di bawah ini


<!-- AddThis Pro BEGIN -->
<script async='async' type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-50f568026cf55xxx"></script>
<!-- AddThis Pro END -->

Silahkan simpan kodenya di atas kode </body>


Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

59 Comments Add Comment

Pertamaaaaaaaaaaaaaaaaaxxxxxxxxxxxxx

Balas

Triknya bermanfaat bangeet gan

Balas

hehe banyak cara untuk menuju roma ya mas :)

Balas

sangat bermanfaat kang....bisa langsung dipraktekkan... :)

Balas

Hehehehe silahkan dicoba mas :)

Balas

Hehehe iya sis :) hanya butuh sedikit kreatifitas.

Balas

masangnya nanti aja deh, sekarang nymak dulu :D

Balas

Silahkan mas Ade :)

Balas

Hehehehe silahkan mas :)

Balas

Saya mau coba dulu ya Mas.

Balas

Benar kang saya sangat alergi dengan yang satu itu karena bikin lemot .. tapi setelah ada alternatif lain .. boleh deh saya pertimbangkan hehe .. eh kang amengan atuh hihi

Balas

Mantap nih tutorialnya, selalu ada cara untuk menemukan yang terbaik :)

Balas

mantab kang, jadi gak perlu kawatir lagi akan masalah perloadingan blog :D

Balas

Benar mas, barusan liat di blog demo cepet banget loadingnya :)

Balas

Nah kalo yang ini boleh di coba nich Kang.... Haturnuhun ah :)

Balas

Silahkan sis :)

Balas

Hehehe mangga dicobian atuh kang :)
Mangga kang :) abdi teh ngantosan update-an kang Ruly tapi sok tara aya masuk kana email atanapi G+, kunaon nya kang? Atanapi teu di share kana G+ ?

Balas

Hehehe iya sis biar lebih josss :)

Balas

Iya mas lebih enteng dengan asynchronous :)

Balas

Silahkan kang dicoba dulu :)

Balas

Padahal dishare kang ah .. panginten abdi follow na ka akun anu nami akang kana kompi ajaib mah hente .. atos di follow nembe ..

Balas

Widget addthis 2014 lebih ringan daripada yang sebelumnya ya mas...? soalnya waktu saya masuk ke blog ini Loadingnya masih tetap cepat

Balas

Iya mas :) hanya perlu satu js untuk mengaktifkan beberapa fitur AddThis, ditambah asynchronous jadi lebih ringan.

Balas

sebenernya kodi async='async' sangat bermanfaat (khususnya untuk iklan dan widget sosial), tapi untuk pengguna yang memiliki koneksi internet yang lambat (untuk widget dibawah 25kb/s dan untuk iklan dibawah 10kb/s), kode async='async' akan sangat menganggu dan merugikan pemilik blog (terutama yang baru pertama kali membuka blog tersebut). karena, kodi ini tidak akan berkerja pada kecepatan tersebut yang menyebabkan widget atau fitur blog yang menggunakan kodi tersebut tidak bisa tampil.

dari pengalam saya (saya juga menggunakan kodi async='async' disetiap kodi java script dan experiment beberapa blog termasuk blog adsense saya), beberapa widget yang terhubung dengan jQueri tidak bisa tampil dan widget yang menggunaka kodi script&amp:callback juga sama. Anehnya, hanya kodi milik adsense saja yang mampu tampil walaupun kecepatan internet sangat-sangat super lambat (di ponsel dan PC).

Nah, apakah kodi async='async' di blog/situs anda berkerja atau tidak dikecepatan internat tersebut saat diakses melalui ponsel atau PC?


maaf mas...! kalau komengnya terlalu panjang dan jadi pertanyaan

Balas

Betul mas, tidak semua js bisa ditambahkan asynchronous, harus dicoba dulu jika aman maka kita bisa terus menggunakannya. Seperti iklan2 yang ada di blog ini tidak bisa ditambahkan async. Dan kebetulan saya menggunakan modem smartfren yang tahu sendiri bagaimana kecepatannya, selama ini js yang saya tambahkan async termasuk widget addthis ini ternyata aman begitu juga dengan hp saya menggunakan evercoss a7s dengan operator simpati juga aman.

Nah untuk yang lain ditunggu juga responnya :)

Balas

Kang, kode async='async' bisa untuk semua widget?

Balas

bisa mas....!, untuk semua kodi javascript yang disimpan di server lain (contoh: script src='bla bla bla' type='text/javascript) bisa ditambahakan kodi itu. tapi tidak semua bisa berkerja dengan normal (coba dulu...! baru bawa pulang...!)

Balas

ada tutor baru :)

tadinya alergi mau pasang addthis karena bisa menambah berat loading blog, karena tutor ini, saya mau mencobanya :D

haturnuwun kang

Balas
This comment has been removed by the author.

Maaf, Kang. widget what's next gak muncul.

Balas

Betul kata mas Andre :)

Balas

Heheehee silahkan dicoba mas :)

Balas

Untuk widget what's next perlu waktu untuk menampilkan content-nya jadi aktifkan aja dan tunggu nanti juga muncul :)

Balas

Betul kata kang Andre, bahkan di blog saya kang Adhy...javascriptnya gak bisa di render....jika saya tambahkan kode async='async' maka ada sebagian widget yang error ....

Balas
This comment has been removed by the author.

Maaf Kang ngerepotin.
Tombol Bouce to Top dan Bottomnya gak usah dipindahkan? saya pake Template Kompi Males punya Kang Adhy Suryadi.

Keluar sedikit kang. Kalau mau menghilangkan Facebook, Google pada sidebar, apa saja yang harus dihilangkan?
Saya juga mau menghilangkan tombol Share fb, twitter, pdf dan print dibawah post. Saya mau pake yang punya AddThis aja. biar lebih enteng satu paket.

Mohon panduannya Kang.

Balas

Seperti blog ini karena terhalang widget what next addthis, maka bounce to top dan bottom dipindah ke sisi kiri. rubah kode right menjadi left pada kode #BounceToTop dan #GoToDown

Untuk Facebook, Google pada sidebar itu tinggal menghapus widgetnya di tata letak.

Untuk menghilangkan tombol Share fb, twitter, pdf dan print dibawah post hapus kode dari <div class='share-box'> sampai kode </div> yang ada di atas kode <div class='related-post' id='related-post'/> kemudian hapus kode css-nya
.share-box{border-top:2px solid #bbb;border-bottom:1px solid #ccc;font-size:16px;padding:10px 0 11px;position:relative;margin:25px 0}
a.more{background:#007eff;border:1px solid #0b6bce;border-radius:2px;font-size:16px;font-weight:700;color:#fff;text-align:center;padding:2px 6px;margin-top:-4px}
a.more:hover{background:#0f6bc9;}

.submit-email{text-align:left;margin:0 auto;padding:0;position:relative}
.submitbutton {background: #333;border: 1px solid #222;font: 12px Oswald;color: #fff;height: 25px;padding:0 12px;margin:1px 0 0 5px;text-transform:uppercase;cursor: pointer;}
.enteryouremail {background: #fff !important;border: 1px solid #d2d2d2;padding: 0px 7px;color: #a19999;font-size: 12px;height: 23px;width: 40%;margin: 0px;}
.enteryouremail:focus{outline:none}
.printfriendly{position:absolute;background:#efefef;border:1px solid #ddd;color:#555;text-decoration:none;top:25px;right:0;padding:3px 5px 4px 0;font:12px Arial}
.printfriendly span.print{background:url(http://4.bp.blogspot.com/-mAHehSZvM9M/UrTyQ0kp6rI/AAAAAAAAar4/3KWs3Lzj9xQ/s1600/print.png) no-repeat;border:none;box-shadow:none;margin:3px 6px -3px;padding-left:20px}
.printfriendly span.pdf{background:url(http://1.bp.blogspot.com/-XScQHsbLaTU/UrTyQwBdjfI/AAAAAAAAar0/uxsmAfxYYqI/s1600/pdf_document.png) no-repeat;border:none;box-shadow:none;margin:3px 0 -3px;padding-left:20px}

Balas

Kang, bukannya FB dan G plus ada kode yang dimasukkan ke html template?

Balas

Betul ada kode js FB dan G+ di edit html, jika memang benar-benar tidak ingin menggunakan widget atau tombol FB dan G+ satu pun di blog maka js tersebut bisa dihapus.

js FB seperti ini
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;js.async=true;
js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>


Js G+ seperti ini
<script type='text/javascript'>
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Balas

Atos difollow blogger di dashboard abdi kang :)

Balas

Kang, masih boleh minta bimbingan?
nanya nya dimana sebaiknya?

Balas

Cara menghilangkan translatenya gimana Kang?

Balas

tes ah om..beh nyaho hahah

Balas

AdSense juga support Async ya Mas? :D

Balas

Izin coba Kang tutornya...

Balas

benar2 deh, kalau kehabisan ide pasti template jadi korban hehehe :-bd

Balas

memasang widget addthis kayaknya bisa saya lakukan sekarang, saya coba dulu kang :)

Balas

Hehehehe silahkan mas Panjz :)

Balas

Silahkan mas Gunawan :)

Balas

Hehehehe iya sis :)

Balas

Silahkan dicoba sis :)

Balas

mas, mau tanya, cara buat tombol gpluss dari addthis tapi yang valid and besar tombolnya gmna ya mas :)

thanks

Balas

ckkkckckc....kang adhy keren pisan pokoknya mah......

Balas

Maaf kang mau tanya, kok di blog saya gk muncul ya...Mohon pencerahannya? Terimakasih.

Balas

ooh jadi itu fungsi async ya mas, baru tahu nih huhu

Balas

Gan, Kalau di cek valid html
Validation Output: 1 Error

Error Line 895, Column 45: Element script must not have attribute async unless attribute src is also specified.
<script async='async' type='text/javascript'>

Ini gak bisa dikasih async='async' ?

Balas

ko lama ya munculnya widget what next, apa mungkin memang selalu bentrok dengan kode yang dipakai template mas sugeng hoho, moga kang Adhy berikan solusinya :D

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×