meta expr:content='data:blog.pageTitle' property='og:title'/>
Login

advertising

Doctor blogger

Κρεμάλα (Game for your blog)

Score :
Λάθη (6):

Κρεμάλα (Game for your blog)

Δευτέρα 15 Απριλίου 2013

Cool Css Button με στυλ Hover Για Blogger

Αυτό είναι δροσερό το κουμπί CSS. Θα περιλαμβάνει με δροσερό 
αιωρείται style.You να προσθέσετε αυτό το κουμπί κάθε περίπτωση 
στο blog σας με αυτό το code.Follow αυτά τα βήματα 
για να το προσθέσετε στο blog σας.






1. Συνδεθείτε στο λογαριασμό blogger και Πηγαίνετε στο Σχεδιασμός >> Επεξεργασία HTML 

2. Βρες αυτή την ετικέτα με τη χρήση του Ctrl + F   ]]></b:skin>

. 3 Επικόλληση παρακάτω κώδικα πριν  ]]></b:skin> tag

.hb-buttons{
background-color:#4b3f39;
font-family: 'Verdana', sans-serif;
font-size:12px;
text-decoration:none;
color:#fff;
position:relative;
padding:10px 20px;
padding-right:50px;
background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);
border-radius: 5px;
box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999;
}

.hb-buttons:active {
top:3px;
background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);
box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;
}

.hb-buttons:before {
background-color:#322620;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguixxtbzIsA-uRtIjcoBjMo2iz7UVXqseK-8gf_1wET1_xWjeYR-4H3Gdaj_iVxl0dDlwiy5oxWX3cx-0COCNRgAeIr1ePUmOZu9Q6imIIKc1N-7sQepXluWXr-2ufipnzKtEHjN5d-u4/h80/helper-blogger-right-arrow.png);
background-repeat:no-repeat;
background-position:center center;
content:"";
width:20px;
height:20px;
position:absolute;
right:15px;
top:50%;
margin-top:-9px;
border-radius: 50%;
box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;
}

.hb-buttons:active::before {
top:50%;
margin-top:-12px;
box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
}


Τώρα μπορείτε να αποθηκεύσετε το πρότυπό σας. 
Όταν θέλετε να το προσθέσετε στο blog σας. Χρησιμοποιήστε το όπως παρακάτω


<a href="YOUR LINK " class="hb-buttons">Button name</a>
Όταν θέλετε να προσθέσετε χρήσης κουμπί παραπάνω σύνδεσμο και. 
* Αντικαταστήστε τη σύνδεσή σας με το URL σας
* Αντικαταστήστε το όνομα Button με οποιοδήποτε όνομα θέλετε. Done, Cheers. 

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου