பதிவர்களால் கற்றுக் கொண்டவை...!

"இப்போ இந்த Slide Show எப்படி செய்றது...?"

---

ஒ... ஒ... ஒ... ஒ... ஒ... ஒ... ஒ... ஒ... ஒ... ஒ... ஆண்டிபட்டி கணவா காத்து ஆள் தூக்குதே... அய்த்த பொண்ணு என்ன தாக்குதே...! அடி முக்கா பொம்பளையே... என்ன முழுசா நம்பலையே... நான் உச்சந்தலையில் சத்தியம் செஞ்சும் அச்சம் தீரலையே... // உன் பவுசுக்கும் உன் பதவிக்கும் வெள்ளக்காரி புடிப்பே... இந்த கிறுக்கிய ஏழை சிறுக்கிய எதுக்காக புடிச்சே...? // ஒரு வெள்ளக்காரி காசு தீந்தா வெறுத்து ஓடிப் போவா... இவ வெள்ளரிக்கா வித்து கூட வீடு காத்து வாழ்வா...! ஒ... ஒ... ஒ... ஒ... ஒ... ஒ... ஒ... ஒ... ஒ... ஒ... (படம் : தர்மதுரை) பயணத்தில் இயற்கையோடு ஒன்றி லயித்திருக்கும் போது, இப்படியுள்ள பாடல்களைக் கேட்பது தான் எவ்வளவு இனிமை...! வாங்க... ரசனையான ஒரு தொழினுட்பத்தைப் பத்தியும் பேசலாம்...!


⟪ © தர்மதுரை ✍ வைரமுத்து ♫ யுவன் சங்கர் ராஜா 🎤 செந்தில்தாஸ், சுர்முகி ராமன் @ 2016 ⟫

---

01) முதலில் சேர்க்க வேண்டிய படங்களை Copy செய்து, உங்கள் கணினியில் தனி ஒரு Folder-ல் கொண்டு செல்லுங்க... உங்கள் விருப்ப வரிசைக்கேற்ப படங்களுக்கு Image1, Image2, ..., ...,-ன்னு பெயர் வைச்சா நல்லது...

02) ஒவ்வொரு படத்தின் அளவை (Resize) மாத்தணும்... "Paint" இல்லாத கணினியே இல்லை என்று சொல்லலாம்... அது இருக்கா / இல்லையா...? சந்தேகமா...? - தீர்க்க உங்க முதல் வகுப்பு குழந்தையை... ம்... அல்லது பேரன் பேத்திகளைப் பக்கத்திலே அமர வைத்துக் கொள்ளலாம்... தவறில்லை...! ஏன்னா நீங்க சொல்லிக் கொடுத்து, அவங்க தான் இதை செய்யப் போறாங்க...! ஜாக்கிரதை :- நம்மைப் போல வாட்ஸ்-அப் / முகநூல் - பாழாப்போற இதுலே மூழ்கி இருக்கிற குழந்தைகளின் அலட்சிய / ஏளன பார்வைக்கும், கோபத்திற்கும் ஆளாகாதீர்கள்... அதனாலே உங்க பெண் அல்லது பேத்தி என்றால் OK... Good...!!! "நூலைப் போல் சேலை"-ன்னு சொல்ல வந்தேன்... ஐயோ... மறந்துட்டேன்... இது தொழினுட்ப பதிவு... அடுத்து என்ன செய்ய வேண்டுமென்றால்...

03) படத்தின் அளவை மாற்றுவோமா...? படத்தின் மீது Right Click → Open with → "Paint" என்பதைத் தேர்வு செய்ய சொல்லுங்க...

04) படம் வந்துருச்சா...? மேலே உள்ள Resize என்பதைச் சொடுக்கி, Maintain aspect ratio-லே டிக் மார்க்கை எடுத்துட்டு, Pixels-யை தேர்வு செய்ய சொல்லுங்க...

05) Horizontal-லே 300, Vertical-லே 306-ன்னு போட்டுட்டு, OK சொடுக்கிட்டு, Save செய்ய சொல்லுங்க... இப்படி இணைக்க வேண்டிய படங்கள் அனைத்தையும் உங்க குழந்தை செய்து விட்டார்களா...? அடுத்து...

06) உங்க தளத்திற்கு வாங்க... படத்தைப் பதிவில் ஏற்ற உங்களுக்குத் தெரியும்... Slide Show-வில் வர வேண்டிய படங்களை எல்லாம் ஒரு டம்மி Draft பதிவில் ஏற்றுங்க... ரைட்டு... இப்படி அனைத்து படத்தையும், ஆர்வமுடன் இருக்கும் குழந்தையிடம் வேலை வாங்கியாச்சா...? இப்போ அவங்களை விளையாட அனுப்பிட்டு, நாமளும் ஆர்வமா விளையாடலாமா...? இப்போ அந்த டம்மி Draft பதிவில் < > icon-யை சொடுக்கி, HTML view-யை தேர்வு செய்யுங்க... https://-ன்னு ஆரம்பித்து Image1.jpg-ன்னு முடியற வரை முதல் படத்திற்கான Script..... அவைகளை மட்டும் அப்படியே Copy செய்து Notepad(1) அல்லது Word File(1)-ல் Paste செய்து சேமித்துக் கொள்ளவும்...

<!-- Begin Slide Show Widget Script -->

<style type="text/css">
#sliderFrame {position:relative;width:300px;margin: 0 auto 40px;}
#slider {
    width:300px;height:306px;/* Make it the same size as your images */
 background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeN7bWi5GjZ0HRadNVFCcBzcD3fklCIRf0zPOOvawb2o9EwH9qCMT2blo3cwD3NfQ9OT4I85cFd7GjjHw_DQsNSs6tlryHRGE1Q21ImmQE2Xf-fv-3_LrFEcvUOoQYm6-ceFkRRaK-AeUw/s1600/loading.gif) no-repeat 50% 50%;
 position:relative;
 margin:0 auto;/*make the image slider center-aligned */
    box-shadow: 0px 1px 5px #999999;
}
#slider img {
 position:absolute;
 border:none;
 display:none;
}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
 z-index:2;
 display:none;position:absolute;
 top:0px;left:0px;border:0;padding:0;margin:0;
 width:100%;height:100%;
}

/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
 position:absolute;
 width:100%;
 height:auto;
 padding:0;
 left:0px; 
 bottom:15px;
 z-index:3;
 overflow:hidden;
 font-size: 0;
}
div.mc-caption-bg {
 background-color:black;
}
div.mc-caption {
 font: bold 14px/20px;
 color:#EEE;
 z-index:4;
 padding:10px 0;
 text-align:center;
}
div.mc-caption a {
 color:#FB0;
}
div.mc-caption a:hover {
 color:#DA0;
}
/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
 top:320px; left:110px; /* Its position is relative to the #slider */
 width:150px;
 background:none;
 padding-left:20px;
 position:relative;
 z-index:5;
 cursor:pointer;
}
/* each bullet */
div.navBulletsWrapper div 
{
    width:11px; height:11px;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRk8xbRdjq8_Vijl6jXICHc9fCcVjcNcPb6CKh590f5xBXcQL3ycQyeDzs-YE-q54FlrtoUiIvkDrVeQ-xGDGbMc_H7QAhheRWFNCgku3IkCbPVftl12nrHDFC2R4kqAk6oR88A9J9fIT_/s1600/bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
.intro {
    bottom: 0;
    color: rgba(0, 0, 0, 0.2);
    font-size: 16px;
    position: absolute;
    right: 0;
    text-decoration: none;
    z-index: 99999;
}
/* --------- Others ------- */
#slider 
{
 transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}
</style>
<script src="http://project.dimpost.com/image-slider/js-image-slider-1.js" type="text/javascript"></script>
<script src="http://project.dimpost.com/image-slider/js-image-slider-2.js" type="text/javascript"></script>

<div id="sliderFrame"><div id="slider"><a href="#"><img src="படம் 1" alt="?" /></a>
<a href="#"><img src="படம் 2" alt="?" /></a>
<a href="#"><img src="படம் 3" alt="?" /></a>
</div></div><!-- End : Slide Show Widget Script -->

07) இப்போ மேல் பெட்டியுள்ள Slide Show Widget Script முழுவதையும் சுட்டியால் தேர்வு செஞ்சி + Copy செய்து, இன்னொரு Notepad(2) அல்லது Word File(2)-ல் Paste செய்யுங்க... இந்த Script-ன் கடைசியில் <a href="#"><img src="படம் 1" alt="?" /></a> ன்னு வரிசையா மூன்று இருக்கும்... உங்க படங்கள் எண்ணிக்கைக்கு ஏத்த மாதிரி அதிகமாக்கிக் கொள்ளுங்க...

08) "படம் 1"-ங்கிற இடத்திலே, Notepad(1) அல்லது Word File(1)-ல் உள்ள முதல் படத்தோட Script-யை சேருங்க... (https://-ன்னு என்று ஆரம்பித்து Image1.jpg-ன்னு முடியும்-) அதே போல மற்றவைகளையும்...

09) அப்புறம் alt="?"-ங்கிற இடத்திலே "?" நடுவே உங்க படத்தோட விளக்கத்தை கொடுத்தீங்கன்னா, அதுவும் Slide Show-விலே தெரியும்...

10) எல்லாம் முடிந்ததா...? அதை எல்லாத்தையும் தேர்வு செஞ்சி Copy செய்து கொள்ளுங்க... Layout போய், வலப்பக்கம் இருக்கிற Add a Gadget சொடுக்கி, வரும் popup திரையிலே HTML/JavaScript-யை சொடுக்குங்க... அங்கே Content-லே, Paste-செஞ்சிட்டு, அதுக்கு மேலே இருக்கிற Title-லே "தலைப்பை" கொடுத்துட்டு, save என்பதை சொடுக்குங்க...

---

அவ்வளவு தான்... இனி உங்கள் தளத்தைத் திறந்து பார்க்கலாம்... எப்படி...? அழகா வந்து இருக்கா...? மு.கோபி சரபோஜி ஐயா தளத்திற்கு இங்கே சென்று பாருங்கள்... 24 நூல்களின் Slide Show (யம்மாடி...! உதவின என் மகளுக்கு நன்றி...! பொறுமைசாலி...!) "க்கும்... நூல்களா...!" என்று நினைக்காதீங்க... விரைவில் உங்களுக்கும் உதவும்... என்னை வியப்படைய வைத்தது :- திருமதி கோமதி அரசு அவர்களின் தளத்தில், வலைப்பூ நண்பர்கள் தந்த AWARDS-களை அழகாக Slide Show-வாக வைத்துள்ளார்கள்...!

பயணத்தில் பயணிக்கும் போது எடுக்கும் அதிக புகைப்படங்களைப் பகிரும் பதிவர்களே : நீங்கள் இது போல் செய்து பகிர்ந்து கொண்டால், பதிவு மேலும் அழகாக இருக்கும் என்பதை விட, விரைவில் அந்தப் பதிவு திறக்கும்...! "சரி... எழுதும் பதிவில் எப்படி இதைக் கொண்டு வருவது...?" என்று நீங்கள் நினைப்பது எனக்குக் கேட்கிறது... மேலே வரிசை எண் 10-ல் Layout செல்லாமல், < > icon-யை சொடுக்கி, HTML view-யை தேர்வு செய்துவிட்டு, உங்கள் பதிவில் எந்த இடத்தில் வேண்டுமோ அங்கு Slide Show Script-யை Paste செய்யவும்... நன்றி...

---

இன்னும் வேறு சந்தேகங்கள் / பிரச்சனைகள் இருந்தால், தயங்காமல் தொடர்பு கொள்ளுங்கள்... கற்றுக் கொள்கிறேன்... அதை ஒரு பதிவாகப் பகிர்ந்து கொள்கிறேன்... பலருக்கும் பயன் தரும்... நன்றி...

dindiguldhanabalan@yahoo.com

நண்பர்களிடம் பகிர்ந்து கொண்டதற்கு நன்றி

---

புதிய பதிவுகளை பெறுதல் :

---

தொடர்புடைய எண்ணங்களின் வண்ணங்கள் சில :

முகநூல் மூலம் கருத்துக்களை பகிர :