Apakah cara-cara nak buat button pada blog anda, button berwarna warni iaitu stylish colour CSS buttons nampak cute, cantik dan sesuai dengan blog tuan-tuan, hari ni saya nak kongsi langkah-langkahnya:
1. Log masuk ke blogger akaun dan klik drop down menu,2. Seterusnya pilih "Template" pada Dashboard,3. Sekarang pergi klik "EDIT HTML" 4. Kemudian klik Proceed button,5. Cari tag ini dengan menekan Ctrl+F ]]></b:skin>6. Paste kod dibawah sebelum ]]></b:skin> tag
.button{
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
bottom:-1px;
}
/* The three buttons sizes */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
/* BlueButton */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover{
background-color:#63c7fe;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button{
color:#345903 !important;
border:1px solid #96a37b !important;
background-color: #79be1e;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover{
background-color:#89d228;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button{
color:#693e0a !important;
border:1px solid #bea280 !important;
background-color: #e38d27;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.button:hover{
background-color:#ec9732;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
/* Orange Button */
.gray.button{
color:#525252 !important;
border:1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover{
background-color:#b6bbc0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIFfmnx8SgMoQ0MFG0jUW7ps3mb5uvQNandOw87TB0AQtDIzw8ap0vYOe7VksaNmx-Is32hh4LdC9JJNaTYXkeYVYICSIopxX8BPvMUmXcWm-WAHYq8GNBD-25SPks8SjPbnM64286Uaw/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}
7. Pergi ke blogger dashboard semula and klik Layout,
8. Klik Add Gadget dan pilih "HTML/Javascript",
9. Paste kod dibawah,
Nota***boleh guna kod ini pada mana-mana post anda. <a class="button big blue" href="Your Link" target="_blank">Live Demo</a>
<a class="button big orange" href="Your Link" target="_blank">Live Demo</a>
<a class="button big green" href="Your Link" target="_blank">Live Demo</a>
<a class="button big gray" href="Your Link" target="_blank">Live Demo</a>
Nota***boleh guna kod ini pada mana-mana post anda.Tukar "Your Link" dengan link anda
10. O.k klik save "HTML/Javascript".Selesai...
Comments
Post a Comment
Maklumat yang terkandung dalam laman Blog ini hanya untuk tujuan maklumat umum sahaja.
Kami tidak akan bertanggungjawab ke atas apa-apa kehilangan atau kerosakan termasuk tanpa had, kehilangan atau kerosakan secara langsung atau tidak langsung atau apa-apa kerugian atau kerosakan yang timbul atau sesuatu yang berkaitan dengan penggunaan laman web ini. Dilarang meniru, copy & paste kandungan dalam laman blog ini.
Komen akan ditapis untuk kesejahteraan bersama, spammer tidak dialu-alukan (spammers are not allowed).
Terima Kasih.
The Blogler (Aku Pakar Blogger).