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

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

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

<!-- ======= Javascript, Scrolling effects ======= --> <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> <!-- ******* Script for client slider ******* --> <script type="text/javascript"> jQuery(function(){ jQuery('#client-cycle').cycle({ fx: 'scrollUp', // choose your transition type, ex: fade, scrollUp, shuffle, etc... timeout: 9000, height: 'auto', prev: '#prev-client', next: '#next-client', pager: '#nav-client', pagerAnchorBuilder: pagerFactory }); function pagerFactory(idx, slide) { var s = idx > 9 ? ' style="display:none"' : ''; return '<li'+s+'><a href="#">'+(idx+1)+'</a></li>'; }; }); </script> <!-- ======= Javascript, Scrolling effects ======= --> <style type="text/css"> /*======= Client Scroll START =======*/ .fleft {float: left;} img.fleft {margin: 4px 15px 0 0;} .client {padding:0;margin:0;} #client-cycle {margin: 0;} #client-cycle .client_item:first {display:block;} #client-controls {position: absolute;top: 7px;right: 40px;} #client-controls ul {margin: 0;padding: 0;list-style: none;} #client-controls ul li {background: none;float: left; margin: 0 0 0 3px;padding: 0;} #client-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;} #client-controls ul li.activeSlide a, #client-controls ul li a:hover { background-position: 0% -16px;} #client-cycle .client-list a { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5H0Sv74_2jQa3o3wuMDlIQ9ZAzFUHuvR8zWs96d3TN30gJiocxIGNyXMmDW2Gkz_WJGTDU7ik6LNGFnHUFV4BcuFjhYVSvMN-YyR9eB13YPhgHdLOoYIWzn0SefTH0Sat7amYnmNXA8o/s1600/highlight-bg.png") no-repeat scroll 0 0 transparent; display: inline-block;height: 134px;margin: 0 12px 0 0; padding: 10px;width: 118px;} #client-cycle .client-list a img {margin: 0;padding: 0;} #client-cycle .client-list .last {margin: 0px;} h2 {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;} h2.extra {margin: 0 0 18px 0;} h2.extra1 {margin: 0 0 24px 0;} .col-1 {width: 600px;padding: 0 40px 0 0;position: relative;} /*======= Client Scroll End =======*/ </style>

आपका पहला सेक्शन पूरा हुआ |

दूसरा सेक्शन

जहाँ पर अपनी तस्वीर का लिंक यहाँ पर लिखें लिखा है वहाँ पर आप द्वारा प्रयुक्त की जाने वाली तस्वीर का URL भरना है व जहाँ पर यहाँ पर आप चाहें तो अपनी पोस्ट का लिंक (URL) लगा सकते हैं | लिखा है वहाँ पर आपको अपनी पोस्ट का लिंक भरना है | ये प्रक्रिया पूरी करने के बाद आप सेक्शन दो में प्रयुक्त होने वाले सारे कोड को कापी करने के बाद

डिज़ाइन पर कलिक करें, >>> फिर सेटिंग पर >>> फिर फार्मेटिंग पर कलिक करें | इसके बाद आप पोस्ट टेम्पलेट के साहमने वाले बाक्स में इस कोड को पेस्ट कर दें व अंत में सेव सेटिंग पर कलिक कर दें | ये स्लाइडर आपके ब्लॉग पर स्थापित हो जायेगा | अब आप जब भी नई पोस्ट पर कलिक करेंगे तो ये स्लाइडर आपकी पोस्ट पर आपको हर बार लगा हुआ मिलेगा | किसी भी तरह की मुश्किल पेश आने पर आप मुझसे संपर्क कर सकते हैं |

<!-- ======= Highlight List ======= -->
<div class="wrapper">
<article class="col-1">
<h2 class="extra">Highlight </h2>
<div class="clientscroll" id="client-cycle">
<!-- ******* First Row Start******* -->
<div class="client-list">
<a href="यहाँ पर आप चाहें तो अपनी पोस्ट का लिंक (URL) लगा सकते हैं ">
<img class="fleft" src="अपनी तस्वीर का लिंक यहाँ पर लिखें" alt="" />
</a>

<a href="#">
<img class="fleft" src="अपनी तस्वीर का लिंक यहाँ पर लिखें" alt="" />
</a>

<a href="#">
<img class="fleft" src="अपनी तस्वीर का लिंक यहाँ पर लिखें" alt="" />
</a>

<a href="#" class="last">
<img class="fleft" src="अपनी तस्वीर का लिंक यहाँ पर लिखें" alt="" />
</a> </div>


<!-- ******* First Row End******* -->
<!-- ******* Second Row Start******* -->
<div class="client-list">
<a href="#">
<img class="fleft" src="अपनी तस्वीर का लिंक यहाँ पर लिखें" alt="" />
</a>

<a href="#">
<img class="fleft" src="अपनी तस्वीर का लिंक यहाँ पर लिखें" alt="" />
</a>

<a href="#">
<img class="fleft" src="अपनी तस्वीर का लिंक यहाँ पर लिखें" alt="" />
</a>

<a href="#" class="last">
<img class="fleft" src="अपनी तस्वीर का लिंक यहाँ पर लिखें" alt="" />
</a> </div>

<!-- ******* Second Row End ******* -->
<!-- ******* Third Row Start******* -->
<div class="client-list">
<a href="#">
<img class="fleft" src="अपनी तस्वीर का लिंक यहाँ पर लिखें" alt="" /> </a>
<a href="#">
<img class="fleft" src="अपनी तस्वीर का लिंक यहाँ पर लिखें" alt="" />
</a>

<a href="#"> <img class="fleft" src="अपनी तस्वीर का लिंक यहाँ पर लिखें" alt="" /> </a>

<a href="#" class="last">
<img class="fleft" src="अपनी तस्वीर का लिंक यहाँ पर लिखें" alt="" />
</a> </div>
</div>
<!-- ******* Third Row End******* -->
<div id="client-controls">
<ul id="nav-client"></ul>
</div> <div class="clear"></div>
</article>

Highlight