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.
Publister Premium Blogger Template

Publister Premium Blogger Template

Publister Premium Blogger Template
Welcome to AsifKamboh.com blog, On this occasion, I will share with you a Responsive Blogger Blogspot Theme, which is fully responsive on iPhone, iPad, tablets, and Android phones.

Publisher Blogger Template is extremely good for speed and performance to provide the best user experience. It is ideal for many niches including breaking news, newspapers, politics, sports, technology, travel, and much more.

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.

Subscribe to: Posts (Atom)