Membuat Tombol Demo (Download) dengan Image adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Membuat Tombol Demo (Download) dengan Image ini.
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 berikutBagi 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 menjawabnyaCode CSS-nya :
ul.tombolposting{list-style-image:none;list-style-position:outside;list-style-type:none;padding-left:25px;padding-top:0px;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/AVvXsEhJ34fbXy-5b7VKKRs7Y_LXAjtQsZvNGmIiwzFv9FfOV7UDd8RUzWDQTioPlnmnjhL2JPeCQo-0tDzX17g5rwX7aVsGGlvWkLLTPiTnn7jrdDBQe6UjpLapPpzh2qMxV8qG_ipVO6OTpU4/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/AVvXsEhJ34fbXy-5b7VKKRs7Y_LXAjtQsZvNGmIiwzFv9FfOV7UDd8RUzWDQTioPlnmnjhL2JPeCQo-0tDzX17g5rwX7aVsGGlvWkLLTPiTnn7jrdDBQe6UjpLapPpzh2qMxV8qG_ipVO6OTpU4/s1600/dmdl.png) left top no-repeat scroll transparent}a.download{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ34fbXy-5b7VKKRs7Y_LXAjtQsZvNGmIiwzFv9FfOV7UDd8RUzWDQTioPlnmnjhL2JPeCQo-0tDzX17g5rwX7aVsGGlvWkLLTPiTnn7jrdDBQe6UjpLapPpzh2qMxV8qG_ipVO6OTpU4/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/AVvXsEhJ34fbXy-5b7VKKRs7Y_LXAjtQsZvNGmIiwzFv9FfOV7UDd8RUzWDQTioPlnmnjhL2JPeCQo-0tDzX17g5rwX7aVsGGlvWkLLTPiTnn7jrdDBQe6UjpLapPpzh2qMxV8qG_ipVO6OTpU4/s1600/dmdl.png) right top no-repeat scroll transparent}
Pererapannya adalah :
<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. Amin SELENGKAPNYA atau SEPENUHNYA Sistem Komputer Sitemap 1 2 3 4 5
