ഫോട്ടോ ബ്ലോഗുകൾ തുടങ്ങുവാൻ

ചിത്രങ്ങള്‍ മാത്രം പ്രസിദ്ധീകരിക്കുവാനുള്ള ഫോട്ടോബ്ലോഗുകള്‍ കണ്ടിട്ടില്ലേ? ഉദാഹരണങ്ങൾ എത്രവേണമെങ്കിലും ഇവിടെ കാണാം.

ഇവയിലെല്ലാം ബ്ലോഗിന്റെ അത്രയും വീതിയിലാവും ചിത്രങ്ങള്‍ ഉള്ളത് എന്നതു ശ്രദ്ധിച്ചല്ലോ. അതുതന്നെയാണ് അവയുടെ ഭംഗിയും. ഈ രീതിയില്‍ ചിത്രങ്ങള്‍ ബ്ലോഗില്‍ ഡിസ്പ്ലേ ചെയ്യുവാനായി ഒന്നുരണ്ടുകാര്യങ്ങള്‍ ശ്രദ്ധിക്കുവാനുണ്ട്. ഒന്നാമത്, ബ്ലോഗിന്റെ ടെമ്പ്ലേറ്റ് വീതിയുള്ളതാവണം. അത്തരം ഒരു ടെമ്പ്ലേറ്റ്, ഫ്രീയായി ബ്ലോഗ് ടെമ്പ്ലേറ്റ് കിട്ടുന്ന സൈറ്റുകളില്‍ നിന്ന് എടൂത്ത് നിങ്ങളുടെ ബ്ലോഗില്‍ കൊടുക്കുക. ഫോട്ടോബ്ലോഗുകൾക്ക് അനുയോജ്യമായ ടെമ്പ്ലേറ്റുകൾ ലഭിക്കുന്ന ഒരു സൈറ്റ് ഇതാ . അത്തരം സൈറ്റുകളിൽ നിന്ന് നിങ്ങൾക്ക് അനുയോജ്യമായ ടെമ്പ്ലേറ്റ് തെരഞ്ഞെടുക്കുക. ബ്ലോഗ് ബോഡി background കറുപ്പുനിറത്തിലായാൽ ചിത്രങ്ങളുടെ ഭംഗി വർദ്ധിക്കും. അതുകൊണ്ട് നിങ്ങൾ തെരഞ്ഞെടുത്ത ടെമ്പ്ലേറ്റിന്റെ ലേഔട്ട് സെറ്റിംഗിൽ പോയി (fonts and colours) അനുയോജ്യമായ വർണ്ണങ്ങൾ ബ്ലോഗിന്റെ വിവിധ ഭാഗങ്ങളിൽ സെറ്റ് ചെയ്യുക. പരീക്ഷണങ്ങൾ ആവാം.

ഇതുപോലെ background നിറം കറുപ്പാക്കിമാറ്റിയെടുത്ത എന്റെ ഫോട്ടോബ്ലോഗ് ഇവിടെയുണ്ട്.


ടെമ്പ്ലേറ്റ് സെറ്റ് ചെയ്തുകഴിഞ്ഞാൽ ഇനി ചിത്രം അപ്‌ലോഡ് ചെയ്യാം. അതിനു മുമ്പായി നിങ്ങൾ പ്രസിദ്ധീകരിക്കുവാനാഗ്രഹിക്കുന്ന ചിത്രം അനുയോജ്യമായ ഒരു ഗ്രാഫിക്സ് സോഫ്റ്റ്വെയർ ഉപയോഗിച്ച് റീസൈസ് ചെയ്യണം. 1200 pixel വീതിയൊക്കെ സ്ക്രീനിൽ കാണുന്നതിനു ധാരാളം മതിയാവും.


ചിത്രങ്ങൾ അപ്‌ലോഡ് ചെയ്യുന്നതെങ്ങനെ എന്ന അദ്ധ്യായത്തിൽ പറഞ്ഞവിധം ചിത്രം ബ്ലോഗിലേക്ക് അപ്‌ലോഡ് ചെയ്യുക. എന്നിട്ട് Edit Html mode ലേക്ക് പോകൂ. ഇനി ആ ചിത്രത്തിന്റെ കോഡ് ഒന്നു നോക്കൂ. ഒരു ഉദാഹരണം താഴെ നൽകുന്നു മാർക്ക് ചെയ്തിട്ടുള്ള ഭാഗങ്ങൾ പ്രത്യേകം ശ്രദ്ധിക്കുക.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjunErfqPw-RTtrYfDwlN_ge9MIbJeKPBEsee2ooNwkGslrAJUdnTgZNLJohOg7YYe2w_lk-3GOISrZG1k8XNpOxfq8gxGb8zYUk71Hhs5LmSpBtpDTJDpATaYFtVtxoRGyedOpNdO0_h5w/s1600-h/cj-6.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjunErfqPw-RTtrYfDwlN_ge9MIbJeKPBEsee2ooNwkGslrAJUdnTgZNLJohOg7YYe2w_lk-3GOISrZG1k8XNpOxfq8gxGb8zYUk71Hhs5LmSpBtpDTJDpATaYFtVtxoRGyedOpNdO0_h5w/s400/cj-6.jpg" alt="" id="BLOGGER_PHOTO_ID_5376326727136048178" border="0" /></a>



വിഡ്‌ത് = 400 px;
ഹൈറ്റ് = 300 px; ഇങ്ങനെ രണ്ട് കാര്യങ്ങള്‍ എഴുതിയിരിക്കുന്നത് ഡിലീറ്റ് ചെയ്യുക. px എന്നിവയ്ക്കുശേഷമുള്ള അര്‍ത്ഥവിരാമവും (;) ഡിലീറ്റ് ചെയ്യണം. കോഡിലെ മറ്റൊരു കാര്യങ്ങളും ഡിലീറ്റ് ചെയ്യരുത്. ഇനി കോഡില്‍ കുറേക്കൂടി താഴേക്ക് മാറി /s400/ എന്നെഴുതിയിരിക്കുന്നതുകാണാം. അത് /s800/എന്നാക്കുക. ഇനി പോസ്റ്റ് പബ്ലിഷ് ചെയ്തുനോക്കൂ. ചിത്രം ബ്ലോഗിന്റെ വീതിയില്‍ കാണാം.


ചിത്രത്തിന്റെ കോഡുകളിൽ വരുത്താവുന്ന മറ്റുചില മാറ്റങ്ങൾ നോക്കൂ.

ഉദാഹരണമായി ഒരു ചിത്രം താഴെ നൽകുന്നു.

ഈ ചിത്രത്തിന്റെ ഒറിജിനൽ വീതി 1015 പിക്സൽ, ഹൈറ്റ് 612 പിക്സൽ. ലാർജ് സൈസിൽ ബ്ലോഗറിലേക്ക് അപ്‌ലോഡ് ചെയ്തപ്പോൾ താഴെക്കാണും വിധം കിട്ടി. (ചിത്രത്തിൽ ക്ലിക്ക് ചെയ്താൽ ഒറിജിനൽ സൈസിൽ കാണാവുന്നതാണ്.

ഇതാണ് ഒറിജിനൽ കോഡ്.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeRApvNWJaIZo7MXrH6BIGl5fsTQeaMWt-Cpo3LD5S_3k9Stxf5i3N3BbH4OC55tPeDZjKCF8Kswe-x34ZOJVIG3xrGNEnFKAk8bc50mnGd0kIdwGtYYc_joirtk8-tHyY1MlPelLpsoBl/s1600-h/Bee1.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 269px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeRApvNWJaIZo7MXrH6BIGl5fsTQeaMWt-Cpo3LD5S_3k9Stxf5i3N3BbH4OC55tPeDZjKCF8Kswe-x34ZOJVIG3xrGNEnFKAk8bc50mnGd0kIdwGtYYc_joirtk8-tHyY1MlPelLpsoBl/s400/Bee1.jpg" alt="" id="BLOGGER_PHOTO_ID_5402801856957434162" border="0" /></a>

ഈ കോഡ് പബ്ലിഷ് ചെയ്യുമ്പോൾ ലഭിക്കുന്ന ചിത്രം താഴെ.





ഇനി ഈ കോഡിൽ നിന്ന് വിഡ്തും ഹൈറ്റും ഡിലീറ്റ് ചെയ്യുന്നു, /S800/ എന്നു മാറ്റുന്നു. കോഡ് താഴെക്കാണാം. അതിന്റെ റിസൽട്ട് എങ്ങനെയാണെന്ന് നോക്കൂ

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeRApvNWJaIZo7MXrH6BIGl5fsTQeaMWt-Cpo3LD5S_3k9Stxf5i3N3BbH4OC55tPeDZjKCF8Kswe-x34ZOJVIG3xrGNEnFKAk8bc50mnGd0kIdwGtYYc_joirtk8-tHyY1MlPelLpsoBl/s1600-h/Bee1.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeRApvNWJaIZo7MXrH6BIGl5fsTQeaMWt-Cpo3LD5S_3k9Stxf5i3N3BbH4OC55tPeDZjKCF8Kswe-x34ZOJVIG3xrGNEnFKAk8bc50mnGd0kIdwGtYYc_joirtk8-tHyY1MlPelLpsoBl/s800/Bee1.jpg" alt="" id="BLOGGER_PHOTO_ID_5402801856957434162" border="0" /></a>




ചിത്രം പേജിന്റെ വീതിയേക്കാൾ വലുതായിപ്പോയെന്നത് ശ്രദ്ധിക്കുമല്ലോ.

അടുത്ത ഉദാഹരണത്തിൽ Height എന്നതു മാത്രം ഡിലീറ്റ് ചെയ്തിട്ട് വിഡ്ത് നിങ്ങൾക്ക് ഇഷ്ടമുള്ള രീതിയിൽ മാറ്റാം. ഉദാഹരണത്തിനു ഈ ബ്ലോഗിന്റെ ബോഡിയുടെ വീതി 375 പിക്സൽ ആണ്. മുകളിലുള്ള കോഡിൽ വിഡ്ത് 375 എന്നു മാറ്റിയാൽ (/s800/ എന്നു മാറ്റണം) ചിത്രം ഈ ബ്ലോഗ് ബോഡിയുടെ അതേ വീതിയിൽ നിൽക്കുന്നതു കാണാം.

കോഡ് നോക്കൂ

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeRApvNWJaIZo7MXrH6BIGl5fsTQeaMWt-Cpo3LD5S_3k9Stxf5i3N3BbH4OC55tPeDZjKCF8Kswe-x34ZOJVIG3xrGNEnFKAk8bc50mnGd0kIdwGtYYc_joirtk8-tHyY1MlPelLpsoBl/s1600-h/Bee1.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 375 px; " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeRApvNWJaIZo7MXrH6BIGl5fsTQeaMWt-Cpo3LD5S_3k9Stxf5i3N3BbH4OC55tPeDZjKCF8Kswe-x34ZOJVIG3xrGNEnFKAk8bc50mnGd0kIdwGtYYc_joirtk8-tHyY1MlPelLpsoBl/s800/Bee1.jpg" alt="" id="BLOGGER_PHOTO_ID_5402801856957434162" border="0" /></a>

ഇതിന്റെ റിസൽട്ട് (ഈ ടെമ്പ്ലേറ്റിന്റെ വീതി കുറവായതിനാൽ ഇത് അത്ര ഫലവത്തായി കാണുന്നില്ല. എങ്കിലും 800 ൽ താഴെ പിക്സൽ വീതിയുള്ള ടെമ്പ്ലേറ്റുകളിൽ ചിത്രങ്ങൾ വശങ്ങളോട് ചേർന്ന് വലുപ്പത്തിൽ കാണുവാൻ ഇതു ചെയ്താൽ മതി).




മറ്റ് ഫോട്ടോ അപ്‌ലോഡിംഗ് സൈറ്റുകളിൽ നിന്ന്:

ഫോട്ടോബക്കറ്റ്, ഫ്ലിക്കർ പോലെയുള്ള സൈറ്റുകളിൽ ഫോട്ടോ അപ്‌ലോഡ് ചെയ്യുന്നവർ അവിടെനിന്ന് ലഭിക്കുന്ന എച്.ടിം.എം.എൽ കോഡ് ബ്ലോഗിലേക്ക് പേസ്റ്റ്ചെയ്താൽ മതിയാവും. Edit Html മോഡിൽ വേണം ഇങ്ങനെ കോഡ് പേസ്റ്റ് ചെയ്യേണ്ടത്. ഈ കോഡുകളിലും മേൽ‌പ്പറഞ്ഞ മാറ്റങ്ങൾ വരുത്താവുന്നതാണ്.