Copy button And Whatsapp Share blogger Post me Kaise add kare

by
Copy-and-whatsapp-share-button-for-blogger

2 in 1 Copy or Share button kaise add kare Shayari, motivational, Status, jokes website me

आप जब भी कोई शायरी या स्टेटस वाला वेबसाइट विजिट करते है तो उसमे अक्सर देखा होगा की शायरी टेक्स्ट के नीचे Copy का बटन होता है जिस पर Click करके रीडर्स शायरी, या स्टेटस को Copy कर लेते है

लेकिन बात यही नहीं खत्म नहीं होती अगर आप भी कोई स्टेटस या शायरी, वाला वेबसाइट चला रहे है और वो वेबसाइट Blogger.com प्लेटफॉर्म पर बना हो तो और आपको Coding की जानकारी नहीं है और ऐसे मे आप भी proffessional शायरी स्टेटस वाले ब्लॉग की तरह अपने Blogger पर बने वेबसाइट मे भी Copy button add करना चाहते है तो आप इसके लिए किसी Coding की जानकारी वाले से संपर्क करेंगे या फिर गूगल पर सर्च करेंगे

google पर ऐसे आर्टिकल हिंदी, English language मे बहुत ही कम है ऐसे मे आपको आपके काम के लायक जानकारी नहीं मिलेगी तो आपके पास सिर्फ एक ऑप्शन बचता है और वो है Coding की जानकारी रखने वाला व्यक्ति लेकिन वो आपको ऐसा स्क्रिप्ट तभी देगा जब आप उन्हें इसके लिए पैसे देंगे

लेकिन इस आर्टिकल मे मैंने फ्री मे Copy button kaise add करें के बारे मे बताया है अगर आप भी अपने blogger website me Copy button add करना चाहते है तो हमारे इस पोस्ट को अंत तक पढ़े

इस पोस्ट मे आपको ये बताया जा रहा है की Blogger website me Copy text and whatsapp share button kaise add kare अगर आप wordpress पर है तो आप इसके लिए plugin इस्तेमाल कर सकते है वैसे इसके बारे मे भी मै जल्द ही एक पोस्ट लिखने वाला हूँ

Copy Text And Whatsapp share Button Script for Blogger website

Demo Copy and whatsapp share button

  • सबसे पहले आप नीचे दिए गए कोड कॉपी कर ले
Full script download 
console.log('Hello World!');

document.addEventListener('DOMContentLoaded', function() {
  let sayariElements = document.querySelectorAll('.sayari');
  
  sayariElements.forEach(function(element) {
    let parentElement = document.createElement('div');
    parentElement.classList.add('sayari-box');
    element.parentNode.insertBefore(parentElement, element);
    parentElement.appendChild(element);
    
    if (parentElement.classList.contains('sayari-box')) {
      let grandparentElement = document.createElement('div');
      grandparentElement.classList.add('sayari-wrapper');
      parentElement.parentNode.insertBefore(grandparentElement, parentElement);
      grandparentElement.appendChild(parentElement);
    }
  });
  
  let sayariBoxElements = document.querySelectorAll('.sayari-box');
  
  sayariBoxElements.forEach(function(element) {
    let copyBoxElement = document.createElement('div');
    copyBoxElement.classList.add('copy-box');
    element.appendChild(copyBoxElement);
    
    let sharemeElement = document.createElement('span');
    sharemeElement.classList.add('shareme');
    sharemeElement.innerText=" Share Me ";
    let sharemeIconElement = document.createElement('i');
    sharemeIconElement.classList.add('fab');
    sharemeIconElement.classList.add('fa-whatsapp');
    sharemeElement.appendChild(sharemeIconElement);
    copyBoxElement.appendChild(sharemeElement);
    
    let copymeElement = document.createElement('span');
    copymeElement.classList.add('copyme');
    copymeElement.innerText= "Copy Me";
    let copymeIconElement = document.createElement('i');
    copymeIconElement.classList.add('fa');
    copymeIconElement.classList.add('fa-clipboard');
    copymeElement.appendChild(copymeIconElement);
    copyBoxElement.appendChild(copymeElement);
  });
  
  let copymeElements = document.querySelectorAll('.copyme');  
  copymeElements.forEach(function(element) { 
    
    element.addEventListener('click', function(event) {
      event.preventDefault();
         
    let c = document.createElement("span");
    c.className = "alert";
    c.innerText=" Sayari Has Been Copied";
         
      let textElement = document.createElement('input');
      document.body.appendChild(textElement);
      let parentElement = this.parentElement.parentElement;
      parentElement.append(c);
      let sayariElement = parentElement.querySelector('.sayari');
      textElement.value = sayariElement.textContent.trim();
      textElement.select();
      document.execCommand('copy');
      textElement.remove();
      parentElement.querySelector('.alert').classList.add("show");
      setTimeout(function() {
        parentElement.querySelector('.alert').classList.remove("show");
      }, 3000);
    });
  });
  
  let sharemeElements = document.querySelectorAll('.shareme');
  
  sharemeElements.forEach(function(element) {
    element.addEventListener('click', function(event) {
      event.preventDefault();
      let parentElement = this.parentElement.parentElement;
      let sayariElement = parentElement.querySelector('.sayari');
      let title = document.location.origin;
      let text = sayariElement.textContent;
      let msg = encodeURIComponent(text) + ' - ' + title;
      let open_url = 'https://api.whatsapp.com/send?text=' + msg;
      window.open(open_url, '_blank');
    });
  });
});
  • इस कोड को theme मे add करना है इसके लिए…
  • Theme >> Edit html पर क्लिक करें
  • Theme की Full Coding open हो जाएगी Theme मे Ctrl+ f की मदद से नीचे दिया गया कोड find करें
</body>

ये कोड मिल जाए तो आपने ऊपर जो कोड कॉपी किया था उसे इस कोड ( </body> ) के ऊपर peste कर दे और Theme को Save कर दे

या,

आप चाहे तो इस कोड को Direct Layout >> sidebar / Footer >> add a gadget >> Slect Html/Javascript >> और बड़े वाले बॉक्स मे कोड peste करके Save कर दे

  • अब फिर से ये कोड कॉपी करें
@import url('https://fonts.googleapis.com/css2?family=Nunito&family=Raleway:ital,wght@0,500;0,600;0,900;1,400&display=swap');


html {
    margin: 0;
word-break:break-word;
word-wrap:break-word;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
scroll-behaviour:smooth
}

*{
  margin:0;
  padding: 0;
  box-sizing: border-box
}
body {
    font-size: 15pt;
   -webkit-print-color-adjust: exact;
  font-family: "Raleway",sans-serif;
 
}

section{
  width:100%;
  max-width: 780px;
  margin:0 auto
}

.item {
  position: relative;
  display:block;
  margin: 10px auto
}
	.box {
		text-align: center;
		text-align-last: center;
		padding:20px;
		margin-top: 30px
	}
	.box h1 {
		font-size: 27px;
		padding:10px 15px;
		background: #ff3747;
		display: inline-flex;
		color:#fff;
		border-radius: 6px;
		text-transform: uppercase
	}
	.box p {
		font-size: 20px;
		padding:20px;
	}
	.gotohome {
		margin: 10px 0 20px 0;
		padding: 20px
	}
	.gotohome a {
		padding: 8px 14px ;
		border-radius: 10px;
		border-style: dashed;
		border-color: #00cba9;
		color: #00cba9;
		text-decoration: none;
		font-size: 15px
	}
	.gotohome a:hover {
		background: #000;
		color: #fff;
		border-style: double;
		border-color: #323232
	}
.sayari{
font-size:18px;
font-weight:bold;
padding: 20px 0;
font-family: "Nunito",sans-serif
}
.sayari-wrapper{
float:left;
position:relative;
width:100%;
max-width:50%;
display:inline-block;
height:auto;
box-sizing:content-box;
margin-bottom:20px;


}
.sayari-wrapper:nth-child(odd){
clear:both;
}
.sayari-box{
padding:30px;
margin:16px 20px;
background:#fff;
border-top:10px solid #00cba9;
color:#000;
border-radius:7px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
position:relative;
text-transform: capitalize;
overflow: hidden
}
.sayari-box .alert{
position:absolute;
top:-50px;
right:13px;
padding: 5px 8px;
border-radius:2px;
text-transform:uppercase;
background:#ff3747;
box-shadow:0 3px 6px 3px rgba(0,0,0,0.01);
color:#fff;
z-index:55;
transition:0.5 ease;
font-size: 8px
}

.sayari-box .alert.show {
  visibility:visible;
  opacity:1;
  top: 30px;
  transition: 0.4s ease-in-out
}





.copy-box{
position:relative;
padding:20px 0 10px 0;
display:flex;
justify-content:space-between;
align-content:center;
align-items:center;
}
.copy-box span{
text-align:center;
display:flex;
justify-content:center;
align-items:center;
width:100%;
margin:0 auto;
cursor:pointer;
box-sizing:border-box;
font-size: 14px;
text-transform: uppercase;
font-weight: bold
}
.copy-box span i {
  margin-left: 10px
}
.copy-box span:first-child{
margin-right:8px;
}
.copy-box span:hover{
background:#ff3747;
color:#fff;
transition:0.8s ease-in-out;
border:none;
}
.copy-box span i{
font-size:14px;
padding-right:7px;
}
.shareme{
padding:10px;background: transparent;color:#00cba9;border-radius:3px;
border:1px solid #00cba9;
}
.copyme{
padding:10px;
background:#00cba9;
color:#fff;
border-radius:3px;
}


footer {
  padding: 30px 12px;
  text-align: center;
  color:#fff;
  background:#00cba9;
  margin-top: 30px
}





@media screen and (max-width:600px){
  .sayari-wrapper{
  float:none;
  max-width:100%;
  box-sizing:border-box;
  margin-bottom:15px;
  }
  .sayari-box {
    margin:34px 20px
  }
  footer {
    font-size: 13px
  }
  .box {
    padding:0;
    margin:0;
  }
  .box h1 {
    display: block;
    text-align: center;
    border-radius: 0px;
    font-size: 22px
  }
  .box p {
    font-size: 13px;
    margin-top: 12px;
    background:none
    }
}




@media screen and (max-width:400px){
  .copy-box{
  flex-direction:column;
  -webkit-flex-direction:column;
  box-sizing:border-box;}
  .copy-box span:first-child{
  margin:0 auto 12px auto;}
}
  • फिर से Theme मे नीचे दिया गया कोड Find करें Find करने लिए Ctrl + F का प्रयोग करें
]]></b:skin>

Code मिल जाने के बाद के ठीक पहले Step 4 से जो कोड कॉपी किया है उसे यहाँ peste कर दे और थीम सेव कर दे

अब वापस ब्लॉगर डैशबोर्ड मे आ जाए पोस्ट >> न्यू पोस्ट >> पोस्ट एडिटर open करें Open होने के बाद HTML Mode सलेक्ट करें नीचे दिए गए कोड कॉपी करें

<div class=’sayari’> apna shyari yaha likhe </div>

और HTML mode मे Peste करें शायरी लिखें की जगह अपना शायरी लिखें

इसी तरह आप जितने भी शायरी ऐड करना चाहते है उतने कोड के अंदर शायरी लिख सकते है

आभार : इस कोड को Limbu नाम का डेवलपर है उन्होंने बनाया है आप उन्हें फेसबुक पर देख सकते है वो कई थीम भी बना चुके है ब्लॉगर ब्लॉग के लिए जो की अमेजिंग डिज़ाइन है अगर आप एक best and perfect premiun blogger theme find कर रहे है तो मुझे लगता है की आपको उनके द्वारा डेवलप किया गया theme एक बार इस्तेमाल करना चाहिए

उम्मीद है आपको हमारा ये पोस्ट ब्लॉगर मे Copy and whatsapp Share Button kaise add kare पोस्ट पसंद आया पोस्ट पसंद आए तो अपना कीमती फीडबैक देना ना भूले इसके अलावा अगर आपके पास जरा सा भी टाइम बचे तो इस पोस्ट को सोशल साइट्स पर जरूर शेयर करें

Share on:

My Name is manish i am the founder of this successbranch blog. the main objective this blog is to promote hindi in the world . for this, i share all kinds of information here in hindi Learn More

...

Related Posts

8 thoughts on “Copy button And Whatsapp Share blogger Post me Kaise add kare”

  3. Kya aadmi hai bhai tu bole code copy Karna hain ye to copy bhi nhi ho raha aur jo link di hain usme alag code hain agli bar aisi information mat dalna

    Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.