Social Icons

  • Saturday, April 14, 2012

    11 மூன்று 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 பக்கத்துக்கு சென்றால் பின்வரும் படத்தை போல இருக்கும்

    Blogger-Page-Elements Menu tabs

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

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

    thanks MyBloggerTricks
    Share
    எனது பதிவு பிடித்திருக்கிறதா?

    புதுப்பதிவுகளை மின்னஞ்சலில் பெற!

    பின்தொடர

    11 comments:

    1. பயனுள்ள தகவல் நண்பா....பகிர்ந்தமைக்கு நன்றி

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

      ReplyDelete
    3. பயனுள்ள தகவல் சதீஷ்.., பகிர்வுக்கு நன்றி ..!

      ReplyDelete
    4. Nanba sathis arumaiyana gadjat mikka nandri...

      ReplyDelete
    5. பதிவர்களுக்கு மிகவும் பயன்படும் டிப்ஸ் சதீஷ்...நன்றி!

      ReplyDelete
    6. div id='sidebar-wrapper ----intha code ila boss(expand gadget pani pathuta)

      ReplyDelete
      Replies
      1. நண்பா உங்க தளத்தின் முகவரி கொடுக்க முடியுமா

        உங்க Template default Template-ஆ அல்லது Custom Template-ஆ

        Delete
    7. பய்னுள்ள பதிவு

      ReplyDelete

     

    FaceBook Followers

    Followers