Thursday 29 October 2009

இழு நீள் சுட்டி Drop Down Menu

இதைபோன்ற drop down menu உங்கள் பதிவுகளுக்கும் வேண்டுமா. labels தான் இருக்கே என்றாலும், labels-சை கிளிக் செய்தால் வரிசையாக ஒன்றன் கீழ் ஒன்றாக உங்கள் பதிவுகள் அலுப்பைத் தரக்கூடும். அதற்குப் பதிலாக title/தலைப்பு வாரியாக இப்படி தொகுத்துக் கொண்டால் ஒரு நிலையில் உங்களுக்கே கூட இது பிரயோஜனமாக இருக்கலாம்.

முதலில் உங்கள் பதிவுகளின் title மற்றும் link இரண்டையும் எப்படி சுலபமாக copy செய்வது என்று பார்க்கலாம்.










  1. மேலே படத்தில் காட்டியபடி உங்கள்  blog archive-வை அப்படியே select செய்து ஒரு excel worksheet-டில் column A-வில் copy-paste செய்யவும்.
  2. column-B-யில் =getURL(A1)ன்ற formula-வை type செய்தால், உங்கள் post-டின் hyperlink மட்டும் தனியாக வந்து விடும். கீழுள்ள அடுத்தடுத்த cell-களில் இந்த formula-வை copy paste செய்யவும்.
  3. இப்போது column-A-வை copy செய்து Column-C-யில் paste special, values ஆக paste செய்யுங்கள். உங்கள் தலைப்பு மட்டும் தனியாக வந்து விடும்.
  4. column D-யில் கீழ்க்கண்டவாறு formula-க்களை நிரப்பவும்.

    =CONCATENATE("<#option value="""#,B68,"/"/#>",C68)
    இதில் உள்ள #களை நீக்கி விட்டு type செய்யவும். இந்தப் பதிவில் html தகராறு செய்வதால், # include செய்யுமாறு ஆயிற்று. சிரமத்திற்கு வருந்துகிறேன்.
     

    இப்போது column D-யில் இந்த மாதிரி ஒரு code வந்திருக்கும்.
    <#option value="http://vidhoosh.blogspot.com/2009/10/blog-post_03.html"/#>மேஜை
    (#களை நீக்கிப்பார்க்க)


இப்படி எல்லா posting-களையும் வகைபடுத்திய பின், அதை html code ஆக எப்படி மாற்றுவது. இதற்கும் ஒரு சுலபமான வழி உள்ளது.

உதாரணத்திற்கு உங்கள் வலைப்பூவில் கவிதை மற்றும் கதை என்ற label-கள் இருப்பதாக வைத்துக் கொள்ளலாம். dropdown-னில் முதல் வரியாக இந்த label இருந்தால்தான் உங்கள் கவிதைகளைத் தனியாகவும் கதைகளைத் தனியாகவும், தனித்தனி dropdown ஆக காட்ட முடியும்.
  1. முதலில் ஒரு notepad-டில் இந்த code-டை type செய்யவும். #select#> (# இல்லாமல் type செய்க) notepad-டை மறக்காமல் save செய்யவும். இது dropdown செய் என்பதற்கான கட்டளை ஆகும். 
  2. பின்பு உங்கள் dropdown menu-வின் அகல நீளத்தை உங்கள் sidebar-களின் அளவிற்கு ஏற்ப நிர்ணயம் செய்து கொள்ளுங்கள். அடுத்து இந்த code-டை type செய்யவும்.
    <#select onchange="location = '' +(this.options[this.selectedIndex].value);" style="width: 20em;#"> (# இல்லாமல் type செய்க)
    இதில் width: 20em என்ற இடத்தில் நீங்கள் அகலத்தை கூட்டியும் குறைத்தும் காட்டலாம்.
  3. அடுத்து வருவது உங்கள் பதிவுகளின் தொகுப்புப் பெயர் உதா: கவிதை என்றால் இப்படி code எழுதவும். <#option value=""http://vidhoosh.blogspot.com/"/#>கவிதை (# இல்லாமல் type செய்க) . இதில் என் blog பெயர் தெரியும் இடத்தில் உங்கள் blog address-சை தரவும். கவிதை என்ற இடத்தில் உங்கள் label இடவும்.
  4. உங்கள் excel worksheet-ட்டில் column-D யில் தெரியும் code-களை மட்டும் copy செய்து notepad-டில் இந்த code-டின் கீழ் paste செய்யவும்.
  5. கொஞ்சம் பொறுமையாக செயல்பட்டால், அதிகக் குழப்பம் இல்லாமல் உங்கள் labelகளையும், பதிவுகளையும் dropdown-ஆக எளிதில் மாற்றலாம். 
  6. உங்கள் notepad-டில் html code இப்போது இவ்வாறு இருக்கும்.
<#/select#>
<
#select onchange="location = '' +(this.options[this.selectedIndex].value);" style="width: 20em;"#>
<
#option value=""http://vidhoosh.blogspot.com/"/#>கவிதை
<
#option value="http://vidhoosh.blogspot.com/2009/10/blog-post_03.html"/#>மேஜை
(#களை நீக்கிப்பார்க்க)


இதன் கீழ் வரிசையாக ஒன்றன் கீழ் ஒன்றாக உங்கள் அனைத்து கவிதைகளின் codeகளையும் paste செய்யுங்கள்.
இதை அப்படியே உங்கள் blog layout ஆப்ஷனில் உள்ள ADD A GADGET-டில் இருக்கும் HTML/JavaScript box-சில் நிரப்பினால் அவ்வளவுதான் உங்கள் dropdown code தயார்.


செய்து பார்த்து அசத்துங்கள். வாழ்த்துக்கள்.


--விதூஷ்.




.







Monday 5 October 2009

ப்லாக் ஆதர் கமெண்டை எப்படி தனியாக காட்டுவது

===================================================================
Blog Author / Blog Owner - உங்கள் கமெண்ட்களை
தனியாகத் தெரிய வைக்க வேண்டுமா?
===================================================================
template-டில் எந்த மாற்றமும் செய்யும் முன், உங்கள் பழைய template-டை backup செய்து கொள்ளுங்கள். back up எப்படி செய்வது?

மேலே படத்தில் காட்டியபடி உங்கள் blog முதல் பக்கத்தில் customise என்ற லிங்கை க்ளிக் செய்யுங்கள்.
===================================================================


மேலே
படத்தில் காட்டிய பக்கம் வரும்.
edit html என்ற லிங்கை க்ளிக் செய்யுங்கள்.

===================================================================


expand widget templates
என்ற checkbox-ஸில் tick செய்யவும்.

===================================================================





download
full template என்ற லிங்கை க்ளிக் செய்து
உங்கள்
பழைய
template-டை backup செய்யவும்.

===================================================================

மேலே படத்தில் காட்டியவாறே, ctrl+f (find) கீக்களை (keys)
ஒரே
நேரத்தில் அழுத்தி,

]]></b:skin>

என்ற script-டை தேடுங்கள்.

===================================================================

]]></b:skin>
இந்தக் code-டுக்கு சரி மேலே கீழ்கண்ட script-டை

.author-comments {
background: #cccccc;
border: 2px dotted #e6e6e6;
padding: 5px;
}


copy-paste செய்யுங்கள்.

===================================================================

பிறகு இந்தக் script-டை தேடுங்கள். (find)


<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

===================================================================
இந்தக் script-டுக்குப் பிறகு கீழ்க்கண்ட ஐந்து வரிகள் இருக்கும்.
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>


இந்த ஐந்து வரிகளுக்குக் கீழ், இந்தக் script-டை copy-paste செய்யுங்கள்.


<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>

<b:else/>




===================================================================
இதற்கு அடுத்த வரிகள் இவ்வாறு இருக்கும்.
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

இந்த
ஏழு வரிகளுக்குப் பிறகு, இந்தக் script-டை copy-paste செய்யுங்கள்.

</b:if>

===================================================================


template-டை save செய்யுங்கள்.

===================================================================





இப்போது உங்கள் (author) கமெண்ட் தனியாகத் தெரியும்.

===================================================================

comment-டில் background நிறம் மாற்ற வேண்டும் என்றால், நிறங்களின் code அறிய இந்த லிங்கில் பாருங்கள். உங்களுக்கு வேண்டிய நிறங்களின் code-டை மாற்றி அமைத்து உங்கள் விருப்பம் போல வடிவமையுங்கள்.

.comment-body-author {
background: #F5EDE3; /* Background color*/
color: #000000; /* Text color*/

உங்கள் கமெண்ட்டுக்குப் பின்னால் ஏதாவது படம் வர வேண்டும் என்றால் நிறத்துக்கான code-துக்குப் பதில் url-லைக் கொடுக்கவும், இப்படி --

background: url(http://DIRECT_LINK_OF_THE_IMAGE.jpg) ;



=====

.