• Tuesday, June 7, 2011

    பிளாக்கில் புதிய வகை அனிமேசன் மெனு பார்கள் உருவாக்க.| பதிவர்கள் அவசியம் தெரிந்து கொள்ள வேண்டியது


    Blogger jquery menu
    புதிய வகையில் விரும்பிய வர்ணத்தில் உங்கள் ப்ளாக்கின் மெனு பாரினை(Menu Bar) அமைத்துக்கொள்ள வேண்டுமா. அதற்காகத்தான் இந்த பதிவு. இதன் படி பின்பற்றி உங்கள் மெனு பாரினை மாற்றிக்கொண்டால் அல்லது இதுவரை மெனு பார் பிளாக்கில் கொண்டிருக்காதவர்கள் உங்கள் பிளாக்கில் இவ் அனிமேசன் வகை மெனுபாரை வரச்செய்து உங்கள் ப்ளாக்கினை மேலும் மெருகூட்டுவதுடன் வாசகர்களையும் கவரலாம்.


    கீழே உள்ள Demo  ஐகிளிக் செய்து இம்முறையின் மூலம் உருவாக்கக்கூடிய ஆறு வெவ்வேறு வர்ணமுடைய மெனு பாரின் மாதிரியை பார்வையிட்டு அதன் பின் வாருங்கள் நீங்கள் விரும்பியமுறையில் மெனுபாரை உருவாக்க.

    View Demo Button

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

    Add The Lava lamp Floating Bubble Menu To Blogger


    Step 1. முதலில் உங்கள் பிளாக் கணக்குள் நுழைந்து உங்கள் Dashboard ஐ ஓப்பன் செய்துகொள்ளுங்கள். அங்கு Design ஐ கிளிக் செய்து பின் Edit Html என்பதை கிளிக் செய்துகொள்ளுங்கள். இப்போது உங்களுக்கு காட்டியவாறான விண்டோ தெரியும். அங்கே Expand widget Template பொத்தானை டிக் செய்துகொள்ளுங்கள். (தொடர்ந்து செய்வதற்கு முன்பாக உங்கள் பிளாக்கை Download full template ஐ கிளிக் செய்வதன் மூலம் Back-up செய்துகொள்வது நல்லது)


    Design Edit Html Blogger



    Step 2. Html கோடிங் உள்ள பகுதியினுள் கீழுள்ள கோடிங்கை தேடி கண்டு பிடித்துக்கொள்ளுங்கள்.  (இலகுவாக தேடுவதற்கு Ctrl உடன் F ஐ அழுத்தி உருவாகும் search bar ல் கீழுள்ள கோடிங்கை பேஸ்ட் செய்யுங்கள்.)

    ]]></b:skin>

    Step 3. கீழுள்ள கோடிங்கை காப்பி செய்து அதை மேலே நீங்கள் கண்டுபிடித்த
    ]]></b:skin> எனும் கோடிங்குக்கு முன்னாள் அல்லது நேர் மேலே பிரதி செய்யுங்கள்.;

    .lavalamp {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    height: 18px;
    }

    .magenta {
    background : rgb(190,64,120);
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
    border: 1px solid #841144;

    }

    .cyan {
    background : rgb(64,181,197);
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
    border: 1px solid #2f8893;

    }

    .yellow {
    background : rgb(255,199,79);
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
    border: 1px solid #c08c1f;

    }

    .orange {
    background : rgb(255,133,64);
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
    border: 1px solid #c04f11;

    }

    .dark {
    background : rgb(89,89,89);
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
    border: 1px solid #272727;

    }

    .magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,.40);

    }


    a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
    }

    ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
    }

    ul li {
    list-style: none;
    float:left;

    text-align: center;
    }

    ul li a {
    padding: 0 20px;
    text-align: center;
    }

    .floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    }



    Step 4. கீழே உள்ள கோடிங்கை உங்கள் ப்ளாக் Html ல் தேடுங்கள்.: (இலகுவாக தேடுவதற்கு Ctrl உடன் F ஐ அழுத்தி உருவாகும் search bar ல் கீழுள்ள கோடிங்கை பேஸ்ட் செய்யுங்கள்.)


    </head>

    Step 5. கீழே உள்ள கோடிங்கை காப்பி செய்து அதை மேலே நீங்கள் கண்டுபிடித்த  கோடிங்குக்கு நேர் மேலே பிரதி செய்யுங்கள்.;


    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
    <script src='http://spiceupyourblogextras.googlecode.com/files/lavalamp.js' type='text/javascript'/>

    Step 6. இப்போது நீங்கள் செய்தவற்றை Save செய்துகொள்ளுங்கள். சரியாக  Save செய்யப்பட்டுவிட்டதாயின் சந்தோசப்பட்டுக்கொள்ளுங்கள் நீங்கள் முக்கால் கிணறை தாண்டி விட்டீர்கள்.

    அடுத்து உங்கள் பிளாக் Design Page க்கு செல்லுங்கள். அங்கே உங்கள் பிளாக் header பகுதிக்கு கீழே காட்டியவாறு உள்ள Add A Gadget பகுதில்தான் உங்கள் மெனுபாரிற்குரிய கோடிங் அமைய இருக்கிறது. இவ் Gadget உங்கள் பிளாக்கின் முழு அகலபகுதியிலும் இடம்பெறுவது அவசியம்.


    இப்போது மேலே காட்டப்பட்ட Add A Gadget ஐ கிளிக் செய்து உருவாகும் விண்டோவில் Html/Javascript ஐ தெரிவு செய்துகொள்ளுங்கள். இப்போது உருவாகும் விண்டோவில் கீழுள்ள கோடிங்கை பிரதி செய்யுங்கள்.



    <div class="lavalamp" > 
     <ul>
    <li class="active" > <a href="/">Home</a></li>
    <li> <a href="Link-Here">என்னைப்பற்றி</a></li>
    <li><a href="Link-Here">சிறுகதைகள்</a></li>
    <li><a href="Link-Here">கவிதைகள்</a></li>
    <li><a href="Link-Here">தொழில்நுட்பம்</a></li>
    <li><a href="Link-Here">தொடர்புகொள்ள</a></li></ul>
    <div class="floatr" >
    </div>  
    </div> 

    இப்போது நீங்கள் இலகுவாக Link-Here எனும் பகுதியில் உங்கள் ஒவ்வொரு வகை லேபிளின் லிங்கை பிரதி செய்துகொண்டால் உங்களுடைய வேலை ஓவர். இங்கே நான் ஆறு tab களை menu bar ல் வரச்செய்துள்ளேன். உங்களுக்கு மேலதிகமாக  tab கள் தேவைப்படின் கீழுள்ள கோடிங்கை விரும்பியளவில் இணைத்துக்கொள்ளலாம். லேபிளின் பெயர்களையும் மாற்றிக்கொள்ளலாம்.



    <li><a href="Link-Here">லேபிளின்-பெயர்</a></li>

    இப்போது நீங்கள் SAVE செய்துகொண்டால் உங்களுக்கு வெள்ளை பின்னணி நிறமுள்ள அழகான மெனு பார் உங்கள் பிளாக்கில் உருவாகியிருக்கும்.

    வெவ்வேறு நிறங்களில் மெனுபாரை உருவாக்கிக்கொள்ள மேலே நீல நிறத்தில் காட்டப்பட்டுள்ள
    <div class="lavalamp" > 
     எனும் பகுதிக்கு பதிலாக கீழே உள்ள வெவ்வேறு நிறங்களுக்குரிய கோடிங்கில் ஒன்றை பாவியுங்கள்.


    <div class="lavalamp magenta" >
    <div class="lavalamp cyan" >
    <div class="lavalamp yellow" >
    <div class="lavalamp orange" >
    <div class="lavalamp dark" >
    இப்போ நீங்களும் அழகிய  MENU BARக்கு சொந்தக்காரர் ஆகி விட்டீர்கள். செய்துபார்த்துவிட்டு சொல்லுங்கள். மேலதிகமாக ஏதும் டவுட் இருந்தாலும் தொடர்புகொள்ளுங்கள் இலவசமாக தீர்த்துவைக்கப்படும். :)))

    இன்றைய (சிந்தனை) ஜோக்:
    புயல் மழையில் ஒருவன் பிஸ்ஸா வாங்க கடைக்கு செல்கிறான் 
    கடைக்காரர் : சார் உங்களுக்கு கல்யாணம் ஆயிடுச்சா...

    வந்தவர்:
    பின்ன இந்த புயல் மழைல எங்க அம்மாவா என்னைபிஸ்ஸா வாங்க அனுப்புவாங்க...!?? 


    அப்போ நான் வரட்டா. பிறகென்ன பதிவு பிடித்திருந்தால் வழமையபோல தமிழ்மணத்திலையும் இன்ட்லிலையும் ஓட்டை குத்துங்கோ.


    *இந்த ட்ரெண்ட் புடிச்சிருந்தா சொல்லுங்கோ தொடரலாம். உங்களுக்கு புடிக்கலைன்னா நிறுத்திடலாம். முடிவு உங்க கையில சொந்தங்களே.
    Thanks to: Spiceupbloggs

    முன்னைய இடுகைகளுக்கு செல்ல: இங்கே கிளிக் கவும்.

    Post Comment

    10 comments:

    முனைவர் இரா.குணசீலன் said...

    நல்லாருக்கே..

    நிரூபன் said...

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

    நிரூபன் said...

    ப்ளாக் மெனு பார் உருவாக்கம் பற்றிய தகவல் பகிர்விற்கு- விளக்கத்திற்கு நன்றி...

    புயல் மழையில் ஒருவன் பிஸ்ஸா வாங்க கடைக்கு செல்கிறான்
    கடைக்காரர் : சார் உங்களுக்கு கல்யாணம் ஆயிடுச்சா...

    வந்தவர்: பின்ன இந்த புயல் மழைல எங்க அம்மாவா என்னைபிஸ்ஸா வாங்க அனுப்புவாங்க...!??/

    ஹி....ஹி....என்னா ஒரு கொலை வெறி வீட்டுக்காரப் பொண்ணுங்களுக்கு.

    Ashwin-WIN said...

    @நிரூபன்
    நன்றி பாஸ் கருத்துக்கு. மைந்தனுக்கும் மஞ்சளுக்கும் என்ன சம்பந்தம் எண்டு எனக்கு தெரியாது, ஆனா எனக்கு இந்த மஞ்சாக்கலர போட உதவிபண்ணினது அந்த மாப்புளைதான்.

    IRSHATH said...

    Useful post.. And spcl thanks for Assistance too.. Keep posting..

    ம.தி.சுதா said...

    டோய் அஸ்வின் கடவுள்யா நீ உண்மையா இதைத் தான் தேடித்திரிஞ்சேன் ரொம்ப ரொம்ப நன்றீப்பா... இது என் தளத்திற்கல்ல என் ஊர் தளத்திற்கு செய்யவே தேடினேன்... இதை விட நான் அதிகம் விரும்புவது கேரஸசரை தலைப்பின் மேலே பிடித்ததும் பல உப தலைப்பகள் திறக்குமே அதென்றால் என் தளத்திற்க போடலாம்... முடிந்தால் எழுதப்பா...

    மிக்க மிக்க நன்றி..

    அன்புச் சகோதரன்...
    ம.தி.சுதா
    சீரியஸ் மனிதனின் நகைச் சுவைப் பக்கங்கள் With vedio

    ஷஹன்ஷா said...

    மிக்க நன்றி பகிர்வுக்கு...

    periyar voice said...

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

    khanbaqavi said...

    நண்பர் அஸ்வின் அவர்களுக்கு...

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

    நன்றியும் வாழ்த்துகளும்.

    இ.பு.ஞானப்பிரகாசன் said...

    அருமையான தகவல்! ஆனால், நான் வெளி வார்ப்புரு (Third party template) பயனபடுத்துவன். என் வலைப்பூவில் ஏற்கெனவே தலைப்புப் பட்டை (மெனு பார்) இருக்கிறது. ஆனால், அது மிக மிக எளிமையாக இருக்கிறது. அதன் நிறத்தை மட்டும் மாற்ற உதவ முடியுமா?

    Post a Comment

    உங்கள் கருத்துகளை சொல்லாமல் போகாதீர்கள்...

    Related Posts Plugin for WordPress, Blogger...
    x

    Get Our Latest Posts Via Email - It's Free

    Enter your email address:

    Delivered by FeedBurner