Subscribe Us

header ads

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

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

लेबल : 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 ट्रिक्स ,

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

एक टिप्पणी भेजें

7 टिप्पणियाँ

  1. बहुत उम्दा जानकारी है ..पर यह कार्य किस प्रकार करेगा उसका एक एक्साम्प्ले भी डिस्प्ले करें ..

    जवाब देंहटाएं
  2. एक उदाहरण इस ब्लॉग की साइडबार में ये टेस्टीमोनिअल स्लाइडर काम कर रहा है | बस आप को अपना सन्देश व उस सन्देश से संबंधित लिंक बदलने के बाद इस सारे कोड को कापी करके HTML/Javascript विजेट में पेस्ट भर करना है | ये विजेट काम करने लगे गा |

    जवाब देंहटाएं
  3. बहुत बढ़िया जानकारी,स्लाइडर को पोस्ट में लगाने की कोशिश करूगा,....आभार

    MY RESENT POST ...काव्यान्जलि ...:बसंती रंग छा गया,...

    जवाब देंहटाएं
  4. आपकी इस प्रविष्टी की चर्चा आज के चर्चा मंच पर की गई है।
    चर्चा में शामिल होकर इसमें शामिल पोस्ट पर नजर डालें और इस मंच को समृद्ध बनाएं....
    आपकी एक टिप्‍पणी मंच में शामिल पोस्ट्स को आकर्षण प्रदान करेगी......

    जवाब देंहटाएं
  5. आपने जो जानकारी दी है बहुत अच्छी लगी मैंने इसे ट्राई किया है और सफल भी रही अब इसका क्या उपयोग हो यह भी बताए |
    आशा

    जवाब देंहटाएं
  6. आशा जी, आपने इसे ट्राई किया व सफल रही | आप कोई एसी पोस्ट जो आपकी नज़र में सबको पढ़नी चाहिए, या कुछ ऐसा जो सन्देश जो आप दूसरों को देना चाहती है, या किसी एसी संस्था या ऑर्गनाइजेशन के बारे में इस स्लाइड पर लिंक दे सकती हैं |

    जवाब देंहटाएं

आपकी टिप्पणी मेरे लिए मेरे लिए "अमोल" होंगी | आपके नकारत्मक व सकारत्मक विचारों का स्वागत किया जायेगा | अभद्र व बिना नाम वाली टिप्पणी को प्रकाशित नहीं किया जायेगा | इसके साथ ही किसी भी पोस्ट को बहस का विषय न बनाएं | बहस के लिए प्राप्त टिप्पणियाँ हटा दी जाएँगी |