Menyimpan Al-Qur'an Flash Di Blog

Al-Qur'an Flash Di Blog
Bulan Ramadhan tahun 2013 ini akan segera berakhir pada beberapa hari ke depan lagi, dan tentunya masih ada kesempatan untuk memperbanyak amalan di bulan suci ini seperti salah satu halnya memperbanyak membaca Al-Qur'an. 

Untuk itu kita sebagai pemilik blog bisa menjadikan blog kita sebagai sarana ibadah kita dengan cara menyimpan Al-Qur'an Flash di blog kita untuk kita baca dan pelajari.

Dengan Al-Qur'an Flash ini kita membaca Al-Qur'an halaman per halaman. Kita membuka halamannya seperti halnya membuka halaman Al-Qur'an sehingga lebih memberikan rasa nyata ketika membacanya. Juga kita bisa sambil mendengarkannya sehingga kita bisa belajar membaca Al-Qur'an. Untuk screenshotnya seperti gambar di bawah ini.

Al-Qur'an Flash

Bagaimana Anda juga ingin membuatnya di blog Anda? Silahkan copy kode di bawah ini dan paste di postingan HTML. Agar tidak memberatkan blog sebaiknya simpan di halaman statis blog.


<iframe src="http://www.quranflash.com/affiliate?en" frameborder="0" style="width: 100%; height: 700px;"></iframe>

Agat tampilannya bisa lebar tanpa sidebar, silahkan tambahkan tag conditional untuk halaman statis-nya. Sebagai contoh tag conditional yang saya pakai seperti di bawah ini.


<style type="text/css">
#sidebar-wrapper,#sidebar2-wrapper,#sidebar3-wrapper,#sidebar4-wrapper,#sidebar5-wrapper,#sidebar6-wrapper,.breadcrumbs, .post-footer, #comments, #blog-pager,#hosting,#bbn6-box{display:none}
.post h1,.post h2{text-align:center}
.main-wrapper{width:100%}
</style>

Kode yang berwarna merah untuk menghilangkan bagian yang tidak ingin ditampilkan seperti sidebar, breadcrumb, komentar, blog pager, dan llain-lain.

Kode yang berwarna biru agar title postingan berada di tengah.

Kode berwarna ungu agar main wrapper yang menjadi wadah postingan menjadi lebar 100%

Silahkan sesuaikan tag conditionalnya dengan blog masing-masing dan simpan di bawah kode Al-Qur'an Flash tadi, sehingga penampilannya akan seperti di bawah ini


<iframe src="http://www.quranflash.com/affiliate?en" frameborder="0" style="width: 100%; height: 700px;"></iframe> 
<style type="text/css">
#sidebar-wrapper,#sidebar2-wrapper,#sidebar3-wrapper,#sidebar4-wrapper,#sidebar5-wrapper,#sidebar6-wrapper,.breadcrumbs, .post-footer, #comments, #blog-pager,#hosting,#bbn6-box{display:none}
.post h1,.post h2{text-align:center}
.main-wrapper{width:100%}
</style>

Silahkan lakukan preview postingan untuk memastikan pemasangannya sudah benar, kemudian Publish postingannya.

Sumber kode: http://www.quranflash.com/

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