This article will show you how to create or add Live Demo, Download, Homepage Fancy Buttons For your Blogger Blogspot. and show them in Blog Posts. It is much better to use this technique than to use image buttons in blogger because you can apply the style to any link and at the same time you don't have to create an image for each button which makes your blogger blog take longer to load. This is a CSS style that can help you create a button link effect easily with CSS.
Links are very common on blogger blogs, But many blogger's don't realize the power that they have with CSS to manipulate and manage their links effectively in their blogger blogspot.
2. Search for ]]></b:skin> before it paste the following CSS Code.
You just need to replace YOUR LINK HERE, with your Live Demo Link, Download Link and Homepage link. And you can also change text to display with your text.
That's it..... Enjoy!
Conclusion:
So above guide is about . Hope by the above instructions you have easily added these buttons on your blogger blog. If anyhow problem persist after following above guide then drop comment below. I will help you out.
You might also like:
Links are very common on blogger blogs, But many blogger's don't realize the power that they have with CSS to manipulate and manage their links effectively in their blogger blogspot.
STEP 1. How To Add Live Demo And Downlaod Buttons To Blogger Blogspot
1. Go to your Dashboard > Edit HTML2. Search for ]]></b:skin> before it paste the following CSS Code.
.button {3. Save your Template....
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:scroll 0 0 #222222;
border-bottom:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
cursor:pointer;
font-weight:bold;
line-height:1;
overflow:visible;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
}
.demobutton {
background-color:#999999;
text-align:center;
width:100px;
}
.demobutton:hover {
background-color:#EB7D05;
}
.downloadbutton {
background-color:#999999;
text-align:center;
width:100px;
}
.downloadbutton:hover {
background-color:#00AC00;
}
.homebutton {
background-color:#999999;
text-align:center;
width:100px;
}
.homebutton:hover {
background-color:#1666DC;
}
.button:hover {
-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
}
STEP 2. How To Use Live Demo, Homepage and Download Buttons In Blog Posts?
To Show or display these customized Live Demo, Homepage and Download buttons in your bloh post you only need to add the following code in the "EDIT HTML" section of your Blogger Editor.For Live Demo Button
<a class="demobutton button" href="YOUR DEMO LINK HERE" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Live Demo</span></a>
For Download Button
<a class="button downloadbutton" href="YOUR DOWNLOAD LINK HERE" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Download</span></a>
For Homepage Button
<a class="button homebutton" href="YOUR HOMEPAGE LINK HERE" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Homepage</span></a>
You just need to replace YOUR LINK HERE, with your Live Demo Link, Download Link and Homepage link. And you can also change text to display with your text.
That's it..... Enjoy!
Conclusion:
So above guide is about . Hope by the above instructions you have easily added these buttons on your blogger blog. If anyhow problem persist after following above guide then drop comment below. I will help you out.
You might also like:
