Love Calculator Website Kaise Banaye in Blogger 2022 | How to make love Calculator Website Free In Blogger
आज के समय में ब्लॉगिंग से वेबसाइट बनाकर पैसा कमाने का अनेक तरीका है। Love Calculator Website बनाकर बहुत सारे पैसे कमा सकते हैं। आज के आर्टिकल से मैं आपको बताऊंगा। Love Calculator Website Kaise Banaye in Blogger 2022.
Love Calculator Website Kaise Banaye in Blogger 2022
Love Calculator Website फ्री में ब्लॉगर पर बना सकते हैं। और उससे पैसा कमा सकते हैं। एक बार वह ऐसा वेबसाइट बनाइए। और उसको छोड़ दीजिए। बहुत सारे ट्रैफिक आ जाने के बाद आपको उस वेबसाइट से डॉलर बनना शुरू हो जाएंगे।
Love Calculator Website बनाने के लिए आपको एक भी रुपए खर्च करने की जरूरत नहीं होगी। क्योंकि Blogger पर डोमेन और होस्टिंग सारा चीज फ्री में दिया जाता है।
How to make love Calculator Website Free In Blogger
Love Calculator Website बनाने के लिए कुछ टिप्स को फॉलो करने होंगे। तब जाकर बनकर तैयार हो जाएगा।
- Create a new Website In Blogger
- Choose Your Domain Name
- Install Love Calculator Template
- Customization Love Calculator Template
- Apply For Google Adsense
- Start Earning
How To Create a new Website In Blogger
दोस्तों किसी भी तरह की वेबसाइट बनाने के लिए, आपको एक नया वेबसाइट बनाना होगा। यदि आप फ्री में वेबसाइट बनाना चाहते हो। और आपको समझ में नहीं आ रहा है कि वेबसाइट कैसे बनाएं और पैसा कैसे कमाए। तब हम नीचे वीडियो दे रहा है जिसको आपको देखना होगा। जिसमें हमने सारा चीज बताया है कि वेबसाइट कैसे बनाते हैं।
Feature of Love Calculator Website 2022
वेबसाइट बनाने के बाद, कुछ भी करने की जरूरत नहीं होती है। सिर्फ उस वेबसाइट को गूगल में रैंक करने के लिए, ज्यादा से ज्यादा लोगों तक शेयर करना होगा। और सभी लोगों को इस वेबसाइट को शेयर करने के लिए बोलना होगा।
- NO Content
- No Coding
- Mobile Friendly
- User Friendly
- Responsive Template
- Adsense Approval
How To Install Template Blogger Love Calculator Website 2022
Template Install In Just Three Step
1. Go To Blogger.com
2. Click on Edit Option
3. Click on Edit HTML menu
4. Paste Code Of Love Calculator Java Script
How To Download HTML Java Script Love Calculator 2022
नीचे में आपको HTML Code Java Link मिल जाएगा। जहां से आसानी से डाउनलोड किया जा सकता है। और फिर उसको वेबसाइट में लगा सकते हैं।
और यदि आप मोबाइल से ब्लॉगिंग करते हैं। तब आपको कोड डाउनलोड करने के बाद, उसको लगाने के लिए आपके मोबाइल में नोटपैड होना जरूरी है।इसलिए मैं नीचे सारा नोटपैड का HTML Code दे देता हूं।
<html>
<head>
<h1> Love Calculator 2022</h1>
<style>
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
@import url(https://fonts.googleapis.com/css?family=Bungee+Shade);
@import url(https://fonts.googleapis.com/css?family=Bungee);
h1 {
background-color: #05ffb0;
text-transform: uppercase;
text-align: center;
letter-spacing: 1px;
font-size: 3em;
text-shadow: 2px 2px 3px rgba(0,0,0,.3);
font-family: 'Bungee Shade';
}
body {
background-color: #ffaaf9;
}
.heart {
top: 40px;
position: relative;
background-color: red;
height: 60px;
transform: rotate(-45deg);
width: 60px;
}
.heart:before,
.heart:after {
content: "";
background-color: red;
border-radius: 50%;
height: 60px;
position: absolute;
width: 60px;
}
.heart:after {
left: 30px;
top: 0;
}
.heart:before {
top: -30px;
left: 0;
}
.center{
margin:auto;
}
div.person{
background-color: #ff007b;
height: 200px;
width: 150px;
}
#card1{
position: absolute;
left: 0px;
}
#card2{
position: absolute;
right: 0px;
}
div.persons{
margin: auto;
position: relative;
height: 200px;
width: 500px;
}
.name{
text-align: center;
color: white;
font-size: 20px;
font-family: Arial;
}
input[type=text] {
width: 89%;
padding: 10px 10px;
margin: 8px;
box-sizing: border-box;
}
.nameLabel{
color: white;
font-family: Arial sans-serif normal;
margin-left: 10px;
}
.setButton {
background-color: #ffaaf9;
border: none;
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
font-weight: bold;
margin: 0 48px;
cursor: pointer;
}
#compute {
position: relative;
background-color: #ff007b;
display: block;
margin: auto;
border: none;
color: white;
font-family: 'Bungee';
font-size: 20px;
border-radius: 15px;
top: 100px;
cursor: pointer;
}
#compute:focus {
background-color: white;
color: #ff007b;
outline: none;
}
#resultLabel{
position: relative;
margin: auto;
left: 213px;
top: -86px;
font-family: 'Indie Flower';
font-size: 50px;
font-weight: bold;
}
#resultLabel.animated::after{
content:"";
animation-name: calculating;
animation-duration: 3s;
}
@keyframes calculating {
0% {content: "74%";}
5% {content: "28%";}
10% {content: "54%";}
15% {content: "17%";}
20% {content: "44%";}
25% {content: "5%";}
30% {content: "87%";}
35% {content: "100%";}
40% {content: "66%";}
50% {content: "89%"}
60% {content: "22%";}
70% {content: "32%";}
85% {content: "80%";}
100%{content: "35%";}
}
</style>
</html>
<link rel="me" href="https://www.blogger.com/profile/08644758492716906224" />
<!-- --><style type="text/css">@import url(//www.blogger.com/static/v1/v-css/navbar/3334278262-classic.css);
div.b-mobile {display:none;}
</style>
</head><body><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener('load',
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<div id="navbar-iframe-container"></div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {
if (gapi.iframes && gapi.iframes.getContext) {
gapi.iframes.getContext().openChild({
});
}
});
</script>
<div class="heart center"></div>
<div class="persons">
<div class="person" id="card1">
<p class="name" id="person1">Your Name</p>
<form>
<label for="fname" class="nameLabel">Enter name:</label>
<input type="text" id="nameInput1"/>
</form>
<button onClick="update1()" class="setButton" id="b1">SET</button>
</div>
<div class="person" id="card2">
<p class="name" id="person2">Crush Name</p>
<form>
<label for="fname" class="nameLabel">Enter name:</label>
<input type="text" id="nameInput2">
</form>
<button onClick="update2()" class="setButton" id="b2">SET</button>
</div>
<button onClick="magicHappens()" id="compute">CALCULATE</button>
<p id="resultLabel" hidden></p>
</div>
<script>
function update1(){
var element = document.getElementById("nameInput1");
var content = element.value;
document.getElementById("person1").innerHTML = content;
document.getElementById("nameInput1").value = "";
}
function update2(){
var element = document.getElementById("nameInput2");
var content = element.value;
document.getElementById("person2").innerHTML = content;
document.getElementById("nameInput2").value = "";
}
function compute(){
var name1 = document.getElementById("person1").innerHTML;
var name2 = document.getElementById("person2").innerHTML;
var num1 = 0;
var num2 = 0;
for (var i = 0; i < name1.length; i++){
num1 = num1 + name1.charCodeAt(i);
}
for (var j = 0; j < name2.length; j++){
num2 = num2 + name2.charCodeAt(j);
}
var result = (num1 * num2 * 273);
var strRes = result.toString();
return strRes.substring(0, 2)+"%";
}
/* make visible, make animation, use the compute method, display the right result, unselect button and remove animated class*/
function magicHappens(){
var element = document.getElementById("resultLabel");
element.innerHTML = "";
element.style.display = "block";
element.classList.toggle("animated");
setTimeout('display()',3005);
}
function display(){
var element = document.getElementById("resultLabel");
element.innerHTML = compute();
element.classList.toggle("animated");
document.getElementById("compute").blur();
}
</script>
</body>
</html>
<head>
<h1> Love Calculator 2022</h1>
<style>
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
@import url(https://fonts.googleapis.com/css?family=Bungee+Shade);
@import url(https://fonts.googleapis.com/css?family=Bungee);
h1 {
background-color: #05ffb0;
text-transform: uppercase;
text-align: center;
letter-spacing: 1px;
font-size: 3em;
text-shadow: 2px 2px 3px rgba(0,0,0,.3);
font-family: 'Bungee Shade';
}
body {
background-color: #ffaaf9;
}
.heart {
top: 40px;
position: relative;
background-color: red;
height: 60px;
transform: rotate(-45deg);
width: 60px;
}
.heart:before,
.heart:after {
content: "";
background-color: red;
border-radius: 50%;
height: 60px;
position: absolute;
width: 60px;
}
.heart:after {
left: 30px;
top: 0;
}
.heart:before {
top: -30px;
left: 0;
}
.center{
margin:auto;
}
div.person{
background-color: #ff007b;
height: 200px;
width: 150px;
}
#card1{
position: absolute;
left: 0px;
}
#card2{
position: absolute;
right: 0px;
}
div.persons{
margin: auto;
position: relative;
height: 200px;
width: 500px;
}
.name{
text-align: center;
color: white;
font-size: 20px;
font-family: Arial;
}
input[type=text] {
width: 89%;
padding: 10px 10px;
margin: 8px;
box-sizing: border-box;
}
.nameLabel{
color: white;
font-family: Arial sans-serif normal;
margin-left: 10px;
}
.setButton {
background-color: #ffaaf9;
border: none;
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
font-weight: bold;
margin: 0 48px;
cursor: pointer;
}
#compute {
position: relative;
background-color: #ff007b;
display: block;
margin: auto;
border: none;
color: white;
font-family: 'Bungee';
font-size: 20px;
border-radius: 15px;
top: 100px;
cursor: pointer;
}
#compute:focus {
background-color: white;
color: #ff007b;
outline: none;
}
#resultLabel{
position: relative;
margin: auto;
left: 213px;
top: -86px;
font-family: 'Indie Flower';
font-size: 50px;
font-weight: bold;
}
#resultLabel.animated::after{
content:"";
animation-name: calculating;
animation-duration: 3s;
}
@keyframes calculating {
0% {content: "74%";}
5% {content: "28%";}
10% {content: "54%";}
15% {content: "17%";}
20% {content: "44%";}
25% {content: "5%";}
30% {content: "87%";}
35% {content: "100%";}
40% {content: "66%";}
50% {content: "89%"}
60% {content: "22%";}
70% {content: "32%";}
85% {content: "80%";}
100%{content: "35%";}
}
</style>
</html>
<link rel="me" href="https://www.blogger.com/profile/08644758492716906224" />
<!-- --><style type="text/css">@import url(//www.blogger.com/static/v1/v-css/navbar/3334278262-classic.css);
div.b-mobile {display:none;}
</style>
</head><body><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener('load',
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<div id="navbar-iframe-container"></div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {
if (gapi.iframes && gapi.iframes.getContext) {
gapi.iframes.getContext().openChild({
});
}
});
</script>
<div class="heart center"></div>
<div class="persons">
<div class="person" id="card1">
<p class="name" id="person1">Your Name</p>
<form>
<label for="fname" class="nameLabel">Enter name:</label>
<input type="text" id="nameInput1"/>
</form>
<button onClick="update1()" class="setButton" id="b1">SET</button>
</div>
<div class="person" id="card2">
<p class="name" id="person2">Crush Name</p>
<form>
<label for="fname" class="nameLabel">Enter name:</label>
<input type="text" id="nameInput2">
</form>
<button onClick="update2()" class="setButton" id="b2">SET</button>
</div>
<button onClick="magicHappens()" id="compute">CALCULATE</button>
<p id="resultLabel" hidden></p>
</div>
<script>
function update1(){
var element = document.getElementById("nameInput1");
var content = element.value;
document.getElementById("person1").innerHTML = content;
document.getElementById("nameInput1").value = "";
}
function update2(){
var element = document.getElementById("nameInput2");
var content = element.value;
document.getElementById("person2").innerHTML = content;
document.getElementById("nameInput2").value = "";
}
function compute(){
var name1 = document.getElementById("person1").innerHTML;
var name2 = document.getElementById("person2").innerHTML;
var num1 = 0;
var num2 = 0;
for (var i = 0; i < name1.length; i++){
num1 = num1 + name1.charCodeAt(i);
}
for (var j = 0; j < name2.length; j++){
num2 = num2 + name2.charCodeAt(j);
}
var result = (num1 * num2 * 273);
var strRes = result.toString();
return strRes.substring(0, 2)+"%";
}
/* make visible, make animation, use the compute method, display the right result, unselect button and remove animated class*/
function magicHappens(){
var element = document.getElementById("resultLabel");
element.innerHTML = "";
element.style.display = "block";
element.classList.toggle("animated");
setTimeout('display()',3005);
}
function display(){
var element = document.getElementById("resultLabel");
element.innerHTML = compute();
element.classList.toggle("animated");
document.getElementById("compute").blur();
}
</script>
</body>
</html>
How To Customization Love Calculator Website Template 2022
Conclusion
मुझे उम्मीद है कि आर्टिकल पढ़कर अच्छा लगा होगा। आपने सीखा होगा कि Love Calculator Website Kaise Banaye in Blogger 2022. मैंने इस आर्टिकल्स में यह भी बताया है। How to make love Calculator Website Free In Blogger.
इस आर्टिकल को ज्यादा से ज्यादा लोगों तक शेयर करें। और अपने दोस्तों को भी इस आर्टिकल को शेयर करें। ताकि सबको मदद मिल सके। और सही जानकारियां सही लोगों तक पहुंच सके। मुझे सोशल मीडिया पर फॉलो करें। और कमेंट करें।
धन्यवाद।
Sandeep Kumar
Hey, I'm sandeep kumar.Blogger and Youtuber I like to gain every type of knowledge.and I want to share my knowledge with everyone I love thrills and travelling to new historical places.
Bhai Edit html ek Sath remove nhi horha hai Bhai
Help please