Cara Membuat Tombol Demo dan Download Responsive Arlina- Bagi blogger yang mempunyai blog download atau demo semisal menjual template fitur tombol (button) demo dan donwload yang responsive sangat di anjurkan. Selain menarik penjung juga membuat blog lebih rapi dan terlihat bagus.
Membuat tombol demo dan donwload responsive ini saya dapat dari blognya mbak Arlina. Kode aslinya bisa kamu dapatkan di artikel mbak arlina. Namun pada artikel ini saya akan membuat tombol demo dan download responsive dengan sedikit perubahan pada kode asli dari mbak arlina.
Cara Membuat Tombol Demo dan Download Responsive Arlina
Sebelumnya kamu sudah memasang font awesome, kalai belum silahkan tambahkan kode CSS di atas kode </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
Setelah terpasang:
1. Masuk ke Blogger >Templates >Edit html
2. Letakkan kode CSS di bawah ini di atas kode ]]></b:skin> atau </style>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
Setelah terpasang:
1. Masuk ke Blogger >Templates >Edit html
2. Letakkan kode CSS di bawah ini di atas kode ]]></b:skin> atau </style>
/* Arlina Design Material Button Edit by www.libralibry.com */
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.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'}
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.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. Simpan template.
5. Untuk menggunakannya silahkan tambahkan kode di bawah ini di dalam artikel mode html (tab html)
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://www.libralibry.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://www.libralibry.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>
<ul class="button">
<li><a class="demo" href="http://www.libralibry.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://www.libralibry.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>
Demikian lah Cara Membuat Tombol Demo dan Download Responsive Arlina. Semoga bermanfaat, terima kasih.
