ப்ளாக்கில் திரட்டிகளின் ஒட்டுபட்டைகள், சமூக தள இணைப்புகளை அழகாக இணைக்க - vote buttons version 2

ப்ளாக்கில் திரட்டிகளின் ஒட்டுபட்டைகள், சமூக தள இணைப்புகளை அழகாக இணைக்க - vote buttons version 2

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

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

முக்கியமான திரட்டிகள், மற்றும் சமூக தளங்களில் பட்டைகளை ஒரே இடத்தில் வரிசையாக இங்கேஇன்ட்லி, தமிழ்10, யுடான்ஸ், பேஸ்புக் லைக், கூகிள்ப்ளஸ், டிவிட்டர், பேஸ்புக் ஷேர் நிரலிகளை எப்படி எங்கே நிறுவுவது என பார்ப்போம். அதோடு நமது பேஸ்புக் பக்கம், கூகிள்ப்ளஸ் பக்கம், டிவிட்டர், RSS FEED ஆகியவற்றின் இணைப்புகளையும், மற்றவர்கள் மெயில் மூலம் நமது இடுகைகளை தொடரும் வகையில் அவர்கள் மெயில் ஐடியை பதிய MAIL SUBSCRIPTION BOX ம் இணைத்து ஒரே தொகுப்பாக நமது பிளாக்கில் வைக்க கீழ்க்கண்ட வழிகளை கையாள வேண்டும்.

முக்கிய குறிப்பு: 
நண்பர்களே, எனது Automatic Read More With Thumbnails என்ற பதிவில் readmore வசதியை எவ்வாறு இணைப்பது என பகிர்ந்துள்ளேன், இதை முதலில் நீங்கள் உங்கள் தளத்தில் இணைத்த பின்னர் இந்த பதிவில் கீழே பகிர்ந்துள்ள ஓட்டுப்பட்டைக்கான நிரலிகளை இணைக்கவும். வெறும் ஓட்டுப்பட்டைக்கான நிரலிகள் மட்டும் இணைத்தால் சில தவறுகள் வரும். எனவே, தவறுகளை தவிர்க்க readmore வசதியை இணைத்த பின் ஓட்டுபட்டையை இணைக்கவும்.

demo image

1. முதலில் DASHBOARD > DESIGN > EDIT HTML செல்ல வேண்டும்,

2. DOWNLOAD FULL TEMPLATE என்பதை கிளிக் செய்து அப்போதைய டெம்ப்ளேட்டை தரவிறக்கம் செய்ய வேண்டும். நாம் மாற்றம் செய்கையில் ஏதேனும் தவறு நேர்ந்தால் நமது வலைப்பூவை பழைய படி மீட்டெடுக்க வசதியாக இருக்கும்.

3. EXPAND WIDGET TEMPLATES டிக் செய்த பின்னர் ஏற்கனவே உள்ள இன்ட்லி, TAMIL10, உலவு, யுடான்ஸ், பேஸ்புக், கூகிள் ப்ளஸ், டிவிட்டர் நிரலிகளை நீக்கி விடவும்.

4. CTRL+F கொடுத்து </head> என்ற வரியை கண்டுபிடிக்க வேண்டும். கண்டுபிடித்த பின்னர் கீழ்க்கண்ட நிரலிகளை </head> முன்பாக இணைக்கவும்.

<style type='text/css'>.sub-box{width: 600px;background: #fff;padding: 2px 5px 7px 7px;border: 2px solid #000;border-radius: 15px;}.sub-box:hover{border-style:dashed; 2px solid: #389af2;}.followlinks h1{font-family:Cabin Condensed;font-weight: bold;color: #000;padding: 0px 0px 2px 40px;;font-size:17px;}.followlinks ul{font-family:Cabin Condensed;font-weight: bold;}.followlinks ul li{float:left;width:90px;padding-left:40px;margin:0 0 0 5px !important;line-height:35px !important;}.followlinks ul li a{font-size:20px !important;text-decoration:none;font-weight:normal;}.followlinks ul li.otrss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj16bc7e82NJLWABzatxmx6HUE-70SwDkYEeIcKcaP9G9vKLaJImH1Hc-e5JD07ONTCxi4Uh69U8v8tPoDavtAtDuWsaG0SwiZG1MxjQm4FafC-xk61htXdbeIRYtrt5ITt6u4s6RZT9YKE/s1600/rss-ot.png) no-repeat scroll left center transparent;}.followlinks ul li.otgoogleplus{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuzwYR3F9qC9NlyGTPsvwFe_tOOahFWsXiS5KqvolKXFe5Z70me9c_4rPES0WjBppLMkYl4-ImxJtkjk_6FKM549-6PGjpzY2un65F-wU7EHnukWmC2L2s1BGGJrQyqgnll_DbvJ7HZqpB/s1600/googleplus-ot.png) no-repeat scroll left center transparent;}.followlinks ul li.ottwitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqAYUyVRLJwUWqLvRbuUSpX0YS-ERd7FDU4fAacRhh31Jrib7gbVFHKJnMu4AVzhHahhLbPkDT0DFDrUjgzQ2LoUyFXtuOd9NYgrezg0GmLLqrgHcMV655T_yK4jZi6rRMVEuK-DNYlk9s/s1600/twitter-ot.png) no-repeat scroll left center transparent;}.followlinks ul li.otfacebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8QXfXT_qfRzAt1RLUqtzRPCAXZNoxoJ7MjEaMSHRsaAurZ3YJ_E_hIeEQJS3RdwY1UMRZ4SgTiH3zSKtzCeT7OCUt-A7E-ftEP-GUhkFIcUX16GnEkTJEMDG86u54-4JF-wxubg9Njng_/s1600/facebook-ot.png) no-repeat scroll left center transparent;}form.emailform{margin:5px 0 0;display:block;clear:both;}.emailtext{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghqC1qsqUxtmWkJG5FdwpVietua_FqmPxzDnyp-6fN278wQKFgoGesUua6yIVItq-cA2GRzFPLM5UgBpakPE43WvU08pUBcbW3T7Ejl55JMMZVNPnGNmLUCld-pqFK9Ks-npeL2FeyqlFl/s1600/ot-mail.png) no-repeat scroll 4px center transparent;padding:7px 15px 7px 35px;color:#444;font-weight:bold;text-decoration:none;border:1px solid #D3D3D3;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;-moz-box-shadow: 1px 1px 2px #CCC inset;-webkit-box-shadow: 1px 1px 2px #CCC inset;box-shadow: 1px 1px 2px #CCC inset;width: 550px;}.emailtext:focus{outline: none;}.sub-button{color:#444;font-weight:bold;text-decoration:none;padding:6px 10px;border:1px solid #D3D3D3;cursor: pointer;-moz-border-radius: 5px;-webkit-border-radius: 5px;-goog-ms-border-radius: 5px;border-radius: 5px;background: #fbfbfb;background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);}.sub-button:hover{background: -moz-linear-gradient(top, #e7e7e7 0%, #f4f4f4 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e7e7e7), color-stop(100%,#f4f4f4));background: -webkit-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);background: -o-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);background: -ms-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#e7e7e7&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );background: linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);}</style><script type='text/javascript'>  WebFontConfig = {    google: { families: [ &#39;Cabin+Condensed::latin&#39; ] }  };  (function() {    var wf = document.createElement(&#39;script&#39;);    wf.src = (&#39;https:&#39; == document.location.protocol ? &#39;https&#39; : &#39;http&#39;) +      &#39;://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js&#39;;    wf.type = &#39;text/javascript&#39;;    wf.async = &#39;true&#39;;    var s = document.getElementsByTagName(&#39;script&#39;)[0];    s.parentNode.insertBefore(wf, s);  })(); </script>

5. மேற்கண்ட நிரலிகளை இணைத்த பின் மீண்டும் CTRL+F கொடுத்து <data:post.body/> என்ற வரியை கண்டுபிடிக்க வேண்டும். கண்டுபிடித்த பின்னர் அதற்கு கீழாக கீழ்க்கண்ட நிரலிகளை இணைக்கவும்.
குறிப்பு: சில பிளாக் டெம்ப்ளேட்டில் ஒன்றுக்கு மேற்பட்ட <data:post.body/>  இருக்கும். எனவே ஒவ்வொரு<data:post.body/> கீழ் இணைத்து முயற்சிக்கவும். என்னுடைய டெம்ப்ளேட்டில் மூன்றாவதாக இருந்த <data:post.body/> யில் தான் ஓட்டு பட்டைகள் ஓகே ஆனது.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sub-box'>
<div class='followlinks'>
<center><table border='0' bordercolor='#000000' cellpadding='4' cellspacing='4' style='background-color:#FFFFFF' width='400'>
<tr><td><script type='text/javascript'> button=&quot;hori&quot;; lang=&quot;ta&quot;; submit_url =&quot;<data:post.canonicalUrl/>&quot; </script> <script src='http://ta.indli.com/tools/voteb.php' type='text/javascript'/></td>
<td><script src='http://tamil10.com/submit/evb/button.php' type='text/javascript'>
</script> </td>
<td> <script expr:src=' &quot;http://udanz.com/tools/services.php?url=&quot; + data:post.canonicalUrl + &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'/></td>
<td><b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='padding: 10px 0px 5px 0px;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=65&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:65px;'/>
</div>
</b:if></td>
<td>

    <div style='float:left'>
    <g:plusone expr:href='data:post.url' size='tall'/>
    </div>
</td>
<td><a class='twitter-share-button' data-count='vertical' data-via='tamilvaasi' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</td></tr><center><script language='javascript' src='http://services.thamizmanam.com/jscript.php' type='text/javascript'>
</script>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- tamilmaNam.NET toolbar code starts. Pathivu toolbar (c)2008 tamilmaNam.NET -->
<script language='javascript' src='http://services.thamizmanam.com/jscript.php' type='text/javascript'>
</script>



<script expr:src=' &quot;http://services.thamizmanam.com/toolbar.php?date=&quot; + data:post.timestamp + &quot;&amp;posturl=&quot; + data:post.canonicalUrl + &quot;&amp;cmt=&quot; + data:post.numComments + &quot;&amp;blogurl=&quot; + &quot;http://tamilvaasi.blogspot.com&quot; + &quot;&amp;photo=&quot; + data:photo.url' language='javascript' type='text/javascript'>

</script>

<!-- tamilmaNam.NET toolbar code for Blogger ends. Pathivu toolbar (c)2008 tamilmaNam.NET -->
</b:if></center>
</table></center>
<h1>Get Free Email Updates or Like us on your favourite Social networking site</h1>
<ul>
<li class='otrss'><a href='http://feeds.feedburner.com/tamilvaasi' target='_blank'>RSS</a></li>
<li class='otgoogleplus'><a href='http://plus.google.com/106412922467461633842' target='_blank'>Google+</a></li>
<li class='ottwitter'><a href='http://twitter.com/tamilvaasi' target='_blank'>Twitter</a></li>
<li class='otfacebook'><a href='https://www.facebook.com/tamilvaasi'target='_blank'>Facebook</a></li>
</ul>
</div>
<br/>
<div style='text-align: left; display: inline-block;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=tamilvaasi&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='tamilvaasi'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailtext' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>
<input alt='' class='sub-button' title='' type='submit' value='SignUp'/>
</form></div></div></b:if>

முக்கிய  குறிப்பு: தமிழ்மணம் நிரலியில்
http://tamilvaasi.blogspot.com 
(மேலே உள்ள நிரலியில் இந்த கலர் உள்ள இடமே தமிழ்மணம் நிரலி)
என்ற இடத்தில் உங்கள் பிளாக் முகவரி தரவும். அதாவது http://xxxxxxx.blogspot.com என வர வேண்டும்.
 
6. மேற்கண்ட நிரலிகளை இணைத்த பின்னர் SAVE TEMPLATE கொடுத்து நமது வலைப்பூவை புதுப்பித்து பார்த்தால் அழகிய, வரிசையாக திரட்டிகளின் பட்டைகளும், சமூக தளங்களின் பட்டைகளும் இருக்கும்.


7. மேற்கண்ட நிரலிகளில் சில மாற்றங்கள் செய்தால் உங்கள் சமூக தளத்திற்கான இணைப்பு கிடைக்கும். அவை என்னவென்று பார்ப்போமா?
<li class='otrss'><a href='http://feeds.feedburner.com/tamilvaasi' இந்த வரியில் tamilvaasi க்கு பதிலாக உங்கள் RSS FEED முகவரி கொடுக்கவும்.

http://feedburner.google.com/ முகவரியில் சென்று உங்கள் பிளாக்கின் edit feed details சென்றால் உங்கள் RSS FEED முகவரி கிடைக்கும்.

<li class='otgoogleplus'><a href='http://plus.google.com/106412922467461633842' இங்கே, 106412922467461633842 எங்களுக்கு பதிலாக உங்கள் கூகிள்ப்ளஸ் முகவரி தரவும். கூகிள் ப்ளஸ்-ல் உங்கள் ப்ரோபைல் பக்கத்திற்கு சென்றால் இந்த எண் url-ல் இருக்கும்.


<li class='ottwitter'><a href='http://twitter.com/tamilvaasi' இந்த வரியில்tamilvaasi க்கு பதிலாக உங்களின் டிவிட்டர் முகவரி தரவும்.


<li class='otfacebook'><a href='https://www.facebook.com/tamilvaasi' இந்த வரியில் tamilvaasi க்கு பதிலாக உங்கள் பேஸ்புக் பக்க முகவரி தரவும்.

uri=tamilvaasi&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='tamilvaasi'/> இந்த வரிகளில் tamilvaasi என்று வரும் இடங்களில் உங்கள் ப்ளாக் முகவரி தரவும்.
8. நிரலிகளில் மேற்கண்ட மாற்றங்கள் செய்த பின் save template தரவும். முழுமையாக உங்கள் ப்ளாகிற்காக அனைத்தும் மாறிவிடும்.

குறிப்பு: மேற்கண்ட நிரலிகளை உங்கள் பிளாக்கில் நிறுவிய பின்னர் ஒட்டுப்பட்டைகளில் ஏதேனும் தவறு ஏற்படின் பின்னூட்டத்தில் குறிப்பிடவும். பெரும்பாலும் </div> or </b:if> போன்ற தவறுகளே வரும்.  ஏதாவது நிரலிகள் முழுமையாக மூடப்படாமல் இருந்தால் இத்தகைய தவறுகள் வரும்.இதனை எளிதாக சரி செய்து விடலாம்.

பதிவுகளை மின்னஞ்சலில் பெறவும், உங்களின் சமூக தளங்களில் இணைக்கவும் கீழே கிளிக்கவும்

• RSS
• Google+
• Twitter
• Facebook