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.

Demo Page with Download/Demo Buttons Toolbar on Blogger

If you’re an regular template Sharer via your blog, then this demo page toolbar will be useful. You may noticed that many template sharing websites and blog are using a demo page using toolbar with required buttons. For doing this method you don’t need to create a new blog, it can be done just by creating a static page and at last by adding download/demo link in the toolbar.

Demo Page with Download/Demo Buttons Toolbar on Blogger

Before I starting my tutorial, I like to thank Kan Ismet for sharing this awesome method for us. Here we goes…

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 : 50 px;
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. 4 s ease-out;
}
# Tab-demo  {
width : 100 %;
height : 50 px;
top : 0 ;
left : 0 ;
background : # 222 ;
color : white;
font : normal 13 px 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 15 px 50 %;
text-align : center;
height : 50 px;
padding : 0 px 20 px 0 px 50 px;
position : fixed;
top : 0 ;
right : 0 ;
line-height : 50 px;
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 15 px 50 %}
.dlbutton :hover  { background : #579c26  url(http:// 3 .bp.blogspot.com/-MHVCwQQDhzQ/UuC7dgZiqvI/AAAAAAAAGV0/llC0hES500M/s1600/download.png) no-repeat 15 px 50 %}
. Dlbutton , a . dlbutton  {
background : url(http:// 3 .bp.blogspot.com/-MHVCwQQDhzQ/UuC7dgZiqvI/AAAAAAAAGV0/llC0hES500M/s1600/download.png) no-repeat 15 px 50 %;
text-align : center;
height : 50 px;
padding : 0 px 20 px 0 px 55 px;
position : fixed;
top : 0 ;
right : 158 px;
line-height : 50 px;
cursor : pointer;
color : white;
text-decoration : none;
}
. Demologo , a . demologo  {
background : url(http:// 2 .bp.blogspot.com/- 3 Z-HuFDHOOg/UuDyIp8DZaI/AAAAAAAAGWQ/ 81 Ev67C13hM/s1600/ki-logo.png) no-repeat left center;
padding-left : 55 px;
font-size : 17 px;
font-weight : normal;
font-family : Oswald, Arial, Sans-serif;
text-transform : uppercase;
line-height : 50 px;
left : 15 px;
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! = “http://testingblog.blogspot.com/p/demopage.html”‘ >

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 == “http://testingblog.blogspot.com/p/demopage.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://triposoft.com’ > 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 >

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://testingblog.blogspot.com/p/demopage.htm? url = URL Demo URL here & download = Download here

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

Click here for Live Preview

Very simple ah..? Yes! Hope that all guys must added this toolbar to their blog without facing problems. If you’re facing any issues then share it with us in comments. Don’t forget to share your thoughts in comments below! Happy Blogging 🙂

Source: Kangismet

Speak Your Mind

*

CommentLuv badge