மூன்று Gadjet-களை ஒரே Gadjet-ல் வைக்க (Animation)(Blog Archive,Lable,Popular)

நாம் நம் தளத்தில் நிறைய Gadjet-கள் வைத்திருப்போம்.அவைகள் நிறைய இருக்கும்.அவைகள் நம் பதிவை விட அதிகமாக இருக்கும்.அதை சுருக்கலாம் என்று பார்த்தால் சுருக்கமுடியாது.Gadjet-கள் அதிகமாக இருப்பதால் நம் வலைத்தளத்தின் அழகை கெடுக்கும்.இந்த Gadjet-பல தளங்களில் இருக்கும்.ஆனால் Animation ஆகாது.ஆனால் இது அப்படி இல்லை.நன்றாக Animation ஆகும்.Gatget-களை சுருக்கும்.இதை டெமொ பார்க்க எனது தளத்தில் வலது மூலையில் (Posts,Lable,Latest)வைத்திருக்கிறேன்.
சரி இதை எப்படி வைப்பது

• முதலில் Blogger-->Template-->Edit HTML பகுதிக்கு செல்லவும்
• அங்கு  ]]></b:skin>  என்ற Code-ஐ தேடவும்[Use ctrl+f]
• தேடிய  Code-க்கு முன்னால் பின்வரும் Code-ஐ Paste செய்யவும்

/*---- Wordpress Style VS Menu Tabs----*/

.VS-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px} 

.VS-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left} 

.VS-tabs li:first-child{margin:0} 

.VS-tabs li a{color:#fff;background:#fffff;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;} 

.VS-tabs li a:hover,.VS-tabs li a.VS-tabs-current{background:#378AE2;color:#fff;text-decoration:none} 

.VS-tabs-content{background:#fffff} 

.VS-tabviewsection{margin-top:10px;margin-bottom:10px;}

மாற்ற வேண்டியவை:

 சிவப்பு நிறத்தில் உள்ள HTML Code-ஐ உங்களுக்கு ஏற்றவாறு மாற்றவும்.
(அந்த நிறம் எனது தளத்தில் உள்ளது போல நீல நிறத்தை குறிக்கிறது)
தேவையான நிறத்தை கண்டுபிடிக்க சுட்டி

அடுத்து செய்யவேண்டியவை

• பின்வரும் Code-ஐ தேடவும்

                                                                   <div id='sidebar-wrapper'>

கண்டுபிடித்த Code-க்கு கீழே பின்வரும் Code-ஐ Paste செய்யவும்

கண்டுபிடித்த Code-க்கு கீழே பிவரும் Code-ஐ Paste செய்யவும்

<div class='VS-tabviewsection'>

<script type='text/javascript'> 

            jQuery(document).ready(function($){ 

                $(&quot;.VS-tabs-content-widget-VS-id&quot;).hide(); 

                $(&quot;ul.VS-tabs-widget-VS-id li:first a&quot;).addClass(&quot;VS-tabs-current&quot;).show(); 

                $(&quot;.VS-tabs-content-widget-VS-id:first&quot;).show(); 

                $(&quot;ul.VS-tabs-widget-VS-id li a&quot;).click(function() { 

                    $(&quot;ul.VS-tabs-widget-VS-id li a&quot;).removeClass(&quot;VS-tabs-current a&quot;); 

                    $(this).addClass(&quot;VS-tabs-current&quot;); 

                    $(&quot;.VS-tabs-content-widget-VS-id&quot;).hide(); 

                    var activeTab = $(this).attr(&quot;href&quot;); 

                    $(activeTab).fadeIn(); 

                    return false; 

                }); 

            }); 

        </script>

<ul class='VS-tabs VS-tabs-widget-VS-id'> 

<li><a href='#widget-VS-id1'>Blog archive</a></li> 

<li><a href='#widget-VS-id2'>Lable</a></li> 

<li><a href='#widget-VS-id3'>Popular</a></li> 

</ul>

<div class='VS-tabs-content VS-tabs-content-widget-VS-id' id='widget-VS-id1'> 

<b:section class='sidebar' id='sidebartab1' preferred='yes'> 

</b:section>                                       

</div>   

<div style='clear:both;'/>                        

<div class='VS-tabs-content VS-tabs-content-widget-VS-id' id='widget-VS-id2'> 

<b:section class='sidebar' id='sidebartab2' preferred='yes'> 

</b:section>                                         

</div>   

                        

<div style='clear:both;'/> 

<div class='VS-tabs-content VS-tabs-content-widget-VS-id' id='widget-VS-id3'> 

<b:section class='sidebar' id='sidebartab3' preferred='yes'> 

</b:section>                                        

</div>

</div> 

<div style='clear:both;'/>

சிவப்பு நிறத்தில் உள்ளதை உங்களுக்கு ஏற்றவாறு மாற்றிக்கொள்ளவும்

Save Template-கொடுக்கவும்

இப்போது உங்கள் Layout பக்கத்துக்கு சென்றால் பின்வரும் படத்தை போல இருக்கும்

அதில் நீங்கள் பின்வரும் படத்தில் உள்ளது போல உங்கள் Gadjet-ஐ நிரப்பவும்

Save கொடுக்கவும்.இப்போது உங்கள் தளத்தை பார்க்கவும்.

thanks MyBloggerTricks