8 Style Cara Membuat Tombol Link Keren Responsive Di Blog ~ Coding IsmyNR - Cara Dan Contoh Pemrograman

8 Style Cara Membuat Tombol Link Keren Responsive Di Blog

Sebuah artikel sering kali kita butuhkan ketika membuat link yangmengarah ke suatu tempat tujuan yang di tentukan kita, yang bertujuan untuk membuat pengunjung blog menjadi lebih mudah dalam berselancar di blog kita.

Dalam masalah ini, dengan blog menyediakan berbagai kemudahan berselancar di blog, itu termasuk menarik pengunjung blog dan akhirnya terus berkunjung di blog kita, jadi kita perlu menambahkan link yang dibutuhkan dalam artikel misalkan link demo tempelate, atau link download dll.

Tetapi pasti kita bosan dengan tampilan link yang begitu begitu saja, tidak menarik, jadi sekarang saya akan memberikan tutorial membuat tombol untuk link di positingan blog, dengan berbagai style css dan html.

Berikut cara pasang tombol link :
1.  Masuk ke blog, dan buat postingan, ingat pilih metode HTML jangan COMPOSE.
sisipkan kode html di bawah ini di mana anda ingin menggunakan tombolnya  :
<div class="btOutIsmynr">
     <a class="btInIsmynr1" href="#" target="_blank" title="Klik Disini">Ini Tulisan Tombolnya</a>
</div>

Pada tulisan "Ini Tulisan Tombolnya" HTML diatas, ganti saja sesuai yang anda inginkan, Setelah itu masuk ke Tempelate ==> Edit HTML, copy CSS style di bawah ini untuk dasar dari div out nya:
@import url('https://fonts.googleapis.com/css?family=Kanit');
.btOutIsmynr{margin:10px auto;clear:both;text-align:center}

Lalu setelah di copy code CSSnya, Pastekan di atas code </style>

2.  Selanjutnya anda pilih saja style dibawah ini dulu
style button 1
/* Button 1  */
a.btInIsmynr1{margin:3px;height:30px auto;padding:5px 10px;color:#006894;background-color:#fff;border:3px solid #006894;float:none;display:inline-block;text-decoration:none;overflow:hidden;text-align:center;transition:all 0.2s ease;line-height:1.6;font-size:16px;font-family:'Kanit',sans-serif}
a.btInIsmynr1:hover{background-color:#006894;color:#fff}
@media only screen and(max-width:720px){btInIsmynr1:width:95%}

style button 2
/* Button 2  */
a.btInIsmynr2{margin:3px;height:30px auto;padding:5px 10px;color:#fff;background-color:#006894;border:3px solid #006894;float:none;display:inline-block;text-decoration:none;overflow:hidden;text-align:center;transition:all 0.2s ease;line-height:1.6;font-size:16px;font-family:'Kanit',sans-serif}
a.btInIsmynr2:hover{background-color:#fff;color:#006894}
@media only screen and(max-width:720px){btInIsmynr2:width:95%}

style button 3
/*    Button 3  */
a.btInIsmynr3{margin:3px;height:30px auto;padding:5px 10px;color:#fff;background-color:#006894;border:3px solid #006894;float:none;display:inline-block;text-decoration:none;overflow:hidden;text-align:center;line-height:1.6;font-size:16px;font-family:'Kanit',sans-serif;box-shadow:4px 5px 0 #003166;border-radius:20px;position:relative}
a.btInIsmynr3:hover{top:2px;left:2px;box-shadow:2px 2px 0 #003166}
@media only screen and(max-width:720px){btInIsmynr3:width:95%}

style button 4
/* Button 4*/
a.btInIsmynr4{margin:3px;height:30px auto;padding:10px 15px;color:#fff;display:inline-block;text-decoration:none;overflow:hidden;text-align:center;line-height:1.6;font-size:16px;font-family:'Kanit',sans-serif;background:-webkit-linear-gradient(left,#34495e 0%,#34495e 50%,#006894 50%);background:-moz-linear-gradient(left,#34495e 0%,#34495e 50%,#006894 50%);background:-ms-linear-gradient(left,#34495e 0%,#34495e 50%,#006894 50%);background:-o-linear-gradient(left,#34495e 0%,#34495e 50%,#006894 50%);background:linear-gradient(to right,#34495e 0%,#34495e 50%,#006894 50%);background-size:200% 100%;background-position:100% 0;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s}
a.btInIsmynr4:hover{background-position:0 0}
@media only screen and(max-width:720px){btInIsmynr4:width:95%}

style button 5
/*    Button 5  */
.btInIsmynr5{background:#fff;color:#006894;position:relative;height:30px auto;margin:3px;height:30px auto;padding:8px 13px;text-decoration:none;overflow:hidden;text-align:center;line-height:1.6;font-size:16px;font-family:'Kanit',sans-serif;border:3px solid #006894}
.btInIsmynr5:hover:after{background-position:0 0}
.btInIsmynr5:after{content:"";background:-webkit-linear-gradient(left,#f39c12 0%,#006894 50%,#006894 50%,#006894 100%);background:linear-gradient(to right,#f39c12 0%,#f39c12 50%,#006894 50%,#006894 100%);background-position:100% 0;background-size:200% 100%;width:100%;height:5px;position:absolute;top:100%;left:0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-ms-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s}
@media only screen and(max-width:720px){btInIsmynr5:width:95%}

style button 6
/*    Button 6  */
a.btInIsmynr6{margin:3px;height:30px auto;padding:5px 10px;color:#2980b9;background-color:#f4f4f4;border:3px solid #f4f4f4;float:none;display:inline-block;text-decoration:none;overflow:hidden;text-align:center;line-height:1.6;font-size:16px;transition:all 0.3s ease;font-family:'Kanit',sans-serif;position:relative}
a.btInIsmynr6:hover{box-shadow:3px 3px 10px #999999;transition:all 0.3s ease}
@media only screen and(max-width:720px){btInIsmynr6:width:95%}

style button 7
/*    Button 7  */
a.btInIsmynr7{margin:3px;height:30px auto;padding:5px 10px;color:#fff;background-color:#006894;float:none;display:inline-block;text-decoration:none;overflow:hidden;text-align:center;transition:all 0.2s ease;line-height:1.6;font-size:16px;font-family:'Kanit',sans-serif}
a.btInIsmynr7:hover{background-color:#34495e;color:#fff}
@media only screen and(max-width:720px){btInIsmynr7:width:95%}

3.  Cara Memasang Tombol Di Postingan Blog
Selanjutnya bagaimana cara pasangnya ??? di setiap style button di atas memiliki class yang berbeda, jadi anda hanya mengubah html yang tadi di paste di postingan itu di ganti saja class yang sama persis dengan style di atas, misalnya :

Dari style di atas saya memilih /* Button 6 */  pada cssnya, pada button 6 class cssnya adalah btInIsmynr6  lihat di bawah :
/*    Button 6  */
a.btInIsmynr6{margin:3px;height:30px auto;padding:5px 10px;color:#2980b9;background-color:#f4f4f4;border:3px solid #f4f4f4;float:none;display:inline-block;text-decoration:none;overflow:hidden;text-align:center;line-height:1.6;font-size:16px;transition:all 0.3s ease;font-family:'Kanit',sans-serif;position:relative}
a.btInIsmynr6:hover{box-shadow:3px 3px 10px #999999;transition:all 0.3s ease}
@media only screen and(max-width:720px){btInIsmynr6:width:95%}
Lalu pada HTML nya, anda ganti saja CLASS nya sama persis dengan css yang sudah anda pilih style nya tadi, contohnya :
<div class="btOutIsmynr">
    <a href="#" class="btInIsmynr1" title="Klik Disini" target="_blank">Lorem ipsum dolor sit amet,</a>
</div>
Nah pada tulisan class="btInIsmynr1" ganti saja dengan class pada css yang sudah kita pilih class="btInIsmynr6" jadi cukup ganti nomornya saja.

Nanti style yang sudah di pilih berarti yang /* Button 6 */ , pastekan saja di bawah css yang sudah kita tambahkan pada awal postingan ini, kalo bingung lihat vidio dibawah :
cara menyimpan style css

Jika ingin merubah ukuran/warna pada CSS jika tidak sesuai, lihat keterangan di bawah :

  • Merubah ukurannya ==> pada code a.btInIsmynr (tanpa hover): ubah pada ukuran height dan padding 
  • Merubah warna background ==> cari code background-color yang ada ( # ) pasti itu kode hexa warnanya, ubah misalkan #fff jadi #0000000
  • Merubah warna huruf ==> cari code color yang ada ( # ) sama seperti mengubah background
  • Merubah font ==> cari saja code font-family ganti saja code setelahnya, misalkan font-family:'Kanit',sans-serif; Ganti fontnya sesuai dengan blog anda misalkan jadi 'droid serif' atau arial 
tag :
cara membuat tombol link html
cara menggunakan button dalam blog
membuat button link dalam postingan blog 
membuat tombol di postinan blog 
cara membuat tombol submit di html
membuat link keren di blog
style css pada blog
cara membuat button pada blogger
link button css dan html
logoblog

Share :

1 comment:

Berkomentarlah jika ada pertanyaan mengenai artikel ini, Kesan pembaca atau saran yang membangun blog ini.
*Gunakan akun google dan ceklis kolom (Notify Me) agar mendapatkan pemberitahuan balasan komentar

 
Back to Top