Selasa, 24 Februari 2015

Menyimpan 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/

Artikel Terkait

Newest Post