How to Create Iframe Code Generator Tool in your Blog - Post or Page

Hey Guys! Welcome back to Techly Series website.

Assuming You are observing the Iframe Code Generator Tool Script on blogger. This is the Right Place to you. Since You can get this Script for free and gain deep pocket With Your adsense.

Today, in this article, I will Discuss with you about How to Create Iframe Code Generator Tool in Blog - Post or Page.

What is Iframe

Basically, iframe is a HTML report that is inserted inside one more record on a site, permitting you to remember content from outside hotspots for your pages. Along these lines, iFrames are utilized to embed a piece of content from one more source into a page - it resembles an additional a window on a page, showing outside sources inside it.

Iframes are the main sort of casing permitted in HTML5. Google Maps, photograph facilitating Flickr, and web based locales, for example, YouTube and Vimeo all utilization iFrames. Furthermore the notices you see on site pages are likewise iFrames.

How to Create

So, to create Iframe Code Generator Tool on blogger you need to follow the following process below precisely.

What's more, with the help of these steps, you can easily make this tool in your blogger website.

Step 1

  • You will go to your - Blogger Dashboard
  • Go to Theme
  • Go to - Edit HTML
  • Search - </head> or &lt;/head&gt;
  • Copy this CSS Code below and Paste on top of </head> or &lt;/head&gt;
  • Save Theme

You must back up your theme before go to Edit HTML

<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/itsTSUI/tsP/toolBody.css'/>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/4ad360bfd2.js'/>

Step 2

  • After Save Theme
  • Create a new Post or Page
  • Copy this HTML & Javascript Code below and Paste in your blog - Post or Page
  • Publish
<div class="Tbody">

<b>URL</b>
<input id="Iurl" placeholder="Enter Your URL Here..." value="https://example.blogspot.com/">
  
<b>Width</b>
<input id="Iwidth" placeholder="Enter Width Here..." value="100">
  
<b>Height</b>
<input id="Iheight" placeholder="Enter Height Here..." value="245">

<b>Frame Border<b>
<input id="Iborder" placeholder="Enter Boder Here..." value="0">

<b>Scrolling<b>
<select id="Iscrolling">
<option value="yes">Yes</option>
<option value="no" selected>No</option>
</select>

<b>Full Screen</b>
<select id="Ifullscreen">
<option value=" allowfullscreen" selected>Allow</option>
<option value="">Not Allow</option>
</select>

<button type="button" id="Gbutton">Generate<span class="fa fa-hand-o-right"></span></button>

<textarea id="Icode" rows="5" placeholder="Get Iframe Code Here..." readonly></textarea>

<button type="button" class="copybutton" data-clipboard-target="#Icode"><span class='fa fa-files-o'></span>Copy Code</button>
  
<button type="button" id="Tanother"><i class="fa fa-repeat"></i>Try Another</button>

</div>

<script>$(function(){$('#Gbutton').click(function(){var url=$('#Iurl').val();var width=$('#Iwidth').val();var height=$('#Iheight').val();var border=$('#Iborder').val();var scrolling=$('#Iscrolling').val();var fullscreen=$('#Ifullscreen').val();$('#Icode').val('<iframe src="'+url+'" width="'+width+'%" height="'+height+'px" frameborder="'+border+'" scrolling="'+scrolling+'"'+fullscreen+'></iframe>');});})</script>

<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script src='https://clipboardjs.com/dist/clipboard.min.js'></script> 
<script>$(function(){var clipboard=new ClipboardJS(".copybutton");$(".copybutton").click(function(){$(this).html("<span class='fa fa-check'></span>Code Copied");var that=$(this);var intrvrl=setInterval(function(){that.html("<span class='fa fa-files-o'></span>Copy Code");clearInterval(intrvrl);},1500);});})</script>

<script>{$('#Tanother').click(function(){$('#Iurl').val('');$('#Icode').val('')})}</script>

Final Words

You ought to indeed note by thinking in the remark box underneath. Or on the other hand you moreover bear to give some sort of Suggestion, likewise you can partake your conviction with me in the Comment Box beneath.

I didn't give this content to any individual who saw or replicated them. This content I've looked through a great deal and given by experience. So kindly don't note on this substance.

Assuming you experience any issues while copying this script you can impart me by Telegram and I'll attempt to help.

  • Aᴀ
  • A+
  • A-