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

சென்ற இடுகையில் பிளாக்ஸ்பாட்டில் எவ்வாறு இணையுருக்களை இணைப்பது என்ற செய்முறையில் .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 பாருங்கள்.

படம்-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 பாருங்கள்.

படம்-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 பாருங்கள்.

படம்-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 -ஐ அழுத்தி சேமித்து விடவும். இப்போது உங்கள் பிளாக்ஸ்பாட்டை நீங்கள் இணைக்க விரும்பிய எழுத்துருக்கள் இணைக்கப்பட்டு புதுபொலிவுடன் தெரிவதை காணலாம்.

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

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