how to setup bubble tool tip script

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

---

आप सभी ने टिप्स हिंदी में ब्लॉग पर पेश सभी ट्रिक्स को सराहा है | आप सभी का तहे दिल से शुक्रिया |

आज आपके लिए पेश है बबल टूल स्क्रिप्ट

अब आप ये जानना भी चाहेगे कि इसका फायदा क्या है ? तो लगे हाथो एक छोटा सा उदाहरण आपको बता देते हैं |

मान लीजिए कि आप कोई गज़ल लिखते हैं | आप उस गज़ल में कुछ उर्दू के शब्दों का प्रयोग करते हैं | गज़ल लिखने के पश्चात आप को लगता है कि कुछ शब्दों के अर्थ भी लिखने चाहिए | तो इसके लिए आप सब एक ही फार्मूला अपनाते हैं कि गज़ल के अंत में उन शब्दों के अर्थ लिखते हैं | शब्दों के अर्थ को गज़ल के अंत में लिखने में कोई बुराई नहीं है | लेकिन पढ़ने वालो को उन शब्दों के अर्थ के लिए बार-बार उस गज़ल के नीचे जा कर अर्थ को देखना पड़ता है |

आप एक उदाहरण मोहब्बतनामा ब्लॉग पर देख सकते हैं |

---

तसव्वुरजागती आँखों का सपना में नजर आये ख्यालों में नजर आये ,
मुझे तो हर जगह दिलबर तेरा चेहरा नजर आये |

---

अब आप उपरोक्त दो लाइनों पर गौर करें, जहाँ पर तसव्वुर लाल रंग में नज़र आ रहा है मैंने इसी शब्द पर इस स्क्रिप्ट का प्रयोग किया है |
जब आप इस शब्द पर माउस को ले कर जायेंगे तो तुरंत ही एक बबल उभरेगा | आप इसी बबल में अपना वो छोटा सा सन्देश लिख सकते हैं | इसी का एक उदाहरण आप निम्न तस्वीर में देख सकते हैं |

---

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

पहला कदम : आप निम्न बटन पर कलिक करके CSS कोड को अपने ब्लॉग पर स्थापित कर लें |

<br /> <center><style type="text/css"> /* ---- bubble tooltip ----*/ .tt { position:relative; z-index:24; font-size:14px; color: red; text-decoration:none; } .tt span { display: none; } .tt:hover { z-index:25; color: #000;} .tt:hover span.tooltip { display:block; position:absolute; bottom:0; *bottom:-10px; left:-44px; width:200px; color: #787878; text-align: center; filter: alpha(opacity:95); KHTMLOpacity: 0.95; MozOpacity: 0.95; opacity: 0.95; } .tt:hover span.triangle-obtuse { display:block; position:relative; padding:8px; margin:1em 0 3em; color:#fff; background:#B90C39; /* css3 */ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .tt:hover span.triangle-obtuse:before { content:""; position:absolute; bottom:-9px; /* value = - border-top-width - border-bottom-width */ left:39px; /* controls horizontal position */ border-width:10px 10px 0; border-style:solid; border-color:#B90C39 transparent; /* reduce the damage in FF3.0 */ display:block; width:0; } /* creates the narrower right-angled triangle */ .tt:hover span.triangle-obtuse:after { content:""; position:absolute; bottom:-9px; /* value = - border-top-width - border-bottom-width */ left:40px; /* value = (:before left) + (:before border-left) - (:after border-left) */ border-width:10px 10px 0; border-style:solid; border-color:#B90C39 transparent; /* reduce the damage in FF3.0 */ display:block; width:0; } /* ---- bubble tooltip end ----*/ </style><br /> </center>

दूसरा कदम : अब जाने कि इसका उपयोग कैसे करना है ? निम्न कोड को ध्यान से देखें |

<a class="tt" href="#">तसव्वुर<span class="tooltip"><span class="triangle-obtuse">जागती आँखों का सपना </span></span></a>

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

---

स्पेशल सूचना
इस ब्लॉग पर एक नया कालम शुरू किया जा रहा है नाम है
पकी पकाई खाने वाले इस कालम में उन ब्लॉगस की कारगुजारियों को उजागर करने की कोशिश की जायेगी जो कुछ नया न पेश करके आपकी पोस्ट को कापी करके सिर्फ चिपकाने का काम करते हैं | यदि आपके पास भी ऐसी कोई जानकारी है ऐसे किसी ब्लॉग के बारे में तो, आप मुझे मेल कर सकते हैं |

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

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