Memasang Asynchronous Nabble Embedded Forum Di Blogger

Memasang Asynchronous Nabble Embedded Forum Di Blogger

Bola Hero Gawai

Memasang Asynchronous Nabble Embedded Forum Di Blogger

Nabble Embedded Forum
Memasang Nabble Embedded Forum Di Blogger - Sebenarnya cara memasang embedded forum dari Nabble di blog ini sudah banyak di share yang bisa Anda jumpai di Google. Namun di sini saya akan menambahkan cara memasang embedded forum dari Nabble ini dengan menambahkan asynchronous pada scriptnya agar tidak menghambat loading blog ketika mengakses halamannya.

Meskipun embedded forum ini hanya dijatah waktu untuk mencobanya dalam 1 tahun secara gratis, namun saya rasa embedded forum ini wajib untuk dicoba. Selain tampilannya mirip dengan Kaskus, embedded forum ini memberikan banyak opsi untuk digunakan dalam kustomisasi tampilan dan fitur-fiturnya agar sesuai dengan keinginan kita. Bahkan Anda bisa menggunakan CSS style Anda sendiri untuk mengatur tampilan forumnya.


Jika Anda ingin mencobanya silahkan masuk ke situsnya: http://www.nabble.com/

Silahkan klik Start a Free Forum untuk membuat akun Nabble dengan mengisi form-nya. Setelah akun Anda aktif, silahkan buka forum Nabble Anda. 

Untuk menyesuaikan tampilannya, silahkan klik menu options >> application >> change appearance kemudian silahkan atur warna font dan lainnya pada menu bar di sebelah atas.

Setelah selesai dengan kustomisasi, silahkan klik lagi menu options >> embedding options untuk mendapatkan kode embed forum. Kamudian silahkan copy kode embed-nya dan silahkan buat halaman statis baru di blog Anda dan paste kode embed-nya dalam mode postingan HTML.

Biasanya kode embednya seperti di bawah ini.


<a id="nabblelink" href="http://ruang-diskusi-kompi-ajaib.67xxx.x1.nabble.com/">Ruang Diskusi Kompi Ajaib</a>
<script src="http://ruang-diskusi-kompi-ajaib.67xxx.x1.nabble.com/embed/f1"></script>

Nah untuk menambahkan kode asynchonous pada scriptnya, kita tidak bisa langsung menambahkan kode async='async' pada scriptnya karena yang sudah saya coba kodenya menjadi tidak jalan.

Agar kodenya bisa jalan dengan asynchronous, untuk mengakalinya silahkan buka link script embed-nya di atas seperti di bawah ini, copy dan pasti link tersebut di address bar browser Anda untuk mendapatkan isinya.


http://ruang-diskusi-kompi-ajaib.67xxx.x1.nabble.com/embed/f1

Setelah terbuka halamannya, silahkan copy kodenya, biasanya seperti di bawah ini.


        var link=document.getElementById("nabblelink");
if (link != null) {
link.style.display="none";
document.write("<div id='nabbleforum' style='width:100%'><div style='height:700px'><img src='http://x6.nabble.com/images/loading.png' width='94' height='33' alt='Loading...'></div></div>");
var e = document.createElement("script");
e.src = 'http://x6.nabble.com/embed/JsEmbed.jtp?site=67xxx&node=1&url=' + encodeURIComponent(location.href);
            e.type="text/javascript";
document.getElementsByTagName("head")[0].appendChild(e);
}

Agar gambar loadingnya ada di tengah halaman, tambahkan juga kode text-align:center pada style kode <div id='nabbleforum' style='width:100%'> menjadi seperti ini <div id='nabbleforum' style='width:100%;text-align:center'>

Kemudian tambahkan kode asynchronous seperti ini e.async = true; di belakang kode var e = document.createElement("script"); sehingga secara lengkap kode embed forumnya menjadi seperti di bawah ini.


<a id="nabblelink" href="http://ruang-diskusi-kompi-ajaib.67xxx.x1.nabble.com/">Ruang Diskusi Kompi Ajaib</a>
<script type='text/javascript'>
//<![CDATA[
var link=document.getElementById("nabblelink");
if (link != null) {
 link.style.display="none";
 document.write("<div id='nabbleforum' style='width:100%;text-align:center;'><div style='height:700px'><img src='http://x6.nabble.com/images/loading.png' width='94' height='33' alt='Loading...'></div></div>");
 var e = document.createElement("script"); e.async = true;
 e.src = 'http://x6.nabble.com/embed/JsEmbed.jtp?site=67xxx&node=1&url=' + encodeURIComponent(location.href);
            e.type="text/javascript";
          document.getElementsByTagName("head")[0].appendChild(e);
}
//]]>
</script>

Ruang Diskusi Kompi Ajaib

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

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!

×
×
×