முதன்மை உள்ளடக்கத்திற்குச் செல்

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



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

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

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


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

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'

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

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

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

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

கருத்துகள்

  1. நன்றி அருண்!

    வலைப்பூப் பதிவர்களுக்கு மிகவும் பயனுள்ளதாக இருக்கும் என்பதில் சந்தேகம் இல்லை.

    பதிலளிநீக்கு
  2. பதிவுக்கு நன்றி உங்கள் சேவை தொடர இந்த அன்புவின் வாழ்த்துக்கள்

    பதிலளிநீக்கு
  3. உங்கள் பதிவுக்கு மிக்க நன்றி உங்களுக்காக எனது ஒரு பதிவு அவசியம் பாருங்கள்:-
    http://naveensite.blogspot.in/2012/06/blog-post.html

    பதிலளிநீக்கு
  4. அருமை////////////
    நன்றி -------------

    நல்வரவு
    http://dyficdm.blogspot.in/2012/10/blog-post_5374.html

    பதிலளிநீக்கு

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

நீங்க என்ன சொல்றீங்க?

இந்த வலைப்பதிவில் உள்ள பிரபலமான இடுகைகள்

மின்னஞ்சல் முகவரி (ஈமெயில் ஐடி- Email ID) உருவாக்குவது எப்படி?

மின்னஞ்சல் முகவரி உருவாக்குவது எப்படி என்று சொல்லித்தரப் போறேன்..  " ஈமெயில் ஐடி உருவாக்கத் தெரியாதவன் தான் வந்து உன் பிளாகைப் படிக்கிறானாக்கும்?" "நாலு பேருக்கு நல்லதுன்னா எதுவுமே தப்பில்ல.. ஆனா, இது ரொம்ப தப்பு!!" "தெரியாத்தனமா நீ நல்லா (??!!) எழுதுறன்னு நினைச்சு படிக்க வந்துட்டேன்.. அதுக்காக இப்படியா?" எல்லாரும் கொஞ்சம் பொறுங்க!!!! பிளாஷ்பேக் போகணும்னா ரொம்ப தேவையானது.......... கொசுவர்த்தி சுருள்... அதைப் பத்த வைக்கிறதுக்குள்ள இப்படியா!! இப்ப கொஞ்சம் பின்னோக்கிப் போவோமா!! ************** 2004 ஆம் ஆண்டு..   பொதிகையின் எதிரொலி நிகழ்ச்சியில் வந்த மடல்களைப் பிரித்து படித்து கொண்டிருந்தனர். அதில் வந்திருந்த ஒரு மடலை மிகவும் ஆர்வமாகப் படித்தார் தொகுப்பாளினி. "பொதிகையில் வரும் தகவல் தொழில்நுட்பம் மிகவும் பயனுள்ளதாக உள்ளது. நிகழ்ச்சியில் மின்னஞ்சல் உருவாக்குவது எப்படி என செயல்முறைப் படுத்திக் காட்டினால் என் போன்ற கிராமப்புற மாணவர்கள் பயன்பெறுவார்கள்"  "நல்ல விஷயம். அடுத்த நிகழ்ச்சியில் இதைச் செயல்படுத்தப் பார்க்கி

வண்டி... வண்டி... ரயில் வண்டி

             என்ன தான் சொந்தமாக கார், பைக் என்று வைத்திருந்தாலும், ரயிலில் செல்லும் பயணமே அலாதியானது.  ரயிலில்  பயணம் செய்தால், அதிக கட்டணம் இன்றி பயணம் செய்யலாம். மேலும், உடலுக்கு அதிக சோர்வு இல்லாது பயணம் செய்யலாம். எனவே தான், தொலைதூரப் பயணங்களுக்கு மக்கள் ரயில் பயணத்தையே அதிகம் விரும்புகிறனர்.    சென்னை போன்ற மாநகரங்களைப் பொறுத்தவரை, புறநகர் ரயிலில் சென்றால், வாகன நெரிசலில் மாட்டாமல் தப்பிச் செல்லலாம். விரைவாக செல்ல வேண்டிய இடத்திற்குச் செல்லலாம். எனவே, புறநகர் பயணங்களுக்கும் மக்கள் இயன்ற அளவு ரயிலைப் பயன்படுத்துகிறனர்.    சரி, ரயிலைப் பற்றிய இந்த பதிவில் என்ன சொல்லப் போறேன்? "ரயில் இஞ்சின்" என்பதற்குத் தமிழாக்கம் தொடர் வண்டி இழுபொறி . அனைவரும் எளிதில் படிப்பதற்காக ரயில் இஞ்சின் என்றே எழுதுகிறேன்.  ரயிலில் பயணம் செய்யும் அன்பர்கள் யாராவது ரயிலின் இஞ்சினைக் கவனித்திருக்கிறீர்களா?  ஒவ்வொரு இஞ்சினிலும் "WDM2", "WAP4" போன்று ஒரு குறியீட்டினை எழுதி இருப்பார்கள்!! அப்படி என்றால் என்ன அர்த்தம்?     முதல் எழுத்து: முதல் எழுத்து ரயில் எ

நாசாவுக்கே தண்ணி காட்டிய திருநள்ளாறு ? (நம்பாதீங்க - பகுதி 2)

நம்பாதீங்க - பகுதி 2 முன்குறிப்பு: இந்த பதிவின் நோக்கம் உண்மையை உரைப்பதே. எந்த மதத்தையும் நம்பிக்கையையும் புண்படுத்துவது நோக்கமல்ல!! இது "நாசாவுக்கே தண்ணிகாட்டிய திருநள்ளாறு!" பற்றிய கதை!! கதை இதோ: இன்று பல நாடுகள் செயற்கைகோள்களை விண்வெளிக்கு அனுப்பி வருகின்றன. அவற்றில் செல்போன் பயன்பாடு, ராணுவ பயன்பாடு, உளவு என பல்வேறு காரணங்களுக்காக பயன்படுத்தப்படுகிறது. சில வருடங்களுக்கு முன்பு அமெரிக்க செயற்கைகோள் ஒன்று பூமியின் குறிப்பிட்ட பகுதியை கடக்கும் போது மட்டும் 3 வினாடிகள் ஸ்தம்பித்துவிடுகிறது. 3 வினாடிகளுக்கு பிறகு, வழக்கம்போல் வானில் பறக்க ஆரம்பித்து விடுகிறது. எந்தவித பழுதும் அதன் செயற்கைகோளில், அதன் கருவிகளில் ஏற்படுவதில்லை. இந்த சம்பவம் நாசாவிற்கு அதிர்ச்சி கலந்த ஆச்சரியத்தை அளித்தது. இது எப்படி சாத்தியம்??? - என்பதை ஆராய்ந்து, கிடைத்த முடிவு நாசாவை மட்டுமல்ல, உலகையே மிரள வைத்தது. ஆம்! எந்த ஒரு செயற்கைகோளும் பூமியில் இந்தியாவின்-தமிழ்நாடு அருகில் உள்ள புதுச்சேரி- திருநள்ளாறு ஸ்ரீ தர்ப்பாரண்யேஸ்வரர் கோவிலுக்கு மேல் நேர் உள்ள வான்பகுதியை கடக்கும