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 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.
How to Fix Adsense ads.txt File Issue in Blogger?

How to Fix Adsense ads.txt File Issue in Blogger?

How to Fix Adsense ads.txt File Issue in Blogger?
Welcome! to AsifKamboh.com blog, In this post, I'll explain what an ads.txt file is and how we can create it manually, and how we can submit it to Blogspot blogs.

There is no option to upload ads.txt on the Blogspot site, as Blogger offers a monetization option in Blogger's settings, where we add ads.txt file information.


What Is an ads.txt File?
The ads.txt (Authorized Digital Sellers) file is an IAB initiative to improve the transparency in-program advertising. You can create your own ads.txt files to identify who is authorized to sell your inventory. These files are publicly available and crawled by Exchange, Supply Side Platforms (SSPs), and other buyers and third-party vendors.

You can use your AdSense account to create an ads.txt file to identify who is authorized to sell your inventory. And the use of ads.txt is not mandatory but is highly recommended. This can help protect your brand from counterfeit inventory that has been deliberately started from a specific domain, app, or video. Announcing authorized sellers can help you recover advertising costs that may lead to counterfeit inventory.

How to Create Adsense ads.txt File for Blogger?

Open your AdSense account and then go to the Account > Settings > Account Information option, there you will find your AdSense account publisher ID, note the identity of the publisher of your account in the text note, and continue to the next step.

Google AdSense Account Publisher ID.


OK, now copy the code below and replace the pub-0000000000000000 ID in the code with your AdSense Publisher ID. When you do, your account's Ads.txt file is ready to be added to your blog.

google.com, pub-0000000000000000, DIRECT, f08c47fec0942fa0


How to Add Adsense ads.txt File to Blogger Blogspot Blog?

Go to your Blogger Dashboard > Settings > Monetization > Enable custom ads.txt menu, and click on the Custom ads.txt option, and paste the ads.txt file code of your AdSense account into this box, and then click the "Save" button.

How to Add ads.txt File in Blogger?


Once you've saved your ads.txt file code to your blog, go to your domain URL like this example.blogspot.com/ads.txt and check if the ad file is working on your domain.

Ads.txt file URL address.


After visiting your domain ads.txt file URL address, you see your Adsense ads.txt file code on that URL, that means your Adsense ads.txt file code has been submitted and is working fine.

It may take a few days for AdSense to automatically crawl and verify your ads.txt file. Please wait at least a few days for your ads.txt status to update. If your site does not request multiple ads, this may take up to a month.


If you encounter an error "Earnings at risk - You need to fix some ads.txt file issues to avoid severe impact to your revenue." a month or two after the submission. and then check out your blog's robot.txt file.

User-agent: *
Disallow: /ads

User-agent: *
Disallow: /ads/

User-agent: *
Allow: /ads.txt
Disallow: /ads

If one of the above three codes is present in your blog robots.txt file then your ads.txt file will not be verified. You must then allow the robot to crawl the ads.txt and /ads file.

I hope you find this "How to Fix Adsense ads.txt File Issue in Blogger?" tutorial very useful and helpful, Thank You.
How to Remove Spam Links from Blogger Comment?

How to Remove Spam Links from Blogger Comment?

How to Remove Spam Links from Blogger Comments?

Welcome! to my AsifKamboh.com blog, At this point, I will explain, disable the active link and convert it to straight text, Just replace the comment link with a custom text, And Convert all text of spam-linked comments to plain text.

There are a few different ways to remove or disable links from comment contents, yes users can do this using CSS, JavaScript, and JQuery code. Blog website users can remove comments links on their blog from the following aspects.


What Are Spam Links?

Spam links in the posting of out-of-context links on blogs, discussion forums, blog comments, guestbooks, or any other online location that displays user comments. Spam links are also called spam comment links, blog spam, or wiki spam. And the Spammers usually don’t leave comments of any value along with their links.

This is an example of an active spam link in a Blogger blogspot comment.

Image of a spam link comment.


How to Disable Comment Links and Convert Them to Plain Text?

Add one of these three (CSS, JavaScript and JQuery) codes in your blog theme. I suggest you use the CSS method to disable the active link in the comments.

1. CSS Method.

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 */
.comment-content a{pointer-events:none;cursor:default;text-decoration:none;color:black}
</style>


When you have successfully added the CSS code to your Blogger theme, then click the Save Theme button and see the result on your blog.

2. JavaScript Method.

If you want to use the JavaScript method to disable active links in the comments section, add the JavaScript code below to your blog theme before "</body>".

<script> //<![CDATA[
/* Asif Kamboh - www.asifkamboh.com */
content = document.getElementById('comments').getElementsByTagName('p');
for (var i = 0; i < content.length; i++) {
 if (content[i].innerHTML.indexOf('</a>') !== -1) {
 content[i].innerHTML = content[i].innerHTML.replace(/<a[^>]*>|<\/a>/g, "");
 }
}
//]]> </script>


After adding the above JavaScript code to your Blogger theme, then click the Save Theme button and see the result on your blog.

3. JQuery Method.

If you want to use the JQuery method to disable active links in comment content, add the JQuery code below to your blog theme before "</body>".

<script> //<![CDATA[
/* Asif Kamboh - www.asifkamboh.com */
$(function(){$('#comments p').find('a').contents().unwrap();});
//]]> </script>


After adding the above JQuery code to your Blogger theme, then click on the Save Theme button and see the result on your blog.

When you add one of the above codes to your blogspot blog, the active link in the comment content will be disabled and the comment will look like this.


The image of the spam link comment content whose link has been disabled, and has been converted to plain text.


How to Disable Comment Links and Convert Them to Custom Text?

Go to 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>.

Replace the "Link Removed" highlight text in the code below with your custom message before adding the code to your theme.


<style type='text/css'>
/* Asif Kamboh - www.asifkamboh.com */
.comment-content a{pointer-events:none;cursor:default;text-decoration:none;color:black}
.comment-content a{visibility:hidden;font-size:0}
.comment-content a:after{visibility:visible;content:"Link Removed";color:black;font-size:14px}
</style>


When you have successfully added the above CSS code to your Blogger theme, then click the Save Theme button in the top right corner.

After that, all active links in the comments on all your blog posts will be disabled and the contents of all these links will be replaced with your custom text, and the content of the comments will look like this.

Image of content with spam link comment whose link has been disabled, and the content of that link has been replaced with custom text.


How to Replace All Spam Link Comment Content with a Custom Text?

Go to Blogger Dashboard > Themes Menu > Click on the Three Dots and click the Edit HTML option, and after that add the below JavaScript code to your blogger theme before the "</body>" tag.

Replace the "Oops! You cannot enter comments with active links on this site. All comments, including links, are automatically disabled on this website." highlight text in the code below with your custom message before adding the code to your theme.


<script> //<![CDATA[
/* Asif Kamboh - www.asifkamboh.com */
var content = document.getElementById('comments').getElementsByTagName('p');
for (var i = 0; i < content.length; i++) {
 if (content[i].innerHTML.indexOf('</a>') !== -1) {
  content[i].innerHTML = 'Oops! You cannot enter comments with active links on this site. All comments, including links, are automatically disabled on this website.';
 }
}
//]]> </script>


When you have successfully added the above code to your Blogger theme, then click the Save Theme button in the top right corner.

After that, the contents of all the comments that contain links to all your blog posts will be replaced with your custom text message, and the content of the comments will look like this.

Image of content with spam link comment whose link has been disabled, and the content of that comment has been replaced with a custom text message.

I hope you find this post "How to Remove Spam Link from Blogger Comment?" very useful and respectful.
How to Add a Cookie Notification Bar in Blogger?

How to Add a Cookie Notification Bar in Blogger?

How to Add a Cookie Notification Bar in Blogger?
Welcome! to my AsifKamboh.com blog, On this occasion, I am going to share with you a premium cookies notification bar for Blogger Blogspot Blogs.

If your website/blog has visitors from EU (European Union) countries, then the cookies notification bar is an essential part of your website or blog. According to EU law, if visitors come to your site from their country, you must inform them about your site's cookie policy.

How to Add a Contact Form Page in Blogger?

How to Add a Contact Form Page in Blogger?

How to Add a Contact Form Page in Blogger?
Welcome! to AsifKamboh.com blog, At this point, I'll explain how you can add a Responsive Contact Form page to the Blogger Blogspot blog.

If you are using a custom theme on your blog, you must first remove the CSS code of the contact form from your blog theme, which you can remove using the Blog Edit Theme option.

Once you have removed the existing contact form CSS code from your blog, you can add a beautiful contact form page to your blog by following these steps.