Header Ads

  • Breaking News

    How to Make a Demo Page with Toolbar on Blogger




    Step 1: Go to Blogger and Create a static page with the title Demo Page.

    Step 2: Add some content in that page and click the publish button.

    Step 3: Then navigate to Template >> Edit HTML.

    Step 4: Then search for the ]]> </ b: skin> tag on your blog template. Then add the below code just above the ]]></b:skin> tag,


    #view {
    padding: 0;
    margin: 0;
    border: 0;
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 93%;
    background:url(http://2.bp.blogspot.com/-inJ_59r9FJ0/UuEXr4IQn0I/AAAAAAAAGWg/OSIKdAm4Wwg/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(http://2.bp.blogspot.com/-yDP_V5EQ09U/UuC7diNnwYI/AAAAAAAAGVw/Hez_ZcpmFLE/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(http://2.bp.blogspot.com/-yDP_V5EQ09U/UuC7diNnwYI/AAAAAAAAGVw/Hez_ZcpmFLE/s1600/close.png)no-repeat 15px 50%}
    .dlbutton:hover {background:#579c26 url(http://3.bp.blogspot.com/-MHVCwQQDhzQ/UuC7dgZiqvI/AAAAAAAAGV0/llC0hES500M/s1600/download.png)no-repeat 15px 50%}
    .dlbutton, a.dlbutton {
    background:url(http://3.bp.blogspot.com/-MHVCwQQDhzQ/UuC7dgZiqvI/AAAAAAAAGV0/llC0hES500M/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(http://2.bp.blogspot.com/-3Z-HuFDHOOg/UuDyIp8DZaI/AAAAAAAAGWQ/81Ev67C13hM/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;
    }


    Step 5: Then again search for <body> tag. Then add the below code after <body> tag.
    <b:if cond='data:blog.url != &quot;http://mix--er.blogspot.com/p/demo.html&quot;'>



    Step 6: Now, Replace the URL with your demo blog page URL and go ahead!

    Step 7: Now search </body> tag on your template and add the below code just above </body> tag.



    </b:if> <b:if cond='data:blog.url == &quot;http://mix--er.blogspot.com/p/demo.html&quot;'><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://mix--er.blogspot.com/'>Template Demo</a><a class='dlbutton' href='' id='dl'>Download</a><a class='closebutton' href='javascript:void(0)' onclick='document.getElementById(&apos;tab-demo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;view&apos;).style.top=&apos;0&apos;;document.getElementById(&apos;view&apos;).style.height=&apos;100%&apos;'>Remove Frame</a></div><iframe id='view'/><style>body { background:white; }background:white;}</style></b:if>


    Step 8: Now again replace the URL with Download link or Demo link of your blog page and Save your template. That’s it! We have completed 95% of implementing the demo page with toolbar on Blogger. Now it’s time to add the download/demo link on that toolbar.

    Step 9: Just add the below coding in the place where you need to show up your Download/Demo button in your post on HTML section.

    http://mix--er.blogspot.com/p/demo.html?url=URL Demo URL here & download = Download here

    Step 10: Replace the link with your Demo page URL.








    No comments

    Post Top Ad

    Post Bottom Ad