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 berikutKodenyanya 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/AVvXsEg1B7M1hklQRNOWaaMZNbkgIKzYDFZk84-Bd9r_FSSbfP4meCvzZa9m_8vXuD4l4wbfMkPCP3NsXfLFzlg4-Sll3_bSo_v-XGb-hfH7KAUJ7tPNVW7pZN21nA27HEUyzerlqk3RPxjfbCI/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/AVvXsEg1B7M1hklQRNOWaaMZNbkgIKzYDFZk84-Bd9r_FSSbfP4meCvzZa9m_8vXuD4l4wbfMkPCP3NsXfLFzlg4-Sll3_bSo_v-XGb-hfH7KAUJ7tPNVW7pZN21nA27HEUyzerlqk3RPxjfbCI/s1600/dmdl.png) left top no-repeat scroll transparent}a.download{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1B7M1hklQRNOWaaMZNbkgIKzYDFZk84-Bd9r_FSSbfP4meCvzZa9m_8vXuD4l4wbfMkPCP3NsXfLFzlg4-Sll3_bSo_v-XGb-hfH7KAUJ7tPNVW7pZN21nA27HEUyzerlqk3RPxjfbCI/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/AVvXsEg1B7M1hklQRNOWaaMZNbkgIKzYDFZk84-Bd9r_FSSbfP4meCvzZa9m_8vXuD4l4wbfMkPCP3NsXfLFzlg4-Sll3_bSo_v-XGb-hfH7KAUJ7tPNVW7pZN21nA27HEUyzerlqk3RPxjfbCI/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
Source : Kang Fathur