In this article, you will learn how to add a blogger feature to the current blogger template to Watch Demo Website Live on Screens like Tablet, Mobile, and Desktop Screens {CSS Tricks}. This feature is purely based on CSS and HTML. One can use the CSS and HTML codes for enabling this feature on their website.
This feature will be quite useful for Website Template Sellers or Web Developers. A website template seller can show the demo website live on the screen for each post with a preview of the given URL of the respective template whether it is blogger or WordPress.
And a Web designer or developer can use it for their portfolio by showing a demo website of recent and old work projects
EXAMPLE of Watch Demo Website Live on Screens
To add this feature of watching website demo live on a graphical computer screen. you need to use the given below codes.
HTML Code for Post
Here is the HTML code for post to add Watch Demo Website Live on Screens. you need to create a tablet, mobile, and desktop to show display screens that show the specific website. Please follow the below-given steps to implement this feature in each post.
- First, you need to copy this code and paste it below where your want to show screens in your blogger post.
- Now you need to just replace the “##Bloggerlly.com##” with desired webpage URL to add this feature to your posts.
<h2>Live Desktop Screen</h2>
<div class="demo">
<div class="labtop landscape">
<div class="lbcontainer">
<iframe class="preview-frame" id="labtop-iframe" src="##Bloggerlly.com##"></iframe>
</div>
</div>
<svg class="labtop-leg" viewbox="0 0 157.496 64">
<use xlink:href="#labtop-leg"></use>
</svg>
</div>
<div class="svg__assets">
<svg enable-background="new 0 0 157.496 64" height="64px" id="labtop-leg" version="1.1" viewbox="0 0 157.496 64" width="157.496px" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px">
<g id="myframesvg__leg">
<lineargradient gradientunits="userSpaceOnUse" id="SVGID_1_" x1="78.7715" x2="78.7715" y1="0" y2="63.0005">
<stop offset="0" style="stop-color: rgb(184, 184, 186);"></stop>
<stop offset="0.7045" style="stop-color: rgb(252, 252, 253);"></stop>
<stop offset="0.8771" style="stop-color: rgb(163, 164, 166);"></stop>
<stop offset="1" style="stop-color: rgb(189, 189, 191);"></stop>
</lineargradient>
<path d="M157.375,61.376c-0.75-0.75-17.833-5.25-21.5-8.313S128.5,0,128.5,0H79H29.043
c0,0-3.708,49.999-7.375,53.062s-20.75,7.563-21.5,8.313S1.084,63,6.959,63C9.334,63,79,63,79,63s69.209,0,71.584,0
C156.459,63,158.125,62.126,157.375,61.376z" fill="url(#SVGID_1_)"></path>
<path d="M79,64H6.807c-0.182-0.01-3.793-0.236-6.293-1.777c-0.235-0.146-0.308-0.453-0.163-0.688
s0.452-0.308,0.688-0.163C3.321,62.777,6.801,63,6.836,63h143.9c0.01,0,3.715-0.222,5.996-1.629
c0.234-0.143,0.542-0.072,0.688,0.163c0.145,0.235,0.071,0.544-0.163,0.688c-2.501,1.543-6.332,1.777-6.494,1.777H79z" fill="#A3A4A6"></path>
</g>
</svg>
</div>CSS Code Watch Demo Website Live on Screens
You need to add CSS code to your blogger template XML file to show Demo Website Live on Screens properly in the post. This code needs to place before the </head> tag in your blogger template XML file.
Please follow the below-given steps to implement this CSS into your blogger template to properly watch Demo Website Live on Screens in your posts.
Step 1. Go to blogger dashboard > Themes > Customize > Edit HTML.
Step 2. Now find the following code <b:skin>.
Step 3. Now add the following CSS class code after the body class. Responsive Iframe Video CSS.
Now just copy the following CSS code and paste it before the <b:skin>.
<style>
.devices{position:relative;margin:30px auto;width:520px;height:330px;overflow:hidden}
.preview-frame{position:absolute}
.lbcontainer{position:absolute;top:0;left:0;width:100%;height:100%}
.labtop,.phone,.tablet{position:absolute;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease}
.tablet{background-color:#333;border-radius:25px;left:-375px;bottom:-268.75px;width:1200px;height:860px;-webkit-box-shadow:0 0 10px rgba(0,0,0,.5);-moz-box-shadow:0 0 10px rgba(0,0,0,.5);box-shadow:0 0 10px rgba(0,0,0,.5);-webkit-transform:scale(.375);-moz-transform:scale(.375);transform:scale(.375)}
.tablet.portrait{-webkit-transform:scale(.375) translateX(170px) translateY(-170px);-moz-transform:scale(.375) translateX(170px) translateY(-170px);transform:scale(.375) translateX(170px) translateY(-170px)}
.tablet.landscape .preview-frame{top:46px;left:88px;width:1024px;height:768px}
.tbtn{width:45px;height:45px;border:2px solid #777;border-radius:50%;position:absolute;left:20.5px;top:408.5px}
.phone{background-color:#333;border-radius:30px;right:-115.625px;bottom:-218.75px;width:370px;height:700px;-webkit-box-shadow:0 0 10px rgba(0,0,0,.5);-moz-box-shadow:0 0 10px rgba(0,0,0,.5);box-shadow:0 0 10px rgba(0,0,0,.5);-webkit-transform:scale(.375);-moz-transform:scale(.375);transform:scale(.375)}
.phone.portrait .preview-frame{top:66px;left:25px;width:320px;height:568px}
.phone.landscape{-webkit-transform:scale(.375) translateX(-165px) translateY(-165px);-moz-transform:scale(.375) translateX(-165px) translateY(-165px);transform:scale(.375) translateX(-165px) translateY(-165px)}
.pbtn{width:35px;height:35px;border:2px solid #777;border-radius:50%;position:absolute;left:167.5px;bottom:13.5px}
.demo{position:relative;margin:30px auto;width:561px;height:382.8725px;overflow:hidden;transition:.5s}
.demo:hover{transform:scale(1.75);z-index:99;transition:.5s}
.labtop{background-color:#333;border-radius:25px;left:-569.5px;top:-320.34375px;width:1700px;height:956.25px;-webkit-box-shadow:0 0 10px rgba(0,0,0,.5);-moz-box-shadow:0 0 10px rgba(0,0,0,.5);box-shadow:0 0 10px rgba(0,0,0,.5);-webkit-transform:scale(.33);-moz-transform:scale(.33);transform:scale(.33)}
.labtop.portrait{-webkit-transform:scale(.33);-moz-transform:scale(.33);transform:scale(.33)}
.labtop.portrait .preview-frame{top:-321.875px;left:421.875px;width:856.25px;height:1600px}
.labtop.landscape .preview-frame{top:50px;left:50px;width:1600px;height:856.25px}
.svg__assets{height:0;width:0;position:relative;visibility:hidden}
.labtop-leg{position:absolute;display:block;margin:0 auto;top:315.56px;left:196.345px;width:30%;height:initial}
.dark-mode .labtop,.dark-mode .phone,.dark-mode .tablet{background-color:#232323}
@media(max-width:950px){.demo{width:408px;height:278.46px}
.labtop{left:-646px;top:-363.375px;-webkit-transform:scale(.24);-moz-transform:scale(.24);transform:scale(.24)}
.labtop-leg{top:229.5px;left:142.785px}
.devices{width:360.1px;height:312px}
.tablet{left:-444px;bottom:-318.2px;-webkit-transform:scale(.26);-moz-transform:scale(.26);transform:scale(.26)}
.tablet.portrait{-webkit-transform:scale(.26) translateX(170px) translateY(-170px);-moz-transform:scale(.26) translateX(170px) translateY(-170px);transform:scale(.26) translateX(170px) translateY(-170px)}
.phone{right:-136.9px;bottom:-259px;-webkit-transform:scale(.26);-moz-transform:scale(.26);transform:scale(.26)}
.phone.landscape{-webkit-transform:scale(.26) translateX(-165px) translateY(-165px);-moz-transform:scale(.26) translateX(-165px) translateY(-165px);transform:scale(.26) translateX(-165px) translateY(-165px)}
}
@media(max-width:768px){.demo:hover{transform:scale(1)}
.demo{width:561px;height:382.8725px}
.labtop{left:-569.5px;top:-320.34375px;-webkit-transform:scale(.33);-moz-transform:scale(.33);transform:scale(.33)}
.labtop-leg{top:315.56px;left:196.345px}
.devices{width:519.375px;height:450px}
.tablet{left:-375px;bottom:-268.75px;-webkit-transform:scale(.375);-moz-transform:scale(.375);transform:scale(.375)}
.tablet.portrait{-webkit-transform:scale(.375) translateX(170px) translateY(-170px);-moz-transform:scale(.375) translateX(170px) translateY(-170px);transform:scale(.375) translateX(170px) translateY(-170px)}
.phone{right:-115.625px;bottom:-218.75px;-webkit-transform:scale(.375);-moz-transform:scale(.375);transform:scale(.375)}
.phone.landscape{-webkit-transform:scale(.375) translateX(-165px) translateY(-165px);-moz-transform:scale(.375) translateX(-165px) translateY(-165px);transform:scale(.375) translateX(-165px) translateY(-165px)}
}
@media(max-width:640px){.demo{width:408px;height:278.46px}
.labtop{left:-646px;top:-363.375px;-webkit-transform:scale(.24);-moz-transform:scale(.24);transform:scale(.24)}
.labtop-leg{top:229.5px;left:142.785px}
.devices{width:360.1px;height:312px}
.tablet{left:-444px;bottom:-318.2px;-webkit-transform:scale(.26);-moz-transform:scale(.26);transform:scale(.26)}
.tablet.portrait{-webkit-transform:scale(.26) translateX(170px) translateY(-170px);-moz-transform:scale(.26) translateX(170px) translateY(-170px);transform:scale(.26) translateX(170px) translateY(-170px)}
.phone{right:-136.9px;bottom:-259px;-webkit-transform:scale(.26);-moz-transform:scale(.26);transform:scale(.26)}
.phone.landscape{-webkit-transform:scale(.26) translateX(-165px) translateY(-165px);-moz-transform:scale(.26) translateX(-165px) translateY(-165px);transform:scale(.26) translateX(-165px) translateY(-165px)}
}
@media(max-width:480px){.devices{width:277px;height:240px}
.tablet{left:-480px;bottom:-344px;-webkit-transform:scale(.2);-moz-transform:scale(.2);transform:scale(.2)}
.tablet.portrait{-webkit-transform:scale(.2) translateX(170px) translateY(-170px);-moz-transform:scale(.2) translateX(170px) translateY(-170px);transform:scale(.2) translateX(170px) translateY(-170px)}
.phone{right:-148px;bottom:-280px;-webkit-transform:scale(.2);-moz-transform:scale(.2);transform:scale(.2)}
.phone.landscape{-webkit-transform:scale(.2) translateX(-165px) translateY(-165px);-moz-transform:scale(.2) translateX(-165px) translateY(-165px);transform:scale(.2) translateX(-165px) translateY(-165px)}
.demo{width:306px;height:209.42px}
.labtop{left:-697px;top:-392.06px;-webkit-transform:scale(.18);-moz-transform:scale(.18);transform:scale(.18)}
.labtop-leg{top:172.13px;left:107.095px}
}
@media(max-width:320px){.demo{width:277.1px;height:189.11px}
.labtop{left:-711.45px;top:-400.19px;-webkit-transform:scale(.163);-moz-transform:scale(.163);transform:scale(.163)}
.labtop-leg{top:155.87px;left:96.99px}
}
</style>My Words: I hope this article will help you get embaded this blogger feature in your blogger template. Please let me know in the comment section if you need any other help regarding this article. you can also subscribe for our notification.