logo

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


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







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

തയ്യാറാക്കിയ ചിത്രങ്ങള്‍  ഏതെങ്കിലും ഒരു സൌജന്യമായി ഹോസ്റ്റ് ചെയ്തു ലിങ്ക് തരുന്ന സൈറ്റില്‍
(ഉദാഹരണം :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: , ,

  1. ഗുഡ് വടക്കേല്‍.............അറിവ് പകരുന്നവന്നും ...

    ReplyDelete
  2. @പഞ്ചാരക്കുട്ടന്‍

    കണ്ണാടി നോക്കിയപ്പോള്‍ എനിക്കും തോന്നി ..;)

    നന്ദി പഞ്ചാരക്കുട്ടന്.... വന്നതിനും വായിച്ചതിനും അഭിപ്രായം എഴുതിയതിനും ....വീണ്ടും വരുമല്ലോ ...:)

    ReplyDelete
  3. ബ്ലോഗ് നിര്‍മ്മാതാക്കള്‍ക്ക് വളരെ സഹായകരമായ ഒരു ബ്ലോഗാണിത്. വളരെ നന്ദി!

    ReplyDelete
  4. @CYRIL PALAKOTTIL

    നന്ദി CYRIL. വന്നതിനും വായിച്ചതിനും അഭിപ്രായം എഴുതിയതിനും ....വീണ്ടും വരുമല്ലോ ...:)

    ReplyDelete
  5. i like this very much.
    and ilke your great co-operative mind on the basis of blog.
    so whether iam hope more and more blog tricks from you...
    thanks very much....

    ReplyDelete
    Replies
    1. Thanks for your nice words ..keep in touch ...

      i will try ...:)

      Delete
  6. കൊള്ളാം വളരെ ഉപകാരം

    ReplyDelete

SELECT   A 'POST TITLE ' or 'LABEL' AND  C L I C K TO READ
====================================================================
Loading TOC. Please wait....

 
Like Us On Facebook
×
-Thanks- Malayalam Blog Help
Powered by Blogger.