Cara Membuat Tombol Button Demo dan Download Pada Blogger

Cara Membuat Tombol Button Demo dan Download Pada Blogger - Halo sobat, pada kesempatan kali ini saya ingin berbagi tips yaitu cara membuat tombol button download dan demo pada template blogger yang tentunya responsive.

Tombol button ini berguna untuk blog kamu yang membahas seputar Blogger atau Template Blogger, karena pasti blog kamu akan memberikan link tautan ke luar, nah yang nantinya link aktif tersebut akan terlihat lebih menarik karena di balut dengan kode Html & CSS.

Oh iya tombol button Download & Demo sudah menggunakan icon Fonte Awesome yang membuat tombol button akan terlihat lebih elegan dan menarik.

Bukan hanya elegan dan menarik, tombol button ini sudah di optimalkan agar menjadi responsive agar tidak mengurangi tingkat SEO blog kamu.

Mohon untuk di simak dengan baik agar tidak terjadi error saat penerapan tombol button, berikut adalah Cara Membuat Tombol Button Demo dan Download Pada Blogger.

Cara Membuat Tombol Download dan Demo Pada Blogger

Oh iya karena tombol button ini sudah menggunakan Font Awesome maka kamu perlu menaruh kode berikut pada template kamu.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Jika template sobat sudah terdapat kode tersebut maka sobat tidak perlu melakukan itu lagi, untuk yang tidak ada silahkan copy kode di atas dan letakkan di atas kode </head>

• Selanjutnya sobat cari kode berikut dan letakkan kode dibawah ini  tepat di atas nya, ]]></b:skin> atau </style>

 /* CSS Button Style www.bahastuntas.com */

.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}

.button ul{margin:0;padding:0}

.button li{display:inline;margin:5px;padding:0;list-style:none}

.button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}

.button li a.download{background:#3498db}

.button li a.demo:hover,.button li a.download:hover{background:#666}

.button li a.demo:active,.button li a.download:active{cursor:pointer}

.button li a.demo:after,.button li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}

.button li a.download:after{content:'\f019'}

• Kemudian klik simpan pada template

Cara Penggunaan Tombol Button Demo & Download

Nah setelah melakukan pemasangan kode Html & CSS sekarang kita masuk pada cara penerapan pada postingan artikel.

Pada postingan artikel sebaik nya sobat ganti dulu metode penulisan nya menjadi mode HTML kemudian letakan kode berikut

 <div style="text-align: center;"> 

  <ul class="button">

    <li><a class="demo" href="https://www.bahastuntas.com" target="_blank">Demo</a></li>

    <li><a class="download" href="https://www.bahastuntas.com" target="_blank">Download</a></li>

  </ul>

</div>

<div class="clear"></div>

Silahkan sobat ganti link tersebut dengan link yang ingin kamu gunakan, dan kemudian lihat.

Bagaimana mudah bukan ? 

Untuk kamu yang hanya ingin menggunakan tombol demo saja atau download, silahkan kamu hapus kode dari <li> sampai  </li>

Sekian dan terimakasih pembahasan Cara Membuat Tombol Button Demo dan Download Pada Blogger,

Berbagi :