How to add Auto Source link
Hello friends, I noticed on Internet many people (blogger/webmaster) copy content from another website and publish on their blogs/websites.
If a blogger/webmaster copy your content then automatically a source link is also copied with this text. I know this method is too old but I'm facing this problem because too many blogger copy text from my another blog.
How to Add Automatic Source Code Link?
- Go to Blogger.
- Click on Themes.
- Click on Edit HTML.
- Find </body>.
- Paste the code before </body>.
<script type='text/javascript'>
//<![CDATA[
!function(e,t)
{var n="getSelection",o="removeAllRanges",i="addRange",l="parentNode",a="firstChild",d="appendChild",r="removeChild",s="test",c="innerHTML";if(e[n])
{var p,g,f,h,u,y;t.addEventListener("copy",function(C){for(g=C.target;3===g.nodeType;)g=g[l];
if(h=t.createElement("div"),(p=e[n]())&&p.rangeCount&&(p=p.getRangeAt(0))&&(f=p.cloneRange(),p=p.cloneContents())){for(;u=p[a];)h[d](u);if(!/^(pre|code)$/i[s](g.nodeName||"")&&!/(^|\s)no-attribution(\s|$)/i[s](g.className||""))
{var v=e.location.href;h[c]+="<br><br>© "+t.title+'<br>Source: <a href="'+v+'">'+v+"</a>"}
y=t.createRange(),t.body[d](h),y.selectNodeContents(h),p=e[n](),p[o](),p[i](y),setTimeout(function()
{h[l][r](h),p[o](),p[i](f)})}},!1)}}(window,document);
//]]>
</script>
How to remove "?m=1" from blogger
Hello friends,
After a month I'm sharing on my blog. How to remove "?m=1" from blogger blog.
Because if we create blog using Google blogger then we get m=1 with blog address.
So here you can say good bye to this tag "m=1".
Just copy the below highlighted code and paste it on your blog template.
Also Check: How to type English to Telugu
How to hide "m=1"?
- Go to blogger.
- Now go to Template section
- Click on edit HTML.
- Search </body> and paste the below code before <body>.
- Save the theme. And say goodbye with this annoying tag.
<script type='text/javascript'>
//<![CDATA[
var uri = window.location.toString();
if (uri.indexOf("%3D","%3D") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("%3D"));
window.history.replaceState({}, document.title, clean_uri);
}
var uri = window.location.toString();
if (uri.indexOf("%3D%3D","%3D%3D") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("%3D%3D"));
window.history.replaceState({}, document.title, clean_uri);
}
var uri = window.location.toString();
if (uri.indexOf("&m=1","&m=1") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("&m=1"));
window.history.replaceState({}, document.title, clean_uri);
}
var uri = window.location.toString();
if (uri.indexOf("?m=1","?m=1") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("?m=1"));
window.history.replaceState({}, document.title, clean_uri);
}
//]]>
</script>
I redesign a blogger template and use this code for remove m=1. You can check it.
Voice To Text converter (HTML/JavaScript)
If you are a webmaster or blogger then you can create this tool on your website/blog.
For create voice to text converter, create a new page and follow this tutorial.
- Create a plain html page or for blogger create a new page.
- Add HTML for this tool.
<div class="words" contenteditable>
</div>
- After HTML add CSS for this tool.
<style>@import url("https://fonts.googleapis.com/css?family=Open+Sans");
html {
font-size: 10px;
}
body {
background: #fce6d3;
font-family: "Open Sans", sans-serif;
font-size: 2rem;
color: #1d2e4b;
}
.words {
max-width: 500px;
margin: 50px auto;
background: #fff;
border-radius: 5px;
padding: 1rem 2rem 1rem 5rem;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#cfddf9), color-stop(4%, #fff)) 0 4px;
background-size: 100% 3rem;
position: relative;
line-height: 3rem;
-moz-box-shadow: 2px 8px 15px rgba(228, 126, 118, 0.5);
-webkit-box-shadow: 2px 8px 15px rgba(228, 126, 118, 0.5);
box-shadow: 2px 8px 15px rgba(228, 126, 118, 0.5);
}
p {
margin: 0 0 3rem;
}
.words:before {
content: "";
position: absolute;
width: 4px;
top: 0;
left: 30px;
bottom: 0;
border: 1px solid;
border-color: transparent #ffd9d9;
}</style>
- Add JavaScript code for this tool
<script>
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (!window.SpeechRecognition) {
alert("Your browser does not support speech recognition. Use Chrome!")
}
const recognition = new SpeechRecognition();
recognition.interimResults = true;
let p = document.createElement('p');
const words = document.querySelector('.words');
words.appendChild(p);
recognition.addEventListener('result', e => {
const transcript = Array.from(e.results)
.map(result => result[0])
.map(result => result.transcript)
.join('');
p.textContent = transcript;
if(e.results[0].isFinal) {
p = document.createElement('p');
words.appendChild(p);
}
console.log(transcript);
});
recognition.addEventListener('end', recognition.start);
recognition.start();</script>
- Now your tool is ready.
Simple and Responsive Login Form without Framework
How to create Login Form? [Simple, Responsive, Mobile Friendly]
Creating a Login Form is so simple. I share you source code for Login Form.
Here is demo of Login Form:-
- First Create a HTML page on your server.
- Add CSS for login form.
Style for CSS is below, copy and paste this code.
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700');
*{
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
font-family: 'Raleway', sans-serif;
}
body {background: linear-gradient(-45deg, #ee7752, #ff5530, #23a6d5, #ff0000);
background-size: 400% 400%;
-webkit-animation: gradient 15s ease infinite;
animation: gradient 15s ease infinite;
}
@-webkit-keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.cont{
position: relative;
width: 25%;
height: 400px;
padding: 10px 25px;
margin: 10vh auto;
background: #fff;
border-radius: 8px;
}
.form{ width: 100%; height: 100%; }
h1, h2, .user, .pass{
text-align: center;
display: block;
}
h1{
color: #606060;
font-weight: bold;
font-size: 40px;
margin: 30px auto;
}
.user, .pass, .login{
width: 100%;
height: 45px;
border: none;
border-radius: 5px;
font-size: 20px;
font-weight: lighter;
margin-bottom: 30px;
}
.user, .pass{ background: #ecf0f1; }
.login{
color: #fff;
cursor: pointer;
margin-top: 20px;
background: #3598dc;
transition: background 0.4s ease;
}
.login:hover{ background: #3570dc; }
@media only screen and (min-width : 280px) {
.cont{ width: 90% }
}
@media only screen and (min-width : 480px) {
.cont{ width: 60% }
}
@media only screen and (min-width : 768px) {
.cont{ width: 40% }
}
@media only screen and (min-width : 992px) {
.cont{ width: 30% }
}
h2{ color: #fff; margin-top: 25px; }
Copy and paste this code.
<h2> Responsive Login Form</h2>
<div class="cont">
<div class="form">
<form action="">
<h1>
Login</h1>
<input type="text"
class="user"
placeholder="Username"/>
<input type="password"
class="pass"
placeholder="Password"/>
<button class="login">Login</button>
</form>
</div>
</div>
Data Vocabulary Schema Deprecated Breadcrumbs error Fix in blogger
Importance of Breadcrumbs
Why is it important to have valid breadcrumb structured data markup?
Google Search uses breadcrumb markup in the body of a web page to categorize the information from the page in search results. Given the fact that Google is displaying breadcrumbs more prominently in search results, it’s more important than ever to make sure the markup is valid. Breadcrumb markup can be implemented using JSON-LD, RDFa, or Microdata. It can also be implemented as part of a page’s visual design using HTML.
"How to Fix Breadcrumbs Issue?"
- If you get Email from Google mentioning that your posts have breadcrumbs issues.
- While submitting your post in Google Webmaster tool, you are able to submit the post for indexing, but while testing URL, you get a warning like “Data Vocabulary Schema Deprecated Breadcrumbs error”.
Steps To Fix Breadcrumbs Issue:-
- Go to your blogger and navigate to “Theme” and click “Edit HTML”.
- Click anywhere in the HTML code window of your blogger theme and search for “.breadcrumbs a:hover” OR “.breadcrumbs span a:hover”. You will definitely find either of these two.
- Paste this code.
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#666}
- Paste this code.
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<svg viewBox='0 0 24 24'>
<path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/></svg>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' title='Home' itemprop='item'>
<span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/> </span>
<svg viewBox='0 0 24 24'><path d='M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z' fill='#000000'/></svg>
<b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url + "?&max-results=16"' expr:title='data:label.name' itemprop='item'>
<span itemprop='name'><data:label.name/></span> </a>
<meta expr:content='data:num+2' itemprop='position'/> </span>
<b:if cond='data:label.isLast != "true"'>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
</b:if>
</b:loop>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
<span><data:post.title/></span> </div> </b:if> </b:loop> </b:if> </b:includable>
How To Add Custom Robots.txt File in Blogger?
What is Robots.txt?
Robots.txt is a text file which contains few lines of simple code.
It is saved on the website or blog's server which instruct the web crawlers on how to index and crawl your blog in the search results.
That means you can restrict any web page on your blog from web crawlers so that it can't get indexed in search engines like your blog labels page, your demo page or any other pages that are not as important to get indexed.
Always remember that search crawlers scan the robots.txt file before crawling any web page.
Each blog hosted on blogger has its default robots.txt file which is something look like this:
User-agent: Mediapartners-GoogleDisallow:User-agent: *Disallow: /searchAllow: /Sitemap: http://example.blogspot.com/sitemap.xmlExplanation:-
This code is divided into three sections. Let's first study each of them after that we will learn how to add custom robots.txt file in blogspot blogs.
User-agent: Mediapartners-Google
This code is for Google Adsense robots which help them to serve better ads on your blog. Either you are using Google Adsense on your blog or not simply leave it as it is.
User-agent: *
This is for all robots marked with asterisk (*). In default settings our blog's labels links are restricted to indexed by search crawlers that means the web crawlers will not index our labels page links because of below code.
Disallow: /search
That means the links having keyword search just after the domain name will be ignored. See below example which is a link of label page named SEO.
https://visheshgrewal.blogspot.com/search/label/SEO
And if we remove Disallow: /search from the above code then crawlers will access our entire blog to index and crawl all of its content and web pages.
Here Allow: / refers to the Homepage that means web crawlers can crawl and index our blog's homepage.
Disallow Particular Post
Now suppose if we want to exclude a particular post from indexing then we can add below lines in the code.
Disallow: /yyyy/mm/post-url.html
Here yyyy and mm refers to the publishing year and month of the post respectively. For example if we have published a post in year 2018 in month of March then we have to use below format.
Disallow: /2018/03/post-url.html
To make this task easy, you can simply copy the post URL and remove the blog name from the beginning.
Disallow Particular Page
If we need to disallow a particular page then we can use the same method as above. Simply copy the page URL and remove blog address from it which will something look like this:
Disallow: /p/page-url.html
Adding Custom Robots.Txt to Blogger
Now the main part of this tutorial is how to add custom robots.txt in blogger. So below are steps to add it.
- Go to your blogger blog.
- Navigate to Settings >> Search Preferences ›› Crawlers and indexing ›› Custom robots.txt ›› Edit ›› Yes
- Now paste your robots.txt file code in the box.
- Click on Save Changes button.
- You are done!
How to Check Your Robots.txt File?
You can check this file on your blog by adding /robots.txt at the end of your blog URL in the web browser. For example:
http://xyz.blogspot.com/robots.txt
Once you visit the robots.txt file URL you will see the entire code which you are using in your custom robots.txt file.