Cara Membuat Tombol Pada Blogger


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
Cara Membuat Tombol Pada Blogger

Contoh Tombol dengan berbagi ukuran dan warna-warni


/*----Small Buttons-----*/
Button Text
Button Text
Button Text
Button Text
Button Text
Button Text
Button Text
Button Text
Button Text
Button Text
Button Text
Button Text

/*----Medium Buttons-----*/
Button Text
Button Text
Button Text
Button Text
Button Text
Button Text
Button Text
Button Text
Button Text
Button Text
Button Text
Button Text

/*----Large Buttons-----*/
Button Text
Button Text
Button Text
Button Text
Button Text
Button Text
Button Text
Button Text
Button Text
Button Text
Button Text
Button Text




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.
Previous
This is the oldest page

6 komentar

Click here for komentar
Bung Frangki
admin
7 Agustus 2015 11.04 ×

wah...
bagus2 tombol bloggernya ya gan, mantab deh :D

Reply
avatar
Antonius SP
admin
7 Agustus 2015 11.19 ×

tombol default bawaan template blog ini gan... makasih sudah berkunjung...

Reply
avatar
Mbah dinan
admin
7 Agustus 2015 21.00 ×

pake efek inset shadow aja kayak jadi efek transisi...jadi dapat ide gan buat diterapin pada yang lainnya.

Reply
avatar
Ani Nur
admin
11 Agustus 2015 02.43 ×

keren ga bosen liat tombol penuh warna ini mas, harus dicoba tuh scriptnya

Reply
avatar
Antonius SP
admin
11 Agustus 2015 07.22 ×

iya mbah menarik dan kuncinya disini--> box-shadow:inset 0 -54px rgba(0,0,0,0.15)

Reply
avatar
Antonius SP
admin
11 Agustus 2015 07.24 ×

Silahkan di terapkan sis... semoga tambah cantik tampilan blognya, sama seperti pemiliknya... :-bd

Reply
avatar
Thanks for your comment
close