பிளாக்கரில் ஸ்லைடர் (Slider)அமைப்பது எப்படி?

http://www.usilampatti-chellappa.blogspot.in/2012/07/how-to-put-slider-in-blogger.html

வணக்கம் நண்பர்களே..!

ஒரு சில பிளாக்கர் தளத்தில் Image Slider இருப்பதைப் பார்த்திருப்போம். இத்தகைய Slider களை நம் தளத்திலும் கொண்டு வரலாம். பார்ப்பதற்கு கண்களைக் கவரக்கூடிய வகையில் பிளாக்கரில் ஸ்லைடர் அமைப்பது எப்படி எனப் பார்ப்போம்.


ஸ்லைடர் என்றால் என்ன?

ஸ்லைடர்(Slider) என்பது புகைப்படங்களை வரிசையாக மாற்றி மாற்றி காண்பிக்கும் ஒரு செயலாகும். இதில் உங்களுடைய புகைப்படங்களை வரிசைக்கிரமமாக வைத்து அவற்றை காண்போருக்கு தானாகவே மாறி மாறி காண்பிக்கும்மாறு செய்வதுதான்..பதிவின் இறுதியில் (Demo) முன்மாதிரி காண்பிக்கப்பட்டுள்ளது.

ஸ்லைடர்கள்(slider) பல்வேறு மென்பொருள்களின் துணைகொண்டு செய்தாலும், நிரல்வரிகளைக் கொண்டே பிளாக்கரில் இத்தகைய ஸ்லைடர்களை நாம் நிறுவலாம்..

பிளாக்கரில் Slider கொண்டு வரும் முறை:

பிளாக்கிர் Slider கொண்டுவருவதற்கு நாம் மூன்று படிமுறைகளைக் கையாளவேண்டும்.

ஒன்று ஸ்டைல்ஸ்(Adding Styles) சேர்ப்பது...விரைவில் CSS தமிழில் பாடம் நமது தங்கம் பழனி வலைத்தளத்தில் வரப்போகிறது. அப்போது முழுவும் இந்த CSS எனப்படும் cascading Style sheet-ஐப் பற்றித் தெரிந்துகொள்வோம்.
இரண்டாவதாக ஸ்கிரிப்ட் சேர்த்தல்( Adding Scripts )
மூன்றாவதாக நமக்கு வேண்டிய கொண்டு வருதல்( Adding Slider )...

இம் மூன்று படிமுறைகளையும் சரியாக செய்தோமானால் உங்கள் புகைப்படங்களை ஒரு Slider ஆக மாற்றி வாசகர்களுக்கும், பார்வையாளர்களுக்கும் உங்கள் வலைத் தளத்தில் பகிரலாம்.

செய்முறை:

1. Style சேர்த்தல்:

வழக்கம்போலவே உங்கள் பிளாக்கரில் கணக்கில் உள் நுழைந்துக்கொள்ளுங்கள்.
Blogger Dashboard >> Template செல்லுங்கள்.
மறக்காமல் Download full template என்பதைக் கிளிக் செய்து உங்கள் வார்ப்புருவை ஒரு பேக்கப் எடுத்து வைத்துக்கொள்ளுங்கள்.

பிறகு இந்த வரியைத் தேடவும்...

]]></b:skin>

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

#slider {
    position: relative;
    border: 5px solid #333;
}

#slider img {
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
}

#slider a {
    border: 0;
    display: block;
}

.nivo-controlNav {
    position: absolute;
    left: 260px;
    bottom: -42px;
}

.nivo-controlNav a {
    display: block;
    width: 22px;
    height: 22px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8bZbjOEY96IibcVfyQuK3fTtSolxeHM_phTIGkzMbcGZV1H86MlgiRqT5EIzdzgyZSwonYpV7qNvMCWghQIZDg0tK6siYOUxAUsrBqk3XG0SxmALqCUn8UDp3FdOSX5Q-BGEN5D7gRKA/s400/bullets.png) no-repeat;
    text-indent: -9999px;
    border: 0;
    margin-right: 3px;
    float: left;
}

.nivo-controlNav a.active {
    background-position: 0 -22px;
}

.nivo-directionNav a {
    display: block;
    width: 30px;
    height: 30px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGo09JUWUml3Wx4Y8AnHMi-b-YV1woIDPrIpwPrM6BICQ7yrunxf9GgQyaeHoYncYVvDmXA1DMtJcQE29f1mwynAWZbee6pi3KTdeXO6uN2mmgDelFCGhKgmngTagMCmSHygO5NH9nY78/s400/arrows.png) no-repeat;
    text-indent: -9999px;
    border: 0;
}

a.nivo-nextNav {
    background-position: -30px 0;
    right: 15px;
}

a.nivo-prevNav {
    left: 15px;
}

.nivo-caption {
    text-shadow: none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    padding: 10px 0px;
}

.nivo-caption a {
    color: #efe9d1;
    text-decoration: underline;
}

.clear {
    clear: both;
}

.nivoSlider {
    position: relative;
}

.nivoSlider img {
    position: absolute;
    top: 0px;
    left: 0px;
}

.nivoSlider a.nivo-imageLink {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    z-index: 60;
    display: none;
}

.nivo-slice {
    display: block;
    position: absolute;
    z-index: 50;
    height: 100%;
}

.nivo-caption {
    position: absolute;
    left: 0px;
    bottom: 0px;
    background: #000;
    color: #fff;
    opacity: 0.7;
 /* Overridden by captionOpacity setting */
    width: 100%;
    z-index: 89;
}

.nivo-caption p {
    padding: 5px;
    margin: 0;
}

.nivo-caption a {
    display: inline !important;
}

.nivo-html-caption {
    display: none;
}

.nivo-directionNav a {
    position: absolute;
    top: 45%;
    z-index: 99;
    cursor: pointer;
}

.nivo-prevNav {
    left: 0px;
}

.nivo-nextNav {
    right: 0px;
}

.nivo-controlNav a {
    position: relative;
    z-index: 99;
    cursor: pointer;
}

.nivo-controlNav a.active {
    font-weight: bold;
}

2. ஸ்லைடருக்கான ஸ்கிரிப்ட்டை இணைத்தல்:(Adding Script)

இப்போது உங்களுக்கு தேவையான Slider-ஐ கொடுக்க javascript- சேர்க்க வேண்டும்.

முதலில் உங்கள் வார்ப்புரு நிரலில் இந்த நிரல்த் துண்டைத் தேடவும்.

</head>

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

<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script src="http://code.helperblogger.com/jquery.nivo.slider.js"
type="text/javascript"></script>
<script type="text/javascript">
    $(window).load(function () {
        $('#slider').nivoSlider();
    });
</script>

இப்போது உங்கள் வார்ப்புருவை Save Template என்பதைச் சொடுக்கி  சேமிக்கவும்.

3. ஸ்லைடர் சேர்த்தல்(Add Slider)

இதுதான் இறுதிப் படிமுறை ஆகும். இதில் உங்களுக்கு வலைப்பூவின் எந்தப் பகுதியில் ஸ்லைடர் வேண்டும் என நீங்கள் விரும்புகிறீர்களோ அந்த ப் பகுதியில் Add Gadget என்பதைக் கிளிக் செய்து HTML/Javascript என்பதைத் தேர்ந்தெடுத்துக்கொள்ளுங்கள்..

HTML/Javascript கேட்கெட் இப்போது திறந்துகொள்ளும். அதில் கீழுள்ள நிரல்வரிகளை காப்பி செய்து பேஸ்ட் செய்துகொள்ளுங்கள்..

<div id="slider">
    <a href="YOUR LINK HERE"><img src="URL OF IMAGE" alt="" title="ADD DESCRIPTION HERE" /></a>
    <a href="YOUR LINK HERE"><img src="URL OF IMAGE" alt="" title="ADD DESCRIPTION HERE" /></a>
    <a href="YOUR LINK HERE"><img src="URL OF IMAGE" alt="" title="ADD DESCRIPTION HERE" /></a>
    <a href="YOUR LINK HERE"><img src="URL OF IMAGE" alt="" title="ADD DESCRIPTION HERE" /></a>
</div>

இந்த நிரல்வரிகளில் செய்ய வேண்டிய மாற்றம்: 

1. YOUR LINK HERE என்ற இடத்தில் உங்கள் இடுகையின் இணைப்பு (Post Link)நிரலைக் கொடுங்கள்.
2. URL OF IMAGE என்ற இடத்தில் உங்கள் படத்தின் இணைப்பு(Image Link) நிரலைக் கொடுங்கள்.
3. ADD DESCRIPTION HERE என்ற இடத்தில் உங்கள் பதிவிற்கான பொருத்தமான விளக்கத்தைக் கொடுங்கள்.


இந்த முறையைப் பயன்படுத்தி அமைக்கப்பட்ட SLIDER SHOW காண இங்கு அழுத்தவும். 

இப்பதிவிற்கான Demo: 

இம்மூன்று மாற்றத்தையும் கவனமாகச் செய்துவிட்டு இறுதியில் Save என்பதைக் கொடுத்து சேமிக்கவும். 

குறிப்பு: slider show அமைக்கப் பயன்படுத்தும் படங்கள் அனைத்தும் ஒரே சீரான அளவுடையதாக (நீளம், அகலம்)இருக்க வேண்டும். படங்கள் அனைத்தும் ஒத்த அளவுடையதாக இருக்கும்போது உங்களுக்கு தோன்றும் Image Slider Show-ம் அருமையாக காட்சியளிக்கும். 


பதிவைப் பற்றிய சந்தேகங்களுக்கு தொடர்புகொள்ளவும். கருத்துரை வாயிலாகவும் தெரிவிக்கலாம். நன்றி நண்பர்களே..!

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