Join our Telegram and Youtube Channels

Posts

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?

Copy Text Box looks like a Normal Text Box. But, this Text box gets one extra Feature. that feature is Copy Button. your Website visitor can click this Copy Button. user get all text from on your Text Box. That All !!! This Main and Only one Feature Of This 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:

  • Change the Value Element to change your Copiable Text
  • If you face a copy icon not showing a problem Please copy the below CSS Script and Directly Paste above on </head> Tag on blogger Template.
  • <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  • If you want to Change the Colour of your Copy Box. Please change CSS Script.

Video Guide

Final Words

We hope this "How to Create Stylish Text box with Copy Function Icon on Blogger Website" is helpful to you. if you want more information like this Please do follow our Youtube channel and Telegram Channel. Thank you.
Related Posts

Post a Comment

Table of Contents