Cara Memasang Widget Alhabib di Blogspot (Blogger)

Memasang widget atau perkakas blog tambahan ke dalam sebuah blog atau website ternyata tidak selamanya mudah. Terutama bagi yang masih baru dalam dunia blogging, antara keinginan mempercantik dan menambah perkakas blog dengan kemampuan untuk mewujudkannya bisa jadi bagaikan “pungguk merindukan bulan”. Paling tidak, demikianlah yang tergambar dari beberapa komentar di situs Layanan Web Islami Alhabib ini.

Untuk itu, kami tuliskan tutorial berikut ini tentang bagaimana cara memasukkan widget Alhabib ke dalam blog di Blogspot (Blogger). Semoga dapat membantu mewujudkan keinginan anda untuk mempercantik blog dengan widget-widget islami sekaligus menyebarkan nilai-nilai islam.

Jika masih ada pertanyaan, silakan sampaikan melalui formulir komentar. Insyaallah kami akan dengan senang hati menjawabnya.

Tutorial

1. Kunjungi Halaman Koleksi Widget Islami Alhabib

Ada beberapa koleksi widget yang tersedia: kalender, jam, dan aneka tema. Cari widget yang kauinginkan melalui tombol Choose Page untuk melihat halaman-halaman yang ada. Tekan pada tombol Get this Widget atau judul widget untuk memulai penyetelan dan pemasangan.

Kunjungi halaman widget islami Alhabib

2. Setel Tampilan Widget

Melalui contoh widget Asmaul Husna di bawah ini, dapat dilihat layar penyetelan widget Alhabib. Setiap widget akan mempunyai pilihan setelan masing-masing namun tidak jauh berbeda.

Pada kotak Appearance (Tampilan) tersedia tombol untuk mengganti warna dari widget. Tekan tombol warna tersebut untuk memilih warna lain. Anda dapat pula mengganti warna dasar (Background Color) sesuai dengan latar belakang warna blog anda untuk mengetahui bagaimana kira-kira tampilan widget ini jika telah terpasang pada blog anda. Ukuran widget dapat pula diganti melalui kotak Width dan Height (lebar & tinggi). Setelah mengganti angka lebar/tinggi, pindahkan kursor mouse ke kotak lain atau tekan tombol refresh yang tersedia pada papan atas kotak Pratayang (Preview)

Layar halaman penyetelan widget islami alhabib.

Pada kotak Alignment (Kedudukan) tersedia pilihan untuk mengatur posisi widget relatif terhadap sekelilingnya. Biasanya anda tidak perlu mengatur ini. Namun jika tampilan widget di blog anda tidak sesuai yang anda inginkan (misalnya, menempel ke kiri kotak samping atau sidebar), anda dapat mengklik centang pada No Preferences dan memilih center (untuk rata tengah) atau perataan lainnya.

Tampilan pratayang akan otomatis berubah sesuai pilihan anda.

3. Munculkan Kotak Kode Embed dan Pemasangan Otomatis ke Blog

Tombol Blog Me akan membuka kotak penyisipan widget otomatis.

Tekan tombol Blog Me! jika anda telah rampung dengan penyetelan tampilan widget. Sebuah kotak lain akan muncul pada sisi kanan (lihat di bawah). Mungkin anda harus menunggu beberapa saat untuk melihatnya.

Pada kotak ini, kode embed akan ditampilkan di bagian bawah. Kode ini berguna bagi mereka yang memiliki pengetahuan HTML lanjutan dan mereka yang mempunyai blog atau situs yang dikelola sendiri. Kode embed ini dapat disalin dengan mengklik pada kotak kode dan disisipkan pada source code situs/blog anda. Ia dapat pula disisipkan pada beberapa tempat yang disediakan oleh penyedia blog anda. Biasanya pada bagian Text Widget atau Text Module atau semacamnya (untuk blog di Multiply, bisa lihat contoh ini).

Layar Penyisipan Widget Otomatis ke dalam Blog

Ada banyak tombol pada bagian atas. Mereka dipakai untuk memasukkan atau menyisipkan widget secara otomatis ke masing-masing jenis blog. Jadi, jika anda ingin memasukkannya ke dalam blog di Blogspot, tekan tombol Blogger.

4. Isikan Rincian Akses Masuk ke Blog Anda

Kotak Posting Otomastis

Masukkan nama pengguna (Blogger username) dan kata pembuka (Blogger password) pada isian yang sesuai. Nama pengguna adalah alamat email pada akun Google anda. Begitu juga password. (Google telah mengubah cara login ke Blogger. Mereka meminta akun Blogger untuk diubah secara otomatis menjadi akun Google.) Isian pada Blog akan otomatis berubah sesuai nama pengguna yang anda masukkan. Jika anda mempunyai beberapa blog di Blogspot atau nama blog yang lain, maka anda harus menuliskan alamat blog yang sesuai pada kotak ini.

Catatan: Kami mengutamakan keamanan anda. Nama pengguna dan password tidak akan pernah tersimpan oleh kami. Keduanya hanya dipakai untuk penyisipan otomatis saja.

Pastikan bahwa pilihan Post to sidebar tercentang jika anda ingin menampilkan widget alhabib pada bagian papan sisi blog anda. Jika tidak, maka widget akan tertampil sebagai sebuah pos/tulisan.

Selanjutnya tekan tombol Post. Sebuah konfirmasi berhasilnya (atau tidak berhasilnya) penyisipan otomatis akan muncul setelah itu.

Kotak konfirmasi berhasil menyisipkan widget alhabib ke blogspot

5. Kunjungi Blog Anda dan Cek Terpasangnya Widget Alhabib

Alhabib Islamic Widget on Blogspot PageJika anda telah melihat terpasangnya widget pada blog anda dan sesuai dengan tampilan yang anda inginkan, selamat! Jika ternyata ada tampilan yang kurang pas, anda dapat mengunjungi kembali halaman penyetelan dan mengulangi langkah-langkah tutorial di atas.

Judul widget ini secara otomatis dibuat. Jika anda ingin menggantinya, masuklah ke akun blogspot anda dan benahi melalui halaman pengelolaan (Administration atau Dashboard)

Semoga bermanfaat.

Related tags:

cara menaruh widget ke blog; mempercantik blog;

Tentang Habib bin Hilal

Habib bin Hilal is Editor in Chief of this blog and manager of the website: Alhabib - Coloring with Islam.
  • andin

    qo saya ga bisa add widgetnya ya…:(
    padahal ud sesuai petunjuk qo…

  • http://www.rumahexcel.com/ rumahexcel

    bagus sekali informasinya…thank

  • kencyy

    ko aq binjjunj….

  • http://jumadiana.wordpress.com jumadiana

    salam kenal, terima kasih tutorialnya. Yang saya tanyakan kalau untuk memasukkan ke wordpress dengan langkah tersebut, widget akan masuk dalam tulisan (tempat yang bila kita nulis, gambar tersebut akan bergeser ke bawah) bukan pada templet yang tampil permanent. bagaimana memasang widget tersebut pada tempat yang permanent seperti kolom pengarang, blogroll, kalender, dll.

    Demikian pertanyaanku makasih sebelumnya

  • http://nayarre-pata.blogspot.com/ Nayarre Pata Blog

    thanks.. udh saya pasang…

  • dhiana

    assalamu’alaikum…..

    dhiana mau tanya ne.. gimana cara memasukkan posting yang saya buat kedalam tombol menu yang saya buat di flashvortex.com???
    tlg bantuanya ya……….
    jwban tlg kalo bisa dikirim ke email saya
    lovely_vava@yahoo.com

    trimakasih……..

    • http://www.al-habib.info alhabib

      Saya kurang memahami maksuk Dhiana. Tetapi kalau melihat cara pembuatan tombol menu di flashvortex, dhiana tinggal membuat satu menu baru, diberi nama, kemudian ditentukan tautannya ke mana. Pertama dhiana harus mengetahui alamat posting tersebut. Caranya: buka posting, dan catat atau copy alamat yang muncul di bagian kotak alamat di browser internet. Misalnya, pada step 2 di flashvortex, label: postingA. Maka pada kotak di bawahnya masukkan alamat posting tadi.

  • sumroh faqoth

    Asslmkm… afwan, koq ga bs2 ya…
    padahal sudah mengikuti tata caranya…

  • http://planetaqidah.blogspot.com iswa

    sudah saya coba tapi belum terpasang

  • isya

    assalamu’alaykum.
    akh,
    kenapa tidak ada kotak “post to sidebar”??
    tidak muncul..

  • arifah

    saya sudah mencuba beberapa kali memasang widget ini pada blogspot saya mengikut tutorial yang telah ditunjukkan tetapi masih tidak dapat masuk ke blog saya

    • http://www.al-habib.info alhabib

      Bisa lebih spesifik? Misalnya, pada bagian mana, langkah yang ke berapa terjadi kesalahan? Atau mungkin ada error message yang muncul?

    • arifah

      pada kotak “code”.saya telah memberi alamat untuk dihantar pada blogspot saya menggunakan akaun goolge bersama password.setelah menekan butang “post”,didapati kenyataan “post failed” pada bar dibawahnya

      • http://www.al-habib.info alhabib

        Akaun google (berupa email address) dimasukkan ke dalam isian Blogger username. Kemudian password pada Blogger password. Pada isian Blog, tuliskan alamat blog anda (coba tanpa menuliskan http:// misalnya arifah.blogspot.com).

        Saya telah mencoba dengan akaun Google saya dan tidak mendapati masalah.

        Mungkin bisa dicoba sekali lagi… :)

  • http://alkerohi.blogspot.com afrar yunus

    terima kasih.sudah dapat memasang.

  • http://ashim-abuahmad.blogspot.com ashim

    assalamu alaikum..wr..wb.
    Alhamdulilah widgetnya udah dapat saya pasang di blog saya.
    keren banget,semoga islamicwidget ini menjadi amalsholeh
    buat alhabib.SEmoga alhabib selalu sehat walafiat dalam lindungan Allah SWT,dan terus berkarya dalam seni islam.Saya blogger baru,sudilah kiranya tengok saya punya blog.
    Syukron.
    Wassalam..

  • innainna.ting!

    assalamu’allaikum wr wb

    bagaimana cara memasukan kode embed ke dalam widget di wordpress ?

    saya sudah mencoba berulang kali tapi tak berhasil :(

    mohon bantuannya…
    syukron

    wassalamu’allaikumwrwb

    • http://www.al-habib.info alhabib

      Wa’alaikum salam, coba lihat di tautan ke artikel terkait pada akhir tulisan di atas. Ada tautan ke cara memasang di wordpress.

  • muslimah

    sy pun…asik x bole je…sdeynye..huhuhu

  • Apa khabar

    bagaimana jikalau mahu plugin pada joomla.

    • http://www.al-habib.info alhabib

      Plugin untuk Joomla belum ada. Tetapi jika mau, bisa menggunakan module di Joomla. Silakan ikuti menu Extension -> Module Manager -> Custom HTML. Anda bisa menyisipkan kode yang terdapat pada halaman widget islami Alhabib ke dalam HTML Source pada kotak Custom Output.

  • aidil

    knp sume wijet yg sy add drpd alhabib xleh pon.pnt sy asyik ulang langkah tu…

  • http://ikrar26.blogspot.com SRIYANTO

    Terima kasih atas semuanya. Sejak pertama melihat, saya langsung memasang Widget Alhabib di ikrar26.blogspot.com. Semoga bermanfaat juga buat saudara kita yang lain. Amin

  • http://www.al-habib.info alhabib

    Bisa dijelaskan lebih jauh, di mana terjadi kesalahannya? Pesan apa yang muncul?

  • http://smpn9wadaslintang.wordpress.com wildan

    minta tolong dimana letak kesalahannya, saya coba pasang widget tapi kok tidak bisa ya

  • http://signal-railways.blogspot.com mssyarif

    Thanks for your information.

  • http://haydar85.wordpress.com Lukman

    Terima kasih…

  • http://jamiahalsidrah.blogspot.com ridzuanmdnor

    barakallah trima kasih atas mujahadah menginovasikan minda islamic di ruang ciber

  • hamba

    makasih

  • http://www.azzarkasyie.blogspot.com Mohd Faizal

    Assalamualaikum,
    Moderator yang budiman,saya sudah usaha sedaya upaya untuk memasukkan widget floral and swirl ornament(hijri kalendar) kedalam blog saya, sampai sekarang masih tidak boleh walaupun saya sudah ikut panduan info al-habib.masalahnya saya juga sudah masukkan nama blog dan password…masih juga failed. Bolehkah tuan moderator tolong masukkan widget atau bantu saya apa masalahnya?segala kerjasama dari pihak tuan moderator saya ucapkan jazakallau khairan kathira.

    • http://www.al-habib.info alhabib

      Saya lihat, widget sudah terpasang di blog saudara.

      Sudah menemukan letak kesalahan sebelumnya?

  • http://namaku-ullie.blogspot.com dewi

    terima kasih saya sudah pasang widget asmaul husna

  • sardy

    jazaklloh….semuanya…..