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

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



Hy Semua. ketemu lagi nih dengan aku. yah dikarenakan aku sedang mengerjakan proyek yang satu ini. yup. kali ini aku 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 aku 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://putuokaken.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://putuokaken.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://putuokaken.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://putuokaken.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://putuokaken.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://putuokaken.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://putuokaken.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://putuokaken.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://putuokaken.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://putuokaken.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://putuokaken.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://putuokaken.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"......