Cara Membuat Tombol Pada Blogger

Dul Kenyot 21.57 Blogger, Button, Tutorial 7 comments

Untuk postingan perdana ini dan sekalian testing template arlina design, sengaja saya akan membagikan sebuah tutorial cara membuat tombol berbagai ukuran dan berwarna-warni yang memang sudah tersedia atau sudah bawaan template ini, namun jika sobat ingin memasangnya di blog sobat juga bisa kok, tinggal sobat ikuti aja langkah-langkahnya yang saya siapkan dibawah ini, adapun fungsi dari tobol ini ini sangatlah bervariasi tergantung dari tujuan sobat, mau dijadikan sebagai tombol download, demo atau link external dan juga internal semua bisa...

Cara Membuat Tombol Pada Blogger

Contoh Tombol dengan berbagi ukuran dan warna-warni

Untuk dapat memasanganya di blog sobat, pertama-tama salin terlebih dahulu kode CSS button dibawah ini dan letakan di atas kode </style>

Catatan : Sebelum mengedit template ada baiknya sobat membackupnya terlebih dahulu.

Buka Blogger Dashboard > Klik Template > Edit HTML
Cari tag </style> dalam template dan di diatasnya terapkan kode CSS di bawah ini :

 /* CSS Button */
.button-group{float:right;text-align:left;margin:0 auto}
button,button[disabled]:active{border:none;font-size:12px;font-family:'Open Sans';font-weight:normal;padding:4px 10px;text-decoration:none;background:#fff;color:#444;display:inline-block;transition:all 0.5s linear;cursor:pointer}
button:hover{background:#eac965;color:#fff;transition:all 0.2s linear;}
button:active{background:#eac965;color:#fff;}
button[disabled],button[disabled]:active{color:#c34535;cursor:default}
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;vertical-align:middle;border:none;outline:none;margin:0 10px 0 0}
.small-button a,.small-button1 a {font-size:13px;font-family:'Open Sans';cursor:pointer;font-weight:400;margin:15px 5px 5px 0;text-decoration:none;text-transform:none;text-shadow:none;display:inline-block;background-color:#2ba6e1;color:#fff;padding:4px 10px;cursor:pointer;border-radius:3px;}
.small-button:hover a,.small-button1:hover a{text-shadow:none;display:inline-block;background-color:#2797cc;color:#fff;}
.button.small{font-size:12px;max-width:100px;color:#fff;text-align:center;margin:0 auto;}
.button.medium{font-size:16px;max-width:200px;color:#fff;text-align:center;margin:0 auto;}
.button.large{font-size:20px;max-width:400px;color:#fff;text-align:center;margin:0 auto;}
.button{padding:10px 20px;margin:5px;color:#fff;text-align:center;border:0;cursor:pointer;border-radius:3px;display:block;text-decoration:none;font-weight:400;box-shadow:inset 0 -2px rgba(0,0,0,0.15);color:#fff}
.button.small:hover{box-shadow:inset 0 -54px rgba(0,0,0,0.15);color:#fff}
.button.medium:hover{box-shadow:inset 0 -54px rgba(0,0,0,0.15);color:#fff}
.button.large:hover{box-shadow:inset 0 -54px rgba(0,0,0,0.15);color:#fff}
.red{background:#e74c3c}
.orange{background:#e8930c}
.green{background:#2ecc71}
.blue{background:#3498db}
.purple{background:#9b59b6}
.yellow{background:#FFD600}
.pink{background:#F889EB}
.grey{background:#bdc3c7}
.turquoise{background:#1abc9c}
.midnight{background:#2c3e50}
.asbestos{background:#6d7b7c}
.dark{background:#454545}
.small-button{width:100%;overflow:hidden;clear:both}
.medium-button{width:100%;overflow:hidden;clear:both}
.large-button{width:100%;overflow:hidden;clear:both}

Kemudian tinggal sobat masukan kode dibawah ini ke dalam halaman postingan sobat.

SMALL BUTTON

 ... /*----Small Buttons-----*/
<a class="button small red" href="https://www.blogger.com/">Button Text</a>
<a class="button small pink" href="https://www.blogger.com/">Button Text</a>
<a class="button small orange" href="https://www.blogger.com/">Button Text</a>
<a class="button small yellow" href="https://www.blogger.com/">Button Text</a>
<a class="button small green" href="https://www.blogger.com/">Button Text</a>
<a class="button small turquoise" href="https://www.blogger.com/">Button Text</a>
<a class="button small blue" href="https://www.blogger.com/">Button Text</a>
<a class="button small purple" href="https://www.blogger.com/">Button Text</a>
<a class="button small midnight" href="https://www.blogger.com/">Button Text</a>
<a class="button small grey" href="https://www.blogger.com/">Button Text</a>
<a class="button small asbestos" href="https://www.blogger.com/">Button Text</a>
<a class="button small dark" href="https://www.blogger.com/">Button Text</a>

MEDIUM BUTTON

 ... /*----Medium Buttons-----*/
<a class="button medium red" href="https://www.blogger.com/">Button Text</a>
<a class="button medium pink" href="https://www.blogger.com/">Button Text</a>
<a class="button medium orange" href="https://www.blogger.com/">Button Text</a>
<a class="button medium yellow" href="https://www.blogger.com/">Button Text</a>
<a class="button medium green" href="https://www.blogger.com/">Button Text</a>
<a class="button medium turquoise" href="https://www.blogger.com/">Button Text</a>
<a class="button medium blue" href="https://www.blogger.com/">Button Text</a>
<a class="button medium purple" href="https://www.blogger.com/">Button Text</a>
<a class="button medium midnight" href="https://www.blogger.com/">Button Text</a>
<a class="button medium grey" href="https://www.blogger.com/">Button Text</a>
<a class="button medium asbestos" href="https://www.blogger.com/">Button Text</a>
<a class="button medium dark" href="https://www.blogger.com/">Button Text</a> ...

LARGE BUTTON

 ... /*----Large Buttons-----*/
<a class="button large red" href="https://www.blogger.com/">Button Text</a>
<a class="button large pink" href="https://www.blogger.com/">Button Text</a>
<a class="button large orange" href="https://www.blogger.com/">Button Text</a>
<a class="button large yellow" href="https://www.blogger.com/">Button Text</a>
<a class="button large green" href="https://www.blogger.com/">Button Text</a>
<a class="button large turquoise" href="https://www.blogger.com/">Button Text</a>
<a class="button large blue" href="https://www.blogger.com/">Button Text</a>
<a class="button large purple" href="https://www.blogger.com/">Button Text</a>
<a class="button large midnight" href="https://www.blogger.com/">Button Text</a>
<a class="button large grey" href="https://www.blogger.com/">Button Text</a>
<a class="button large asbestos" href="https://www.blogger.com/">Button Text</a>
<a class="button large dark" href="https://www.blogger.com/">Button Text</a> ...

Selesai dan selamat mencoba.