Header Ads

  • Breaking News

    How to Create a Demo Page with Download/Demo Buttons Toolbar on Blogger

    Blogger platform always stands at the top for best user interface. Many features are not inbuilt in Blogger, but they can built manually that too in simple steps. When we compare this feature with WordPress, always Blogger will wins. Now here I’m with a new superb tutorial based on Demo page with Download/Demo Button toolbar on Blogger. Quite Interesting..? This below part of this article will describe about the steps to add this new feature on Blogger.
    How to Create a Demo Page with Download/Demo Buttons Toolbar on Blogger

    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: Switch to HTML mode and add next content in that page and then click publish.


    <div height="100%" id="iframe-container" width="100%">
    <style>
    body { padding: 0!important; background: none!important; }
    #iframe-container { overflow: hidden; background: none!important; }
    #frame { border: 0; }
    </style>
    <iframe frameborder="0" id="frame" src="" width="100%"> </iframe>
    </div>
    <script>
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // ie only
    var query = window.location.search.substring(1);
    query = query.replace("url=", "");
    $('#frame').attr('src', query);
    var str = $('#iframe-container').html();
    $('#MBT-REDIRECTION').html(str);
    $('iframe').height($(window).height());
    </script>
    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 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(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: Now search for <body> tag. Then add code  below just after <body> tag.

    <b:if cond='data:blog.url != &quot;http://blogger-templatees.blogspot/p/demo_93.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://blogger-templatees.blogspot.com/p/template-demo_93.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://blogger-templatees'>Blog 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;
    }
    </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://blogger-templatees.blogspot.com/p/demo_93.html?url=URLDemo&URLdownload =Download here

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


    No comments

    Post Top Ad

    Post Bottom Ad