Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
How to create a demo page on blogspot. To display the contents of your blog / website , or to demonstrate it , sometimes we need a special page that can display the contents of the blog without having to create another blog .
These pages can be used to display , [ as an example : the template of our work or other articles which require demonstration ].
We can make it looks more attractive by editing in certain parts , according to the tastes or desires of us.
![[images:acebangsam.us]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOITyMfFgA_L_6BYUK9_gWKvrN_it8awoxDcPvjrw7G_PzAyZ2yiBh05IY5eRlTWhOrZKut5X4miWJ01kIgCaR2bV76aj7V1NTdIu6HbTtoIF_Y9nVMQemffHoI5ScJyT0hWjcvgeh9jUi/s1600/man-76202_640.jpg "[images:acebangsam.us]") |
| [images:acebangsam.us] |
Well to create a demo page , you can follow the steps below:
1. Login to your blogger panel admin2. Create Static Pages with title Demo Page .
In the contents , you can write anything , or leave it blank.
Then publish .
3. Click On Template » Edit HTML
4. Find this kbd Ctrl+F ]]></b:skin> or </style>
5. Then add the following CSS script just above the kbd ]]></b:skin> or </style>
#view {
padding: 0;
margin: 0;
border: 0;
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 93%;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPya1pdiY-Bn15GNuG1iZC-i07NGI73j7wgQxKKuCB4lhOj9cRXyuONysKu1y2YiXRKdTMbAQukuHVKUjW585QT1Aib_Z0o-YZIYaq1zpucy7alVgV-2QLkKstzl38pU4i3wnUcFixH7M/s1600/loader.gif)no-repeat center center;
transition:all .4s ease-out;
}
#tab-demo {
width:100%;
height:50px;
top:0;
left: 0;
background:#222;
color:white;
font:normal 13px Arial, sans-serif;
z-index:99999;
position:fixed;
}
.closebutton {
background:#66af33 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdxkIDhVq_NCQd-tKfD5Q4ipffPd_sRAJ1Z3Ce2QYZcINTEO5cFWyTh4wt9e3Aej3xJ-wW2_SbHYS8oxedzslD7CtF5sMt4oH410wlm8Kh_9EWIdRwygK7kKZ1YB-xGJ8jCKfqm8hDSaw/s1600/close.png)no-repeat 15px 50%;
text-align:center;
height:50px;
padding:0px 20px 0px 50px;
position:fixed;
top:0;
right:0;
line-height:50px;
cursor:pointer;
color:white;
}
a.closebutton {color:white;text-decoration:none;}
.closebutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdxkIDhVq_NCQd-tKfD5Q4ipffPd_sRAJ1Z3Ce2QYZcINTEO5cFWyTh4wt9e3Aej3xJ-wW2_SbHYS8oxedzslD7CtF5sMt4oH410wlm8Kh_9EWIdRwygK7kKZ1YB-xGJ8jCKfqm8hDSaw/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIqhDRl-l_6yal6jXeHUUbCq8MgTsh4ZtRQD67CImyUZOIKgghY2kMjExD931nGvHLUp8Vx_M3_w6boCwM7K3IYfx-BNdH5omVk_9jOAxPVrZpk3XRbzWtXqA7GQWiXb7UOOx3Ul8siSY/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIqhDRl-l_6yal6jXeHUUbCq8MgTsh4ZtRQD67CImyUZOIKgghY2kMjExD931nGvHLUp8Vx_M3_w6boCwM7K3IYfx-BNdH5omVk_9jOAxPVrZpk3XRbzWtXqA7GQWiXb7UOOx3Ul8siSY/s1600/download.png)no-repeat 15px 50%;
text-align:center;
height:50px;
padding:0px 20px 0px 55px;
position:fixed;
top:0;
right:158px;
line-height:50px;
cursor:pointer;
color:white;
text-decoration:none;
}
.demologo, a.demologo {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGNtwI9y7iXGPVnwaSjh_A_LrwjxMVPFSbgXxrLJWzyCNL4WWscLrIw0fzEQLSp6iuUJ-3CfqSV1CyshNjMLv6xbn2_CrpRX9mYHKqn9eKxabajxvWZe9nEScOv4jp30ZhnzcnSGQ2ImM/s1600/ki-logo.png)no-repeat left center;
padding-left:55px;
font-size:17px;
font-weight:normal;
font-family:Oswald, Arial, Sans-serif;
text-transform:uppercase;
line-height:50px;
left:15px;
position:fixed;
color:white;
text-decoration:none;
}6. Add script HTML/Javascript below right under the code <body>.
<b:if cond='data:blog.url != "http://your blog URL/p/demo-page.html"'>7. Finally save this code HTML/Javascript just above the code </body>.
</b:if> <b:if cond='data:blog.url == "http://your blog URL/p/demo-page.html"'> <script type='text/javascript'> //<![CDATA[ function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } } return (false); } window.onload = function() { var url = getQueryVariable("url"); var download = getQueryVariable("download") document.getElementById('view').src = url; document.getElementById('dl').href = download; }; //]]> </script> <div id='tab-demo'> <a class='demologo' href='http://Your Blog URL'>Demo Page</a> <a class='dlbutton' href='' id='dl'>Download</a> <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> <iframe id='view'/> <style> body { background:white; } </style> </b:if>
8. Save Template and see the result.
- To call a demo page URL and download links , use a format like this :
http://your Blog URL/p/demo-page.html?url=URL Demo here&download=URL Download here
- Change Your Blog URL with your own blog address
http://your Blog URL/p/demo-page.html?url=URL Demo here&download=URL Download here
- Change Your Blog URL with your own blog address
Credit Link : Kang Ismet
Credit Images : IconFinder