Membuat Tombol Demo (Download) dengan Image

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 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-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(http://1.bp.blogspot.com/-erXXX7o0mMg/Tkk8L9Jb0zI/AAAAAAAABUc/qpkkC38ohms/s1600/dmdl.png) left bottom no-repeat scroll transparent;display:block;height:30px;text-indent:-9999px;width:228px}a.demo1:hover{background:url(http://1.bp.blogspot.com/-erXXX7o0mMg/Tkk8L9Jb0zI/AAAAAAAABUc/qpkkC38ohms/s1600/dmdl.png) left top no-repeat scroll transparent}a.download{background:url(http://1.bp.blogspot.com/-erXXX7o0mMg/Tkk8L9Jb0zI/AAAAAAAABUc/qpkkC38ohms/s1600/dmdl.png) right bottom no-repeat scroll transparent;display:block;height:30px;text-indent:-9999px;width:228px}a.download:hover{background:url(http://1.bp.blogspot.com/-erXXX7o0mMg/Tkk8L9Jb0zI/AAAAAAAABUc/qpkkC38ohms/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