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

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

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

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

Add The Lava lamp Floating Bubble Menu To Blogger

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

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

Tweet