Using HTML Gadget to Display Islamic Widget in Blogspot

Some of you reported difficulties using the automatic post to insert Alhabib islamic widgets in your blogs. Some got error messages, while the others reported failed notes. Still some others experienced other types of difficulties so that they cannot put the widgets automatically into their blogs.

So, there are many ways to Rome. In this tutorial, you will learn, step-by-step, how to display or insert the islamic widgets on your Blogspot blogs, manually.

Using the HTML Gadget

1. Copy the embed code for a particular islamic widget.

Embed code dialog windowThis code is available after you click the BLOG ME button on every widget configuration page. You can copy the embed code by clicking the text box or the COPY button.

2. Enter your Blogspot’s Dashboard.

Manage blogs in blogspotVisit and enter your Dashboard by providing your Google account’s email and password. If everything is okay, you will be presented with a list of blogs that you can manage. Click the LAYOUT button on the blog list that you want to insert the islamic widget into. A diagram of your blog’s layout with its elements will be displayed.

3. Add a new Gadget.

Add a gadget diagram in blogspot layout managerLook for an ADD GADGET button on your blog’s layout diagram. Depending on your theme, such button can be anywhere and more than one. Choose the one on which position you want to show the islamic widget.

A new window will be presented where you can choose HTML/Javascript Gadget as shown below. Click the PLUS button to continue with the insertion.

HTML/Javascript gadget in Blogspot list

4. Insert the code in the Configuration Box.

Configure HTML / Javascript box to insert Alhabib islamic widget at BlogspotA new window with a box titled: HTML/Javascript Configuration will be presented. There you can give the widget a title which will be displayed along with it. In the content area, paste the embed code that you have copied in step 1. You can do it by pressing Ctrl-V or right-click with your mouse and click Paste on the displayed menu. Then press the SAVE button at bottom right.

5. Save the changes to your blog’s layout.

Save the layout with the newly added HTML gadgetYou will be directed back to the layout page of your blog and a message will tell you that a new element has been added. The newly added gadget will be represented by the title that you have given in the previous step.

On the top row, you have the choice to PREVIEW your changes. If you are satisfied, do not forget to SAVE the modified layout.

Ok, that is all the steps that you need to take to manually inserting the islamic widget on your blogspot blog. I hope I am clear enough in explaining.

Related Post

Habib bin Hilal

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

63 comments to “Using HTML Gadget to Display Islamic Widget in Blogspot”

You can leave a reply or Trackback this post.
  1. may dem tien - 17-June-2018 Reply

    I am new blogger. Thank you for your article and widget. It is very clear tutorial and easy to follow.Good

  2. SisterL - 10-December-2014 Reply

    Please offer an option to use a widget with no ads.
    Currently a static ad shows whenever our webpage is opened, in the place of the calendar. User will need to refresh the page in order to get to the calendar.

  3. Fountain - 13-June-2014 Reply

    Just to say…May you be blessed for sharing and teaching brother. Hope its ok..I have also pinned some of your quotes onto pinterest. Tq again.

  4. Kho Sàn Gỗ - 26-February-2014 Reply

    I am new blogger. Thank you for your article and widget. It is very clear tutorial and easy to follow

  5. Abdullah - 13-March-2013 Reply

    i got it,tq so much

  6. Yakub Raza - 22-July-2012 Reply


  7. Internet Marketer - 21-April-2012 Reply

    The blogger interface in google is a very user-friendly. Even if you are a newbie on this interface, you can easily maneuver on all the things that you want and need to post in your own blog account on .

  8. Robe Gala - 27-February-2012 Reply

    Whoah this blog is magnificent i like reading your posts. Stay up the good paintings! You know, a lot of people are looking round for this information, you can help them greatly.

  9. swtor-companions - 17-January-2012 Reply

    I realy like your layout and coloring, alot of intresting reading here also. What do you think of my site?

  10. adult dvd rentals - 16-January-2012 Reply

    Loving a post could be like giving an optimistic opt for change, I can like every post I like, but no loves could be wasted from me if I provide a good one to your website. I say to you right now, this has a good like from me.

  11. frau verführen - 19-December-2011 Reply

    Thanks, this can help me in the future for my sites!

  12. Maya - 14-December-2011 Reply


    Thank you for your article and widget. It is very clear tutorial and easy to follow. I have copied it into my blog.


  13. Tutor Finder - 9-December-2011 Reply

    Could you share many more Islamic widget for blogspot?

  14. Apple - 6-November-2011 Reply

    I am beginer blog. Thanks your tips

  15. tiffany@home theater - 26-October-2011 Reply

    Helpful post. The instructions are very well laid out. This is very inspiring for Islams out there and I'm pretty sure that lots are already encourage to o do this one. God job!

  16. Screening - 5-September-2011 Reply

    im actually one of this "Some of you reported difficulties using the automatic post to insert alhabib islamic widgets in your blogs. Some got error messages, while the others reported failed notes. Still some others experienced other types of difficulties so that they cannot put the widgets automatically into their blogs" I would really appreciate your help. Keep it up…

  17. ACPE - 16-August-2011 Reply

    Extra people have to learn this and perceive this aspect of the story.

  18. webasif - 5-August-2011 Reply

  19. تحریم - 18-July-2011 Reply

    can u shear this code here>

    • p90x - 20-October-2011

      I am pretty you can just click the BLOG ME button on the widget configuration page. Hope that helps.

  20. تحریم - 17-July-2011 Reply


  21. fikircagi - 9-May-2011 Reply

    siteniz cok güzel olmuş, " " hurda demir, hurda kağıt, kağıt geri dönüşüm, hurda fiyatları, metal hurdası, hurda metal, hurda demir fiyatları

    Your site was very nice, thank contributors…

  22. Sauna - 22-April-2011 Reply

    Sauna Sauna imalatı kovası Sauna kum saati Sauna kokusu Sauna esansı Sauna malzemesi Sauna malzemeleri Buhar odası imalat malzemeleri ahşap sauna sanayi servisi montajı sauna bakımı

  23. convatec 22771 - 12-April-2011 Reply

    Hey, great for the instructions, this is a great gadget

  24. Mohamed Abdi - 3-April-2011 Reply

    it is great !

  25. Furniture - 12-March-2011 Reply

    Could you share many more Islamic widget for blogspot?

    Best Regards

  26. quran tutors - 23-February-2011 Reply

    Nice one..! I like the way you guided and its really nice to add islamic widgets to our blogs..Thanks for sharing.

  27. Vicky Gee - 21-February-2011 Reply

    Its to nice site

    please visit it .

  28. Salbiyyah - 14-February-2011 Reply

    Jazakallah…. will try to apply your tutorial, its quite clear.. wish me luck, it will make my blog look beautiful..

  29. wasabi - 29-January-2011 Reply

    where are the embed code??

  30. wasabi - 29-January-2011 Reply

    where are the embed code??

  31. Pam - 25-January-2011 Reply

    You can the link to your site here:

  32. Andree Kenne - 23-January-2011 Reply

    Can I just say what a aid to search out someone who actually is aware of what theyre talking about on the internet. You undoubtedly know learn how to convey an issue to light and make it important. Extra people have to learn this and perceive this aspect of the story. I cant believe youre no more standard since you undoubtedly have the gift.

  33. PS3 for USD40 - 17-January-2011 Reply

    UNBELEIVABLE ! they sell PlayStation gor USD39.99 – I’m not sure why the price is sooo low but it’s real.Head to this blog and see your self….the original price was USD499.

  34. Misrad Sanrusdi - 15-January-2011 Reply

    Assalamu'alaikum Admin,
    Saya sudah coba pasang kalender hijriyah di blog saya, tapi gagal. Mohon bantuannya, Terima kasih atas bantuannya…

  35. lose weight - 25-November-2010 Reply

    Thanks pal. Good submissions you have here. Got some more websites to point to which have a bit more stuff like this?

  36. Fewos Oberstdorf - 22-November-2010 Reply

    It looks like a very useful gadget for many people!

  37. dubai company - 22-November-2010 Reply

    Certainly many people had been waiting on this nice gaget

  38. Top Pink Netbooks - 21-October-2010 Reply

    Just think, in three years there will be handheld devices outperforming today's laptops and netbooks. Pretty amazing how fast things are developing these days.

  39. Joel - 12-October-2010 Reply

    These widgets are very helpful

  40. Download - 11-October-2010 Reply

    As-Salaam Alaikum

    Thank you for great article but doesn't work for me,if give you my url,can you check for me ?

    Thank you so much for all things..

  41. Eskisehirspor - 11-October-2010 Reply

    Thans a lot man

  42. Abdullah - 11-October-2010 Reply

    Assalaam Alaikum can we use on wordpress ? or can you compatible with wordpress 3.0

    Thank you!

  43. Ruswan Efendi - 8-October-2010 Reply

    kode HTML nya mana????

  44. Lloyd Mendizabal - 4-October-2010 Reply

    I´ts shrewd to expect we make evolved so in so lowercase case when compared to opposite time frames. Ending 10 were conclusive when it comes to profession and gadgets

  45. UBEZPIECZAJACY - 16-September-2010 Reply


  46. Get Your Free iPhone - 20-August-2010 Reply

    Have to say – thank you so much for this blog!!
    You don’t often find a good blog which isn’t just full of spam anymore 😛

    I’ve already bookmarked it so I can come back to it! 😀

  47. Ayub Bham - 20-July-2010 Reply

    As-Salaam Alaikum
    how i can have Islamic Gadgets on my desktop

  48. DR shafqat - 19-July-2010 Reply

    salaam i want to post calender in face book account pls help me

  49. Kelly Ali - 15-July-2010 Reply

    Thanks for the instructions, it really helped! 🙂

  50. abdi - 28-June-2010 Reply

    when i post it in my profile the flash is not changing unless u press the i butten i wana fix this

  51. freshers - 24-June-2010 Reply

    why blogger asking now to add title in adding new widgets in title section i am sad 🙁

  52. Estechu - 11-June-2010 Reply


  53. kim - 1-June-2010 Reply

    thank you for the instructions

  54. nawara - 25-May-2010 Reply

    salam aleikum me gustaria como puedo caragar estos gadgets a mi espacio hotmail ya llevo intentando muchos dias y no puedo porfavor me lo explicas gracias

  55. huda_insyirah - 23-April-2010 Reply

    whenever i click the 'blog me' button, it didn't even pop out. i know i had waited, until my lptop's screen turned black several times but still i didn't get the embedded code. i've been doing these for the past months but still can't access the code. i like your gadgets so much and i wanted to put it into my blog but the embedded code just don't appear. Are there any other ways? or i guess it's just not my luck…huhu~

    • al_habib - 23-April-2010

      With what browser did you open the page. It requires javascript and flash plugin, which are usually installed or turned on by most browsers.

      Alhabib Islamic Web Service

  56. wahyu - 24-March-2010 Reply

    coba langsung di masukin htmlx sekalian!!

  57. kasim.khan - 9-March-2010 Reply

    hiiiiiii h r you

    • Online Quran - 5-April-2010

      I am fine … 🙂 I was just surfing internet in regard to Islamic gadgets .. i have seen your blog .. And from there I got an idea to make my own website and made a show room of Islamic gadgets.


Leave a Reply