Membuat Tombol Button di Blogger
langkah-langkah membuat tombol button di blogger
cari kode ]]></b:skin> dan pastekan kode css berikut di atasnya
/* CSS Button */
.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{text-align:center;margin:10px auto;padding:10px 20px;color:#fff;border:0;cursor:pointer;display:block;text-decoration:none;font-weight:400;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}
Untuk menggunakannya dalam postingan blog tambahkan kode berikut dengan penulisan HTML mode
/*----Small Buttons-----*/ <a href='#' class="button small red">Button Text</a> <a href='#' class="button small pink">Button Text</a> <a href='#' class="button small orange">Button Text</a> <a href='#' class="button small yellow">Button Text</a> <a href='#' class="button small green">Button Text</a> <a href='#' class="button small turquoise">Button Text</a> <a href='#' class="button small blue">Button Text</a> <a href='#' class="button small purple">Button Text</a> <a href='#' class="button small midnight">Button Text</a> <a href='#' class="button small grey">Button Text</a> <a href='#' class="button small asbestos">Button Text</a> <a href='#' class="button small dark">Button Text</a> /*----Medium Buttons-----*/ <a href='#' class="button medium red">Button Text</a> <a href='#' class="button medium pink">Button Text</a> <a href='#' class="button medium orange">Button Text</a> <a href='#' class="button medium yellow">Button Text</a> <a href='#' class="button medium green">Button Text</a> <a href='#' class="button medium turquoise">Button Text</a> <a href='#' class="button medium blue">Button Text</a> <a href='#' class="button medium purple">Button Text</a> <a href='#' class="button medium midnight">Button Text</a> <a href='#' class="button medium grey">Button Text</a> <a href='#' class="button medium asbestos">Button Text</a> <a href='#' class="button medium dark">Button Text</a> /*----Large Buttons-----*/ <a href='#' class="button large red">Button Text</a> <a href='#' class="button large pink">Button Text</a> <a href='#' class="button large orange">Button Text</a> <a href='#' class="button large yellow">Button Text</a> <a href='#' class="button large green">Button Text</a> <a href='#' class="button large turquoise">Button Text</a> <a href='#' class="button large blue">Button Text</a> <a href='#' class="button large purple">Button Text</a> <a href='#' class="button large midnight">Button Text</a> <a href='#' class="button large grey">Button Text</a> <a href='#' class="button large asbestos">Button Text</a> <a href='#' class="button large dark">Button Text</a>
pilih salah satu aja ya, lihat contoh dibawah
Membuat Tombol Button di Blogger
Reviewed by Nuansa
on
05.24
Rating:
Reviewed by Nuansa
on
05.24
Rating:
Tidak ada komentar: