Stylish Custom About Author Bio Widget for Blogger

Stylish Custom About Author Bio Widget for Blogger

Author widget is the most essential gadget that every blog must have one. This author profile gadget allows site visitors to know the person behind a blog or website.

Custom about  author widget


Unlike, other blogging platforms, blogger already have an official author profile widget, which can be used to display your BlogSpot profile or Google+ profile. Both of these profiles are good, but not better, because it has the old classic style look and has not been upgraded since Google launched blogger.

Even I was using the classic style on my blog for a long time. But, soon enough, I realized that it did not attract my visitors. So, I removed the official profile gadget and replaced it with my own custom author profile. Here’s how it looks like:

about author blogger gadget


This profile bio widget can be used in every blog on blogger platform, and the best part about this is that creating this gadget is quite easy, no third-party codes integration at all. It is super fast loading and mobile friendly too.

The basic requirement for getting started is nothing much, but a profile picture or your blog logo is enough.

How to Add Stylish Custom Author Profile Gadget in Blogger

Below is the full tutorial for adding the custom profile widget in blogger. Just follow my footsteps:
1. Login to your Blogger account, click on Pages and press on “New Page”.

Profile Gadget in Blogger


2. Now, write anything or whatever text you want to show on your profile. For your ease, I have written a few author profile lines. Just copy and paste the piece of text on the blank page.


The goal of "your Blog name" is to provide you high-quality, relevant and the most accurate based contents, tools, "write your own categories, i.e, How-to tutorials on Blogging, SEO, Make money Online, social media, WordPress, Blogger, YouTube and more. Read About Us page to know more about us.

3. Click on the upload image icon and upload your profile picture or blog logo. After uploading the image, click on it and set it in the smaller size.

author bio Gadget


4. Add any hyperlinks, bold, italic, underline, or change font colors and font style, if you want. For example, you can insert contact us page link, or about us page link in the texts. 5. Click on “Save”, and press on the “HTML” Mode.

Adding profile bio gadget Blogger

6. Now, you need to insert animated social media follow us icons right after the description. Copy the following codes and paste it on your site after the description and change the blue color texts with your actual URL.


<div id='socialfontawesome'>

<a href='
your Facebook
Profile or Page URL goes here' rel='nofollow' target='_blank' title='Facebook'><span style='color: #037dd3'><i class='fa fa-facebook-official'></i></span></a>


<a href='
your Twitter Profile URL goes here' rel='nofollow' target='_blank' title='Twitter'><span style='color: #03b5e1'><i class='fa fa-twitter-square'></i></span></a>


<a href=
'your LinkedIn Profile URL goes here' rel='nofollow' target='_blank' title='linkedin'><span style='color: #027aa1'><i class='fa fa-linkedin'></i></span></a>


<a href=
'your Google+ Profile URL goes here' rel='nofollow' target='_blank' title='Google Plus'><span style='color:#ef4343'><i class='fa fa-google-plus-square'></i></span></a>


<a href=
'your Pinterest Profile URL goes here' rel='nofollow' target='_blank' title='Pinterest'><span style='color:#ba0120'><i class='fa fa-pinterest-square'></i></span></a>


</div>

7. Press on the “Compose” tab, and again click on the “HTML” mode and copy all the HTML Codes and close the page.

Add about author in Blogger


8. Now we need to paste the copied codes into the HTML/JavaScript widget on your blog. Go to “Layout” Page, click on “Add a Gadget” in the footer area and choose the “HTML/JavaScript Gadget”.

inserting Profile widget in Blogger

9. Paste the piece of code that we copied earlier, and press on the “Save” button.

Addi author Profile bio Gadget

Congrats! You have successfully inserted the custom author profile widget in blogger, without any third-party code integration.
Conclusion
This about author widget is fully mobile-friendly and super fast loading because it does not contain any Script or any external codes.
In this gadget, you can also change the image border style according to your choice, like you want the rounded border or square border image and customize the description according to your need and it contains follow us buttons, so your visitors will easily able to find your profile on Social Media with a single click.

Thank you for reading this article, if you like it then please share this content with your friends, family, and colleagues.

How to Sell Digital Ebooks on Your Own Blog

How to Sell Digital Ebooks on Your Own Blog

As we know that blogger, WordPress and other blogging platforms do not provide any official gadget to sell digital products and Ebooks online. But there are a couple of alternative ways you can start selling digital products and Ebooks online on your own blog.

sell ebook online blog


Here in this tutorial, we will show you step by step guide to integrate Digital Download widget on your blog.

But before we begin, you need to fulfill some basic requirements first.

What Do I Need to Start Selling on my Blog?

  • A cover image for your digital products.
  • A brief description of the product.
  • The file you want to sell.
  • A valid Gmail Account.

That’s all you need for getting started.

Now, we need to set up the Digital Download Plugin first and then we can add it to any blogging platform as we want. As an example, you can check my Store and you can see how it will look like.

How to Sell Digital Ebooks on your Blog

1. Go to Powr.io website, sign up using your Gmail address and verify your Email.

Sell Digital Ebooks


2. After verifying your Email, you will be redirected to Dashboard. Now, in your dashboard, click on Create New Plugin.

Sell Digital products


3. Scroll down and choose the Digital Download and click on it.

Selling Digital Ebooks


4. Click on Create Plugin button to build the E-commerce widget.

Selling Ebooks on your Blog


5. Now, you need to configure the E-commerce plugin as your choice. The configuration part is classified into 4 sections, i.e Connect, Content, Options, and Design.

In the Connect section, you need to add your Paypal account Email and enter your primary email for response alert. Once, you’re done, click Next button.

Selling Ebooks on Blog

6. In the Content section, you need to insert a featured image, file, description, and price. Once you are done, go Back and click the Next button.

Sell Digital Ebooks online

7. In the next Options section, you need to select currency code, enable or disable shipping fee, and add a URL to redirect after successful payment and then click on Next.

Sell Digital Ebooks on websites

8. In the last Design section, you can change display options, fonts, background, button design, border, and plugin width. Once, you are done, click on the Save button.

Selling online ebooks free


9. Now, you need to choose your subscription plan, click on the Free plan.

Selling online ebook free


10. Now, choose your blogging platform from the selection box, or you can choose HTML codes. Copy the codes and paste it where ever you want this E-commerce widget to appear.

Digital Ebooks free

Adding Digital Download widget in Blogger Page

1. In your blogger dashboard, click on Pages and hit the Create a New Page button.

Adding Ecommerce widget


2. Set the new page name as “Shop” or “Store”.

3. Now in the Page Editor Window, click on HTML mode and paste the widget codes. Hit the Save button and you’re done.

insert Ecommerce widget Blogger

Adding Digital Download Plugin in WordPress

If you are using WordPress platform, then follow this gif image, created by POWr team.



1. Login to your WordPress Dashboard and click on Pages and All Pages.

2. Now, select any page to add the plugin to and click Edit.

3. Paste the Digital Download plugin HTML code into the content area. Click Update and Preview Changes.

Adding E-Commerce Widget in Blogger Sidebar

If you wish to insert the E-commerce Widget in the blogger sidebar, then follow these easy steps.

1. In your blogger dashboard, click on the Layout Page and hit the Add a Gadget button in the Sidebar.

Ecommerce Blogger Sidebar


2. Now a pop-up window will appear, scroll down and click on HTML/JavaScript.

Add Ecommerce Blogger


3. Name a Title, and paste the codes into the Content area and click Save button & you’re done.

Blogger Sidebar setup Ecommerce

Conclusion
In this way, you can easily setup E-commerce plugin in your blog to sell digital files and Ebooks online and earn money from each product you sell online through your blog. No matter, what blogging platform you use, just grab the HTML codes and paste it in your blog.

For you ease, soon enough we will link a full video tutorial for configuring the selling feature in your blog for free.

Are you finding any difficulties while adding the Digital download widget on your blog? Let me know in the comment box below.

How to Find Widget ID in Blogger

How to Find Widget ID in Blogger

In blogger, there are different widgets are available and each of them has a unique ID or we can say as a name to easily identify them.

find widget id blogger


With that ID, we can easily locate any widget in the template code area or we can also the ID to find any specific widget to customize with CSS design.

Finding a widget ID has always been easier. Now, before I begin this tutorial, I want to clarify that, “those build-in blogger widgets do not contain numbers, instead they carry their widget names only”.

For example, if you add a popular gadget twice on your blog, then the first gadget ID will be “PopularPosts1” and the second ID will be “PopularPosts2″.

blogger widget id


But in case of HTML/Javascript widget, it will number only. it’s like HTML1, HTML2, HTML3.

Here in this tutorial, we will highlight two different ways to find out the widget ID you are looking for.

So, let’s get started…

Finding Widget ID in blogger

Here for explanation purpose, I will be finding the HTML/JavaScript widget.

Read: Blogger Widgets: How to Add Html Codes in Blogger

1. Login to your blogger dashboard and go to the Layout page.

Widget ID in blogger


2. Select the HTML/JavaScript widget and click edit.

Finding Widget


3. Now, a popup widget configuration window will appear. Move at the end of that URL and you will see something like this: “widgetid=HTML6”, that’s the unique widget ID we are looking for.

Find Widget ID blogger


Super easy, right? Just select any other widget instead of selecting HTML/ JavaScript widget and perform the remaining steps.

Below, I have highlighted another simple way to find widget ID directly from your template.

Finding widget ID from Blogger Template

1. In your dashboard, go the Theme section and backup your template first and then and click on the “Edit HTML” button.

Finding widget theme


2. In the HTML code editor, click on “Jump to Widget” section, and you will see the list of widgets ID available on your blog.

Finding widgets


3. Now click on the widget you want to see, let’s say it “HTML1”. click on them and then you will be redirected to the widget source code.

widget id in theme

Conclusion
Now you can easily find out any blogger widgets ID on your blog by following anyone method given above. Just copy the code after “widget=”, that’s the unique identification code.

If you’re satisfied with the article then show us your love by following us on Social Media to receive interesting upcoming articles.

How to Add Free Custom Domain in Blogger

How to Add Free Custom Domain in Blogger

Are you looking for the legitimate ways to get a free custom domain for your blog?

free domain blogger


Well, if you are then let me tell you that there are different ways you can setup free (.tk, .ml, .ga, .cf, etc.) Domains for your blogger blog.

In order to set up a free domain name, you don’t have to spend a single penny, all you need to do is create a free blog and follow the necessary steps for setting up the free domain with blogger.

Here in this tutorial, we will show you one of the simple methods to integrate your blog with free domains.

So, let’s get started…

For your ease, I have divided the tutorial into two parts. In the first part, I will be showing you the method to purchase a free domain and in the second part, we will set up the domain with blogger.

How to Register Free Custom Domain

First of all, you need to visit Freenom.com and then perform the below steps.

1. Enter your desired name in the “Find a new free domain” field and click on “Check availability” button.

register free domain

2. Now a list of free domain names will appear with .tk, .ml, .ga, .cf domain extensions. Choose your desired address and hit the “Get it now” button and click on “Checkout”.

register domain

3. Select the duration of the domain name as ” 12 months @ FREE” and click Continue.

Register custom domain

4. Now you need to sign up using your Gmail or Social Media account to review and check out the domain. Enter your Gmail address and click “Verify my Email address”.

Register domain name

5. A verification link will be sent to your given Gmail account. Open your Gmail address and click on the verification link to verify your email address.

Register free domain name

6. After verifying email, you will be redirected to the final review and checkout page, where you need to add your personal information and click on “Complete order”.

Register custom domain name

7. Order confirmation is complete and now they will provide you a unique order number for the free domain. Now, hit ” Click here to go to your client area”.

setup free domain

Congratulations! You have successfully booked a free custom domain name and now, we need to integrate the domain with blogger using the second part.

Read: How to Verify New blog in Google Webmaster tools

How to Add Free Custom Domain to Blogger

1. Login to Freenom, go to “Services” and click on “My domain”.

Adding free domain

2. Click “Manage Domain” button.

Add free domain


3. Click on “Manage Freenom DNS” and you will see “No records to display” text.

Adding free domain name

4. Now we need to Add new records to DNS Management for connecting your domain with blogger. First, you need to add 4 “A” records and then 2 CNAME records.

Setting up free domain

Copy the A records and paste, same as the below picture. Leave name section as blank, Type and TTL as default.

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

5. Now, login to blogger, go to Settings > Basic and under publishing click on “+Setup a 3rd party URL for your blog”.

Configure domain name

6. Add the Freenom domain name including “www” like this “www.proudzones.ml” and click save.

Adding custom domain name

7. It will show Error 9, don’t worry, everything is under control. Copy the 1 and 2 CNAME and go back to Freenom DNS Management page.

free domain to blogger


8. Select Type as CNAME and do the same as the below picture and hit Save.

insert free domain to blogger


9. Now, go back to Blogger > Settings > Basic > Publishing and click Save.

Insert domain to blogger


Congratulations, You have successfully configured Freenom domain name with your blog on blogger.

Read: How to Add New Blog to Bing and Yahoo Search Engine

You’re not done yet.

Now, your blog will look like this “http://proudzones.ml/” which is served as an unencrypted connection by default blogger.

Unencrypted connection


But, thanks to Google because, Now Blogger has officially made “https” available on every custom domains for using a free secured encrypted connection.

How to Setup HTTPS in Blogger?

1. Login to blogger and go to Settings > Basic > HTTPS and then make “HTTPS Availability” as “Yes”.

Setup HTTPS on blog


2. Now you need to wait for a while to let your blog transfer from HTTP to HTTPS. It will hardly take around 30 sec. to 1 minutes, till then keep reloading the page and once processing is been completed, select “Yes” in the “HTTPS Redirection”.

Setup HTTPS Blogger


Now you’ve turned on the HTTPS on blogger free domain name.

Encrypted connection
Conclusion
Well done! You have successfully setup a free custom domain name for your blogspot blog. Freenom domains also can be used in creating websites, E-commerce, and it’s compatible with every blogging platforms.


You can also renew your free domain for the next 12 months as soon as it gets expired.

Now It’s your turn to share this post and share your opinions and doubts in the comments section below.

How to Add Google Maps on Blogger

How to Add Google Maps on Blogger

Embedding Google Maps to your blogger post may help your visitors or customers to easily find the exact location of your online business.

embed google maps blogger


There are no doubts that Google maps are perfect for navigational use, it shows the proper driving directions, satellite view, and more essential information.

Just like Google, Bing and Yahoo search engine also allows embedding their map on your blog post. But they are not so flexible and huge enough to support lots of things, whereas Google has many features to provide you a quality map that no one can offer.

You can:

  • Allow peoples to easily find you on Maps.
  • Let them know your exact location and direction.
  • Let them simple find you from Google search results.
  • Create more engagement between you and your customers.
  • Upload your Business photos and write posts.
  • Add opening and closing time of your office or business.
  • Let others review and rate your business.

Watch this video to know the basic features of Google Maps.



So, embedding the map can give you more benefits, below we will show you to how to embed Google maps to blogger posts step by step.

Adding Google Maps in Blogger

In this tutorial, I will embed my office address available on Google Maps.

1. Go to Google and search for the place you want to embed and then click on the ‘arrow’ button to open the place in Google Maps or direct open the location from Google Maps.

Adding Google Maps


2. Now the place will automatically open on Google Maps and then click on the ‘share’ button of your left side panel.

Add Google Maps in Blogger


3. A popup box will appear, from their, you can share the place’s link and now hit the ‘Embed Map’ button to get the codes.

Adding Maps in Blogger

4. Here are the embedding codes, you can select the size, whether you want the smaller size or medium or the larger size. Once, you’re done choosing size, copy the iframe code.

Embedding Google Maps in Blogger


5. Go to your blogger posts and click on ‘New post’ to create a post or choose the existing one.

6. Click on ‘HTML Mode’ on the left side of the editor tab, paste the codes and hit the ‘Publish’ button.

embed Maps on Blogger


Congratulations! You’ve successfully added the Google Maps to your blog post. Here’s how it will look like:



Embedding Google Maps to Blogger Gadgets

1. Apply the above method until you get the embed codes.

2. Once you get the Iframe codes, go to blogger and open the layout page.

3. Click on ‘Add a Gadget’ and select the ‘HTML/JavaScript widget’, paste the Iframe codes, ‘save’ it and you’re all done!

Read:


Conclusion
By following the above-given methods, you can easily add the Google Maps to your blogger post and widget. All you need is the Iframe embedding codes. Just make sure you have chosen the appropriate size of the Google Maps for your blog.

Thank you for reading this tutorial, if you like it then please support us by sharing it on social media sites.

How Do I Upload a PDF file to Blogger Posts using Google Drive

How Do I Upload a PDF file to Blogger Posts using Google Drive

There could be many reasons to embed or upload a PDF file on your blog posts in blogger.

upload pdf files to blogger


But unfortunately, blogger doesn’t provide any gadgets to upload a PDF file to your blog. So, to make it happen, we can take the help of Google Drive to upload the PDF files on your blog.

First, we need to create a PDF file and then we have to manually upload the file to your Google Drive account. Once the file is been successfully uploaded, you are allowed to embed the PDF file on your blog.

How do I embed a PDF file in blogger?

There are several options available to upload the PDF files on blogger blogs.

There are no doubts that Google Drive is the number one files uploading and downloading site with 15 GB free storage for every Gmail accounts, and the best part is that it does allow to easily embed PDF file on your blog.

All you need is a working Gmail account and you are on!

In our previous posts, we have shown the way to embed Social Media Posts and PDF files into a blog post.


So, we have decided to create a new tutorial for adding the PDF files to your blogger posts. For your ease, we have decided to show you 2 methods for uploading PDF files on your site with the help of Google Drive.

Uploading a PDF file to Blogger posts

1. Go to Google Drive website and login with your existing Gmail account.

2. Open the document you want to embed or upload your existing document to Drive. To upload a file or folder, click on “My Drive” and choose whether you want to upload a single file or a folder with files.

Uploading a PDF file to Blogger


3. Select the file you want to upload and click open. Now, the file will automatically start uploading.

Upload PDF file to Blogger


4. After uploading the file, open the file, go to more option & hit the “Share” button on the right side of your file.

Add PDF file to Blogger posts


5. Click “Advanced” and then hit the “Change” button to change the access to your document.

Adding PDF file to Blogger posts


6. Select “On- Public on the Web” and click Save > Done.

add PDF file to Blogger

7. Click on “more options in the 3 dots”, and hit “open in a new window” button.

adding PDF file to Blogger


8. Now again click on “more options” and click on “embed item…”

add a PDF file to Blogger


9. Now a popup box will appear with the embed code, copy the code & paste it into your blog posts.

Uploading PDF file to Blogspot

Here’s how it looks like in a blog post:

Adding PDF file manually to a blog post

If you are getting difficulties while embedding the PDF file through above method, then you can also try it manually in your post by using the drive URL of your uploaded PDF file and Iframe.

Normally an Iframe contains an opening tag <Iframe>, height, width and the closing tag </Iframe>. Here’s the format.

<iframe src=”your link/preview” width=”#” height=”#“></iframe>

Very easy right?

All you need to do is follow the above steps to step 6 because we need to allow the post to get accessed by everyone. After that copy the URL of your PDF file from the link tab and paste in the Iframe code. Insert width and height according to your theme size and you are all set.

Conclusion
Uploading PDF file to your blogger posts can be very easy if you know the right way to do it. Just follow the simple steps carefully, without making any mistakes.
Need help? Ask me anything in the comment box down below & if you enjoyed this post, then share it with on Social Media sites.