How to Create and Add a Favicon to a Blogger Blog?

How to Create and Add a Favicon to a Blogger Blog?

How to Create and Add a Favicon to a Blogger Blog?
Welcome to the asifkamboh.com blog, on this point, I am going to teach you how to create a Favicon for Bloggers Blog which works in all platforms and browsers and then how to add it to the blog.

The method I will teach is that we will create icons of different sizes in png and SVG format, and it will also contain JSON and XML files which we will upload to the CDN server and add to our blog theme.

So if you want to know what Favicon is, how to create them, and how to host them on the fastest CDN servers, and how to integrate them into the Blogger theme, follow these steps.

How to Add a Custom robots.txt File to Blogger?

How to Add a Custom robots.txt File to Blogger?

How to Add a Custom robots.txt File to Blogger?
Welcome to AsifKamboh.com blog, At this point, I'll talk to you about how to add a custom robots.txt file to Blogger Blogspot blogs.

There is no option to upload a custom robots.txt text file to the root directory of Blogger's blogs, But the robots.txt file plays an important role within the blog, so Blogger has given the option to add the data of this file in the Crawlers and indexing option of the settings.

If you want to add the robots.txt file information according to SEO (Search Engine Optimization) friendly in your blog, you can do it by following these steps.


What Is the robots.txt File?
The robots.txt file is a text file that is uploaded to the root directory of web or blogs and contains information about search engine crawlers.

A robots.txt file tells search engine crawlers which pages or files they can crawl and publish from your blog to its search engines and which blog pages they can't crawl or publish.

How to Add robots.txt File to Blogger?
Go to your Blogger dashboard and select your blog to which you want to add a custom robots.txt information.

Then go to Settings > Crawlers and Indexing > and enable the "Enable custom robots.txt" option, and click on the Custom robots.txt underneath it.

After that, a custom robots.txt window will pop up, paste the following custom SEO friendly robots.txt file information into this window, and click save.

User-agent: *
Allow: /
Disallow: /search

Sitemap: https://example.blogspot.com/sitemap.xml

Before adding the above code to your blog robot layout, replace the featured "example.blogspot.com" URL with your blog URL address.

Once you add the above robots.txt file information to your blog, it means that your custom robots.txt file has been created in your blog root directory, And if you want to verify your robots file information, add "/robots.txt" at the end of your blog's URL address and visit it in the browser.

For example: example.blogspot.com/robots.txt

When you go to your blog robot.txt file URL and you see your robot file info on that page, It means that you have successfully created a custom robot file in your blog.

Robots.txt File Additional Settings and Explanations.

Name Information
User-agent It's the name of the search engine robot (crawler).
Allow A directory of site pages or files that allow robots to crawl and index.
Disallow A directory of site pages or files whose robots are not allowed to crawl and index.
Sitemap This is the blog sitemap directory that notifies the robot at the time of the crawl where the blog sitemap is located.

User-agent:
Where the User-agent: * in the above robots.txt file information, The "*" means you have allowed all robot crawlers to crawl on your blog. And if you only want to allow one crawler to crawl, you'll need to add its name instead of the "*", such as User-agent: Googlebot-Image.

If you want to allow more than one custom user agent to crawl, you can do so one by one. And below is an example that allows multiple robots to crawl on the blog.

User-agent: Adsbot-Google
Allow: /
User-agent: Googlebot-Image
Allow: /
User-agent: Googlebot-Mobile
Allow: /
User-agent: Mediapartners-Google
Allow: /

Allow:
The allow tag is used in the robots.txt file to allow a specific blog directory to crawl the robot. You can use this tag to allow a robot to crawl a single post or page on your blog. For example, if I only want the robot to crawl on my blog pages, then I will replace this Allow: / tag with Allow: /p from my blog's robot file.

For example, if you only want to allow a robot to crawl a specific page or post, then your allow tag will look something like this inside the robots.txt file.

Allow: /p/example-page.html
Allow: /2020/05/example-post.html

Disallow:
The disallow is used to prevent robots from crawling a specific blog directory. You can block one or more of your blog's pages and posts from being indexed by search engines by using this tag in a robot file.

For example, if you only want to prevent a robot to crawl a specific page or post, then your disallow tag will look something like this inside the robots.txt file.

Disallow: /p/example-page.html
Disallow: /2020/05/example-post.html

Sitemap:
The sitemap tag is used in the robot file so that whenever the robot crawls on the blog, it is told the location of the sitemap in which directory the sitemap of that blog is.

If your blog has more than one sitemap, you'll tell the robot to the directory of all of those sitemaps, as in the example below.

Sitemap: https://example.blogspot.com/sitemap.xml
Sitemap: https://example.blogspot.com/sitemap-pages.xml
Sitemap: https://example.blogspot.com/feeds/posts/default
Sitemap: https://example.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500

How to Configure Custom Robots Header Tag Settings?
One of our blog posts appears in more than one URL in the blog, such as search results, tags, and labels. This way different URLs of a post would be created but we only have to publish the actual URL of our post in search engines, so we use custom robots header tags settings.

Go to Blogger dashboard > Settings > Crawlers and Indexing > and enable the "Enable custom robots header tags" option.

Once you have enabled this option, the Home page tags, Archive and search page tags, and Post and page tags options will be highlighted (all these options will be hidden first), then enable and disable all the settings as shown in the image below and save.

Blogger Custom Robots Header Tags Setting According to the SEO.

Once you have completed the above settings, your blog's homepage, post, and page tags will be published in search engines. And archived and search page tags will not be indexed in search engines.

Well, in this post I have tried to cover all the settings of Blogger Robot, I hope all this information will be helpful for you.
How to Create Google Drive Direct Download Link Using API?

How to Create Google Drive Direct Download Link Using API?

How to Create Google Drive Direct Download Link Using API?
Welcome to the asifkamboh.com blog on this occasion, I will teach you how to download files directly through the API without opening the Google Drive page.

When you create a download link directly from Google Drive, the download link will expire after the file reaches its daily download quota. But when you create a download link using the Google API key, the link will never end and the user can download the file directly from that link.

Which API method I'm going to tell you, this API key method only works for media files, for example, if your file is mp4, mp3, mkv, or other multimedia files, So you can play these media files in HTML5 video player or download them directly.


What Is Google Drive API Key?

API stands for Application Programming Interface, and the Google Drive API is a code that users can use in their applications or website projects to access files stored in Google Drive storage.

How to Get Google Drive API Key?

Go to this Google Console URL https://console.developers.google.com/ and then log in with your Google Account.

Select your Google APIs Project > Go to credentials option > And Create API Key.

Then you create a new project with any name, and then go to the credentials option within that project, and click create credentials and click the API key option; then the API key will be generated.

Copy your API Key to your Notepad.

Copy this API key into Notepad (we'll need it to create a direct download link). Remember this is the API key for your account. Now we need to enable the Google Drive API key to access the Drive files for this project.

Search for "Google Drive API" in the search box.

Type "Google Drive API" in the search box and press enter, as soon as you search the Google Drive API Service will be at the top of the search results which is produced by Google.

Enable the Google Drive API service.

Make sure that when you enable the Google Drive API service, the service is produced by Google.


How to Create a Direct Download Link of Drive Files Using API Key?

Navigate to your Google Drive account, select your media file (MP4, MKV, MP3) to which you want to create a direct download link. And then copy the share link of this file with "Anyone with the link" security. We need the file id from this link.

Then paste the link of your file in Notepad and separate the file ID from that link because we only need the file ID.

For example, this is your file sharing link. The digits in this link after the d/ and before the /view are the ID of your file that you have to separate from the link.

https://drive.google.com/file/d/[file_id]/view?usp=sharing

https://drive.google.com/file/d/1WjplMikbbEbWKqNRsv-PaPL0H1OJKIrK/view?usp=sharing

In my case this is the file ID 1WjplMikbbEbWKqNRsv-PaPL0H1OJKIrK of my media file URL address, in your case it will be different according to your file.

We now create a direct download link for this file using the File ID and Drive API key. To do this, we need to add the file ID, API key and our file format in the link below.

Copy and paste the following Google APIS link into your Notepad and replace the highlight [file_id] text with your File ID, [api_key] to your Google Drive API key, and [.mp4] to your file extension.

www.googleapis.com/drive/v3/files/[file_id]?alt=media&key=[api_key]&v=[.mp4]

https://www.googleapis.com/drive/v3/files/[file_id]?alt=media&key=[api_key]&v=[.mp4]


And this is an example of a direct download link that I created using the Google Drive API key.

https://www.googleapis.com/drive/v3/files/1WjplMikbbEbWKqNRsv-PaPL0H1OJKIrK?alt=media&key=AIzaSyCJW6AO8ZfPDu-qxxPDJKFUGmNhha7ufmM&v=.mp4


I hope that through this post, I have been able to teach you how to create a direct download link for Google Drive media files.
How to Add Custom HTML5 Video Player in Blogger?

How to Add Custom HTML5 Video Player in Blogger?

How to Add an HTML5 Video Player in Blogger?
Welcome to Asif Kamboh.com blog, On this occasion, I will share that, How can you add your own HTML5 Video Player to Blogger Blog, And how can you change the theme of this video player, And how to publish videos in this video player without reducing the quality.

The name of the HTML5 video player, which I'm going to share, is videosjs, and it's free for all users. You can install it on your Blogspot blog via the CDN server; with the help of this video player, you can easily play mp3 audios and mp4/webm videos on your blog.

If you want to create your own video player on your Blogspot blog like this blog. And want to publish high-resolution videos like 4K, 2K, 1080p, and 720p videos to your blog without compromising the quality of the videos, you can add by following these steps.


What Is HTML5 Video Player?
HTML5 Video Player is software that plays online video in a browser and is developed on the web using JavaScript, CSS, and the HTML language, which is compatible with almost all browsers. Yes, if the user's browser is out of date, the HTML5 video player software will fallback to Flash to play your videos, ensuring that your videos play on almost all web browsers.

For example, if you create a video tag in HTML and put a direct link to your MP4 or webm video in it, and then when the user comes to this page, he will see a video player. In which he can watch this video online without downloading.

How to Add Custom HTML5 Video Player to Blogger?

Open Blogger Dashboard > Themes Menu > Click on the Three Dots and click the Edit HTML option, and then add the following code below the <head>.


<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.1/video-js.min.css" rel="stylesheet">


And then add the below code before the </body> and click the Save Theme button in the top left corner to save the changes.

<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.1/video.min.js"></script>


After adding the above both codes into your blog theme, go back to the post where you want to add your video, and change the post page "Compose view" to "HTML View" and add the below code in it.

<video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="POSTER.jpg"
    data-setup="{}"
  >
    <source src="VIDEO.mp4" type="video/mp4" />
    <p class="vjs-no-js">
      To watch this video, please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video.
    </p>
  </video>


Before adding this code to your theme, replace the highlighter code "POSTER.jpg" with your custom video thumbnail URL and replace "VIDEO.mp4" with your video URL address. And if your video format is "VIDEO.webm" then change the type in this code to "video/webm".

Just now your video in the post will be shown in the video player and you can watch it, and the video play button icon is shown in the top left corner if you want to move it to the center, Add this tag vjs-big-play-centered to video class.

This is what the video class tag will look like when you add the play button icon center tag to the video class.

class="video-js vjs-big-play-centered"


And this Videojs player offers three predefined classes that make it easy to maintain video element aspect ratio. If you use one of these tag then the width and ratio of your video automatically changes to the selected ratio, you don't need to manually add height and width to the video tag.

Class Meaning
vjs-fluid It keeps the video in proportion to the original aspect.
vjs-16-9 It keeps the video in a 16:9 aspect ratio.
vjs-4-3 It keeps the video in a 4:3 aspect ratio.


I want the video player to be 100% the width and height of the parent container, and for that i will use the vjs-fluid tag to keep the height and width of my video in the original ratio.

class="video-js vjs-fluid vjs-big-play-centered"


I have just made all the settings for my video player and here is an example of my code for you to clearly understand how you add your video and poster URLs to video player code and class tags.

<video
    id="my-video"
    class="video-js vjs-fluid vjs-big-play-centered"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="https://sv2.asifkamboh.com/png"
    data-setup="{}"
  >
    <source src="https://sv2.asifkamboh.com/mp4" type="video/mp4" />
    <p class="vjs-no-js">
      To watch this video, please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video.
    </p>
  </video>




I hope this post will be helpful to you, and if so follow me on my social accounts.
How to Register the Adobe Photoshop CC Program?

How to Register the Adobe Photoshop CC Program?

How to Register the Adobe Photoshop CC Program?
Welcome to Asif Kamboh.com blog, On this occasion, I will provide easy links to download Adobe Photoshop CC program and free permanent activation method.

So now I am going to tell you how to install Adobe Photoshop, how to prevent it in firewall after installation, and how to register by cracking, if you want to register your adobe program for free then here are the steps.

How to Make Youtube Videos Responsive in Blogger?

How to Make Youtube Videos Responsive in Blogger?

How to Make Youtube Videos Responsive in Blogger?

Welcome to Asif Kamboh.com blog, At this point I will explain to you how you can make YouTube, Vimeo or Dailymotion videos responsive on your blog.

So if you are interested in this method or you want to make your Blogspot Blog videos responsive then follow these steps.


What's the Difference Between Responsive and Unresponsive Video?

If the width and height of the video inside the frame is exactly the width and height of the video, and when you increase or decrease the body of the frame, the height and width of the video will be more or less according to the video and the video will look clear. it means this video is responsive.

If the video within the frame of the video player is viewed more than the width of the video or more than the height of the video, then the video is not responsive.

How to Make Youtube Videos Responsive in Blogger?

Open Blogger Dashboard > Themes Menu > Click on the Three Dots and click the Edit HTML option, and then add the following CSS code before the </head>.

<style type='text/css'>
/* Asif Kamboh - www.asifkamboh.com */
.iframeWrapper{position:relative;padding-bottom:56.25%;padding-top:25px;height:0;}
.iframeWrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;}
</style>

When you add the above CSS code to your Blogger theme, click the "Save Theme" button in the top right corner to save the changes into your blog theme.

Then go to the post where you want to add the YouTube video, then change the tab to "HTML View" and add the below code.

<div class='iframeWrapper'>
<iframe width="640" height="360" src="//www.youtube.com/embed/uZV9T37JEbc" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Replace the Highlighted Video ID uZV9T37JEbc in the above code with your YouTube Video ID before adding the code to your post.

Demo Link of the Responsive Youtube Video.

I hope this post "How to Make Youtube Videos Responsive in Blogger" has been useful and valuable to you.
How to Install and Use Font Awesome Icons in Blogger?

How to Install and Use Font Awesome Icons in Blogger?

How to Install and Use Font Awesome Icons in Blogger?
Welcome! to AsifKamboh.com blog, In this article, I will explain what is the Font Awesome icons and how we can install it in Blogger Blogspot themes, and how we can use them in blog posts.

If you want to install Font Awesome Icon in your blog using the CDN server or you want to learn how to use it in posts, follow these steps.


What Is the Font Awesome?
Fontawesome is a font used to create icons and symbols using a special CSS or HTML calling code for an icon on a website or blog. It was created by Dave Gandy using Bootstrap and later added to the Bootstrap CDN.

Font Awesome is free to use for anyone's needs, and the installation process is easy, and no additional JavaScript code or account verification is required. It's easy to use, add an icon name to the HTML class, or add a unique icon code of a particular font awesome to the CSS content.

How to Install Font Awesome in Blogger Blogs?

  1. Go to the Blogger Dashboard and select your blog in which you want to install the Font Awesome.
  2. Go to the Themes menu, click the drop-down icon, and then click the Edit HTML option.
  3. Click anywhere in the theme code and then press the "CTRL + F" button on your computer keyboard. Blogger will display a search box at the top of the theme editing box.
  4. Type the <head> code in the search box and press Enter.
  5. When you get the <head> code for your blog theme, Then add the following font awesome code below the <head> and click the Save Theme button.

<link href='//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Make sure you add the code between <head> and </head>.


How to Use Font Awesome Icons in Blogger?

There are two ways to use Font Awesome Icons in blog post and themes after installation, the first is HTML tag and the second is CSS in Unicode format.

If you want to use the font awesome icon in your blog, you need to know the HTML tag name and CSS Unicode code of this icon.

Go to this URL address https://fontawesome.com/v4.7.0/icons/ or this page to know all the lists of Font Awesome HTML tags and CSS Unicode.

Once you've browsed the above URL address in your browser, find the icon you want to add or use to your blog, and click the icon.

Font Awesome search screen looks like this.

Clicking on the icon will take you to a new page. To the right of the icon's name is the Unicode used in the CSS language. While below is the HTML code, this is the code you have to write on your blog. So take note of this code.

Find icon HTML and Unicode in Font Awesome website.

We now have our respective icon HTML tags and CSS Unicode. I explain it one by one, so let's discuss how we can use it on our blog

1. HTML Tag Method.

The best way to write an font awesome icon in a blog post via HTML is to type in an inline type tag like <i> and <span>. The vast majority prefer to use <i>, as it was exemplified using <i> on its official website, so we also use the <i> tag to write an icon on our blog.

For example, I write an address book icon on this post using HTML <i> tag, and in the code where the class starts with fa, instead of the class name you can also use fas for font awesome solid icons and fab for font awesome brand icons.

<i class="fa fa-address-book-o" aria-hidden="true"></i>

Font Awesome HTML tag code description is.

Name Meaning
i It's an HTML tag.
fa It's mean Font Awesome.
address-book-o It's the name of the icon.
aria-hidden It's used to hide purely used icons for decoration.


So I wrote a class called "fa" of the Address Book icon in HTML Tag <i> and the result of this address book icon code would look something like this.

Now we're going to increase the size of the address book icon as we need it, we need to add another class name to increase the size, and that's the name of this class and its size.

Class Size
fa-xs .75em
fa-sm .875em
fa-lg 1.33em
fa-2x 2em
fa-3x 3em
fa-4x 4em
fa-5x 5em
fa-6x 6em
fa-7x 7em
fa-8x 8em
fa-9x 9em
fa-10x 10em


The code will look like this when you add the increased size class name to the Font Awesome icon code.

<i class="fa fa-address-book-o fa-sm" aria-hidden="true"></i>
<i class="fa fa-address-book-o fa-lg" aria-hidden="true"></i>
<i class="fa fa-address-book-o fa-2x" aria-hidden="true"></i>
<i class="fa fa-address-book-o fa-3x" aria-hidden="true"></i>
<i class="fa fa-address-book-o fa-4x" aria-hidden="true"></i>


And after increasing the size of the font awesome icon, the result of the icon will be something like this.



You can also change the size and color of icons in HTML tags using inline CSS code. And when you the increased size of the Font Awesome icon using inline CSS, the code will look like this.

<i class="fa fa-address-book-o" aria-hidden="true" style="font-size:20px;color:#2e87e7;"></i>

And the result of the icon will be like this.

2. CSS Unicode Method.

The CSS Unicode method for displaying the Font Awesome icon is through the CSS pseudo-elements placed on it ::before or ::after. For example, if you have an HTML tag with an iconunicode in the class name, the code would look something like this:

.iconunicode::after {
content: "\f2ba";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #000;
font-size: 18px;
padding-left: 0.5em;
position: absolute;
}

And the result of the CSS Unicode icon will be something like this.

The family font name in the CSS code must be "FontAwesome" and be sure to include a slash \ in front of the Unicode content. And if you want to increase or decrease the size of the icon, you can see the size in the table above.

I hope you find this "How to Install and Use Font Awesome Icons in Blogger?" post very useful and helpful.