Saturday, June 16, 2018

How To Embed CodePen In Blogger and Wordpress Webpage

This tutorial explains how to integrate Codepen in web based application. In the most of  website you may have seen Codepen is integrated and it will display the output for the particular source code.

How To Embed CodePen In Blogger and Wordpress Webpage

Now follow the below steps to embed Codepen in your webpage :

  • Open the Codepen in browser.
  • Create your new Codepen.
  • Once you save your Codepen, it will generate one unique ID. You can get unique ID from the Codepen URL as well. 
           https://codepen.io/skptricks/pen/QQdJRX

           NOTE : Link is highlighted in green is unique ID.
  •  Now Place/replace that unique ID in below link :
         <iframe  src="https://codepen.io/skptricks/embed/QQdJRX?height=440"
scrolling="no" frameborder="0" allowtransparency="true"
allowfullscreen="true" style="width: 100%; overflow: hidden;height:440px; ">
</iframe>

         NOTE: Also you can set width, height parameters in URL as per your requirement.

Example
<iframe  src="https://codepen.io/skptricks/embed/QQdJRX?height=440" 
scrolling="no" frameborder="0" allowtransparency="true" 
allowfullscreen="true" style="width: 100%; overflow: hidden;height:440px; ">
</iframe>

Lets see the output :

Hope you like this tutorial, do let me know your comments below in comment box.


1 comment: