நமது ப்ளாக்கில் Back to Top பட்டனை கொண்டுவர..

நம்மில் பலர் வலைப்பதிவின் முகப்பு பக்கத்தில் இரண்டுக்கும் மேற்பட்ட பதிவுகளை வைத்திருப்போம். சில பதிவுகள் நீளமாக இருக்கும். அந்த சமயம் பதிவை படிப்பவர்கள் கீழே வரை படித்த பின் மீண்டும் மேலே வருவதற்கு கடினமாக இருக்கும். ஆனால் 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="http://4.bp.blogspot.com/_I0BsyBYud2E/TMen3G2wjTI/AAAAAAAAAbg/bbTgNx8_15o/s1600/4.gif"/></a>

4. பிறகு Save என்பதை க்ளிக் செய்யவும்.

இனி உங்கள் ப்ளாக்கின் கீழே Back To Top பட்டன் காட்சி அளிக்கும்.

Code-ல் மாற்றம் செய்வதற்கு:

**மேலே உள்ள Code-ல் நீல நிறத்தில் உள்ள Back to Top என்பதற்கு பதிலாக உங்களுக்கு விருப்பமான வார்த்தைகளை மாற்றிக் கொள்ளலாம். உதாரணத்திற்கு "மேலே செல்ல"

**மேலே உள்ள Code-ல் சிகப்பு நிறத்தில் உள்ள http://4.bp.blogspot.com/_I0BsyBYud2E/TMen3G2wjTI/AAAAAAAAAbg/bbTgNx8_15o/s1600/4.gif  என்பதற்கு பதிலாக உங்களுக்கு விருப்பமான படத்தின் முகவரியை  (Image URL) கொடுக்கலாம்.

**மேலே உள்ள Code-ல் bottom:5px;right:5px; என்ற இடத்தில் உங்களுக்கு ஏற்றவாறு மாற்றிக் கொள்ளலாம். உதாரணத்திற்கு,

*கீழிருந்து பட்டன் வரை உள்ள இடைவெளியை மாற்ற bottom:5px; என்பதில் 5 என்பதற்கு பதிலாக வேறு எண்ணை மாற்றலாம்.

* வலது பக்கத்திலிருந்து பட்டன் வரை உள்ள இடைவெளியை மாற்ற right:5px; என்பதில் 5 என்பதற்கு பதிலாக வேறு எண்ணை மாற்றலாம்.

** பட்டன் இடது பக்கம் தெரிய வேண்டுமானால், right என்பதற்கு பதிலாக left என்று மாற்றிக் கொள்ளவும்.


உங்களுக்காக சில பட்டன்கள்:







17 கருத்துக்கள்:

  1. //மனசாட்சியே நண்பன் said...
    நன்றி
    //

    தங்கள் வருகைக்கும், வாழ்த்துக்கும் நன்றி, நண்பா..!

    ReplyDelete
  2. //சரவணன்.D said...
    THANKS BLOGGER NANBA........//

    தங்கள் வருகைக்கும், வாழ்த்துக்கும் நன்றி, நண்பா..!

    ReplyDelete
  3. பல நல்ல தகவல்களை சொல்லி தரீங்க. வாழ்த்துக்கள்!

    ReplyDelete
  4. //ஆமினா said...

    பல நல்ல தகவல்களை சொல்லி தரீங்க. வாழ்த்துக்கள்!//

    தங்கள் வருகைக்கும், வாழ்த்துக்கும் நன்றி, சகோதரி..!

    ReplyDelete
  5. This is Fantastic job.continue friend

    ReplyDelete
  6. //S.PREM KUMAR said...

    This is Fantastic job.continue friend
    //

    தங்கள் வருகைக்கும், வாழ்த்துக்கும் நன்றி, நண்பரே!

    ReplyDelete
  7. nandri button mathurathu eppadi??

    ReplyDelete
  8. //Anonymous said...

    nandri button mathurathu eppadi??
    //

    **மேலே உள்ள Code-ல் சிகப்பு நிறத்தில் உள்ள http://4.bp.blogspot.com/_I0BsyBYud2E/TMen3G2wjTI/AAAAAAAAAbg/bbTgNx8_15o/s1600/4.gif என்பதற்கு பதிலாக உங்களுக்கு விருப்பமான படத்தின் முகவரியை (Image URL) கொடுக்கலாம்.

    ReplyDelete
  9. //நெல்லை தமிழன் said...

    thanks for your useful information
    //


    தங்கள் வருகைக்கும், வாழ்த்துக்கும் நன்றி, நண்பரே!

    ReplyDelete
  10. தங்கள் வருகைக்கும், வாழ்த்துக்கும் நன்றி, நண்பா..!

    ReplyDelete
  11. go to top பட்டன் வைத்துள்ளேன் நீங்கள் கொடுத்த code வேற மாதிரியான image அதாவது உங்களமாதிரி black color ல வைக்க என்ன change பண்றது கொஞ்சம் உதவுங்கள் நண்பா

    ReplyDelete
  12. //karthik said... 13

    தங்கள் வருகைக்கும், வாழ்த்துக்கும் நன்றி, நண்பா..!
    //

    :) :) :)

    ReplyDelete
  13. //Muruganandham MGA said... 14

    go to top பட்டன் வைத்துள்ளேன் நீங்கள் கொடுத்த code வேற மாதிரியான image அதாவது உங்களமாதிரி black color ல வைக்க என்ன change பண்றது கொஞ்சம் உதவுங்கள் நண்பா//

    நான் வைத்துள்ள image முகவரி:

    http://1.bp.blogspot.com/_I0BsyBYud2E/TMmugfMZSXI/AAAAAAAAAcc/mSJU9M3aX40/s1600/top.gif

    ReplyDelete
  14. நன்றி.nanbarea back to top button press seithaal innoru page aga open agirathu,athea page ill top sella enna seiya vendum..

    ReplyDelete

Creative Commons License இந்த வலைப்பதிவின் உள்ளடக்கம் அனைத்தையும் Creative Commons Attribution-ShareAlike 3.0 Unported License உரிமத்தின் அடிப்படையில் வழங்குகிறேன்.

Friends

Google+ Followers