Membuat Tombol Demo (Download) dengan Image

Tidak perlu panjang lebar tentang cara menerapkan link demo dan donwload dalam blog anda. Sepeti yang saya posting pada tutorial sebelumnya tentang Membuat Tombol Demo (Download) dengan CSS, cara dan penerapannya sama. Untuk itu lebih baik pengunjung menhunjungi dulu artikel disini.

ada dua macam cara dalam menerapkan gambar (image) untuk dijadikan link dalam blogging yang Kang Fathur berikan dalam kesempatan kali ini.

Tombol link dengan satu gambar

Seperti yang Kang Fathur terapkan dalam blog ini yang berkaitan dengan Software, Photoshop, CorelDRAW menggunkan tombol image hanya dengan 1 gambar. Contohnya sebagai berikut :

Bagi anda yang ingin mempunyai LINK DEMO dan DOWNLOAD, seperti dibawah ini

Kodenyanya adalah :

<div style="background: none repeat scroll 0% 0% rgb(232, 232, 232); border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; height: auto; overflow: auto; padding: 2px; text-align: center; width: auto;">

======= KATA ATAU KALIMAT ====================

<a href="URL TUJUAN LINK" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="31" src="URL GAMBAR *IMAGE) YANG DITERAPKAN" width="223" /></a>
</div> 

Tombol dengan satu gambar untuk 2 link

Seperti yang ditanyakan pengunjung bernama Beraaga Zerozeroseven blog disini, maka Kang Fathur mencoba untuk menjawabnya

LIVE DEMO

Code CSS

ul.tombolposting {
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  padding-left:25px;
  padding-top:0;
  padding-bottom:30px;
}

ul.tombolposting li {
  background:none 0 0 repeat scroll transparent;
  float:left;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0 5px 0 0;
  padding:0;
}

.demo {
  text-align:right;
  overflow:hidden;
  line-height:1.3em;
  margin:30px 0 0 0;
}

a.demo1 {
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju08AsWxVmUb8gnCcEPpmHukC_j92QiLG2gy0MNcHNx71PxLIDj1RxRTXJ9d8FRCTPvbI9USJTk3DXRadbsGMI_Bb2GuOP8zzM_F1ooA4DRDDOhDzOKhljxbF6hBqUBCjh3lsyv1NcccE/s1600/dmdl.png) left bottom no-repeat scroll transparent;
  display:block;
  height:30px;
  text-indent:-9999px;
  width:228px;
}

a.demo1:hover {
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju08AsWxVmUb8gnCcEPpmHukC_j92QiLG2gy0MNcHNx71PxLIDj1RxRTXJ9d8FRCTPvbI9USJTk3DXRadbsGMI_Bb2GuOP8zzM_F1ooA4DRDDOhDzOKhljxbF6hBqUBCjh3lsyv1NcccE/s1600/dmdl.png) left top no-repeat scroll transparent;
}

a.download {
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju08AsWxVmUb8gnCcEPpmHukC_j92QiLG2gy0MNcHNx71PxLIDj1RxRTXJ9d8FRCTPvbI9USJTk3DXRadbsGMI_Bb2GuOP8zzM_F1ooA4DRDDOhDzOKhljxbF6hBqUBCjh3lsyv1NcccE/s1600/dmdl.png) right bottom no-repeat scroll transparent;
  display:block;
  height:30px;
  text-indent:-9999px;
  width:228px;
}

a.download:hover {
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju08AsWxVmUb8gnCcEPpmHukC_j92QiLG2gy0MNcHNx71PxLIDj1RxRTXJ9d8FRCTPvbI9USJTk3DXRadbsGMI_Bb2GuOP8zzM_F1ooA4DRDDOhDzOKhljxbF6hBqUBCjh3lsyv1NcccE/s1600/dmdl.png) right top no-repeat scroll transparent;
}

HTML

<ul class="tombolposting">
	<li><a class="demo1" href="URL TUJUAN LINK" rel="nofollow" target="_blank" title="preview template">Preview</a></li>
	<li><a class="download" href="URL TUJUAN LINK" rel="nofollow" target="_blank" title="download template">Download Theme</a></li>
</ul>

Semoga berhasi dan bermanfaat. AminSatank MkrBerkomentar

Bagikan kepada teman!

DMCA

Garis