Design, Tutorial and Tips Trik Blogger | Lostsector

- on 07.45

Design, Tutorial and Tips Trik Blogger | Lostsector

Cara Mengganti Semua Ukuran Gambar Secara Otomatis di Blogger

Posted: 13 Apr 2013 11:13 AM PDT

Ada 2 pilihan yang paling mendasar untuk mengubah ukuran gambar pada postingan blog. Pertama secara manual dan kedua secara otomatis. Penggantian ukuran gambar secara manual adalah pilihan dasar yang disediakan oleh blogger pada saat anda menambahkan gambar kedalam postingan anda. Sedangkan untuk penggantian seluruh ukuran gambar secara otomatis bisa dilakukan dengan menambahkan kode CSS kedalam template.

Mengganti Semua Ukuran Gambar Secara Otomatis

Mengubah ukuran gambar secara manual (satu per satu) mungkin bisa anda lakukan, namun coba anda bayangkan, seandainya blog anda sudah mempunyai ratusan bahkan ribuan gambar, Apakah anda masih ingin mengubahnya secara manual? Bahkan jika anda memilih untuk melakukannya, mungkin ini akan memakan waktu yang cukup lama dan membutuhkan tenaga ekstra. Oleh karena itu, hal yang paling efektif bagi anda adalah mengubahnya secara otomatis dengan cara menambahkan kode CSS kedalam template blog anda. Melalui cara ini, anda juga bisa mengembalikan ukuran gambar kembali ke keadaan semula, menambahkan garis pinggir dan bayangan pada semua gambar blog.

Bagaimana Caranya ?

Hal pertama yang harus anda lakukan adalah login ke blogger.com » blog anda » template » edit html. Sekarang centang tag <b:skin>...</b:skin> (klik panah hitam disebelah kiri) dan temukan tag ]]></b:skin>. Copy kode CSS dibawah ini dan pastekan tepat diatasnya. (Tips - Gunakan pencarian dengan cara menekan Ctrl + F).

.post-body img {
width: 450px!important;
height: auto!important; }

Width dengan Nilai value 450px adalah lebar foto dan weight: auto! adalah tinggi gambar yang disesuaikan secara otomatis. Untuk menambahkan garis pinggir (border) cukup anda tambahkan border: 1px solid #cccccc; dan bayangan dengan kode box-shadow: 2px 2px 6px rgba(0,0,0,0.5);. Lengkapnya apabila sudah digabung akan menjadi seperti ini:

.post-body img {
width: 450px!important;
height: auto!important;
border: 1px solid #cccccc;
box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}

Setelah semua telah selesai anda atur, langkah berikutnya klik simpan template.

Semoga tips ini akan membantu anda untuk mengubah semua ukuran gambar blog anda secara otomatis. Apabila anda mengalami kendala mengenai tips ini, silahkan meninggalkan komentar.

4 Tombol CSS3 Animasi Unik dan Menarik Untuk Blogger

Posted: 13 Apr 2013 09:08 AM PDT

Tutorial kali ini adalah bagaimana cara membuat Tombol Blogger dengan animasi Transitional Hover yang dilengkapi oleh 4 varian yang berbeda, diantaranya animasi berwarna biru, hijau, orange dan grey atau abu-abu. Berikut Screenshootnya :

4 Tombol CSS3 Animasi Unik dan Menarik Untuk Blogger

Kode CSS

Untuk penempatan kode CSS di bawah ini anda tinggal mencopynya kemudian paste ke dalam template blogger tepatnya di atas tag ]]></b:skin>

.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/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/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;}
/* Blue Lsc-Button */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/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/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/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/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/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/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/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 Lsc-Button */
.green.button{
color:#345903 !important;
border:1px solid #96a37b !important;
background-color: #79be1e;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/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/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/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/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/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/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/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 Lsc-Button */.orange.button{
color:#693e0a !important;
border:1px solid #bea280 !important;
background-color: #e38d27;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/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/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/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/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/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/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/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));
}
/* Gray Lsc-Button */
.gray.button{
color:#525252 !important;
border:1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/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/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/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/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/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/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/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));
}

HTML

Untuk kode pemanggil dari CSS diatas, anda hanya memerlukan beberapa kode Tag Pemanggil di bawah ini kemudian menepatkan kode pemanggil tersebut kedalam "HTML" postingan. Untuk efeknya hovernya, silahkan anda sorot tombol "LIVE DEMO" di bawah ini dengan pointer mouse anda.

Tombol Nuansa Biru

Live Demo

<a class="button medium blue" href="Masukkan_Link_Disini" >Demo</a>

Tombol Nuansa Hijau

Live Demo

<a class="button medium green" href="Masukkan_Link_Disini" >Demo</a>

Tombol Orange

Live Demo

<a class="button medium orange" href="Masukkan_Link_Disini" >Demo</a>

Tombol Grey

Live Demo

<a class="button medium gray" href="Masukkan_Link_Disini" >Demo</a>

Pengaturan

Medium adalah ukuran Tombol Sedang, anda bisa menggantinya dengan kata "big" untuk ukuran besar dan "small" untuk ukuran kecil.
Masukkan_Link_Disini adalah tempat untuk memasukkan link yang dituju
Demo silahkan anda ganti. Anda bisa menggunakan kata Download, Info, More dan lain sebagainya.

Butuh Bantuan ?

Jika anda membutuhkan bantuan atau ingin bertanya seputar tutorial di atas, silahkan meninggalkan komenter pada form komentar di bawah postingan ini. Terima kasih...!!!