Thursday, June 25, 2015

How to Add a Demos and Downloads Buttons for Downloading blogs or sites

4:07 PM  – by

How to Add a Demos and Downloads Buttons for Downloading blogs or sites







Here is Demo and Download bottons for those blogs which provide download content.
Setting up is pretty easy by following these simple steps.

These buttons will add proffesional look to your blogbesides of using traditional blue link.

These buttons are animated also.


           
    



    
1.Go to your blogger dashboard>> Template>> Edit Template. 
               
        2.Hit Ctrl+F and find </head> and past the following code before </head>

<Link href = '// netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel = "stylesheet" />

3.Now search for </style> and Apply code below before </ style>

CSS#

.whitebutton {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebutton a {
    background: # fff;
    color: # 666;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family: 'Arial', Verdana, sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
}

.whitebutton a: before {
    content: '\ f019';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -12px;
    margin-right: 6px;
}

.whitebutton span {
    background: # 444;
    color: # fff;
    display: block;
    font-size: 12px;
    font-family: 'Arial', Verdana, sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.whitebutton .up {
    background: # e25734;
    margin: auto -25px;
    opacity: 0;
    border-radius: 5px 0 0 5px;
    transform: translate (0, -50px);
    transition: 350ms;
}

.whitebutton .down {
    margin: auto -30px;
    opacity: 0;
    border-radius: 5px 5px 0 0;
    transform: translate (0, -50px);
    transition: 350ms;
}

.whitebutton .down: before {
    content: '\ F14A';
    font-family: FontAwesome;
    font-weight: normal;
    margin-right: 6px;
    color: #aaa;
}

.whitebutton: hover {.up
    opacity: 1;
    transform: translate (0,0);
}

.whitebutton: hover {.down
    opacity: 1;
    transform: translate (0, -90px);
}

.whitebuttondemo {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebuttondemo a {
    background: # e25734;
    color: # fff;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family: 'Arial', Verdana, sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
    transition: 350ms;
}

.whitebuttondemo a: before {
    content: '\ F002';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -12px;
    margin-right: 6px;
}

.whitebuttondemo a: hover {
    color: # fff;
}

.whitebuttondemo span {
    background: # 444;
    color: # fff;
    display: block;
    font-size: 12px;
    font-family: 'Arial', Verdana, sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.whitebuttondemo .up {
    background: # 444;
    margin: auto -25px;
    opacity: 0;
    border-radius: 5px 0 0 5px;
    transform: translate (0, -50px);
    transition: 350ms;
}

.whitebuttondemo: hover {.up
    opacity: 1;
    transform: translate (0,0);
}

1. For those who use Use Reviews Apply the following HTML tags in posts on the HTML tab (not compose)

HTML#1

<Div class = "whitebuttondemo">
<a href="#" target="_blank"> Demo </a> Reviews
<Span class = "up"> click to view </ span> </ div>
Reviews
<Div class = "whitebutton">
<a href="#" target="_blank"> Download </a> Reviews
<Span class = "up"> click to begin </ span> Reviews
<Span class = "down"> 1.6MB .rar </ span> </ div>

     2. For those who use the Press "Enter" to line baruTerapkan following HTML in posts on the             HTML tab (not compose)

      HTML#2

<Div class = "whitebuttondemo">
      <a href=" # "> Demo </a>
      <Span class = "up"> click to begin </ span>
    </ Div>

<Div class = "whitebutton">
      <a href=" # "> Download </a>
      <Span class = "up"> click to begin </ span>
      <Span class = "down"> 1.6MB .rar </ span>
    </ Div>

To use these button,when you make a post and want to show up button at specific place then
copy past the HTML#1 or HTML#2 Code in Html tab of blogger post.

Please replace # in HTML code with your download link..