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

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

Sedikit Info Seputar How to Create a Demo Page with Download/Demo Buttons Toolbar on Blogger Terbaru 2017 - Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul How to Create a Demo Page with Download/Demo Buttons Toolbar on Blogger, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang Artikel Demo Page, Artikel How to, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar How to Create a Demo Page with Download/Demo Buttons Toolbar on Blogger Terbaru
link: How to Create a Demo Page with Download/Demo Buttons Toolbar on Blogger

"jangan lupa baca juga artikel dari kami yang lain dibawah"

Berbagi How to Create a Demo Page with Download/Demo Buttons Toolbar on Blogger Terbaru dan Terlengkap 2017

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 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();
$('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.
Step 5: 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZncCUEMyoE2_qqetj9wZvJ0VIeqm-soHGdIusIfUH7P6K_jrW0EvY78AjgaA2O8ZGgqcEH1PEMZmkITModKbOCbcuum37EkS3O3XaiFE7rrw6Oj0XNhn9EDscku8fhQapqFwUZ-PnYMg/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/AVvXsEhkXAUPGaQzBGTPVESecVYlMsYGlXWlPz_Tav6efJUTlH10tYiQ4GVPss_7Nc7SceJwgxUUJdGMwHqSbsjUDnOP_urgAsk1Cqp7k5q9HLHT0KfYFGBADnct_tkB16H6m1Gr4Hury5gwRAA/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/AVvXsEhkXAUPGaQzBGTPVESecVYlMsYGlXWlPz_Tav6efJUTlH10tYiQ4GVPss_7Nc7SceJwgxUUJdGMwHqSbsjUDnOP_urgAsk1Cqp7k5q9HLHT0KfYFGBADnct_tkB16H6m1Gr4Hury5gwRAA/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiqpuvvTMKlAW1YcGrWcWixccfkdioL9WmbDKSlGf5c0aVLflWIDn0nC71PfOhB9ennNsZQADlRz6szUzZtXX9ozrRmZXblOuqDJtf14KKjxt3as3eqVzwc4dlSkGs0PuLXaU5-Vvbto0/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiqpuvvTMKlAW1YcGrWcWixccfkdioL9WmbDKSlGf5c0aVLflWIDn0nC71PfOhB9ennNsZQADlRz6szUzZtXX9ozrRmZXblOuqDJtf14KKjxt3as3eqVzwc4dlSkGs0PuLXaU5-Vvbto0/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/AVvXsEguYnyd0m_V73e8rbfdJz7g7NWenHTiJ8u0EL5kHwuloG9m3e29LEUxKByUsS44W6jwnmAwKBQMQ04mUhbj1zIw0VE52qmb7-DSqOWivorR9ZHPVOlO7jFaIPt3-g3Atuxg1YF11UEZIkI/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 6: Now search for <body> tag. Then add code  below just after <body> tag.
<b:if cond='data:blog.url != &quot;http://blogger-templatees.blogspot.com/p/demo_6.html&quot;'>

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

Step 8: 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/demo_6.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.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;
}
</style>
</b:if>

Step 9: 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 10: 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 11: Replace the links with your Demo and Download pages URL.

Itulah sedikit Artikel How to Create a Demo Page with Download/Demo Buttons Toolbar on Blogger terbaru dari kami

Semoga artikel How to Create a Demo Page with Download/Demo Buttons Toolbar on Blogger yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Free Template BLogspot.Com. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca How to Create a Demo Page with Download/Demo Buttons Toolbar on Blogger

Share this