Mar 13, 2013

ப்ளாக்கர் டெம்ப்ளேட்டில் CSS நிரல்களைச் சேர்க்க எளிய வழி

நமது ப்ளாக் வலைப்பூவை வடிவமைக்க,மெருகேற்ற டெம்ப்ளேட்டில் (Blogger Template) நிரல்களை மாற்றுவதும் சேர்ப்பதும் கடினமான வேலையாகவே இருக்கும். ப்ளாக்க்ர் டெம்ப்ளேட்டில் வலை வடிவாக்க நிரல் மொழிகளான HTML, CSS, JavaScript போன்றவை பயன்படுத்தப்படுகின்றன. வெறும் HTML மட்டும் பிளாக்கர் தளத்திற்கான அழகைக் கொடுத்து விடாது. CSS எனப்படும் Cascading Style Sheet தான் ப்ளாக்கின் வடிவமைப்பைச் சிறப்பாக மாற்றுகின்றன.


உதாரணத்திற்கு கீழே இருக்கும் CSS நிரல் வரிகளில் ப்ளாக்கின் பின்புற வண்ணத்தை (Background Color) மாற்றுவதற்குப் பயன்படும்.

<style type="”text/css”">
body{background:#f2f2f2;}
</style>

இதைப் போல ப்ளாக்கர் டிசைன் வேலைகளுக்கு நாம் CSS நிரல்களைச் சேர்ப்போம்; மாற்றுவோம். HTML பற்றித் தெரிந்தவர்களுக்கு நேரடியாக டெம்ப்ளேட்டில் சென்று கோடிங் மாற்றுவது எளிதாக இருக்கும். சிலர் பேக்கப் (Blogger backup) எடுக்காமல் எங்கேயாவது மாற்றி விட்டு அவஸ்தைப் படுவார்கள். இந்த பிரச்சினைக்குத் தீர்வு தான் Blogger Custom CSS வசதி.

இதன் மூலம் நீங்கள் ப்ளாக்கர் டெம்ப்ளேட்டில் Edit Html கொடுத்து போகத் தேவையில்லை. ப்ளாக்கர் கோடிங்கில் கையே வைக்கத் தேவையில்லை. ப்ளாக்கர் Custom CSS வசதி மூலம் உங்களின் புதிய CSS நிரல்களைச் சேமிக்க இடம் தருகிறது. எந்தவொரு பிரச்சினையும் இன்றி வெறும் காப்பி பேஸ்ட் செய்தாலே போதும். உடனேயே மாற்றப்படும் ப்ளாக் எப்படி காட்சியளிக்கும் என்று Preview கீழேயே பார்த்துக் கொள்ள முடியும். இதனால் இந்த முறை பாதுகாப்பானதாக இருக்கும்.

எப்படி CSS நிரல்களை ப்ளாக்கரில் சேர்ப்பது?

• உங்கள் வலைப்பூவின் Blogger Dashboard->Layout மெனுவிற்குச் செல்லவும். பின்னர் லேஅவுட்டின் மேல்பகுதியில் உள்ள Template Designer என்பதில் கிளிக் செய்யுங்கள்.


 • Template Designer பக்கம் திறக்கப்படும். அதில் இடதுபுறம் உள்ள Advanced -> Add CSS என்பதைக் கிளிக் செய்யுங்கள்.
simple way to add custom css in blogger

• அங்கே CSS நிரல்வரிகளைச் சேர்க்க ஒரு பெட்டி கொடுக்கப்பட்டிருக்கும். அதில் உங்கள் புதிய நிரல்களைச் சேர்த்து விட்டு Apply to Blog கொடுத்துச் சேமியுங்கள். அவ்வளவு தான்.

குறிப்புகள்:

1. நீங்கள் CSS வரிகளைச் சேர்க்கும் போது <style type="”text/css”"> என்று கொடுக்கத் தேவையில்லை. அது Edit Html முறையில் சென்றால் தேவைப்படும்.
2. இவை வேண்டாம் எனில் அழித்து விடலாம். இல்லையெனில் அடுத்து நீங்கள் ப்ளாக்கர் டெம்ப்ளேட் மாற்றும் வரை இருக்கும்.
3. முக்கிய விசயம் : டெம்ப்ளேட்டில் ஏற்கனவே இருக்கின்ற CSS பண்புகளுக்குக் கூட புதியதை இதில் சேர்க்கலாம். உதாரணத்திற்கு இந்த வரியைச் சேர்த்தால் ப்ளாக்கின் Background மாற்றப்படும்.
body{background:#f2f2f2;}
4. இங்கே JavaScript, HTML நிரல்களைச் சேர்க்க முடியாது. CSS Only.

10 comments:

  1. நண்பா கூகுள் அட்சென்ஸ் தளத்தில் இணைப்பது அதன் அனுமதி எவ்வாறு பெறுவது என்று கொஞ்சம் விளக்க முடியுமா? உங்கள் தளத்தில் அல்லது எனது மின்னஞ்சல் ஊடாக.. தங்கள் தொலைபேசி இலக்கத்ததை தர முடியுமா?
    huckgirl@yahoo.com

    ReplyDelete
  2. தகவலுக்கு நன்றிகள். முயற்சி செய்து பார்க்கிறேன்

    ReplyDelete
  3. பயனான பதிவு... மிக்க நன்றி

    ReplyDelete
  4. விளக்கம் அருமை...

    செய்து பார்க்கிறேன்... நன்றி...

    ReplyDelete
  5. பகிர்வுக்கு நன்றி..

    ReplyDelete
  6. எளிமையாக புரியும்படி எழுதியிருக்கிறீர்கள். நன்றி...

    ReplyDelete
  7. தகவலுக்கு நன்றிங்க...

    ReplyDelete
  8. கம்ப்யூட்டர் வாங்கும்போது கூடவே தந்தார்கள் டிரைவர் cd அதை கம்ப்யூட்டர்ல் cd யை வைத்து மூடியுடன்அதில் உள்ள ஆடியோ.வீடியோ.நெட்வொர்க்.யை எல்லாம்எப்படி இன்ஸ்ட்டால் செய்யவேண்டும் விளக்கமாக செல்லுவும் settingஉடன் செல்லுங்கள்

    ReplyDelete
  9. பகிர்வுக்கு நன்றி

    ReplyDelete