பதிவுகளில் திரட்டிகளை அழகாய் அடுக்குவோம்!!

வலைப்பூக்களில் திரட்டிகளின் ஓட்டுப்பட்டைகள் ஒழுங்கு இல்லாமல் இருக்கா? அவற்றை அழகாய் அடுக்குவோம்!

    பதிவர்கள் எழுதும் பதிவுகளைப் பிற பதிவர்களிடமும், வாசகர்களிடமும் கொண்டு சேர்ப்பதில் பெரும் துணை புரிவன திரட்டிகள். தங்கள் பதிவுகளைப் பல தளங்களிலும் பரப்ப ஏதுவாக பதிவர்கள் பலரும் தங்கள் பதிவுகளில் திரட்டிகளின் ஓட்டுப்பட்டைகளை வைப்பது வழக்கம்..

    பெரும்பாலும் நாம் திரட்டிகளின் ஓட்டுப்பட்டைகளை நிரலாக மட்டுமே இணைப்பதால் , அவை ஒரே வரிசையில்  அமர்வது இல்லை.

 அவை ஒரே வரிசையில் அமர்ந்தால் எவ்வளவு அழகாய் இருக்கும்?

இதைப் பற்றி ஏற்கனவே சில பதிவர்கள் எழுதி இருக்கிறார்கள். எனினும், அந்த நிரலில் சிறு மாற்றம் செய்து அனைவருக்கும் பயன்படி இதை எழுதுகிறேன்.
  

1. முதலில் உங்கள் டெம்பிளேட்டை  ஒரு காப்புப்படி (Backup) எடுத்துக்கொள்ளவும். 

• பழைய பிளாகர்  இடைமுகம் எனில், Blogger-->Design-->Edit HTML செல்லவும். அங்கிருக்கும் "Download Full Template " ஐச் சொடுக்கி தரவிறக்கம் செய்து கொள்ளவும்
• புதிய பிளாகர்  இடைமுகம் எனில், Blogger-->Template செல்லவும். அங்குள்ள 'Backup/Restore' ஐ அழுத்தி தரவிறக்கம் செய்து கொள்ளவும்

2. HTML தொடுப்பானிற்குச் செல்லவும்

• பழைய பிளாகர்  இடைமுகம் எனில், அதே பக்கத்தில் இருக்கவும்
• புதிய பிளாகர்  இடைமுகம் எனில், "Edit HTML" ஐச் சொடுக்கி வரும் எச்சரிக்கைப் பெட்டியில் "Continue" என்பதை அழுத்தவும்

3. "Expand Widget Templates" என்று இருக்கும் பெட்டியில் டிக் செய்யவும்

4. நீங்கள் ஏற்கனவே திரட்டிகளின் ஓட்டுப்பட்டைகளை நிறுவி இருந்தால்       அவற்றை நீக்கவும். புதிதாய் நிறுவ நினைப்பவர்களுக்கு இது தேவை இல்லை. நீக்கவேண்டிய நிரல்கள் இதோ:

•  முகப்புத்தகம் (Facebook) :

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:310px; height:25px;'/>

• ட்விட்டர் (Twitter):

 <a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

•  கூகிள் பிளஸ் (Google+):

<!-- Place this tag where you want the +1 button to render -->
<g:plusone annotation='inline'/>

<!-- Place this render call where appropriate -->
<script type='text/javascript'>
  window.___gcfg = {lang: &#39;en-GB&#39;};

  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

•  இன்ட்லி (Indli):

 <script type='text/javascript'> button=&quot;hori&quot;; lang=&quot;ta&quot;; submit_url =&quot;<data:post.url/>&quot; </script> <script src='http://ta.indli.com/tools/voteb.php' type='text/javascript'> </script>

• தமிழ்10 :

 <script src='http://tamil10.com/submit/evb/button.php' type='text/javascript'> </script>

•  யுடான்ஸ்:

<script expr:src=' &quot;http://udanz.com/tools/services.php?url=&quot; + data:post.url + &quot;&amp;adncmtno=&quot; + data:post.numComments + &quot;&amp;adnblogurl=&quot; + data:blog.homepageUrl + &quot;&amp;photo=&quot; + data:photo.url ' language='javascript' type='text/javascript'/>

•  ஈகரை

 <script src='http://eegarai.com/net/modules/buttons/buttons.js' type='text/javascript'/>
<a class='PliggButton PliggLarge' expr:href='data:post.url' expr:title='data:post.title'>
<div style='display:none'><data:post.body/></div></a>

• இனியதமிழ்

<script type='text/javascript'><br/> submit_url =&quot;<data:post.url/>&quot;<br/> </script><br/> <script src='http://iniyatamil.striveblue.com/bookmarks/evb/button.php' type='text/javascript'/>

           இது தவிர வேறு எதுவும் திரட்டி பட்டைகளை நிறுவியிருந்தால், நீக்கிக் கொள்ளவும். இதுபோலவே, எல்லா திரட்டி பட்டைகளும் script type='text/javascript' என்கிற வரி எங்கேனும் வரும்.

5.  <div class='post-footer'> என்கிற வரியைத் தேடவும்.

6. அதற்கு கீழே கீழ்காணும் வரிகளை உள்ளிடவும்:

<div class='post-footer-line post-footer-line-001'>
<span class='voting'>
<table border='0' bordercolor='#000000' cellpadding='4' cellspacing='4' style='background-color:#CCFFFF' width='400'>
<tr>

</tr>
</table></span>  </div>

7. <tr> மற்றும் </tr> ஆகியவற்றிற்கு இடையே, புதிதாய் ஒரு வரி <td> </td> அடிக்கவும். அதற்குள் ஒரு ஓட்டுப்பட்டையின் நிரலை உள்ளிடவும். (நிரலிற்கு Step 4  பார்க்கவும்)

<td>
நிரல்
</td>

உதாரணத்திற்கு நீங்கள் twitter நிரலை  இட்டால்:

<div class='post-footer-line post-footer-line-001'>
<span class='voting'>
<table border='0' bordercolor='#000000' cellpadding='4' cellspacing='4' style='background-color:#CCFFFF' width='400'>
<tr>

<td> 
<a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>  
</td>

</tr>
</table></span>  </div>

8. Step 7  போல ஒவ்வொரு பட்டைக்கும் ஒரு <td> </td> எழுதி அதற்குள் நிரலை இடவும்.

9. அனைத்து ஓட்டுப்பட்டைகலையும் இட்ட பின், கீழே உள்ள "Save Template" என்பதனை அழுத்தி சேமிக்கவும்

10. இப்போது பிளாகருக்குச் சென்று பார்த்தால் திரட்டிகள் அழகாய் ஒரே வரிசையில் இருக்கும்.

பி.கு :

* இரண்டு ஓட்டுப்பட்டைகளை இணைத்திருந்தால் கோடிங் இப்படி இருக்கும்
(உதாரணம்  :  இன்ட்லி, தமிழ்10):

<div class='post-footer-line post-footer-line-001'>
<span class='voting'>
<table border='0' bordercolor='#000000' cellpadding='4' cellspacing='4' style='background-color:#CCFFFF' width='400'>
<tr>

<td><script type='text/javascript'> button=&quot;hori&quot;; lang=&quot;ta&quot;; submit_url =&quot;<data:post.url/>&quot; </script> <script src='http://ta.indli.com/tools/voteb.php' type='text/javascript'> </script></td>

<td><script src='http://tamil10.com/submit/evb/button.php' type='text/javascript'>
</script></td> 
</tr>
</table></span>  </div>

* நீங்கள் எந்த வகையான டெம்பிளேட்டை வைத்து இருந்தாலும், இதை உள்ளிடலாம். எனவே, டெம்பிளேட் பிரச்சனை இல்லை.

* பட்டையினை <div class='post-footer'> என்கிற பகுதிக்குள் எங்கு வேண்டுமென்றாலும் வைக்கலாம்!!  


* வரிசையின் பண்புகளை  மாற்ற

table border='0' bordercolor='#000000' cellpadding='4' cellspacing='4' style='background-color:#CCFFFF' width='400'

என்பதில் உள்ளவற்றை மாற்றிப் பார்க்கலாம்

* திரட்டிகளை அழகாய் அடுக்குவதற்குத் தேவையான நிரலிற்கு வழிகாட்டியமைக்கு தமிழ்வாசி பிரகாஷ் அவர்களுக்கும், "கற்போம்" இதழிற்கும் நன்றிகள் பல!! 

சந்தேகம் இருந்தாலோ, நிரலில் எதுவும் பிழை இருந்தாலோ, பின்னூட்டத்தில் தெரிவிக்கவும்.. சரி செய்கிறேன்!

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