How To Use/Add Custom Fonts In Blogger

Hello everyone,

We all know that blogger is one the best platform for blogging and number of people are using it. Also blogger is free to use, means day by day more and more people are joining it. And because of this competition is very tough now a days. In order to maintain your position or to make your blog even more popular and to get high traffic you have to customize your blog to attract more and more traffic. We know that customizing only is not enough to rank high on Google. There are many SEO related strategies, SEO-tools are available for getting high traffic and high ranking. But today in this post I am just going tell you about customization, and by customization I mean adding custom themes to your blogger, adding custom fonts to your blogger, adding different widgets like clickable image widget, page follow widget etc...

So, Let's talk about adding custom fonts in blogger.

When we write any post on blogger, by default there are only few fonts are available say 5-6 fonts like Arial, Georgia, Courier, Times, Helvetica etc... But what about other fonts? How we can use them? For that read the complete post and you will get complete idea.

Also see - Top Premium Looking Blogger Templates

Using / Adding Custom Fonts In Blogger

Step 1  -  Go this site...Google-Fonts... Here you can find hundreds of different fonts. Search for any fonts of your taste.

Step 2  -  Once you find font of your like, click on '⊕' icon on top right corner of the font.

Step 3  -  Once you click on that you will get black strip at bottom of your screen saying that '1 family selected'. Click on that strip.

Step 4  -  When you click on black strip, you will get windows like below image.

Now go to CUSTOMIZE section where you can select font style like regular, medium, bold etc... Do whatever you like.

Step 5  -  Now go to EMBED section and click on standard. Now you can see code for your font. Copy both code and css.

Now we have to apply this font in our blog post.

Note : we are going to apply this font for one particular blog post, means you have follow this process every time when you write new posts.

To Add Custom Fonts In Blogger Post

Step 1  -  go to blogger and click on new post.

(You can also do this for already written posts. Just click on edit post and follow this process)

Step 2  -  now write your post as usual without doing anything.

Step 3  -  once you done writing your post, click on HTML. Here you will see HTML code of your post.

Step 4  -  now copy HTML code of our font and paste it on top in HTML of post.

For example, HTML of my font is like...

------------------------------------
<link href="https://fonts.googleapis.com/css?family=EB+Garamond" rel="stylesheet">
------------------------------------

I pasted this code in my blog post as shown in below image.

Add </link> tags at end of above code like...

------------------------------------
<link href="https://fonts.googleapis.com/css?family=EB+Garamond" rel="stylesheet"></link>
------------------------------------

(Not necessary to do this because once you go back to compose mode it will automatically get added)

Step 5  -  Now copy below code....

-------------------------------------
<span style="your font family">
-------------------------------------

In my case my font family is...
-------------------------------------
font-family: 'EB Garamond', serif;
-------------------------------------

So my code will be like...
-------------------------------------
<span style="font-family: EB Garamond, serif;">
-------------------------------------
(remove comas around font name)

Add this code just above the start of your post content or text in HTML of your post.

Now at the end add closing tag </span> just above </div> tag.

See below image for more understanding...

Step 6  -  Now go back to compose mode and click on save and then click on publish. Your font is now changed successfully.

If you have any query then please do comment and let me know.

Enjoy...

Thank you...

How To Create Clickable Image Widget In Blogger

Hello friends,

Today I will tell you how to create clickable image widget in your Blogger. Clickable image means when people click on image it will redirect them to particular url or website. It's very easy to do this. Let's see how we can do it.

Clickable Image Widget For Blogger

For creating this widget you required following things... 

1...An Image

... First of all you required an image which you want to show on your blogger widget. This image will appear on your website in widget section (it may be sidebar-widget or footer-widget).

... To get image you can search on google for the image of your requirement or you can create your own image with help of any image editor.

2...An url

... Now we have an image for our widget. Next thing we require is an url. An url where you want to redirect people when they click on image.

... url may be the url of your Facebook-page , Telegram-channel, your another website url or it may be something else. So copy the url of your choice and keep it because we will require it later on.

3...HTML code

... Now last thing we require is HTML code to create this widget.

Simple HTML code for this widget

------------------------------------------
<a href="url-where-you-want-to-redirect">
<img src="your-image-url"/>
</a>
------------------------------------------

You can also modify this widget by adding height and width of image.

For example...

------------------------------------------
<a href="url-where-you-want-to-redirect">
<img src="your-image-url" width="360" height="auto"/>
</a>
------------------------------------------

Put your url in above HTML code.

>>First url is the url where you want to redirect, so put here url of your choice.

>>Second url is the url of your image.

How to Get url of your image

1. Go to blogger and click on new post.

2. Now click on image icon and upload your image.

3. Now click on HTML (beside compose). Here you can see url of your uploaded image. Copy it and place it in our widget HTML code.

(Now you can delete your post because we get our url. So no more need of this post)

How To Add Clickable Image Widget In Blogger

Step 1  -  Go to Blogger and click on layout.

Step 2  -  Now click on add widget in sidebar-widget or footer-widget.

Step 3  -  Now click on HTML/Javascript

Step 4  -  Now paste our HTML code in content field. Also give any title to widget. For example.. join our telegram channel. And then click on save.

Now our widget is ready. You can preview your site and you will find this widget.

Visit My Website To See Live Clickable Image Widget  - 🔗HindiGKStore

(If you can't see this widget in mobile screen then i recommend you to use some custom blogger templates for your site)

See This - 🔗Top Premium Looking Blogger Templates