
நம்மில் பலர் வலைப்பதிவின் முகப்பு பக்கத்தில் இரண்டுக்கும் மேற்பட்ட பதிவுகளை வைத்திருப்போம். சில பதிவுகள் நீளமாக இருக்கும். அந்த சமயம் பதிவை படிப்பவர்கள் கீழே வரை படித்த பின் மீண்டும் மேலே வருவதற்கு கடினமாக இருக்கும். ஆனால் Back to Top பட்டனை வைத்தால் எளிதாக பக்கத்தின் மேலே சென்றுவிடலாம்.
Back to Top பட்டனை எப்படி வைப்பது?
1. முதலில் Blogger Dashboard=>Design=>Page Elements பக்கத்திற்கு செல்லவும்.
2. Add a gadget என்பதை க்ளிக் செய்தால் ஒரு window வரும். அதில் HTML/JavaScript என்பதை தேர்வு செய்யவும்.
குறிப்பு: Add a Gadget இரண்டுக்கும் மேற்பட்ட இடத்தில் இருந்தால், நீங்கள் எங்கு வேண்டுமானாலும் இதை செய்யலாம். ஏற்கனவே நீங்கள் HTML/JavaScript gadget வைத்திருந்தால் அதில் சேர்ப்பது நல்லது.
3. பிறகு Title என்ற இடத்தில் உங்களுக்கு விருப்பமான தலைப்பை இடவும். உதாரணமாக, Back To Top.
Content என்ற இடத்தில் பின்வரும் Code-ஐ paste செய்யவும்.
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTLTKE3gvby4cmxMxB7f0RTwqGBkxbj4kAA2D50YQwwlUGDSnEPArASLuf8NxoZ0JKOBNbPhJZ_jWwRcsnBUzJJ08K7kuqa3HpfXIzti5XDcfp-DygwELKdF6X1w0YFCQaH94DSDYbB3g/s1600/4.gif"/></a>
4. பிறகு Save என்பதை க்ளிக் செய்யவும்.
இனி உங்கள் ப்ளாக்கின் கீழே Back To Top பட்டன் காட்சி அளிக்கும்.
Code-ல் மாற்றம் செய்வதற்கு:
**மேலே உள்ள Code-ல் நீல நிறத்தில் உள்ள Back to Top என்பதற்கு பதிலாக உங்களுக்கு விருப்பமான வார்த்தைகளை மாற்றிக் கொள்ளலாம். உதாரணத்திற்கு "மேலே செல்ல"
**மேலே உள்ள Code-ல் சிகப்பு நிறத்தில் உள்ளhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTLTKE3gvby4cmxMxB7f0RTwqGBkxbj4kAA2D50YQwwlUGDSnEPArASLuf8NxoZ0JKOBNbPhJZ_jWwRcsnBUzJJ08K7kuqa3HpfXIzti5XDcfp-DygwELKdF6X1w0YFCQaH94DSDYbB3g/s1600/4.gif என்பதற்கு பதிலாக உங்களுக்கு விருப்பமான படத்தின் முகவரியை (Image URL) கொடுக்கலாம்.
மேலே உள்ள Code-ல் bottom:5px;right:5px; என்ற இடத்தில் உங்களுக்கு ஏற்றவாறு மாற்றிக் கொள்ளலாம். உதாரணத்திற்கு,
*கீழிருந்து பட்டன் வரை உள்ள இடைவெளியை மாற்ற bottom:5px; என்பதில் 5 என்பதற்கு பதிலாக வேறு எண்ணை மாற்றலாம்.
* வலது பக்கத்திலிருந்து பட்டன் வரை உள்ள இடைவெளியை மாற்ற right:5px; என்பதில் 5என்பதற்கு பதிலாக வேறு எண்ணை மாற்றலாம்.
** பட்டன் இடது பக்கம் தெரிய வேண்டுமானால், right என்பதற்கு பதிலாக left என்று மாற்றிக் கொள்ளவும்.
உங்களுக்காக சில பட்டன்கள்:















|
No comments:
Post a Comment