Oke, berikut tutorialnya.
1. Buka Blogger, pilih menu Template > Edit HTML. Kemudian letakkan kode CSS dibawah tepat sebelum kode ]]></b:skin>
.wrapper {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 740px;
margin: 40px auto;
text-align: center;
}
.intro {
margin-bottom: 20px;
}
.outro {
margin-top: 40px;
}
.drives:before,
.drives:after {
display: table;
content: "";
line-height: 0;
}
.drives:after {
clear: both;
}
@import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
/* SW Blogger
------------ */
/* By Sebastian Wirajaya, On 30 January 15
---------------- */
/* USB drive style SW Blogger
------------------------ */
.usb-drive {
display: block;
float: left;
width: 300px;
margin: 25px auto;
text-align: left;
cursor: pointer;
user-select: none;
font-smoothing: antialiased;
}
.usb-drive .casing,
.usb-drive .cap {
color: #0378a9;
background-color: #04aef4;
border-top: 1px solid #04aef4;
border-bottom: 1px solid #16b8fb;
box-shadow: 0 5px 0 #026690, inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);
background-color: #1eade9;
background-image: -moz-linear-gradient(top, #2fc0fc, #0391cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2fc0fc), to(#0391cc));
background-image: -webkit-linear-gradient(top, #2fc0fc, #0391cc);
background-image: -o-linear-gradient(top, #2fc0fc, #0391cc);
background-image: linear-gradient(to bottom, #2fc0fc, #0391cc);
background-repeat: repeat-x;
}
.usb-drive:before,
.usb-drive:after {
display: table;
content: "";
line-height: 0;
}
.usb-drive:after {
clear: both;
}
.usb-drive > div {
float: left;
height: 50px;
}
.usb-drive .casing,
.usb-drive .cap {
line-height: 50px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.65), 0 1px 1px rgba(255, 255, 255, 0.35);
}
.usb-drive .casing {
width: 130px;
margin-left: 36px;
/* Offset by width of connector for centering */
padding-left: 15px;
padding-right: 10px;
border-radius: 25px 0 0 25px;
font-size: 16px;
font-weight: bold;
text-align: center;
}
.usb-drive .connector {
width: 0;
position: relative;
overflow: hidden;
transition: width 100ms ease-in-out;
}
.usb-drive .connector .inner {
margin-top: 12px;
width: 30px;
height: 30px;
border-radius: 0 2px 2px 0;
background-color: #afafaf;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#999999), color-stop(90%, #bfbfbf), to(#6f6f6f));
background-image: -webkit-linear-gradient(#999999, #bfbfbf 90%, #6f6f6f);
background-image: -moz-linear-gradient(top, #999999, #bfbfbf 90%, #6f6f6f);
background-image: -o-linear-gradient(#999999, #bfbfbf 90%, #6f6f6f);
background-image: linear-gradient(#999999, #bfbfbf 90%, #6f6f6f);
background-repeat: no-repeat;
box-shadow: inset 3px 0 3px rgba(0, 0, 0, 0.15), 0 5px 0 #3b3b3b, inset 0 2px 1px rgba(255, 255, 255, 0.45), 0 5px 10px rgba(0, 0, 0, 0.65);
}
.usb-drive .connector .inner span {
position: absolute;
width: 5px;
height: 5px;
left: 7px;
background-color: #333333;
border-radius: 1px;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.35);
}
.usb-drive .connector .inner span:first-of-type {
top: 19px;
}
.usb-drive .connector .inner span:last-of-type {
top: 29px;
}
.usb-drive .cap {
width: 36px;
padding-left: 10px;
border-radius: 0 25px 25px 0;
font-size: 18px;
}
.usb-drive:active,
.usb-drive.active {
text-decoration: none;
}
.usb-drive:active .casing,
.usb-drive.active .casing,
.usb-drive:active .cap,
.usb-drive.active .cap {
color: #FFF;
}
.usb-drive:hover .connector,
.usb-drive.hover .connector {
width: 35px;
}
/* USB Drive warna
---------------------- */
.red .casing,
.red .cap {
color: #761911;
background-color: #b8271b;
border-top: 1px solid #b8271b;
border-bottom: 1px solid #ce2b1f;
box-shadow: 0 5px 0 #5f140e, inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);
background-color: #c12c20;
background-image: -moz-linear-gradient(top, #df3527, #951f16);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#df3527), to(#951f16));
background-image: -webkit-linear-gradient(top, #df3527, #951f16);
background-image: -o-linear-gradient(top, #df3527, #951f16);
background-image: linear-gradient(to bottom, #df3527, #951f16);
background-repeat: repeat-x;
}
.orange .casing,
.orange .cap {
color: #b26800;
background-color: #fe9500;
border-top: 1px solid #fe9500;
border-bottom: 1px solid #ffa019;
box-shadow: 0 5px 0 #985900, inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);
background-color: #ee981e;
background-image: -moz-linear-gradient(top, #ffaa32, #d57d00);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffaa32), to(#d57d00));
background-image: -webkit-linear-gradient(top, #ffaa32, #d57d00);
background-image: -o-linear-gradient(top, #ffaa32, #d57d00);
background-image: linear-gradient(to bottom, #ffaa32, #d57d00);
background-repeat: repeat-x;
}
.purple .casing,
.purple .cap {
color: #542a82;
background-color: #7a3dbc;
border-top: 1px solid #7a3dbc;
border-bottom: 1px solid #874dc6;
box-shadow: 0 5px 0 #48246f, inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);
background-color: #814eb9;
background-image: -moz-linear-gradient(top, #9460cc, #66339d);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#9460cc), to(#66339d));
background-image: -webkit-linear-gradient(top, #9460cc, #66339d);
background-image: -o-linear-gradient(top, #9460cc, #66339d);
background-image: linear-gradient(to bottom, #9460cc, #66339d);
background-repeat: repeat-x;
}
.green .casing,
.green .cap {
color: #2b732b;
background-color: #40ab40;
border-top: 1px solid #40ab40;
border-bottom: 1px solid #4abb4a;
box-shadow: 0 5px 0 #246124, inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);
background-color: #4cad4c;
background-image: -moz-linear-gradient(top, #5cc25c, #358d35);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5cc25c), to(#358d35));
background-image: -webkit-linear-gradient(top, #5cc25c, #358d35);
background-image: -o-linear-gradient(top, #5cc25c, #358d35);
background-image: linear-gradient(to bottom, #5cc25c, #358d35);
background-repeat: repeat-x;
}
/* Patern dari
http://lea.verou.me/css3patterns/
------------------------------------ */
.carbon .casing,
.carbon .cap {
color: #CCC;
background: linear-gradient(27deg, #222222 5px, transparent 5px) 0 5px, linear-gradient(207deg, #222222 5px, transparent 5px) 10px 0px, linear-gradient(27deg, #2f2f2f 5px, transparent 5px) 0px 10px, linear-gradient(207deg, #2f2f2f 5px, transparent 5px) 10px 5px, linear-gradient(90deg, #282828 10px, transparent 10px), linear-gradient(#2a2a2a 25%, #1a1a1a 25%, #272727 50%, transparent 50%, transparent 75%, #313131 75%, #313131);
background-color: #202020;
-webkit-background-size: 20px 20px;
-moz-background-size: 20px 20px;
-o-background-size: 20px 20px;
background-size: 20px 20px;
-webkit-box-shadow: 0 5px 0 #000000, inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 5px 0 #000000, inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);
box-shadow: 0 5px 0 #000000, inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);
border-top: 1px solid #333333;
border-bottom: 1px solid #404040;
}
.carbon .cap {
color: #ffc40d;
}
/* Font Awesome style
---------------------- */
/* Utility Mixins (Twitter Bootstrap 2.3)
----------------------------------------- */
.clearfix:before,
.clearfix:after {
display: table;
content: "";
line-height: 0;
}
.clearfix:after {
clear: both;
}
/* Responsive
-------------------- */
@media (min-width: 492px) and (max-width: 739px) {
.wrapper {
width: 492px;
}
}
@media (max-width: 491px) {
.wrapper {
width: auto;
margin: auto;
}
.usb-drive {
float: none;
}
}3. Simpan Template, kemudia letakkan kode HTML dibawah untuk memasang button ini pada postingan anda.
<div class="wrapper drives"> <!-- Blue USB Drive --> <a class="usb-drive" href="#" title="Download"> </a><br /> <div class="casing"> <a class="usb-drive" href="#" title="Download">SW Blogger 1</a></div> <a class="usb-drive" href="#" title="Download"> <div class="connector"> <div class="inner"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </div> </div> <div class="cap"> <i class="fa fa-cloud-download"></i> </div> </a> <!-- Purple USB Drive --> <a class="usb-drive purple" href="#" title="Download"> <div class="casing"> SW Blogger 2</div> <div class="connector"> <div class="inner"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </div> </div> <div class="cap"> <i class="fa fa-download"></i> </div> </a> <!-- Red USB Drive --> <a class="usb-drive red" href="#" title="Share"> <div class="casing"> SW Blogger 3</div> <div class="connector"> <div class="inner"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </div> </div> <div class="cap"> <i class="fa fa-share"></i> </div> </a> <!-- Orange USB Drive --> <a class="usb-drive orange" href="#" title="Upload"> <div class="casing"> SW Blogger 4</div> <div class="connector"> <div class="inner"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </div> </div> <div class="cap"> <i class="fa fa-cloud-upload"></i> </div> </a> <!-- Green USB Drive --> <a class="usb-drive green" href="#" title="Download"> <div class="casing"> SW Blogger 5</div> <div class="connector"> <div class="inner"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </div> </div> <div class="cap"> <i class="fa fa-upload"></i> </div> </a> <!-- Carbon Pattern USB Drive --> <a class="usb-drive carbon" href="#" title="Stash"> <div class="casing"> SW Blogger 6</div> <div class="connector"> <div class="inner"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </div> </div> <div class="cap"> <i class="fa fa-star"></i> </div> </a> </div>
Selesai...
*Jika ada kesulitan silahkan berkomentar, warna, lebar, ukuran bisa diganti *Repost from : www.sebastianwirajaya.net
0 Response to "Kreatif USB Drive Button ala SW Blogger"
Post a Comment