Breaking News:

Cara Menambahkan Tabview Section Pada Sidebar Blog

Terkadang ada untungnya ketika disuruh membuat blog oleh saudara. Meski dibayar ku nuhun alias gratis tapi selalu dapat ilmu baru tatkala mengobrak-abrik template. Seperti kejadian sekitar dua bulan lalu ketika membuat blog ini, ada tiga temuan yang bermanfaat dan menjadi perbendaharaan ilmu ngeblog saya, salah satunya adalah membuat Tabview Section.

Dibandingkan dengan Tabview Widget, yang cukup merepotkan ketika melakukan pengisian kontennya karena berada dalam satu widget, Tabview Section lebih mudah dan praktis karena selain bisa terdiri dari beberapa widget dalam satu Tabmenu, juga bisa memasukkan gadget tipe non-HTML/JavaScript sehingga membuat kita leluasa dalam mengisikan konten-konten kedalam widget-widget tersebut.

Lalu bagaimana cara membuat Tabview Section ini? Caranya gampang saja, kamu tinggal mengikuti langkah-langkah berikut. Kelihatannya memang ribet karena penjelasannya cukup panjang, tapi jika dipraktekkan akan terasa mudah. Coba saja...

Langkah Pertama
  • Login ke akun Blogger kamu.
  • Dari halaman Dasbor, pilih Rancangan - Edit HTML.
  • Lakukan duplikasi template untuk berjaga-jaga jika terjadi masalah.
  • Cari kode ]]></b:skin> (gunakan Control F atau F3).
  • Kopi CSS berikut lalu tempelkan (paste) di atas kode ]]></b:skin> tadi (sebaiknya diletakkan di bawah CSS untuk sidebar)
    /*-- Tabview Section -- */
    .tabs-widget {
    list-style:none;
    list-style-type:none;
    margin:0;
    padding:0;
    height:24px;
    border-bottom:1px solid #A4A4A4;
    }
    .tabs-widget li {
    list-style:none;
    list-style-type:none;
    margin:0 0 0 4px;
    padding:0;
    float:left;
    }
    .tabs-widget li:first-child {margin:0}
    .tabs-widget li a {
    background-color:#d4d4d4;
    color:#000;
    text-shadow:1px 1px 1px #fff;
    border-top-left-radius:7px;
    border-top-right-radius:7px;
    -moz-border-radius-topleft:7px;
    -moz-border-radius-topright:7px;
    -khtml-border-radius-topleft:7px;
    -khtml-border-radius-topright:7px;
    -webkit-border-top-left-radius:7px;
    -webkit-border-top-right-radius:7px;
    border-right: 2px solid #adadad;
    padding:5px 10px;
    display:block;
    text-decoration:none;
    font:bold 11px Arial,Helvetica,Sans-serif;
    text-transform:uppercase;
    }
    .tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current {
    background-color:#A4A4A4;
    color:#000;
    text-shadow:1px 1px 1px #fff;
    border-top-left-radius:7px;
    border-top-right-radius:7px;
    -moz-border-radius-topleft:7px;
    -moz-border-radius-topright:7px;
    -khtml-border-radius-topleft:7px;
    -khtml-border-radius-topright:7px;
    -webkit-border-top-left-radius:7px;
    -webkit-border-top-right-radius:7px;
    border-right: 2px solid #adadad;
    text-decoration:none;
    }
    .tabs-widget-content {margin-top:5px; background:#F4F4F4}
    .tabviewsection {margin:0 0 2px 0}
  • Setelah itu letakkan sumber script berikut di bawah ]]></b:skin>.
    <script src='http://enes-sc.googlecode.com/files/jquery151.js' type='text/javascript'/>
    <script src='http://enes-sc.googlecode.com/files/tabsectionplugin.js' type='text/javascript'/>
    Catatan:
    • Bagi yang menggunakan frame work dari mootools, letakkan script tersebut di bawah script mootools.
    • Bagi yang menggunakan script jQuery, seperti pada perintah Top/Down Page, hapus salah satunya.
  • Kemudian cari kode untuk widget sidebar, seperti berikut:
    <b:section class='sidebar' id='sidebar1' preferred='yes'>
  • Setelah ketemu, kopi dan tempelkan script berikut di atasnya:
    <div class='tabviewsection'>

    <script type='text/javascript'>
    jQuery(document).ready(function($){
    $(&quot;.tabs-widget-content-widget-enes_sc-01-id&quot;).hide();
    $(&quot;ul.tabs-widget-widget-enes_sc-01-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
    $(&quot;.tabs-widget-content-widget-enes_sc-01-id:first&quot;).show();

    $(&quot;ul.tabs-widget-widget-enes_sc-01-id li a&quot;).click(function() {
    $(&quot;ul.tabs-widget-widget-enes_sc-01-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
    $(this).addClass(&quot;tabs-widget-current&quot;);
    $(&quot;.tabs-widget-content-widget-enes_sc-01-id&quot;).hide();
    var activeTab = $(this).attr(&quot;href&quot;);
    $(activeTab).fadeIn();
    return false;
    });
    });
    </script>

    <ul class='tabs-widget tabs-widget-widget-enes_sc-01-id'>
    <li><a href='#widget-enes_sc-01-id1'>Tabmenu 1</a></li>
    <li><a href='#widget-enes_sc-01-id2'>Tabmenu 2</a></li>
    <li><a href='#widget-enes_sc-01-id3'>Tabmenu 3</a></li>
    <li><a href='#widget-enes_sc-01-id4'>Tabmenu 4</a></li>
    </ul>

    <div class='tabs-widget-content tabs-widget-content-widget-enes_sc-01-id' id='widget-enes_sc-01-id1'>
    <b:section class='sidebar' id='sidebartab1' showaddelement='yes'>
    <b:widget id='HTML73' locked='false' title='' type='HTML'/>
    </b:section>
    </div>

    <div class='tabs-widget-content tabs-widget-content-widget-enes_sc-01-id' id='widget-enes_sc-01-id2'>
    <b:section class='sidebar' id='sidebartab2' showaddelement='yes'>
    <b:widget id='HTML74' locked='false' title='' type='HTML'/>
    </b:section>
    </div>

    <div class='tabs-widget-content tabs-widget-content-widget-enes_sc-01-id' id='widget-enes_sc-01-id3'>
    <b:section class='sidebar' id='sidebartab3' showaddelement='yes'>
    <b:widget id='HTML75' locked='false' title='' type='HTML'/>
    </b:section>
    </div>

    <div class='tabs-widget-content tabs-widget-content-widget-enes_sc-01-id' id='widget-enes_sc-01-id4'>
    <b:section class='sidebar' id='sidebartab4' showaddelement='yes'>
    <b:widget id='HTML76' locked='false' title='' type='HTML'/>
    </b:section>
    </div>

    </div><!-- end tabviewsection -->
    <div style='clear:both;'/>

    Catatan:
    • Ubahlah judul Tabmenu 1, Tabmenu 2, Tabmenu 3, dan Tabmenu 4 sesuai dengan judul menu yang diinginkan.
    • Jika sidebar blog kamu kecil, hapuslah salah satu Tabmenu dengan cara menghapus kode, misalnya Tabmenu4:
      <li><a href='#widget-enes_sc-01-id4'>Tabmenu 4</a></li>

      dan kode:
      <div class='tabs-widget-content tabs-widget-content-widget-enes_sc-01-id' id='widget-enes_sc-01-id4'>
      <b:section class='sidebar' id='sidebartab4' showaddelement='yes'>
      <b:widget id='HTML76' locked='false' title='' type='HTML'/>
      </b:section>
      </div>
    • Jika ingin menambahkan, tambahkan kode-kode seperti pada cara penghapusan, hanya saja kamu harus mengubah id4 menjadi id5, id6, dst. Juga pada id='sidebartab4' harus diubah menjadi sidebartab5, sidebartab6, dst. Begitu juga pada id='HTML76' harus diubah menjadi HTML77, HTML78, dst.
  • Simpan hasil kerjaan kamu. Jika ingin melihat hasil sementara, lakukan pratinjau, hasilnya akan tampak seperti ini:

Langkah Kedua
  • Setelah disimpan, klik Elemen Laman
  • Perhatikan perubahan yang terjadi, seperti gambar berikut:
  • Edit atau masukkan widget-widget yang kamu kehendaki pada blok-blok Tabmenu yang ada.
    Catatan:
    • Pada setiap Blok Tabmenu, kamu bisa menambahkan lebih dari satu widget, termasuk yang non-HTML/JavaScript (bawaan blogger).
    • Jika ukuran tinggi widget pada setiap blok ingin berukuran sama, lakukan pengeditan pada HTML template. Caranya seperti membuat scrol pada bloglist, yaitu dengan mengubah kode:
      <div class='widget-content'>

      menjadi:
      <div class='widget-content' style='overflow:auto; height:250px'>
  • Jika sudah selesai, ucapkan alhamdulillah...

Ok, segitu aja informasinya, sob... Semoga bermanfaat...
Catatan Tambahan:
Jika kamu ingin membuat Tabview Section ini lebih dari satu, seperti pada blog ini, kamu tinggal mengkopikan script ketiga dan meletakkannya di tempat yang kamu inginkan. Hanya saja kode sc-01 harus kamu ubah menjadi sc-02, sc-03, dst.
Ditulis oleh

12.13 | Posted in | Read More »

Apakah Rasulullah mengerjakan shalat dhuha?

بسم الله الرحمن الرحيم
وَالضُّحَى. وَاللَّيْلِ إِذَا سَجَى. مَا وَدَّعَكَ رَبُّكَ وَمَا قَلَى. وَلَلآخِرَةُ خَيْرٌ لَّكَ مِنَ الأُولَى. وَلَسَوْفَ يُعْطِيكَ رَبُّكَ فَتَرْضَى. أَلَمْ يَجِدْكَ يَتِيمًا فَآوَى. وَوَجَدَكَ ضَالًّا فَهَدَى. وَوَجَدَكَ عَائِلا فَأَغْنَى. فَأَمَّا الْيَتِيمَ فَلا تَقْهَرْ. وَأَمَّا السَّائِلَ فَلا تَنْهَرْ. وَأَمَّا بِنِعْمَةِ رَبِّكَ فَحَدِّثْ.

Terjemah: Demi waktu matahari sepenggalahan naik, dan demi malam apabila telah sunyi, Tuhanmu tiada meninggalkan kamu dan tiada (pula) benci kepadamu, dan sesungguhnya akhir itu lebih baik bagimu dari permulaan. Dan kelak Tuhanmu pasti memberikan karunia-Nya kepadamu, lalu (hati) kamu menjadi puas. Bukankah Dia mendapatimu sebagai seorang yatim, lalu Dia melindungimu. Dan Dia mendapatimu sebagai seorang yang bingung, lalu Dia memberikan petunjuk. Dan Dia mendapatimu sebagai seorang yang kekurangan, lalu Dia memberikan kecukupan. Adapun terhadap anak yatim maka janganlah kamu berlaku sewenang-wenang. Dan terhadap orang yang minta-minta maka janganlah kamu menghardiknya. Dan terhadap nikmat Tuhanmu maka hendaklah kamu menyebut-nyebutnya (dengan bersyukur). Qs: 93.

Makna kalimat:
تَقْهَرْ
عَائِلا
آوَى
قَلَىٰ
وَدَّعَكَ
سَجَىٰ
ٱلضُّحَىٰ

1-                   ٱلضُّحَىٰ waktu menjelang tengah hari (kurang lebih pukul 10.00): kira-kira pukul 10.00 ia melakukan shalat[1].
2-                   سَجَىٰ (غطى) Meliputi. Ada ungkapan Rasulullah mengatakan tentang kisah nabi Musa dan Khaidir dengan kalimat “فوجد رجلا مسجى”.[2]
3-                   وَدَّعَكَ / تركك “Meninggalkanmu”
4-                   قَلَىٰ / أبغض “Benci” Adapun makna firman Allah: وَمَا قَلَى adalah: Allah tidak akan pernah membenci engkau wahai Muhammad semenjak Allah mencintaimu.
5-                   آوَى Rasulullah mengatakan: Aku dalam pemeliharaan pamanku Abi Thalib[3].
6-                   عَائِلا / فقيرا “Fakir”
7-                   تَقْهَرْ “Buruk dalam berinteraksi”[4]. Ada juga yang membacanya dengan: تكهر [5].

Hadits-hadits yang menyeru untuk melaksanakan Shalat Dhuha.

عن أبي ذررضى الله عنه أن رسول الله صلى الله عليه و سلم قال :
(يُصبح على كل سُلّامى من أحدكم صدقة ، فكل تسبيحة صدقة، و كل تحميدة صدقة ، و كل تهليلة صدقة، و كل تكبيرة صدقة ، و نهي عن المنكر صدقة ، و يُجزي من ذلك ركعتان يركعُهُما من الضحى).

Terjemahnya: Dari Abi Dzar Radhiyallahu Anhu, bahwa Rasulullah Shalallahu 'Alaihi Wasallam berkata: Yang akan menjadikan semua persendian salah satu diantara kamu itu bersinar adalah "sedekah", maka semua tasbih, pujian, tahlil, takbir, melarang orang berbuat kemungkaran adalah "sedekah", dua rakaat sholat dhuha itu adalah bahagian dari sedekah. Hr. Imam Muslim.[6] 

روى الإمام أحمد من حديث بريدة رضى الله عنه قال سمعت رسول الله صلى الله عليه وسلم يقول: في الإنسان ثلاثمائة وستون مفصلا فعليه أن يتصدق عن كل مفصل منه بصدقه, قالوا: ومن يطيق ذلك يا نبي الله؟ قال: النخامة في المسجد تدفنها والشىء تنحيه عن الطريق فإن لم تجد فركعتا الضحى تجزئك.
Terjemahnya: Diriwayatkan oleh imam Ahmad dari haditsnya Baridah Radiyallahu Anhu. Baridah berkata: Aku mendengar Rasulullah Shalallahu 'Alaihi Wasallam berkata: Pada setiap diri manusia itu ada 360 persendian, maka bagi setiap persendian itu ada sedekahnya, para sahabat bertanya: Maka siapakah yang menanggung semua sedekah itu wahai Rasulullah?. Rasulullah menjawab: Membersihkan dahak yang terdapat dimasjid dan membersihkan hal-hal yang mengganggu dijalan, maka jika kamu tidak mendapati hal sedemikian itu, maka shalat dhuha dua rakaat cukup bagimu.

حَدَّثَنَا عَبْدُ الرَّحْمَنِ بْنُ مَهْدِيٍّ ، حَدَّثَنَا مُعَاوِيَةُ يَعْنِي ابْنَ صَالِحٍ ، عَنْ أَبِي الزَّاهِرِيَّةِ ، عَنْ كَثِيرِ بْنِ مُرَّةَ ، عَنْ نُعَيْمِ بْنِ هَمَّارٍ الْغَطَفَانِيِّ ، أَنَّهُ سَمِعَ رَسُولَ اللَّهِ صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ ، يَقُولُ : قَالَ اللَّهُ عَزَّ وَجَلَّ : " يَا ابْنَ آدَمَ ، لَا تَعْجِزْ عَنْ أَرْبَعِ رَكَعَاتٍ مِنْ أَوَّلِ النَّهَارِ ، أَكْفِكَ آخِرَهُ .
Terjemahnya: Abdurrahman bin Mahdy dan Mu’awiyah (Maksudnya) Ibnu Shalih bercerita kepada kami, dari Abi Al Zahiriyah, dari Katsir bin Murrah, dari Na’im bin Hamar Al Ghatthaniy, bahwasanya Hamar Al Ghatthaniy telah mendengar Rasulullah Shalallahu ‘Alaihi Wasallam berkata: Allah Subhanahu Wata’ala berfirman: Wahai bani Adam, janganlah engkau lalai dari mengerjakan shalat empat rakaat diawal siang hari, aku akan mencukupkan engkau diakhirnya.

Ada orang bertanya: Apakah  Rasulullah mengerjakan shalat dhuha?

Rasulullah Shalallahu ‘Alaihi Wasallam selalu mengerjakan Shalat Dhuha.
Diriwayatkan oleh Imam Muslim dari jalur Mu’az, bahwa Mu’az bertanya kepada Sayyidah ‘Aisyah tentang jumlah bilangan Shalat Dhuha yang dikerjakan oleh rasulullah. ‘Aisyah mengatakan bahwa Rasulullah mengerjakan Shalat Dhuha sebanyak empat rakaat dan menambahnya jika ia menghendaki lebih dari empat rakaat[7].

Apakah boleh shalat dhuha berjama’ah?

Shalat dhuha adakalanya boleh dilakukan berjama’ah dan tidak memperbanyak rakaat. Sebagaimana diriwayatkan oleh Imam Muslim: Dari ‘Utban bin Malik bahwa Rasulullah takbir hendak melaksanakan shalat dhuha dan kami berbaris dibelakangnya, Rasulullah shalat sebanyak dua rakaat kemudian ia salam dan kami pun salam[8].

Allahu ‘Alam.
Ditulis Oleh: Muhammad Syafi'i Tampubolon

[1] Kamus Bahasa Indonesia
[2] Tafsir Juz Amma Jilid 1 karangan Abi Abdillah Musthafa ibnu Al Adawy halaman: 382 cetakan Maktabah Makkah.
[3] Maani Al Quran Jilid 3 halaman 274 Karangan Aby Zakariya Yahya ibnu Ziyad Al Farra’ Cetakan Maktabah Usrah.
[4] Ibid 2
[5] Ibid 3
[6] Ibid 2
[7] Ibid 2
[8] Ibid 2

06.33 | Posted in | Read More »

Blog Archive

Recently Commented

Recently Added