Most Viewed Posts

  • Download Islamic Calendar 2014 in PDF! (68,962)
    [alert]You may be looking for: Islamic Calendar 2023 in PDF.[/alert] Alhamdulillah, the islamic calendar corresponding the gregorian calendar of 2014 is now available for download as PDF at Alhabib Web Service. As usual, you can view the calendar online or… <a href="https://blog.al-habib.info/2010/01/display-islamic-widget-blogspot-html-gadget/" class="more-link">Continue Reading <span class="meta-nav">→</span></a>
  • The Life Span of Muslim Ummah is 1500 Years. Is it True? (45,646)
    Several people have expressed the same question regarding the life-span of Muslim Ummah. They wanted to know whether it is true that the muslim ummah will only reach 1500 years of age [based on islamic calendar?]. Below is an answer… <a href="https://blog.al-habib.info/2010/01/display-islamic-widget-blogspot-html-gadget/" class="more-link">Continue Reading <span class="meta-nav">→</span></a>
  • Islamic Calendar 2010 Available for Download (19,490)
    In about two months from now, the islamic hijri year of 1430 will come to an end. Some of you may have wondered what would be the corresponding christian dates for islamic events of the year 1431 AH (anno hegira, after… <a href="https://blog.al-habib.info/2010/01/display-islamic-widget-blogspot-html-gadget/" class="more-link">Continue Reading <span class="meta-nav">→</span></a>
Categories: How To

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.

This 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.

Visit www.blogger.com 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.

Look 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.

4. Insert the code in the Configuration Box.

A 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.

You 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.

Habib bin Hilal

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

View Comments

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

  • 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.

  • 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.

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

  • "Countdown" MERE BLOG ME ADD NAHI HO RAHA HAI, HAR BAR FAIL HO JATA HAI,
    PLZ HELP

  • 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 blogger.com .

  • 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.

  • 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.

Recent Posts

A Collection of Crescent Moon Photos of Jumadal Akhirah 1446 AH

As predicted from the crescent visibility map before, the crescent moon of 1 Jumadal Akhirah…

14 hours ago

Jumadal Akhirah 1446 AH: A New Month Begins

As we journey through the Islamic calendar, the arrival of Jumadal Akhirah 1446 AH is…

2 days ago

Crescent Moon Photos for 1 Safar 1446 AH

The month of Safar is the second month in the islamic calendar or hijri calendar.…

4 months ago

Crescent Moon Photos of 1 Muharram 1446 AH

The islamic new year has come with the sighting of the new crescent moon that…

5 months ago

Collection of Crescent Moon Photos of 1 Dhulhijjah 1445 AH

The hilal sighting process, or observing the new moon marking the beginning of Dzulhijah, has…

6 months ago

Photos: Crescent Moon of 1 Ramadan 1445 AH (2024 CE)

As predicted from the crescent moon visibility map for Ramadan 1445 AH, there were no…

9 months ago