Cara Membuat Tombol/Button Lihat Dan Beli Untuk Website/Blog Seperti Online Shop - Nandea96
Artikel Terbaru
Loading...

Monday, 8 July 2019

Cara Membuat Tombol/Button Lihat Dan Beli Untuk Website/Blog Seperti Online Shop



Hy Semua. ketemu lagi nih dengan Dea. yah dikarenakan Dea sedang mengerjakan proyek yang satu ini. yup. kali ini Dea akan memberikan tutorial Cara Membuat Tombol/Button Lihat Dan Beli Untuk Website/Blog Seperti Online Shop. mungkin ada dari kalian yang mempunyai website/blog online shop akan tetapi tak mempunyai tombol beli dan lihat? atau ingin membuatnya akan tetapi tak ada refrensi? jika ada maka Dea harap kalian atau bagi yang tidak mempunyainya dapat mengikuti tutorial/langkah dibawah ini.

Step By Step

  • Pertama bukalah akun blogger kalian terlebih dahulu disini
  • Jika sudah maka pergilah ke menu "Tema" lalu pilih "Edit HTML"
  • Copy code dibawah ini dan pastekan tepat diatas kode <header>


<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.8/font-awesome-animation.min.css"></link>

  • Setelah itu pilih Style yang ingin kalian pakai. disini ada 6 Style. kemudian copy salah satu type "CSS Style" mulai dari 1 hingga 6 dibawah ini  dan pastekan tepat Diatas "]]></b:skin>". lalu copy dan pastekan juga code "HTML Style" pada postingan yang ingin kalian isi tombol. pastekan tepatnya pada Tabel "HTML" Bukan "Compose".

.button {
    border-radius:2px;
    color:#000;
    padding: 10px 63px;
    text-align: center;
    text-decoration: none;
    float:center;
    overflow:auto;
    font-family:allerta;
    font-size: 14px;
    margin:0px 0px 0px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
     box-shadow:0px 1px 2px rgba(0,0,0,0.4);
}
.button2 {
    background-color:white; 
    color:#40e0d0!important;
    border: 2px solid #fff;
}
.button2:hover {
    text-decoration: none;
    background-color:#40e0d0;
    color:#fff!important;
    border: 2px solid #40e0d0;
}


<div style="text-align:center;margin:2px">
    <a button class=" button button2 faa-parent animated-hover " href="http://Nandea96.com"><i class="fa fa-eye faa-float fa-1x"></i><span style="font-family: verdana; font-size: -2; margin:0 auto;"> Lihat</span></a>
    <a button class=" button button2 faa-parent animated-hover " href="http://Nandea96.com"><i class="fa fa-shopping-cart faa-ring fa-1x"></i><span style="font-family: verdana; font-size: -2; margin:0 auto;"> Beli</span></a>
</div>



.button {
    border-radius:2px;
    color:#000;
    padding: 10px 63px;
    text-align: center;
    text-decoration: none;
    float:center;
    overflow:auto;
    font-family:allerta;
    font-size: 14px;
    margin:0px 0px 0px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
     box-shadow:0px 1px 2px rgba(0,0,0,0.4);
}
.button2 {
    background-color:white; 
    color:#e04062!important;
    border: 2px solid #fff;
}
.button2:hover {
    text-decoration: none;
    background-color:#e04062;
    color:#fff!important;
    border: 2px solid #e04062;
}


<div style="text-align:center;margin:2px">
    <a button class=" button button2 faa-parent animated-hover " href="http://Nandea96.com"><i class="fa fa-eye faa-passing-reverse fa-1x"></i><span style="font-family: verdana; font-size: -2; margin:0 auto;"> Lihat</span></a>
    <a button class=" button button2 faa-parent animated-hover " href="http://Nandea96.com"><i class="fa fa-shopping-cart faa-wrench fa-1x"></i><span style="font-family: verdana; font-size: -2; margin:0 auto;"> Beli</span></a>
</div>



.button {
    border-radius:2px;
    color:#000;
    padding: 10px 63px;
    text-align: center;
    text-decoration: none;
    float:center;
    overflow:auto;
    font-family:allerta;
    font-size: 14px;
    margin:0px 0px 0px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
     box-shadow:0px 1px 2px rgba(0,0,0,0.4);
}
.button2 {
    background-color:white; 
    color:#40e07c!important;
    border: 2px solid #fff;
}
.button2:hover {
    text-decoration: none;
    background-color:#40e07c;
    color:#fff!important;
    border: 2px solid #40e07c;
}


<div style="text-align:center;margin:2px">
    <a button class=" button button2 faa-parent animated-hover " href="http://Nandea96.com"><i class="fa fa-eye faa-horizontal fa-1x"></i><span style="font-family: verdana; font-size: -2; margin:0 auto;"> Lihat</span></a>
    <a button class=" button button2 faa-parent animated-hover " href="http://Nandea96.com"><i class="fa fa-shopping-cart faa-vertical fa-1x"></i><span style="font-family: verdana; font-size: -2; margin:0 auto;"> Beli</span></a>
</div>



.button {
    border-radius:2px;
    color:#000;
    padding: 10px 63px;
    text-align: center;
    text-decoration: none;
    float:center;
    overflow:auto;
    font-family:allerta;
    font-size: 14px;
    margin:0px 0px 0px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
     box-shadow:0px 1px 2px rgba(0,0,0,0.4);
}
.button2 {
    background-color:white; 
    color:#4a524d!important;
    border: 2px solid #fff;
}
.button2:hover {
    text-decoration: none;
    background-color:#4a524d;
    color:#fff!important;
    border: 2px solid #4a524d;
}


<div style="text-align:center;margin:2px">
    <a button class=" button button2 faa-parent animated-hover " href="http://Nandea96.com"><i class="fa fa-eye faa-pulse fa-1x"></i><span style="font-family: verdana; font-size: -2; margin:0 auto;"> Lihat</span></a>
    <a button class=" button button2 faa-parent animated-hover " href="http://Nandea96.com"><i class="fa fa-shopping-cart faa-spin fa-1x"></i><span style="font-family: verdana; font-size: -2; margin:0 auto;"> Beli</span></a>
</div>



.button {
    border-radius:2px;
    color:#000;
    padding: 10px 63px;
    text-align: center;
    text-decoration: none;
    float:center;
    overflow:auto;
    font-family:allerta;
    font-size: 14px;
    margin:0px 0px 0px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
     box-shadow:0px 1px 2px rgba(0,0,0,0.4);
}
.button2 {
    background-color:white; 
    color:#4057e0!important;
    border: 2px solid #fff;
}
.button2:hover {
    text-decoration: none;
    background-color:#4057e0;
    color:#fff!important;
    border: 2px solid #4057e0;
}


<div style="text-align:center;margin:2px">
    <a button class=" button button2 faa-parent animated-hover " href="http://Nandea96.com"><i class="fa fa-eye faa-flash fa-1x"></i><span style="font-family: verdana; font-size: -2; margin:0 auto;"> Lihat</span></a>
    <a button class=" button button2 faa-parent animated-hover " href="http://Nandea96.com"><i class="fa fa-shopping-cart faa-tada fa-1x"></i><span style="font-family: verdana; font-size: -2; margin:0 auto;"> Beli</span></a>
</div>



.button {
    border-radius:2px;
    color:#000;
    padding: 10px 63px;
    text-align: center;
    text-decoration: none;
    float:center;
    overflow:auto;
    font-family:allerta;
    font-size: 14px;
    margin:0px 0px 0px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
     box-shadow:0px 1px 2px rgba(0,0,0,0.4);
}
.button2 {
    background-color:white; 
    color:#e0de40!important;
    border: 2px solid #fff;
}
.button2:hover {
    text-decoration: none;
    background-color:#e0de40;
    color:#fff!important;
    border: 2px solid #e0de40;
}


<div style="text-align:center;margin:2px">
    <a button class=" button button2 faa-parent animated-hover " href="http://Nandea96.com"><i class="fa fa-eye faa-bounce fa-1x"></i><span style="font-family: verdana; font-size: -2; margin:0 auto;"> Lihat</span></a>
    <a button class=" button button2 faa-parent animated-hover " href="http://nandea96.com"><i class="fa fa-shopping-cart faa-passing fa-1x"></i><span style="font-family: verdana; font-size: -2; margin:0 auto;"> Beli</span></a>
</div>


Gantilah tulisan yang berwarna merah pada "HTML" tersebut dengan halaman "lihat" dan gantilah tulisan berwarna kuning dengan halaman "Beli"......


Share with your friends

Give us your opinion

Selamat Datang Di Website Nandea96
Mohon untuk selalu mencuci tangan dengan air bersih serta sabun setiap 15 menit sekali agar terhindar dari covid-19 dan penyakit lainnya seperti diare. selalu gunakan masker ketika berpergian kemanapun 😷. meskipun itu hanya berbelanja sekitar 0.1 km atau ke tetangga. hindari kontak fisik dan beri jarak sekitar 2 meter dari jarak tempat kita berdiri dengan seseorang agar tidak memunculkan klaster baru yang tidak di-inginkan.

-Terimakasih 🙏-
Done