Embed Forum Dari Forumotion Di Blog

Sebenarnya saya sebelumnya sudah ada beberapa postingan yang membahas cara membuat sebuah forum di blog diantaranya dengan membuat forum blog di Google Groups dan Nabble. Namun sayang untuk Google Groups, loadingnya masih sangat menyiksa pengguna sehingga banyak blogger yang tidak menggunakannya. Sedangkah untuk Nabble, forum terganggu dengan munculnya iklan sehingga harus upgrade premium untuk menghilangkan iklannya.

Namun Forumotion.com memberikan hal lain untuk sebuah forum. Selain gratis, membuat forum di Forumotion sangat mudah dengan fitur yang cukup lengkap untuk sebuah forum gratis dan tampilannya cukup profesional dengan berbagai tema yang bisa dipilih.

Namun Forumotion tidak menyediakan kode embed forum untuk ditampilkan di blog personal sehingga kita harus lebih kreatif. Dengan menggunakan iframe kita bisa menampilkan forum dari Forumotion di blog.

Untuk demonya silahkan lihat dan coba di Forum Kompi Ajaib

Bagaimana, Anda tertarik juga untuk membuatnya di blog Anda?

Silahkan buat sebuah forum di Forumotion.com. Forumotion menyediakan beberapa domain utama untuk forum Anda yang bisa dipilih. Anda tinggal membuat sub domain untuk forum Anda dan memilih domain utamanya kemudian klik Create a Forum. Selanjutnya silahkan ikuti petunjuk selanjutnya, saya yakin Anda pasti bisa membuatnya jadi saya tidak perlu menjelaskannya di sini.

Setelah Anda berhasil membuat forumnya, silahkan gunakan kode di bawah ini untuk menampilkan forum di blog Anda.


<script type="text/javascript">
//<![CDATA[
document.write('<iframe src="URL FORUM" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="yes" style="width:100%;height:700px;border: none; visibility: visible;"></iframe>');
//]]>
</script>

Silahkan ganti URL FORUM dengan url forum Anda. Untuk lebar bisa kita buat 100% agar mengikuti lebar postingan blog Anda, namun kita harus menentukan tingginya (height:700px tinggi iframe bisa Anda sesuaikan) sehingga kita mengaktifkan scroll bar pada iframe-nya (scrolling="yes") agar forum tidak terpotong.

Nah untuk memperindah scroll bar-nya silahkan gunakan kode di bawah ini.


<style scoped="scoped" type="text/css">
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}
::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out}
</style>

Sehingga secara keseluruhan, silahkan simpan kode di bawah ini di postingan blog Anda (saran saya gunakan halaman statis) pada mode HTML.


<style scoped="scoped" type="text/css">
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}
::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out}
</style>
<script type="text/javascript">
//<![CDATA[
document.write('<iframe src="URL FORUM" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="yes" style="width:100%;height:700px;border: none; visibility: visible;"></iframe>');
//]]>
</script>

Selamat mencoba dan semoga bermanfaat....

You Might Also Like:

How to style text in Disqus comments:
  • 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 Hide Parser
Disqus Comments