Hey Guys, My name is Abhishek Welcome To Our Blog. In this Post I will share How To Create a Beautiful Demo Page in Blogger 2022 Website In Few Second.
Sometimes There are also only display Photos to be used as Demos, of course Visitors will still feel dissatisfied if they don't see them in person. and it's not uncommon for visitors to leave our blog because they don't provide demo results on tutorials that have been made, that's certainly natural, whoever wants to try to follow the tutorial is a waste of time in the end it doesn't meet expectations. therefore here I will provide a tutorial on how to create an attractive and professional-looking demo page.
So here we will use a Blogger Static page to Make a demo iframe, of course this will be more interesting and look professional, because the Demo that we will show later is still on our blog.
How To Create a Beautiful Demo Page in Blogger:-
- Step:-Go To Blogger.com
- Sign in Your account
- Then Go to Page
- Now Click on New Page
- Click on HTML
- Now Copy All code
- Paste The All Code
- Don't Forget To Click on Publish Button
<style type='text/css' scoped=''> /*<![CDATA[*/ .post-title,.footer, .header, .sidebar, .navMobile, .credit, .mainMenu{display:none} body {background:white;overflow: auto;} #tab-demo,#view{width:100%;left:0} .closebutton,.dlbutton,a.dlbutton{text-align:center;cursor:pointer;top:0;height:50px} #view{padding:0;margin:0;border:0;position:fixed;top:50px;right:0;bottom:0;height:calc(100% - 50px);background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge5Wqp8CKKf6KzBDkZk3QVXAkZqRaIzLqIy90kQNjm9RInFY76ZqlL_55h6StVEkZ5zucyoXDRkb4mg1XsTcKSmKpb2lvJbgTYXAFBXPpaQAXbIXjPZRep_6KCG6gzwply5JLKn1Y0O98/s1600/loader.gif) center center no-repeat;transition:all .4s ease-out;box-shadow: 0 0 40px rgba(0,0,0,0.2);} #tab-demo{height:50px;top:0;background:#222;color:#fff;font:400 13px Arial,sans-serif;z-index:99999;position:fixed} .closebutton,.demologo,.dlbutton,a.demologo,a.dlbutton{line-height:50px;position:fixed;color:#fff} .closebutton{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkcl-eR6PqxNoxscc5g82xYSshS2BLv1VJ-A2DUUYKXlB-HNfaiKFi1mWX9C8hdgj_BY8Pr6-w6G7NoeYs3RNRKSvaaw7h8L3BSRueMCGeKSwqFFuZVgIRtm0AkPnstRJcO7dkfCLGPcI/s1600/close.png) 15px 50% no-repeat #66af33;padding:0 20px 0 50px;right:0} a.closebutton{color:#fff;text-decoration:none} .closebutton:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkcl-eR6PqxNoxscc5g82xYSshS2BLv1VJ-A2DUUYKXlB-HNfaiKFi1mWX9C8hdgj_BY8Pr6-w6G7NoeYs3RNRKSvaaw7h8L3BSRueMCGeKSwqFFuZVgIRtm0AkPnstRJcO7dkfCLGPcI/s1600/close.png) 15px 50% no-repeat #579c26} .dlbutton:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ4gas-9b0kOtw-L6XAI-o4EJb0QwJClRCfM6a-wPi4gOw9mRA9XGFc-XByGbnyO0gsgnaS3maPM_Lf7jzL8q-cBFTo4UYF-O-hm7ZgtL4Yk-3qr3oKf53oxsAZeW-2B3Ld1Kdt4ONNaE/s1600/download.png) 15px 50% no-repeat #579c26} .dlbutton,a.dlbutton{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ4gas-9b0kOtw-L6XAI-o4EJb0QwJClRCfM6a-wPi4gOw9mRA9XGFc-XByGbnyO0gsgnaS3maPM_Lf7jzL8q-cBFTo4UYF-O-hm7ZgtL4Yk-3qr3oKf53oxsAZeW-2B3Ld1Kdt4ONNaE/s1600/download.png) 15px 50% no-repeat;padding:0 20px 0 55px;right:158px;text-decoration:none} .demologo,a.demologo{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjZp6y4b2xjDgsGzItMikp3l8d-idwTaahcT3FYcdP3uFPYYxS2sXWsMsGrGEtarmJDNXmbkIlxdPdMj87VcLHRI7XpnVT1vlgSMFqm7SUkLkhEoBBvuxJ_Zg6ROBbdzg86SDs4yA2TKo/s1600/ki-logo.png) left center no-repeat;padding-left:55px;font-size:17px;font-weight:400;font-family:Oswald,Arial,Sans-serif;text-transform:uppercase;left:15px;text-decoration:none} .logo{display:inline;float:left;} ul.resize-tool,ul.resize-tool li{list-style:none} ul.resize-tool{display:inline;float:left;margin:0 0 0 50px!important} @media screen and (max-width:480px){ ul.resize-tool{display:none}} ul.resize-tool li{display:inline;float:left;height:50px;line-height:50px;margin:0 20px 0 0} ul.resize-tool li svg{vertical-align:middle} ul.resize-tool li a:active svg path,ul.resize-tool li a:focus svg path{fill:red} .w1024{width:1024px!important;height:600px!important;position:absolute!important;margin-bottom:50px!important} .w960{width:600px!important;height:960px!important;position:absolute!important;margin-bottom:50px!important} .w600{width:960px!important;height:600px!important;position:absolute!important;margin-bottom:50px!important} .w414{width:414px!important;height:736px!important;position:absolute!important;margin-bottom:50px!important} .w736{width:736px!important;height:414px!important;position:absolute!important;margin-bottom:50px!important} .w320{width:320px!important;height:480px!important;position:absolute!important;margin-bottom:50px!important} .w480{width:480px!important;height:320px!important;position:absolute!important;margin-bottom:50px!important} /*]]>*/ </style> <div id='tab-demo'> <a class='logo' href='https://www.abhishektipsntriks.online/'><img alt='AbhishekTipsNtricks' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiljbeVl1G742KwbkPczqMT9XLu-t7tPA5tOtOwYUUFVPfd38UHMwouR1HFWOARLG8qr-zyJdY0nMc8w2PAiuntbk7wu9ohh5BAESadBlhPp7P9EJjJDJA3HjA0obgpzvZU9C0YdB6ixZD/w140-h29-p/IMG_20210531_092937.jpg' title='mftemplates' width='212'/></a> <ul class='resize-tool'> <li> <a href='javascript:;' onclick='w1024();'> <svg style='width:24px;height:24px' viewBox='0 0 24 24'> <path d='M21,14H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10L8,21V22H16V21L14,18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2Z' fill='#fff'/> </svg></a> </li> <li> <a href='javascript:;' onclick='w960();'> <svg style='width:24px;height:24px' viewBox='0 0 24 24'> <path d='M19,19H4V3H19M11.5,23A1.5,1.5 0 0,1 10,21.5A1.5,1.5 0 0,1 11.5,20A1.5,1.5 0 0,1 13,21.5A1.5,1.5 0 0,1 11.5,23M18.5,0H4.5A2.5,2.5 0 0,0 2,2.5V21.5A2.5,2.5 0 0,0 4.5,24H18.5A2.5,2.5 0 0,0 21,21.5V2.5A2.5,2.5 0 0,0 18.5,0Z' fill='#fff'/> </svg></a> <a href='javascript:;' onclick='w600();'> <svg style='width:24px;height:24px;-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);margin-bottom:-7px' viewBox='0 0 24 24'> <path d='M19,19H4V3H19M11.5,23A1.5,1.5 0 0,1 10,21.5A1.5,1.5 0 0,1 11.5,20A1.5,1.5 0 0,1 13,21.5A1.5,1.5 0 0,1 11.5,23M18.5,0H4.5A2.5,2.5 0 0,0 2,2.5V21.5A2.5,2.5 0 0,0 4.5,24H18.5A2.5,2.5 0 0,0 21,21.5V2.5A2.5,2.5 0 0,0 18.5,0Z' fill='#fff'/> </svg></a> </li> <li> <a href='javascript:;' onclick='w414();'> <svg style='width:24px;height:24px' viewBox='0 0 24 24'> <path d='M16,18H7V4H16M11.5,22A1.5,1.5 0 0,1 10,20.5A1.5,1.5 0 0,1 11.5,19A1.5,1.5 0 0,1 13,20.5A1.5,1.5 0 0,1 11.5,22M15.5,1H7.5A2.5,2.5 0 0,0 5,3.5V20.5A2.5,2.5 0 0,0 7.5,23H15.5A2.5,2.5 0 0,0 18,20.5V3.5A2.5,2.5 0 0,0 15.5,1Z' fill='#fff'/> </svg></a> <a href='javascript:;' onclick='w736();'> <svg style='width:24px;height:24px;-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);margin-bottom:-10px' viewBox='0 0 24 24'> <path d='M16,18H7V4H16M11.5,22A1.5,1.5 0 0,1 10,20.5A1.5,1.5 0 0,1 11.5,19A1.5,1.5 0 0,1 13,20.5A1.5,1.5 0 0,1 11.5,22M15.5,1H7.5A2.5,2.5 0 0,0 5,3.5V20.5A2.5,2.5 0 0,0 7.5,23H15.5A2.5,2.5 0 0,0 18,20.5V3.5A2.5,2.5 0 0,0 15.5,1Z' fill='#fff'/> </svg></a> </li> <li> <a href='javascript:;' onclick='w320();'> <svg style='width:20px;height:20px' viewBox='0 0 24 24'> <path d='M16,18H7V4H16M11.5,22A1.5,1.5 0 0,1 10,20.5A1.5,1.5 0 0,1 11.5,19A1.5,1.5 0 0,1 13,20.5A1.5,1.5 0 0,1 11.5,22M15.5,1H7.5A2.5,2.5 0 0,0 5,3.5V20.5A2.5,2.5 0 0,0 7.5,23H15.5A2.5,2.5 0 0,0 18,20.5V3.5A2.5,2.5 0 0,0 15.5,1Z' fill='#fff'/> </svg></a> <a href='javascript:;' onclick='w480();'> <svg style='width:20px;height:20px;-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);margin-bottom:-10px' viewBox='0 0 24 24'> <path d='M16,18H7V4H16M11.5,22A1.5,1.5 0 0,1 10,20.5A1.5,1.5 0 0,1 11.5,19A1.5,1.5 0 0,1 13,20.5A1.5,1.5 0 0,1 11.5,22M15.5,1H7.5A2.5,2.5 0 0,0 5,3.5V20.5A2.5,2.5 0 0,0 7.5,23H15.5A2.5,2.5 0 0,0 18,20.5V3.5A2.5,2.5 0 0,0 15.5,1Z' fill='#fff'/> </svg></a> </li> <li> <a href='javascript:;' onclick='refresh();'> <svg style='width:24px;height:24px' viewBox='0 0 24 24'> <path d='M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z' fill='#fff'/> </svg></a> </li> </ul> <a class='closebutton' href='javascript:void(0)' onclick='document.getElementById('tab-demo').style.display='none';document.getElementById('view').style.top='0';document.getElementById('view').style.height='100%''>Remove Frame</a> </div> <script type='text/javascript'> //<![CDATA[ function getQueryVariable(e){for(var t=window.location.search.substring(1),n=t.split("&"),r=0;r<n.length;r++){var a=n[r].split("=");if(a[0]==e)return a[1]}return!1}function w1024(){document.getElementById("view").className="w1024";var e=getQueryVariable("url");document.getElementById("view").src=e}function w960(){document.getElementById(",\view").className="w960";var e=getQueryVariable("url");document.getElementById("view").src=e}function w600(){document.getElementById("view").className="w600";var e=getQueryVariable("url");document.getElementById("view").src=e}function w414(){document.getElementById("view").className="w414";var e=getQueryVariable("url");document.getElementById("view").src=e}function w736(){document.getElementById("view").className="w736";var e=getQueryVariable("url");document.getElementById("view").src=e}function w320(){document.getElementById("view").className="w320";var e=getQueryVariable("url");document.getElementById("view").src=e}function w480(){document.getElementById("view").className="w480";var e=getQueryVariable("url");document.getElementById("view").src=e}function refresh(){location.reload()}window.onload=function(){var e=getQueryVariable("url");document.getElementById("view").src=e}; //]]> </script> <iframe id='view'></iframe>
Change This Url https://www.abhishektipsntriks.online/
How To Use The Url of Your demo page:-
https://www.abhishektipsntriks.online/p/demo.html and added ?url= and added target/destination url for example to the Live Blogger site that I demonstrated above previously https://www.abhishektipsntriks.online/ so the whole thing will look like below.Conclusion :-
Source:
https://www.liveblogger.xyz/2022/01/how-to-create-attractive-demo-page-in-blogger.html
You have given very good information about links, have tried to understand in such simple words that even a new blogger can do it easily. This has helped me a lot. Hope other people will also get help from this. Thanks...
ReplyDeleteGood Job My Brother