Skip to main content

Posts

Showing posts with the label Widgets

Add a forum on your Blogger blog with Nabble

Add a forum on your Blogger blog with Nabble: A forum serves as a platform where individuals can engage in discussions and exchange ideas on various trending subjects. It allows users to introduce topics of interest and receive comments and diverse suggestions from others. With a substantial user base, you can regularly post questions for visitors to answer, effectively transforming your forum into an extensive Frequently Asked Questions (FAQ) section. Forums create an open and social environment for your visitors to freely express their valuable thoughts and share ideas from fellow participants. In this concise guide, I will outline easy steps to incorporate a forum into your Blogger or Blogspot blog. Let's begin this tutorial! How to Create a Forum With Nabble To implement a forum we will use Nabble, in my opinion, one of the best free options. We go to Nabble page and there, we will create an account (keep in mind that this account will be the moderator of the forum). And once w...

Add Numbered Page Navigation Widget for Blogger

To configure the number of posts displayed per page in Blogger, follow these steps: Go to the Settings menu and click on "Posts and comments." Look for the option labeled "Show at most ? posts" and specify the desired number of posts to be displayed. Once the total number of posts in your blog exceeds this limit, you will notice "Older Posts" and "Newer Posts" navigation links appearing in the footer of your homepage and archive pages. This is because Blogger doesn't provide built-in page numbering functionality. However, incorporating page numbers instead of the "Older Posts" and "Newer Posts" links can enhance navigation for your blog visitors. It allows them to quickly jump from one page to another or directly access a specific page while also providing an indication of the total number of published posts. To implement numbered page navigation using JavaScript on a Blogger/blogspot blog, you can refer to the tutorial pr...

How to Create a Sitemap or Table of Contents in Blogger

[One of the limitations of a blog is that it lacks an index or sitemap, which can make it challenging for readers to locate specific content. Although the blog archive and labels provide information about published posts, they are not displayed on a single page, making it difficult to browse through them easily. Fortunately, there is a solution: you can utilize a gadget to add a table of contents or sitemap on Blogger, showcasing an index of all published posts categorized by topic. Additionally, it will highlight the latest posts with a "New!" label. How To Add a Sitemap with a List of Posts to Blogger To implement this feature on your blog, follow the steps below: Step 1. Login to your Blogger Dashboard and select your blog. Step 2. Go to Pages > click the New Page button and select Blank page Step 3 .  Click on the HTML tab and paste the following code inside the empty box: <style> p.labels a{color: #242424 ; text-transform: uppercase;font-size: 15px ;} a.post...

Share blog posts in social medias using Sharethis

In my opinion, AddThis is the most complete social sharing service allowing to share your posts in more than 270 different social networks. I use the AddThis widget, so if you would like to see a live demo, please scroll down to the buttom of this post to see the AddThis sharing buttons. This tutorial will show you how to register and add this feature on your blog and you will get to know some of the customization options of these buttons. So let's get started! Getting the AddThis share buttons code Step 1. Visit the https://www.addthis.com/get/sharing page. Step 2. To get the sharing buttons and to access the AddThis sharing stats to find out how many people shared your post by using the AddThis feature, click on the " Create account " button. The site will ask you to make a small registration. Fill out the information to register. It's quick, simple and it's free. To finish the registration, click on the Register button. Step 3. After you've been logged ...

How To Add a Floating Sticky Footer Bar in Blogger

I have seen that many of those using toolbars such as Wibiya have had to remove it because of interfering with the performance of some scripts like Scriptaculous and Prototype, while others have chosen to remove these scripts just to continue using the toolbar. Well, for those who prefer to have a custom toolbar that does not give them such problems and allow them to continue using other scripts, here's how to create our own floating toolbar with a close option. The toolbar contains a search box, link for feed subscription, link to follow on Twitter and Facebook, like button to share on Twitter or Facebook and translator in five languages. You can see it working in this demo blog . Adding a Custom Sticky Toolbar on Blogger Step 1. Login to your Blogger account > select your blog > click on the Template option on the left side Step 2. Click on the Edit HTMl button on the right side > click anywhere inside the code area and press CTRL + F keys to open the Blogger search ...

New Blogger Widget: Contact form - Change Style & Install in a Static Page

Just a few days ago, Blogger introduced a new widget. It is about a contact form that you can add to your blog easily. It is very basic, because - at least for now, does not permit incorporating files or send anything other than plain text. The contact form for Blogger has the following features: Field for the user name Field for email Field for the message (textarea) Submit Button Screenshot  The design is simple and the text colors inherit the section where you add it. At the moment, this widget has no configuration options and is not available for dynamic views. How to Add Contact Form to Blogger To add it to your blog, just select the Layout tab, then click on Add a gadget in the section you want to show, for example, in the sidebar. Then, select the More gadgets tab and add the Contact Form gadget. Styling Contact Form As the background is transparent, the form will integrate well, aesthetically speaking, but nevertheless it is easy to modify using Style Sheets (CSS) to th...

How to add go to top and go to bottom buttons Using jQuery in Blogger

The Up and Down buttons can be used to navigate to the top and bottom of the page content, especially when on the main page are many articles or when an article has too many comments. These buttons have a fadeIn and fadeOut effect, this means that they will fade slightly when we are scrolling to the top or bottom of the page and additionally, have the function of going up/down the blog. Demo You can see a live demo on my blog, the buttons are located on the right side. How to put Go Up and Go Down buttons using the jQuery slide effect Step 1.  Go to Template, click on the Edit HTML button Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box Step 3. Copy and paste the following piece of code inside the search box in order to find it: ]]></b:skin> Step 4. Just above ]]></b:skin> paste this one: /* Up and Down Buttons with jQuery ----------------------------------------------- */ .button_up{ padding:7px; /* Distanc...

Recent Posts Widget with Thumbnails for Blogger/Blogspot

A few days ago, I posted a tutorial on How to Add a Simple Recent Posts Widget that shows a list with the most recent posts if you would prefer a more minimalist look. In this post, you will see a different way of displaying the Recent Posts on Blogger - this is specially for those who want to show more info like the recent posts excerpt / summary and the posts thumbnails. To add this gadget is very simple, just follow these steps below: How to Add the Recent Posts Widget to Blogger Step 1. From your Blogger Dashboard, go to Layout > click on Add a Gadget link Step 2. From the pop-up window, scroll down and choose HTML/JavaScript Step 3. Inside the empty box, add the following code: <div class="eggTray"> <script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list", "pipe_params":{"URL":" YOUR-BLOG /feeds/posts/d...

Google Translate Widget with Flags For Blogger

The Google Translate Widget for Blogger allows the visitors to translate your site or blog in their own language. This widget also auto-detect your blog language and then translate it to the readers chosen language. It supports 12 different languages: English, French, German, Spanish, Italian, Dutch, Portuguese, Russian, Japanese, Korean, Arabic And Chinese. How To Add The G oogle Translate Widget To Blogger Step 1 . Go to your Blogger Dashboard >> Layout and click on "Add A Gadget" link Step 2. From the pop-up window, scroll down and choose HTML/JavaScript   Step 3. Paste the code below in the empty box: <script type="text/javascript"> function showHide(shID) {     if (document.getElementById(shID)) {         if (document.getElementById(shID+'-show').style.display != 'none') {             document.getElementById(shID+'-show').style.display = 'none';      ...