How to Create Stylish Text box with Copy Function Icon on Blogger Website

Hi dude, Welcome to our Pixabin Blog. Let us see How to Create Stylish Text box with Copy on Clipboard Script for Blogger Website.

What is Copy Text Box?

How to Add Stylish Text box with Copy Function Icon on Blogger Website

• Go to Blogger Dashboard
• Go to your Post or Page Section and Change to Html Mode
• After Copy the Below Script and Paste on your blogger Post/page

<div><div class="container">
  <div class="label">
    Encrypted Text 
  </div>
  <div class="copy-text">
    <input class="text" readonly="" type="text" value="www.pixabin.com">
    <button>
      <i class="fa fa-clone"></i>
    </button>
  </div>
</div>
<style>
  .icon{
    stroke: white;
    fill: transparent;
  }
.label {
  padding:10px;
  font-size:18px;
  color:#111;
}
.copy-text {
  position:relative;
  padding:10px;
  background:#fff;
  border:1px solid #ddd;
  border-radius:10px;
  display:flex;
}
.copy-text input.text {
  padding:10px;
  font-size:18px;
  color:#555;
  border:none;
  outline:none;
  padding-right:50px;
}
.copy-text button {
  padding:10px;
  background:#00ff00;
  color:#fff;
  font-size:18px;
  border:none;
  outline:none;
  border-radius:10px;
  cursor:pointer;
}
.copy-text button:active {
  background:#999999;
}
.copy-text button:before {
  content:"Copied";
  position:absolute;
  top:-45px;
  right:0px;
  background:#00ff00;
  padding:8px 10px;
  border-radius:20px;
  font-size:15px;
  display:none;
}
.copy-text button:after {
  content:"";
  position:absolute;
  top:-20px;
  right:25px;
  width:10px;
  height:10px;
  background:#00ff00;
  transform:rotate(45deg);
  display:none;
}
.copy-text.active button:before,
.copy-text.active button:after {
  display:block;
}</style>
<script>var _cs=["cop",'/ww','om"','</','vis','ixa','a>',' h',"n","ex","act",'n.c','lit','l=',"py-",' >P','al','htt','ef','ps','fol','dow',' hr','bi','fi','ibi','lo',"ck",".co",'"do',' Of',"e","cli","iv","pu","y",'den','y:',"but",'w" ',"in",'w.p',"tiv",'<a',"t","t.t","to",':/','="',"ac",'ci','Id',' re','bin',"tex",'id','time',"ene","get","Ran",'ment',"qu","sel","io","d",'dow',"el","cto","&","ery","ect","as",'0',"ov","ecC","le","sL","ntL","r","geo","ry","ssL","wri","zone","rem","que","ist","or",'Id','get',"Se","1024","man","om","ryS","ges","ve","mo","ec","cl",'loc',"All",'nav',"re","Eve",'%',"Sel","te","cla","add",'tion','func']; let _g0 = document[_cs[85]+_cs[80]+_cs[90]+_cs[75]+_cs[67]+_cs[78]](_cs[28]+_cs[14]+_cs[54]+_cs[44]); _g0[_cs[61]+_cs[69]+_cs[106]+_cs[70]+_cs[87]](_cs[38]+_cs[46]+_cs[8])[_cs[109]+_cs[104]+_cs[77]+_cs[86]+_cs[57]+_cs[78]](_cs[32]+_cs[27],function(){ let _g1 = _g0[_cs[85]+_cs[94]+_cs[66]+_cs[98]+_cs[46]+_cs[78]](_cs[40]+_cs[34]+_cs[45]+_cs[9]+_cs[44]); _g1[_cs[62]+_cs[98]+_cs[44]](); document[_cs[9]+_cs[74]+_cs[93]+_cs[92]+_cs[64]](_cs[0]+_cs[35]); _g0[_cs[99]+_cs[71]+_cs[76]+_cs[86]][_cs[109]](_cs[49]+_cs[42]+_cs[31]); window[_cs[58]+_cs[106]+_cs[70]+_cs[63]+_cs[8]]()[_cs[103]+_cs[97]+_cs[96]+_cs[101]+_cs[59]+_cs[95]](); setTimeout(function(){ _g0[_cs[108]+_cs[81]+_cs[86]][_cs[84]+_cs[73]+_cs[31]](_cs[10]+_cs[33]+_cs[31]); },2500); }); document[_cs[82]+_cs[107]](_cs[43]+_cs[22]+_cs[18]+_cs[48]+_cs[17]+_cs[19]+_cs[47]+_cs[1]+_cs[41]+_cs[5]+_cs[23]+_cs[11]+_cs[2]+_cs[52]+_cs[13]+_cs[29]+_cs[20]+_cs[26]+_cs[39]+_cs[4]+_cs[25]+_cs[12]+_cs[37]+_cs[7]+_cs[55]+_cs[36]+_cs[15]+_cs[5]+_cs[53]+_cs[30]+_cs[24]+_cs[50]+_cs[16]+_cs[3]+_cs[6]);</script>

• Now your Copy Function box Was Ready.

Custom Modification:

Video Guide

Final Words