आईये घूमता ब्लॉगरोल बनायें

हिन्दी चिट्ठाजगत में ब्लॉगरोल का महत्व का बड़ा महत्व है। हम अपने चिट्ठों के साईडबार में अपने पसंदीदा चिटठों का या अपने पसंदीदा साईटस के लिंक देते हैं। कई बार यह लिस्ट इतनी लम्बी हो जाती है कि दूसरे चिट्ठों की लिंक या दूसरी महत्वपूर्ण लिंक बहुत नीचे चले जाते हैं।

मैने बहुत दिनों तक इसका उपाय खोजा कि सारे चिट्ठे भी रहें और जगह भी कम घेरे। मुझे आखिरकार कल इसका इलाज मिल ही गया।

कल पूरा दिन इसके पीछे बर्बाद करने के बाद मैने पहले रेडियोनामा पर इसका प्रयोग किया और सफल रहा तो मन हुआ कि यह प्रयोग आप सबको बताना चाहिये।

तो प्रस्तुत है आप सबके लिये यह काम का और मजेदार तरीका जिससे आपके साईडबार में दिये ब्लॉगरोल के लिंक उपर या नीचे घूमने लगेगा और बहुत ही कम जगह रोकेगा। जिससे आप और भी ज्यादा लिंक, कोड या फोटो लगा सकते हैं।

सबसे पहले अपने ब्लॉगर में जाकर Dashboard- Layout - Add and Arrange Page Elements में जाकर एक HTML/Java Script वाली खिड़की खोल लेवें। और नीचे बताये गये कोड को कॉपी कर लेवें और उस खिड़की में पेस्ट कर लेवें।

<div style="width:250px; height:300px; overflow:auto; white-space:normal;">
 <div class="widget-content">
<marquee direction="up" onmouseover="this.stop()" width="100%" onmouseout="this.start()" scrollamount="2" align="center">
    <ul>
   <li><a href="http://www.epandit.blogspot.com/" target="_blank">ई- पण्डित</a></li>
<li><a href="http://mahaphil.blogspot.com" target="_new">गीतों की महफिल</a></li>
<li><a href="http://hindini.com/fursatiya/" target="_new">फुरसतिया</a></li>
<li><a href="http://diaryofanindian.blogspot.com" target="_new">अनिल रघुराज की डायरी</a></li>
<li><a href="http://kakesh.com" target="_new">काकेश की कतरनें</a></li>
<li><a href="http://jitu.info/merapanna" target="_new">जीतू का पन्ना</a></li>
<li><a href="http://udantashtari.blogspot.com" target="_new">उड़नतश्तरी</a></li>
<li><a href="http://www.kalpana.it/hindi/blog" target="_new">जो डॉ सुनील ही कह सके</a></li>
  <li><a href="http://ankurthoughts.blogspot.com//" target="_blank">अंकुर गुप्ता</a></li>
<li><a href="http://raviratlami.blogspot.com/" target="_blank">रवि रतलामी</a></li>
<li><a href="http://takneek.wordpress.com/" target="_blank">तकनीकी चिट्ठा</a></li>
</ul>
</marquee></div>
</div>

अब इस कोड के बाद अपने पसंदीदा चिट्ठों के लिंक नीचे बताये अनुसार लिख लेवें। आप चाहें तो प्रयोग के लिये इसे ही कॉपी कर सकते हैं। पेस्ट कर देने के बाद प्रीव्य़ू देखें।
आपके साईड बार के लिंक उपर की तरफ चल रहे हैं। आप माऊस के तीर को उसके पास लेकर जायेंगे तो वह रुक जायेगा, ताकि आप अपने पसंदीदा चिट्ठे/ लिंक पर क्लिक कर सकें।

ध्यान देने योग्य बातें:

सबसे पहली खिड़की में बताये कोड में 200 की जगह 300 या और कम ज्यादा करने से खिड़की की साईज छोटी या बड़ी होगी।

direction="up" की जगह Down लिखने से लिंक उपर से नीचे की और घूमेंगे। आप चाहें तो इसी तरह दायें बायें भी घुमा सकते हैं परन्तु उससे खिड़की की साईज बड़ी करनी पड़ेगी, और इस कोड को लिखने का कोई अर्थ नहीं रहेगा। इसलिये आप उपर या नीचे ही पसन्द करें।

इसी तरह scrollAmount="3" में 3 की बजाय 2 या 1 लिखने से लिंक के घूमने की गति धीमी होगी और 4-5 या ज्यादा लिखने से गति तेज होगी।

सबसे पहले यह कोड फायरफॉक्स में काम नहीं करता था सो मुझे अमितजी की मदद लेनी पड़ी। अमित गुप्‍ता जी
ने जो कोड बताया जिससे कुछ हद तक बड़े ब्लॉगरोल की समस्या हल हो जाती थी। इस कोड को जोड़ने पर ब्लॉगरोल के साईड में एक स्क्रोलर आ जाता था जिसको घुमाने से ब्लॉगरोल के लिंक उपर नीचे किये जा सकते थे।
चित्र देखिये

मुझे संतोष नहीं था, मैं चाहता था ब्लॉगरोल का यह कोड फायरफोक्स में चलने के साथ साथ उनके लिंक भी नीचे से उपर या उपर से नीचे घूमते हुए होने चाहिये ताकि पाठक को (स्क्रोल) घुमाना ना पड़े।

आखिरकार थोड़ी और मेहनत करने के बाद मैने अमित जी के दिये कोड को और मेरे पिछले कोड को मिला दिया और नया कोड जो बना वह फायरफोक्स में भी बिल्कुल सही चलने लगा। नया कोड उपर बताया गया है।
यह पोस्ट लिख ही रहा था कि पिछली पोस्ट पर श्री हरिरामजी की टिप्पणी मिली कि क्या इसमें इमेज को भी इस तरह मर्क किया जा सकता है?

जी हरिरामजी बिल्कुल इसमें इमेज को भी आसानी से मर्क किया जा सकता है। आप सब की जानकारी के लिये मैने हिन्दी चिट्ठाजगत के तीनो एग्रीग्रेटर, रेडियोवाणी और मेरी गीतों की महफिल के लोगो को यहाँ घूमते हुए बताया है, जिससे बहुत सारे लोगो भी हों तो भी साईडबार ज्यादा जगह नहीं घेरेगा।
नीचे दिये गये कोड को कॉपी कर लीजिये और अपने चिट्ठे के साईडबार में एक सही जगह पेस्ट कर दीजिये। ( विधी उपर बताई है)

<div style="width:150px; height:200px; overflow:auto; white-space:normal;">
 <div class="widget-content">
<marquee direction="up" onmouseover="this.stop()" width="100%" onmouseout="this.start()" scrollamount="2" align="center">
        <a href="http://www.blogvani.com/logo.aspx?blog=http://radionamaa.blogspot.com/"><img alt="www.blogvani.com" style="border:0" src="http://blogvani.com/images/blogvanilink.jpg"/></a><!-- Blogvani Link Ends -->
<a href="http://www.chitthajagat.in/" title="चिट्ठाजगत"><img border="0" alt="चिट्ठाजगत" src="http://www.chitthajagat.in/chavi/chitthajagat.png" title="चिट्ठाजगत"/></a>
<a href="http://www.akshargram.com/narad" target="_blank"><img border="1" alt="NARAD:Hindi Blog Aggregator" src=" http://www.jitu.info/images/narad.jpg"/></a>
<a href="http://radiovani.blogspot.com" target="_blank"><img border="0" alt="रेडियोवाणी" src="http://i74.photobucket.com/albums/i278/nahar7772/Radiovani-1.jpg"/></a>
<a href="http://mahaphil.blogspot.com" target="_blank"><img border="0" alt="महफिल" src=" http://i142.photobucket.com/albums/r108/grjoshee/geetonkimahphil.jpg"/></a>
</marquee>
</div>

कोड यहाँ से भी कॉपी किया जा सकता है।
marquee.txt

इस कोड में मैने खिड़की की साईज 200px रखी है आप इसे कम या ज्यादा कर सकते हैं। scrollamount="2" मैने 2 रखी है आप इसे कम ज्यादा कर घूमने की गति को बढ़ा या घटा सकते हैं।