செவ்வாய், 27 மே, 2014

உங்கள் பிளாக்ஸ்பாட்டில் அழகான இணையுரு(WebFont) எழுத்துக்களை பயன்படுத்த பூச்சரத்தின் புதிய வசதி அறிமுகம் - [பாகம்-2]

Image

சென்ற இடுகையில் பிளாக்ஸ்பாட்டில் எவ்வாறு இணையுருக்களை இணைப்பது என்ற செய்முறையில் .post-body என்ற div ன் எழுத்துருவை எவ்வாறு மாற்றுவது எனப்பார்த்தோம்.

.post-body {
line-height: 1.4;
font-size: 110%;
position: relative;
font-family:DroidSansReg,Arial;
}


இனி மற்ற DIV களில் உள்ள எழுத்துருக்களை எவ்வாறு மாற்றுவது என பார்ப்போம். அதற்கு முன் பூச்சரம் பகிரும் CSS கோப்பில் என்னென்ன எழுத்துருக்கள் உள்ளன அவற்றின் பெயர் என்ன என்று தெரிந்துகொண்டால் HTML நிரலை மேலும் எடுவு(Edit) செய்ய எளிமையாக இருக்கும்.


வ.எண் எடுத்துக்காட்டு எழுத்துருவின் பெயர்
1தமிழ்இணையுருஎழுத்துSundaram-01
2தமிழ்இணையுருஎழுத்துSundaram-02
3தமிழ்இணையுருஎழுத்துSundaram-03
4தமிழ்இணையுருஎழுத்துSundaram-05
5தமிழ்இணையுருஎழுத்துSundaram-07
6தமிழ்இணையுருஎழுத்துSundaram-08
7தமிழ்இணையுருஎழுத்துSundaram-10
8தமிழ்இணையுருஎழுத்துTMOTPTB_Ship
9தமிழ்இணையுருஎழுத்துTMOTCNB_Ship
10தமிழ்இணையுருஎழுத்துDroidSansReg
11தமிழ்இணையுருஎழுத்துKarlaUprightReg
12தமிழ்இணையுருஎழுத்துLohitReg
13தமிழ்இணையுருஎழுத்துNotoSansReg
14தமிழ்இணையுருஎழுத்துTMOTSMB_Ship
15தமிழ்இணையுருஎழுத்துDINAKARAN2WRegular
16தமிழ்இணையுருஎழுத்துSUNDARAM0806Regular
17தமிழ்இணையுருஎழுத்துSUNDARAM0819Regular
18தமிழ்இணையுருஎழுத்துSUNDARAM0820Regular
19தமிழ்இணையுருஎழுத்துSUNDARAM0823Regular
20தமிழ்இணையுருஎழுத்துSUNDARAM0827Regular
21தமிழ்இணையுருஎழுத்துSUNDARAM0830Regular
22தமிழ்இணையுருஎழுத்துSUNDARAM1341Regular
23தமிழ்இணையுருஎழுத்துSUNDARAM1351Regular
24தமிழ்இணையுருஎழுத்துSUNDARAM2852Regular
25தமிழ்இணையுருஎழுத்துSUNDARAM3811Regular
26தமிழ்இணையுருஎழுத்துGISTTMOTAbhiramiBold
27தமிழ்இணையுருஎழுத்துGISTTMOTAmalaBold
28தமிழ்இணையுருஎழுத்துGISTTMOTApparBold
29தமிழ்இணையுருஎழுத்துGISTTMOTChanakyaBold
30தமிழ்இணையுருஎழுத்துGISTTMOTChanakyaNormal
31தமிழ்இணையுருஎழுத்துGISTTMOTChandraBold
32தமிழ்இணையுருஎழுத்துGISTTMOTHeenaBold
33தமிழ்இணையுருஎழுத்துGISTTMOTIlangoNormal
34தமிழ்இணையுருஎழுத்துGISTTMOTKannadasanNormal
35தமிழ்இணையுருஎழுத்துGISTTMOTKannagiBold
36தமிழ்இணையுருஎழுத்துGISTTMOTKalyaniBold
37தமிழ்இணையுருஎழுத்துGISTTMOTKamalBold
38தமிழ்இணையுருஎழுத்துGISTTMOTKamalNormal
39தமிழ்இணையுருஎழுத்துGISTTMOTKomalaBold
40தமிழ்இணையுருஎழுத்துGISTTMOTKrishnanBold
41தமிழ்இணையுருஎழுத்துGISTTMOTLalithaBold
42தமிழ்இணையுருஎழுத்துGISTTMOTLalithaNormal
43தமிழ்இணையுருஎழுத்துGISTTMOTMinaBold
44தமிழ்இணையுருஎழுத்துGISTTMOTNambiBold
45தமிழ்இணையுருஎழுத்துGISTTMOTNambiNormal
46தமிழ்இணையுருஎழுத்துGISTTMOTPadmaBold
47தமிழ்இணையுருஎழுத்துGISTTMOTParvathiBold
48தமிழ்இணையுருஎழுத்துGISTTMOTPattinatharBold
49தமிழ்இணையுருஎழுத்துGISTTMOTPattinatharNormal
50தமிழ்இணையுருஎழுத்துGISTTMOTSumanBold
51தமிழ்இணையுருஎழுத்துtau_elango_anjaliregular
52தமிழ்இணையுருஎழுத்துtau_elango_abiramiregular
53தமிழ்இணையுருஎழுத்துtau_elango_athithanregular
54தமிழ்இணையுருஎழுத்துtau_elango_asokanregular
55தமிழ்இணையுருஎழுத்துtau_elango_barathiregular
56தமிழ்இணையுருஎழுத்துtau_elango_bhoopalamregular
57தமிழ்இணையுருஎழுத்துtau_elango_dhanamregular
58தமிழ்இணையுருஎழுத்துtau_elango_cholaaregular
59தமிழ்இணையுருஎழுத்துtau_elango_guntalakesiregular
60தமிழ்இணையுருஎழுத்துtau_elango_gangaregular
61தமிழ்இணையுருஎழுத்துtau_elango_godavariregular
62தமிழ்இணையுருஎழுத்துtau_elango_jananiregular
63தமிழ்இணையுருஎழுத்துtau_elango_kalyaniregular
64தமிழ்இணையுருஎழுத்துtau_elango_kambanregular
65தமிழ்இணையுருஎழுத்துtau_elango_madhaviregular
66தமிழ்இணையுருஎழுத்துtau_elango_kapilanregular
67தமிழ்இணையுருஎழுத்துtau_elango_krishnaregular
68தமிழ்இணையுருஎழுத்துtau_elango_maruthamregular
69தமிழ்இணையுருஎழுத்துtau_elango_malyamarregular
70தமிழ்இணையுருஎழுத்துtau_elango_manimekalairegular
71தமிழ்இணையுருஎழுத்துtau_elango_mohanamregular
72தமிழ்இணையுருஎழுத்துtau_elango_mullairegular
73தமிழ்இணையுருஎழுத்துtau_elango_neelampariregular
74தமிழ்இணையுருஎழுத்துtau_elango_priyankaregular
75தமிழ்இணையுருஎழுத்துtau_elango_panchaliregular
76தமிழ்இணையுருஎழுத்துtau_elango_pavalamregular
77தமிழ்இணையுருஎழுத்துtau_elango_senguttuvanregular
78தமிழ்இணையுருஎழுத்துtau_elango_sabariregular
79தமிழ்இணையுருஎழுத்துtau_elango_sankararegular
80தமிழ்இணையுருஎழுத்துtau_elango_todiregular
81தமிழ்இணையுருஎழுத்துtau_elango_vasukiregular
82தமிழ்இணையுரு எழுத்துtau_elango_rewathyregular
83தமிழ்இணையுரு எழுத்து
tau_elango_raghamregular


மொத்தம் 83 வெவ்வேறு இணையுரு எழுத்துக்களை பூச்சரம் வழங்குகிறது. இந்த பட்டியல் தான் அண்மையில் திருத்தப்பட்ட பட்டியல்.




1) பிளாக்ஸ்பாட் பெயரின் எழுத்துருவை எவ்வாறு மாற்றுவது எனப்பார்ப்போம்.
 படம் -1 பாருங்கள்.

Zoom in (real dimensions: 973 x 209)
படம்-1


HTML நிரல்களில்

<Group description="Blog Title"
என்ற பகுதி எங்கு உள்ளது என கண்டுபிடிக்கவும்.

இதுபோல் இருக்கும்:
<Group description="Blog Title" selector=".header h1">
     <Variable name="header.font" description="Title Font" type="font"
         default="normal normal 36px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 36px  Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="header.text.color" description="Text Color" type="color" default="#ffffff"  value="#ffffff"/>
</Group>
இந்த நிரலில் default=" என ஆரம்பிக்கும் வரியில் நீங்கள் விரும்பும் இணையுரு(Webfont) பெயரை சேர்த்துவிடவேண்டும். இதோ இவ்வாறு

  <Group description="Blog Title" selector=".header h1">
     <Variable name="header.font" description="Title Font" type="font"
         default="normal normal 36px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 36px GISTTMOTKrishnanBold, Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="header.text.color" description="Text Color" type="color" default="#ffffff"  value="#ffffff"/>
   </Group>
நான் GISTTMOTKrishnanBold என்ற இணையுருவை இணைத்துள்ளேன். உங்களுக்கு பிடித்தமான எழுத்துருவை மேலே பட்டியலிட்டுள்ள அட்டவணையில் இருந்து தேர்ந்தேடுத்துகொள்ளவும்.



2)அடுத்து இடுகையின் (Post) தலைப்பில் உள்ள எழுத்துருவை மாற்றலாம்.
 
படம்-2 பாருங்கள்.

Zoom in (real dimensions: 666 x 252)
படம்-2


HTML நிரல்களில் <Group description="Post Title" என்ற பகுதி எங்குள்ளது என கண்டுபிடிக்கவும்.

இதுபோல் இருக்கும்:
<Group description="Post Title" selector="h3.post-title, .comments h4">
     <Variable name="post.title.font" description="Title Font" type="font"
         default="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
   </Group>
இந்நிரலில் default="normal என்று ஆரம்பிக்கும் வரியில் நீங்கள் விரும்பும் இணையுரு(Webfont) பெயரை சேர்த்துவிடவேண்டும். இதோ இவ்வாறு
<Group description="Post Title" selector="h3.post-title, .comments h4">
     <Variable name="post.title.font" description="Title Font" type="font"
         default="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 18px GISTTMOTPadmaBold, Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
</Group>
நான் GISTTMOTPadmaBold என்ற இணையுருவை இணைத்துள்ளேன். உங்களுக்கு பிடித்தமான எழுத்துருவை மேலே பட்டியலிட்டுள்ள அட்டவணையில் இருந்து தேர்ந்தேடுத்துகொள்ளவும்.



3) பிளாக்ஸ்பாட்டில் இடுகைகளின் நிலவறையின் எழுத்துருவை மாற்றுவோம்.


படம்-3 பாருங்கள்

படம்-3


HTML நிரல்களில் <Group description="Page Text" என்ற பகுதி எங்குள்ளது என கண்டுபிடிக்கவும்.

இதுபோல் இருக்கும்:
<Group description="Page Text" selector="body">
<Variable name="body.font" description="Font" type="font"
         default="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#333333" value="#333333"/>
 </Group>
இந்நிரலில் default="normal என்று ஆரம்பிக்கும் வரியில் நீங்கள் விரும்பும் இணையுரு(Webfont) பெயரை சேர்த்துவிடவேண்டும். இதோ இவ்வாறு
<Group description="Page Text" selector="body">
<Variable name="body.font" description="Font" type="font"
         default="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 15px DINAKARAN2WRegular, Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#333333" value="#333333"/>
 </Group>
நான் DINAKARAN2WRegular என்ற இணையுருவை இணைத்துள்ளேன். உங்களுக்கு பிடித்தமான எழுத்துருவை மேலே பட்டியலிட்டுள்ள அட்டவணையில் இருந்து தேர்ந்தேடுத்துகொள்ளவும்.



4) அடுத்து பிளாக்ஸ்பாட்டில் பக்கதலைப்புகளின் எழுத்துருவை மாற்றுவோம்.


படம்-4 பாருங்கள்.

Zoom in (real dimensions: 657 x 351)
படம்-4


HTML நிரல்களில் <Group description="Tabs Text" என்ற பகுதி எங்குள்ளது என கண்டுபிடிக்கவும்.

இதுபோல் இருக்கும்:
<Group description="Tabs Text" selector=".tabs-inner .widget li a">
     <Variable name="tabs.font" description="Font" type="font"
         default="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 15px  Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="tabs.text.color" description="Text Color" type="color" default="#ffffff" value="#ffffff"/>
     <Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="$(link.color)" value="$(link.color)"/>
</Group>
இந்நிரலில் default="normal என்று ஆரம்பிக்கும் வரியில் நீங்கள் விரும்பும் இணையுரு(Webfont) பெயரை சேர்த்துவிடவேண்டும். இதோ இவ்வாறு
<Group description="Tabs Text" selector=".tabs-inner .widget li a">
     <Variable name="tabs.font" description="Font" type="font"
         default="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 15px SUNDARAM0819Regular, Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="tabs.text.color" description="Text Color" type="color" default="#ffffff" value="#ffffff"/>
     <Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="$(link.color)" value="$(link.color)"/>
</Group>
நான் SUNDARAM0819Regular என்ற இணையுருவை இணைத்துள்ளேன். உங்களுக்கு பிடித்தமான எழுத்துருவை மேலே பட்டியலிட்டுள்ள அட்டவணையில் இருந்து தேர்ந்தேடுத்துகொள்ளவும்.



5) அடுத்து பிளாக்ஸ்பாட்டில் இடுக்கை(Widget) தலைப்புகளின் எழுத்துருவை மாற்றுவோம்.


படம்-5 பாருங்கள்.

படம்-5


HTML நிரல்களில் <Group description="Gadgets" என்ற பகுதி எங்குள்ளது என கண்டுபிடிக்கவும்.

இதுபோல் இருக்கும்:
<Group description="Gadgets" selector="h2">
     <Variable name="widget.title.font" description="Title Font" type="font"
        default="bold normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="bold normal 13px  Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="widget.title.text.color" description="Title Color" type="color" default="#888888" value="#888888"/>
 </Group>
இந்நிரலில் default="bold normal என்று ஆரம்பிக்கும் வரியில் நீங்கள் விரும்பும் இணையுரு(Webfont) பெயரை சேர்த்துவிடவேண்டும். இதோ இவ்வாறு
<Group description="Gadgets" selector="h2">
     <Variable name="widget.title.font" description="Title Font" type="font"
        default="bold normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="bold normal 13px tau_elango_rewathyregular, Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="widget.title.text.color" description="Title Color" type="color" default="#888888" value="#888888"/>
 </Group>
நான் tau_elango_rewathyregular என்ற இணையுருவை இணைத்துள்ளேன். உங்களுக்கு பிடித்தமான எழுத்துருவை மேலே பட்டியலிட்டுள்ள அட்டவணையில் இருந்து தேர்ந்தேடுத்துகொள்ளவும்.

இந்த வகையில் உருவாக்கப்பட்ட ஒரு மாதிரி பிளாக்ஸ்பாட் Click Here


 கடைசியாக மேலே சொன்ன அணைத்து மாற்றங்களையும் செய்தபின்பு HTML நிரலை பட்டியின் மேலே இருக்கும் Save Template என்ற button -ஐ அழுத்தி சேமித்து விடவும். இப்போது உங்கள் பிளாக்ஸ்பாட்டை நீங்கள் இணைக்க விரும்பிய எழுத்துருக்கள் இணைக்கப்பட்டு புதுபொலிவுடன் தெரிவதை காணலாம்.

இதுவரை உங்கள் பிளாக்ஸ்பாட்டில் எவ்வாறு இணையுரு எழுத்துக்களை பயன்படுத்துவது என்று பார்த்தோம். இதில் உங்களுக்கு ஏதேனும் சந்தேகங்களோ அல்லது உதவியோ தேவைப்பட்டால், தயங்காமல் இப்பதிவின் பின்னூட்டத்தின் வழியாகவோ அல்லது மின்னஞ்சல் முகவரி மூலமாகவோ தொடர்பு கொள்ளலாம்.

(குறிப்பு : இந்த வசதியை பயன்படுத்துவதால் பூச்சரத்தின் விளம்பரமோ விவரங்களோ உங்கள் பிளாக்ஸ்பாட்டில்  இடம்பெறுமோ என்ற ஐயம் வேண்டாம். இந்த வசதி பூச்சரத்தில் இருந்து தனித்து வைக்கப்பட்டுள்ளது. இது பூச்சரத்தின் விளம்பர பதிவு இல்லை, தமிழை உங்கள் ப்ளாக்ஸ்பாட்களில் அழகுற செய்யும் விளம்பரம் தான். முடிந்தவரை மற்ற தமிழ் நண்பர்களுக்கும் தெரியப்படுத்துங்கள் அல்லது இந்த இடுகையை பகிருங்கள்...... நன்றி )
பின்னுட்டங்களை பார் : OR

0 முன்னிகை :

கருத்துரையிடுக