क्या आप अपने ब्लॉग पर विवरण देने वाला स्लाइडर स्थापित करना जानते हैं ?

क्या आप अपने ब्लॉग पर विवरण देने वाला स्लाइडर स्थापित करना जानते हैं ? विनीत नागपाल

लेबल : HTML ट्रिक्स ,

जैसा की इस पोस्ट के टाइटल से स्पष्ट है, क्या आप अपने ब्लॉग पर विवरण देने वाला स्लाइडर स्थापित करना जानते हैं ?
मैं आपको बताऊंगा कि इसे अपने ब्लॉग पर स्थापित कैसे किया जाये | आप इस स्लाइडर को इसी ब्लॉग की साईडबार में लगा देख सकते हैं | इसको स्थापित करने के लिए कोई बहुत ज्यादा दक्षता की जरूरत नहीं है |

1. निम्न कोड में जहाँ पर नारंगी रंग में अपनी पोस्ट के बारे में जानकारी भरने के लिए लिखा हैं वहाँ पर आप अपनी पोस्ट के बारे में जानकारी लिखें |

2. जहाँ पर रीड मोर लिखा है, उस से पहले नारंगी रंग में उस पोस्ट का URL लिंक दिखाया गया है वहाँ पर आप अपनी पोस्ट का लिंक भरें |
3. जहाँ पर मैंने अपने ब्लॉग के टाइटल को लिखा है वहाँ पर आप अपने ब्लॉग का टाइटल लिखें |

<script type="text/javascript" src="http://tipshindimein.googlecode.com/files/jquery-1.6.2.min.js"></script> <script type='text/javascript' src='http://tipshindimein.googlecode.com/files/jquery.cycle.all.js'></script> <!-- ======= Testimonial ======= --> <article class="col-2"> <h10 class="extra">Testimonials <script type="text/javascript"> jQuery(function(){ jQuery('#testi-cycle').cycle({ fx: 'scrollUp', // choose your transition type, ex: fade, scrollUp, shuffle, etc... timeout: 8000, height: 'auto', prev: '#prev-testi', next: '#next-testi', pager: '#nav-testi', pagerAnchorBuilder: pagerFactory }); function pagerFactory(idx, slide) { var s = idx > 9 ? ' style="display:none"' : ''; return '<li'+s+'><a href="#">'+(idx+1)+'</a></li>'; }; }); </script> <div class="testimonials" id="testi-cycle">

<div class="wrapper">
<div class="testimonial-bg">
<img class="fleft" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6enemqmYCtDYvV-Bgf9P1ulUUdkrHWJGv_R8mh1tbAMbHLhAU2qXnpo2WR5RJ8j1KKBlYXmvfQa7R7qJM3ox5OCr9Phro35XBMasy67KT9nxNLEReNR00FD8H4M5WS7EbbtN6esNvBRs/s1600/testimonial.png" alt="" />

<p style="color: #fff;margin-top:-6px;text-align:justify;line-height:18px;" class="extra1">
यहाँ पर आप अपनी पोस्ट के बारे में जानकारी लिखें
<a href="http://cityjalalabad.blogspot.com/2012/03/how-to-download-any-gif-files-form.html" target="_blank">Read More...</a>
</p> </div>
<div class="testimonial-name"><strong>"टिप्स</strong> <em>हिंदी में "</em></div> </div>

<div class="wrapper">
<div class="testimonial-bg">
<img class="fleft" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6enemqmYCtDYvV-Bgf9P1ulUUdkrHWJGv_R8mh1tbAMbHLhAU2qXnpo2WR5RJ8j1KKBlYXmvfQa7R7qJM3ox5OCr9Phro35XBMasy67KT9nxNLEReNR00FD8H4M5WS7EbbtN6esNvBRs/s1600/testimonial.png" alt="" />
<p style="color: #fff;margin-top:-6px;text-align:justify;line-height:18px" class="extra1">यहाँ पर आप अपनी पोस्ट के बारे में जानकारी लिखें
<a href="अपने पोस्ट का URL लिखें " target="_blank"></a> </p> </div>
<div class="testimonial-name"><strong>"टिप्स</strong> <em>हिंदी में "</em></div> </div>

<div class="wrapper">
<div class="testimonial-bg">
<img class="fleft" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6enemqmYCtDYvV-Bgf9P1ulUUdkrHWJGv_R8mh1tbAMbHLhAU2qXnpo2WR5RJ8j1KKBlYXmvfQa7R7qJM3ox5OCr9Phro35XBMasy67KT9nxNLEReNR00FD8H4M5WS7EbbtN6esNvBRs/s1600/testimonial.png" alt="" />

<p style="color: #fff;;margin-top:-6px;text-align:justify;line-height:18px" class="extra1">यहाँ पर आप अपनी पोस्ट के बारे में जानकारी लिखें
<a href="अपने पोस्ट का URL लिखें " target="_blank"></a></p> </div>
<div class="testimonial-name"><strong>"टिप्स</strong> <em>हिंदी में "</em></div>
</div> </div> <div id="testi-controls">
<ul id="nav-testi"></ul> </div> </article> <style type="text/css"> /*======= Testimonial START =======*/ .fleft { float: left; } img.fleft { margin: 4px 15px 0 0; } .testimonial-bg { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCtypF19Iozh1FCLucroXbr5dQxvImDnu1G961D_AlNcteKyWuIjSrppzeqcQqZ-J0tEaIwKNWi0yNcE1oTE7iCvoY7VdB5CkY2Cc8O892IdREExj-ryXTrOJ0uIlcEPxOmNIWKYXNwwQ/s1600/testimonial-bg.png") no-repeat scroll center top transparent; height: 112px; padding: 15px 15px 30px; } .testimonial-name { font-size: 15px; color: #1F8504; float: right; } #testi-cycle { margin: 0; } #testi-cycle .testi_item:first { display:block; } #testi-controls { position: absolute; top: 7px; right: 0; } #testi-controls ul { margin: 0; padding: 0; list-style: none; } #testi-controls ul li { background: none; float: left; margin: 0 0 0 3px; padding: 0; } #testi-controls ul li a { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzdWYPaw0jS6O4l99wVsgfM237Ir9_rKRxd2ngtzJ9bw-53VI0Fp4wwd7wE7vyE7jmj2Jb2r_M0SSTjtt4o8JOSq_zmlATSDQndA8tthYWyQrz9i0QRVpChgjN3C-TUDnrjfsvJti8Gwo/s1600/popular_box_pagination.png) no-repeat 0% 0%; float: left; width: 15px; height: 16px; overflow: hidden; margin: 0; padding: 0; line-height: 0; font-size: 0; text-decoration: none; } #testi-controls ul li.activeSlide a, #testi-controls ul li a:hover { background-position: 0% -16px; } h10 {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3-QvbzQ_ur1VtPhPmud3yKCIkERLtoBc22UtnhgbhyBbgPMtjcYkOComkcBnQgIafdw6eMRXaGz_JVgikOBPHSl76v5puiU0GI-C0o89csrdWaPVzORrraMCMu8EDCSdlPG1V38z0Dl4/s1600/title-tail.png") repeat-x 0% 100%; height: 39px; margin: 0 0 27px 0; overflow: hidden; line-height: 1.2em; font-size: 24px; font-weight: 700; letter-spacing: 0.6px; color: #ea3809; } h10.extra { margin: 0 0 18px 0; } .extra1 { margin: 0 0 24px 0; font-size: 14px; } .extra1 b {color:yellow;} h10.extra1 { margin: 0 0 24px 0; font-size: 12px; } .col-2 { width: 251px; position: relative; } /*======= Testimonial END =======*/ </style>

4. पोस्ट के बारे में जानकारी व पोस्ट का लिंक बदलने के बाद इस सारे कोड को कापी करने के बाद "HTML/Javascript" विजेट का चयन करके इसमें इस सरे कोड को पेस्ट कर दें व इसे अपने ब्लॉग की साईडबार में स्थापित कर दें | ये विजेट काम करने लगेगा |

Testimonials

किसी भी "GIF" फ़ाइल को इंटरनैट से डाउनलोड करने का सबसे आसान तरीका
इस पोस्ट का टाइटल देख कर चौंक गए क्या ? जी हाँ ये सच है किसी भी "GIF" को बड़ी आसानी से डाउनलोड किया जा सकता है | Read More...

"टिप्स हिंदी में "

क्या आप GIF या SWF फॉर्मेट में बैनर बनाना जानते हैं ?
आज की पोस्ट उपरोक्त विषय पर रतन सिंह शेखावत जी के आग्रह पर लिखी जा रही है | आज की पोस्ट में GIF फार्मट में

"टिप्स हिंदी में "

किसी भी "GIF" फ़ाइल को इंटरनैट से डाउनलोड करने का सबसे आसान तरीका

"टिप्स हिंदी में "

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

लेबल : HTML ट्रिक्स ,

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