Archive Pages Design$type=blogging

Cara Membuat Tombol Pada Blogger

6 Edit this post

U ntuk postingan perdana ini dan sekalian testing template arlina design, sengaja saya akan membagikan sebuah tutorial cara membuat tombol ...


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.

SHARE:

COMMENTS

BLOGGER: 6
Loading...
DISQUS
Nama

Animasi Blogger Button Css Javascript jQuery Sider Sosial Media Syntax Highlighter Template Tips Tutorial Windows 10
false
ltr
item
Simple Tutorial: Cara Membuat Tombol Pada Blogger
Cara Membuat Tombol Pada Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPbTdcEERCKeAJ_b92687Gc6liWmBBeRSnjYDVo4GRF6pi7xLQzvSNs9RYLBXNIFcIRNAPInPq7kVlLdA_klxZf6uutvwURhwjG8fHZ8wPjWWTq0yGYDHuDIUcQ4l45Dk2yEZi5jttzTMJ/s400/tutorial.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPbTdcEERCKeAJ_b92687Gc6liWmBBeRSnjYDVo4GRF6pi7xLQzvSNs9RYLBXNIFcIRNAPInPq7kVlLdA_klxZf6uutvwURhwjG8fHZ8wPjWWTq0yGYDHuDIUcQ4l45Dk2yEZi5jttzTMJ/s72-c/tutorial.jpg
Simple Tutorial
http://mirandahardy.blogspot.com/2015/07/cara-membuat-tombol-pada-blogger.html
http://mirandahardy.blogspot.com/
http://mirandahardy.blogspot.com/
http://mirandahardy.blogspot.com/2015/07/cara-membuat-tombol-pada-blogger.html
true
4419251694985783704
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago