Cara Membuat Tombol Demo dan Download ala Blognya Arlina Design

Buat sobat yang ingin membuat tombol Demo dan Download di dalam postingan blog. Disini saya akan membagikan kode dan cara pemasangannya. Tombol yang mau di bagikan ini berasal dari blognya mba Arlina Design.

Karena Disini juga saya memakainya, karena tutorial itu di bagikan oleh mbak arlina dengan gratis buat para blogger yang membutuhkannya.

Maka dari itu disini, saya pun akan membagikannya lagi buat kalian.

Yu kita mulai saja ke caranya.

Pertama sobat masuk dulu ke dashboard blognya sobat.

Lalu buka menu Tema dan klik tulisan Edit Html.

Masukan kode cssnya dulu di bawah ini, tepat di atasnya kode <]]></b:skin>  atau  </style> di dalam editor template sobat.

 /* CSS Button Style */ 
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button2 ul{margin:0;padding:0} .button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden} .button2 li a.download{background:#3498db} .button li a.demo:hover,.button li a.download:hover{background:#666} .button2 li a.demo:active,.button2 li a.download:active{cursor:pointer} .button li a.demo:after,.button li a.download:after{content:'\F054';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:16px 24px;font-family:fontawesome;transition:all .3s} .button li:hover a.demo:after,.button li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite} @-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}} @keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

Selanjutnya, copy lagi kode link fontAwesome nya, di bawah ini tepat di atasnya kode </head>. Tapi jika dalam template sobat sudah ada link fontawesome. Sobat tidak perlu lagi memasang kode di berikut.

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

Yang terakhir, buka menu postingan sobat. Jangan lupa pilih postingannya dengan mode Html ya bukan yang Compose. Masukan kode berikut di dalam postingan sobat.

 <div style="text-align: center;"> <ul class="button"> <li><a class="demo" href="https://kreatifblogging.blogspot.com/" target="_blank">Demo</a></li> <li><a class="download" href="https://kreatifblogging.blogspot.com/" target="_blank">Download</a></li> </ul> </div> <div class="clear"></div>

Keterangan
Ganti link kreatifblogging.blogspot.com nya dengan link tujuan halaman demo dan downloadnya sobat.

Share:

FacebookGoogle+Twitter WhatsApp

Postingan terkait:

Ditulis Sopian John — February 10, 2019 — 10 Comments — Tutorial Blogger