एक आसान से स्लाइडर को अपने ब्लॉग पर कैसे लगाएं ?

एक आसान से स्लाइडर को अपने ब्लॉग पर कैसे लगाएं ?

आज की इस पोस्ट में पेश है एक नया विजेट "एक आसान से स्लाइडर को अपने ब्लॉग पर कैसे लगाएं" किसी भी प्रोफैशनल या पर्सनल वेबसाईट की तरह |

स्टेप एक : निम्न कोड में उस चित्र का URL भरें, जिस चित्र को आप दिखाना चाहते हैं :-

<div id="slider">
<ul>
<li> <a href="http://cityjalalabad.blogspot.com/2011/09/write-in-any-indian-language.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEhcuiNzCMmLyHJv5gL0glUzul6EjuFtGjbQyLsapb1InqhtxcwiXXqpR9VmQpv3u9csCopRzGemzpST5bEY26MLQAxgGfaRqBVCGyGMxutlRAMaFSUBWEmcPbDgI87vJ-C9Y3gKF-jyk/s1600/Slide_1.jpg" alt="Slide_1" width="303" /> </a> </li>
<li> <a href="चित्र के साथ उस पोस्ट के लिंक को यहाँ पर लिखें"><img src="आपने द्वारा स्लाइडर में प्रयुक्त करने वाले चित्र का लिंक यहाँ पर लिखें" alt="Slide_2" width="303" /> </a> </li>
<li> <a href="चित्र के साथ उस पोस्ट के लिंक को यहाँ पर लिखें"><img src="आपने द्वारा स्लाइडर में प्रयुक्त करने वाले चित्र का लिंक यहाँ पर लिखें" alt="Slide_3" width="303" title="" /> </a> </li>
<li> <a href="चित्र के साथ उस पोस्ट के लिंक को यहाँ पर लिखें"><img src="आपने द्वारा स्लाइडर में प्रयुक्त करने वाले चित्र का लिंक यहाँ पर लिखें" alt="Slide_4" width="303" title="" /> </a> </li>
<li> <a href="चित्र के साथ उस पोस्ट के लिंक को यहाँ पर लिखें"><img src="आपने द्वारा स्लाइडर में प्रयुक्त करने वाले चित्र का लिंक यहाँ पर लिखें" alt="Slide_5" width="303" title="" /> </a> </li>
</ul> </div>

पहले लिंक में मैंने पोस्ट के लिंक को व चित्र के URL को दिखाया है | मैंने इस उदाहरण में पाँच चित्रों का प्रयोग किया है | आप चाहें तो ज्यादा चित्रों का इस्तेमाल कर सकते हैं | आप जितने ज्यादा चित्रों का प्रयोग करेंगे उतने बटन इस स्लाइडर के नीचे अपने आप बनते चले जायेंगे | इन बटनों से आप जिस चित्र को चाहें उस बटन पर क्लिक करके उस चित्र पर लिखे गए सन्देश को पढ़ सकते हैं |

दूसरा स्टेप : अब आप HTML/Javascript का चयन करें व चित्रों व पोस्ट का लिंक बदलने के बाद इस कोड व निम्न कोड कोड को कापी करने के बाद इस विजेट में पेस्ट करके आपने ब्लॉग की साइडबार में लगा लें | इस इस का प्रीव्यू इस ब्लॉग के साइडबार में देख सकते हैं |
<script type="text/javascript" src="http://tipshindimein.googlecode.com/files/jquery.min.js"></script> <!----Simple Slider Start----> <script type="text/javascript" src="http://tipshindimein.googlecode.com/files/simpleSlider1.7.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ auto: true, continuous: true, numeric: true }); }); </script> <!---Easy Slider End---> <style type="text/css"> #container{margin:0 auto;position:fixed;text-align:left; width:227px;background:#fff;margin-bottom:1em;} #content{position:relative;} /* numeric controls */ ol#controls{margin:0em 0;padding:0; height:25px;} ol#controls li{margin:0 3px 0 0;padding:0; float:left;list-style:none;height:25px; line-height:25px;} ol#controls li a{float:left; height:25px; line-height:25px;border:1px solid #ccc; background:#265E16;color:#fff; padding:0 8px;text-decoration:none;} ol#controls li.current a{ background:#269C07;color:#fff;} ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;} /* Easy Slider */ #slider ul, #slider li, #slider2 ul, #slider2 li{margin:0; padding:0;list-style:none;} #slider li, #slider2 li{width:303px;height:180px; overflow:hidden;padding-left: 0px;} </style>

क्या आपको ये आई-मैजिक अंदाज़ पसंद आया ? यदि हां !!! तो अपने विचारों से अवगत कराएं |

"टिप्स हिन्दी में ब्लॉग" की हर नई जानकारी अपने मेल-बॉक्स में मुफ्त पाएं !!!!!!!!!!