Today in this article we are gonna add beautiful and responsive Home Page, Demo and Download button for blogger. These Buttons are created with CSS and mouse hover effect the color of this buttons changes. You can also change the text to display with you text.
NOTE:
Before you publish your post replace "YOUR LINK HERE" with your Homepage, Demo and Download link.
LIVE DEMO
INSTALLATION PROCESS:
Note:
Keep backup your template before any changing in your blog.
Step 1: Log in to your Blogger account and go to your Blogger Dashboard.
Step 2: Now Click on >Template >Edit HTML.
Step 3: Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 4: Copy the code from below and paste it just before the ]]></b:skin> or </style> tag.
CODE:
You can choice colors from color wheel picker tool or color code generator tool.
Step 5: Now Save your Template.
Step 2: Now Click on >Template >Edit HTML.
Step 3: Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 4: Copy the code from below and paste it just before the ]]></b:skin> or </style> tag.
CODE:
.button {
-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);
}[You Can change the button color and mouse hover effect color by changing the HTML colored code of above colored lines.]
You can choice colors from color wheel picker tool or color code generator tool.
Step 5: Now Save your Template.
HOW TO ADD THESE BUTTONS INSIDE THE POST EDITOR:
Whenever you create a new post and you want to add these buttons switch your blog post Compose to Edit HTML tab.
Select your button code below and chose your place where you want to display Buttons.
Home Page 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>
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>
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>
NOTE:
Before you publish your post replace "YOUR LINK HERE" with your Homepage, Demo and Download link.