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

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

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

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

क्या कहा नहीं ? मैं आपको बताऊंगा कि इसे अपने ब्लॉग पर स्थापित कैसे किया जाये | आप इस टेक्स्ट स्लाइडर को इसी पोस्ट पर लगा देख सकते हैं | इसको स्थापित करने के लिए कोई बहुत ज्यादा दक्षता की जरूरत नहीं है | इस कोड को स्थापित करने के लिए हम इस प्रक्रिया को दो भागो में पूरा करेंगे |
स्टेप एक : अपने ब्लॉग पर लाग-इन करें |
स्टेप दो : डिज़ाइन पर कलिक करें |
स्टेप तीन : 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> <!-- ======= Javascript, Scrolling effects ======= --> <!-- ******* Script for text slider ******* --> <script type="text/javascript"> jQuery(function(){ jQuery('#text-cycle').cycle({ fx: 'scrollUp', // choose your transition type, ex: fade, scrollUp, shuffle, etc... timeout: 7000, height: 'auto', prev: '#prev-text', next: '#next-text', pager: '#nav-text', pagerAnchorBuilder: pagerFactory }); function pagerFactory(idx, slide) { var s = idx > 9 ? ' style="display:none"' : ''; return '<li'+s+'><a href="#">'+(idx+1)+'</a></li>'; }; }); </script> <!-- ******* Script for text slider end******* --> <style type="text/css"> /*======= Text Scroll START =======*/ .fleft { float: left; } img.fleft { margin: 4px 15px 0 0; } h6 { display: inline-block; padding: 0 0 11px 0; line-height: 18px; font-size: 18px; font-weight: normal; letter-spacing: 0.6px; color: #1F8504; } .text { padding:0; margin:0; } #text-cycle { margin: 0; } #text-cycle .text_item:first { display:block; } #text-controls { position: absolute; top: 7px; right: 40px; } #text-controls ul { margin: 0; padding: 0; list-style: none; } #text-controls ul li { background: none; float: left; margin: 0 0 0 3px; padding: 0; } #text-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; } #text-controls ul li.activeSlide a, #text-controls ul li a:hover { background-position: 0% -16px; } .col-1 {width: 600px;padding: 0 40px 0 0;position: relative;} /*======= Text Scroll End =======*/ </style>

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

दूसरा सेक्शन

जहाँ पर अपनी पोस्ट का टाईटल यहाँ पर लिखें लिखा है वहाँ पर आप अपनी पोस्ट का टाईटल लिखें व जहाँ पर अपनी पोस्ट के बारे में लिखें लिखा है वहाँ पर आपको अपनी पोस्ट के बारे में लिखें | दूसरे पैराग्राफ में जहाँ पर आपनी पोस्ट के कुछ खास अंश यहाँ पर लिखें वहाँ पर आप अपनी पोस्ट की उस खासियत के बारे में लिखें | ये प्रक्रिया पूरी करने के बाद आप सेक्शन दो में प्रयुक्त होने वाले सारे कोड को कापी करने के बाद

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



<!-- ======= TEXT Slider Start ======= -->
<div class="wrapper pad-bot3">
<article class="col-1">
<h2>Text Slider</h2>
<div class="textscroll" id="text-cycle"><div>
<h8>अपनी पोस्ट का टाईटल यहाँ पर लिखें </h8>
<img class="fright" src="आपनी पोस्ट के आइकान का लिंक (URL) यहाँ पर लिखें " alt="" />
<p style="font-size:15px;" class="extra">अपनी पोस्ट के बारे में लिखें</p>
<p style="font-size:15px;padding-top:10px;" class="extra">अपनी पोस्ट के कुछ खास अंश यहाँ पर लिखें </p>
</div><div>

<h8>अपने ब्लॉग पर नोटपैड कैसे स्थापित करें ?</h8>
<img class="fleft" src="आपनी पोस्ट के आइकान का लिंक (URL) यहाँ पर लिखें " alt="" />
<p style="font-size:15px;" class="extra">अपनी पोस्ट के बारे में लिखें</p>
<p style="font-size:15px;padding-top:10px;" class="extra">अपनी पोस्ट के कुछ खास अंश यहाँ पर लिखें </p>
</div><div>

<h8>Lorem ipsum dolor sit amet, consiscing elit,</h8>
<img class="fright" src="आपनी पोस्ट के आइकान का लिंक (URL) यहाँ पर लिखें " alt="" />
<p style="font-size:15px;" class="extra">अपनी पोस्ट के बारे में लिखें</p>
<p style="font-size:15px;padding-top:10px;" class="extra">अपनी पोस्ट के कुछ खास अंश यहाँ पर लिखें </p>
</div></div>

<div id="text-controls">
<ul id="nav-text"></ul>
</div>
<div class="clear"></div>
</article>
</div>
<!-- ======= TEXT Slider Start ======= -->

नोट : आप को उपरोक्त सारी प्रक्रिया एडिट मोड में करनी है |

Text Slider

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

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

क्या कहा नहीं ? मैं आपको बताऊंगा कि इसे अपने ब्लॉग पर स्थापित कैसे किया जाये | आप इस स्लाइडर को इसी पोस्ट पर इस पोस्ट से पहले लगा देख सकते हैं | Read More >>>

अपने ब्लॉग पर नोटपैड कैसे स्थापित करें ?

इस नोटपैड को अपने ब्लॉग पर स्थापित करना बहुत ही आसान है | अब कई ब्लॉगर पूछेंगे कि इसे अपने ब्लॉग पर स्थापित करने का फायदा क्या है |

इसका सबसे बड़ा फायदा ये है कि मान लो आप कंप्यूटर पर इन्टरनेट सर्फ़ कर रहे है अचानक ही आपके साहमने कोई महत्वपूर्ण सूचना आ जाती है तो आप झट से उसे समेत लेना चाहेंगे तो ऐसी सूचना को तुरंत सेव करने के लिए इस नोटपैड का इस्तेमाल किया जा सकता है | Read More >>>

थोडा नहीं काफी मजबूत ताला सिर्फ एक कलिक पर और लाक आपके ब्लॉग पर

आप अक्सर पढते है कि ब्लॉग का टेक्स्ट चोरी हो गया | ब्लॉग पर लगाया गया ताला आसानी से टूट गया

उस में एक कमी थी कि जो ब्लॉगर मोज़िला फायरफाक्स का इस्तेमाल करते थे उन के लिए टेक्स्ट को कापी करना काफी आसान था | Read More >>>

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

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

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