Memasang Asynchronous Nabble Embedded Lembaga Di Blogger

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

Meskipun embedded lembaga ini hanya dijatah waktu untuk mencobanya dalam 1 tahun secara gratis, namun saya rasa embedded lembaga ini wajib untuk dicoba. Selain tampilannya ibarat dengan Kaskus, embedded lembaga ini menunjukkan banyak opsi untuk dipakai dalam kustomisasi tampilan dan fitur-fiturnya semoga sesuai dengan impian kita. Bahkan Anda dapat memakai CSS style Anda sendiri untuk mengatur tampilan forumnya.

Baca juga: Membuat Forum Diskusi Blog Di Google Groups

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

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

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

Setelah tamat dengan kustomisasi, silahkan klik lagi sajian options >> embedding options untuk mendapat aba-aba embed forum. Kamudian silahkan copy aba-aba embed-nya dan silahkan buat halaman statis gres di blog Anda dan paste aba-aba embed-nya dalam mode postingan HTML.

Biasanya aba-aba embednya ibarat 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 aba-aba asynchonous pada scriptnya, kita tidak dapat eksklusif menambahkan aba-aba async='async' pada scriptnya sebab yang sudah saya coba kodenya menjadi tidak jalan.

Agar kodenya dapat jalan dengan asynchronous, untuk mengakalinya silahkan buka link script embed-nya di atas ibarat di bawah ini, copy dan niscaya link tersebut di address kafetaria browser Anda untuk mendapat isinya.

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

Setelah terbuka halamannya, silahkan copy kodenya, biasanya ibarat 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 aba-aba text-align:center pada style aba-aba <div id='nabbleforum' style='width:100%'> menjadi ibarat ini <div id='nabbleforum' style='width:100%;text-align:center'>

Kemudian tambahkan aba-aba asynchronous ibarat ini e.async = true; di belakang aba-aba var e = document.createElement("script"); sehingga secara lengkap aba-aba embed forumnya menjadi ibarat 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>

DEMO

Ruang Diskusi Kompi Ajaib

Sumber https://www.kompiajaib.com/

Share this post