Cara Membuat Tampilan Tombol Demo dan Download Keren di Blog

Cara Membuat Desain Tombol Demo dan Download Keren di Blog

Bagi sobat yang terbiasa melihat desain tampilan situs web seperti Lazada atau online shop lainnya, biasanya desain tampilan Demo atau link Pembelian agak berbeda dengan tulisan lainnya.

Metode pembuatan desain tombol Demo atau Download memang ditujukan untuk memberikan khas warna, bentuk dan kontur berbeda dari tulisan dan font lainnya, karena memang untuk memberitahukan kepada pembaca bahwa ada “poin” penting yang terdapat pada tombol tersebut.

Sebagai contoh, sobat bisa melihat penjelasan Template SEO killer terbaik 2016. Di dalam artikel tersebut juga terdapat tombol demo dan download yang unik, Flat UI dan khas. Ingin tahu cara membuatnya? Nanti sobat bisa melihat Demonya di bagian paling bawah artikel ini.

Berikut selengkapnya.

Cara Membuat Tombol Demo dan Download Keren di Blog

Desain dari tombol demo dan download kali ini ada beberapa, yakni dari blog Kang Ismet dan Mbak Arlina. Mau pilih yang mana? Silakan saja sesuaikan dengan gaya sobat. So, perhatikan langkah-langkah berikut ini.

#1. Desain Pertama

1. Masuk akun blogger > pilih template > mode html

2. Copas kode berikut ini di atas kode </head>

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

3. Copas kode di bawah ini di atas kode </style> atau di bawah kode ]]></b:skin>

/* CSS Button Style 1 by www.forumblogindo.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′}

4. Save template
5. Silakan tambahkan kode di bawah ini di dalam artikel sobat, namun pada mode html, tidak pada mode compose:

<div style=”text-align: center;”> <ul class=”button”> <li><a class=”demo” href=”http://www.forumblogindo.com” target=”_blank”>Demo</a></li> <li><a class=”download” href=”http://www.forumblogindo.com” target=”_blank”>Download</a></li> </ul> </div> <div class=”clear”></div>

6. Publish

Jika ingin memilih mode atau desain style yang berbeda, silakan ganti kode pada langkah tiga dengan kode di bawah ini dan save template :

/* CSS Button Style 2 by www.forumblogindo.com */ .button2{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} .button2 li a.demo,.button2 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} .button2 li a.demo:hover,.button2 li a.download:hover{background:#666} .button2 li a.demo:active,.button2 li a.download:active{cursor:pointer} .button2 li a.demo:after,.button2 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} .button2 li:hover a.demo:after,.button2 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)}}

Dan ganti kode pada langkah lima dengan kode di bawah ini:

<div style=”text-align: center;”> <ul class=”button2″> <li><a class=”demo” href=”http://www.forumblogindo.com” target=”_blank”>Demo Link</a></li> <li><a class=”download” href=”http://www.forumblogindo.com” target=”_blank”>Download Link</a></li> </ul> </div> <div class=”clear”></div>

Mudah kan?

#2. Desain kedua

1. Masuk akun blogger > pilih template > mode html2. Copas kode di bawah ini di atas kode </style> atau di bawah kode ]]></b:skin>

.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;} .button ul {margin:0;padding:0} .button li{display:inline;margin:0;padding:0} .demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; } .download {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;} .demo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 } .download:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }

3. Tambahkan kode di bawah ini pada artikel (sama seperti pada langkah ke lima dalam desain pertama di atas):

<div style=”text-align: center;”> <ul class=”button”> <li><a class=”demo” href=”http://www.forumblogindo.com” target=”_blank”>Demo</a></li> <li><a class=”download” href=”http://www.forumblogindo.com” target=”_blank”>Download</a></li> </ul> </div><div class=”clear”></div>

4. Silakan ganti alamat url yang sudah saya tandai sesuai dengan keinginan

5. Publish

Demikian sekilas info tentang tips desain blog, khususnya Cara Membuat Tampilan Tombol Demo dan Download Keren di Blog. Semoga bermanfaat. Salam sukses.