വ്യത്യസ്തമായൊരു ഇമേജ് ലിങ്ക്

വ്യത്യസ്തമായൊരു  ഇമേജ്  ലിങ്ക്  ആണ്  താഴെ  കൊടുത്തിട്ടുള്ളത് ... നമ്മുടെ കമ്പ്യൂട്ടര്‍ മൗസ്   താഴെ കൊടുത്തിട്ടുള്ള  ചിത്രത്തിന്റെ മുകളില്‍ വെക്കുമ്പോള്‍  വരുന്ന മാറ്റം ശ്രദ്ധിക്കുക .

ഇത് നമ്മുടെ ബ്ലോഗില്‍   എങ്ങനെയാണ്  നല്‍കുന്നത് എന്ന് നോക്കാം ..
ആദ്യം അനുയോജ്യമായ രണ്ടു ചിത്രങ്ങള്‍  ഉണ്ടാക്കേണ്ടതുണ്ട് ..  ഫോട്ടോഷോപ്പില്‍ രണ്ടു  ബട്ടണ്‍ ഉണ്ടാക്കിയാലും മതിയാകും ... അതിനു  വളരെ എളുപ്പത്തില്‍ സഹായകമായ വിവരങ്ങള്‍  പോസ്റ്റിന്റെ   താഴെ കൊടുത്തിട്ടുള്ള ഫോട്ടോഷോപ്പ്  സ്കൂളില്‍ കിട്ടും ..

തയ്യാറാക്കിയ ചിത്രങ്ങള്‍  ഏതെങ്കിലും ഒരു സൌജന്യമായി ഹോസ്റ്റ് ചെയ്തു ലിങ്ക് തരുന്ന സൈറ്റില്‍
(ഉദാഹരണം :tinypic.com, photobucket.com)
അപ്‌ലോഡ്‌ ചെയ്ത ശേഷം താഴെ കാണുന്ന   കോഡില്‍ മഞ്ഞ കളറില്‍   കൊടുത്തിരിക്കുന്ന  ഭാഗത്ത്‌  മാറ്റങ്ങള്‍  വരുത്തി  ഒരു HTML/Javascript  വിട്ജെറ്റില്‍     കൊടുത്താല്‍ മതിയാകും .
=====================================================================

<style>/* twitter widget */
.twitter {
width: 99px;
height: 110px;
display: block;
float: left;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCrzlPsL7X8hTreb4QQAiV49_ztv-aGTdvTSR6L4myObWa3rqeH_lXBGd2DEXPA1CwXHmc_Rj8c6gZ2f-OsA-GaUfYYNGkmQIFcgugodNv6VyDYTDFFkRmjFsSnKfV-EerwTUJJORb43zB/s1600/footertwitter.gif") no-repeat;
}
.twitter:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikllItUSZck3RV7vctUihd2ocq9FYI0CZjymsKfpY4ezzLyNSJzSzIeB1jzlZ125b3XlvplUDsDPU-EVpWN4du7S0rpdSpSAjF_6nPVGSLA1gBdeA0mC1hvUZqvtEQZT5UKuCLvlIi4mYV/s1600/footertwitterhover.gif") no-repeat;
}
</style>
<div id=twitter'>
<a class='twitter' href='http://www.twitter.com/chiptoo' target ='_blank'>
</a></div>

==================================================================
മഞ്ഞ കളറില്‍ ആദ്യം കൊടുത്തിരിക്കുന്ന  ഭാഗത്ത്‌    സാധാരണ ചിത്രത്തിന്റെ ലിങ്കും  (അല്‍പ്പം മങ്ങിയത് ആയാല്‍ നന്നായിരിക്കും )  രണ്ടാമത് മഞ്ഞ കളര്‍ കൊടുത്തിരിക്കുന്ന ഭാഗത്ത്‌  കമ്പ്യൂട്ടര്‍ മൗസ് വെക്കുമ്പോള്‍ വരണമെന്ന് നമ്മള്‍ ആഗ്രഹിക്കുന്ന ചിത്രത്തിന്റെ ലിങ്കും  കൊടുക്കുക

മൂന്നാമത് മഞ്ഞ നിറത്തില്‍ കാണുന്ന ഭാഗത്ത്‌ ചിത്രത്തില്‍ ക്ലിക്ക് ചെയ്യുമ്പോള്‍ ലഭിക്കേണ്ട ബ്ലോഗിന്റെയോ , മറ്റു സൈറ്റ് കളുടെയോ  ലിങ്ക് കൊടുക്കുക

 നമ്മള്‍ നിര്‍മ്മിച്ച ചിത്രത്തിന് അനുസരിച്ച്  നീളവും വീതിയും  ക്രമീകരിക്കുവാന്‍ കോഡില്‍ കൊടുത്തിട്ടുള്ള  ഈ ഭാഗത്ത്‌  വേണ്ട മാറ്റങ്ങള്‍ നല്‍കാം  .

width: 99px;

height: 110px;

താഴെ കാണുന്ന  ബട്ടണ്‍ ക്ലിക്ക്  ചെയ്‌താല്‍ എങ്ങനെ ഫോട്ടോഷോപ്പില്‍ ഒരു ബട്ടണ്‍ നിര്‍മ്മിക്കാം എന്ന് ലളിതമായി പഠിക്കാം

If you enjoyed this post, make sure you subscribe to
the articles rss feeds
to receive new
posts in a reader or via email.

THIS POST WAS FILED UNDER: ... , image link , widget