क्या आप जानते हैं कि तस्वीर के नीचे कैप्शन लगाने की साथ-साथ तस्वीर को मनमाफिक ढंग से खूबसूरत ढंग से कैसे पेश किया जा सकता है ?

भाग दो : गतांक से आगे...

     मैंने अपने पिछले लेख में तस्वीर के साथ कैप्शन का प्रयोग कैसे किया जाए इसके बारे में जानकारी दी थी | आज के लेख में प्रस्तुत है तस्वीर को कैप्शन लगाने के बाद खूबसूरत ढंग से कैसे सजाया जाए | पिछली पोस्ट में मनोज जी इस पोस्ट को पढ़ कर इसी तरह का प्रयोग किया परन्तु उनको सफलता नहीं मिली | इसके बारे में भी आज विस्तार से बताने की कोशिश की जायेगी | विस्तार से लिखने का मकसद ही यही है कि एक आम प्रयोक्ता भी उसे आसानी से समझ सके जो एक टैक्नीक का ज्ञान रखने वाला व्यक्ति इस का प्रयोग आसानी से कर लेता है | आज के इस लेख में मैं अपने किसी भी पैराग्राफ में किसी भी बैकग्राउंड का प्रयोग नहीं करूँगा | क्योंकि आज के इस लेख में तस्वीर को कैप्शन के बाद खूबसूरत ढंग से कैसे सजाया जाए पर विस्तार से बताने की कोशिश की जानी है | आप जो भी तस्वीर अपनी पोस्ट में दिखाना चाहते हैं वो किसी भी फार्मेट हो सकती हैं | परन्तु इन्टरनेट पर image.png image.jpg image.bmp image.gif आदि का प्रचलन ज्यादा है लेकिन इनमे से सबसे ज्यादा image.png का प्रचलन बढ़ता जा रहा है | इसका के कारण ये है इस प्रकार की तस्वीर के साथ किसी तरह की कोई बैकग्राउंड नहीं होती | इसका एक उदारण (मेरे ब्लॉग का लोगो जो कि png फार्मेट में है ) आप नीचे देख सकते हैं |



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

      आप नीचे टिप्स हिंदी में ब्लॉग का लोगो देख रहे हैं जो PNG फार्मेट में है



      अब इस तस्वीर के इर्द गिर्द आप यदि बार्डर लगाना चाहते हैं तो आप ऐसा कर सकते हैं इस के लिए आपको किसी भी प्रकार के पैन या पेंसिल की जरूरत नहीं पड़ेगी | इसके लिए एक छोटा सा कोड इस्तेमाल करना होगा | मैंने आपनी पिछली पोस्ट के अंत में जिस कोड का प्रयोग किया था उसी कोड को आप नीचे देख सकते हैं | उसी कोड में एक और छोटा सा कोड और इस्तेमाल किया जाए तो आपकी तस्वीर के इर्द-गिर्द एक बार्डर बन जायेगा | देखिए कैसे होता है ये सब | आप निम्न दोनों प्रकार के कोड को ध्यान से देखें | एक कोड बिना बार्डर के है व एक कोड समेत बार्डर के है :-

पहला कोड
<div style="float:right; text-color:#fff;"> <img width="200: height="190" src="यहाँ पर आप अपनी तस्वीर का लिंक लिखेंगे" title="यहाँ पर आप इस तस्वीर का टाइटल लिखेंगे"/><br/>लोगो "टिप्स हिंदी में"</div>

दूसरा कोड <div style="float:right; text-color:#fff;border:5px solid #f60;"> <img width="200: height="190" src="यहाँ पर आप अपनी तस्वीर का लिंक लिखेंगे" title="यहाँ पर आप इस तस्वीर का टाइटल लिखेंगे"/><br/>लोगो "टिप्स हिंदी में"</div>

     आपने उपरोक्त दोनों तस्वीर को देखा | पहली तस्वीर पहले कोड अनुसार है व दूसरी तस्वीर दूसरे कोड अनुसार है | दूसरे कोड में border:5px solid #f60 एक छोटे से कोड का इस्तेमाल किया है | इसके इस्तेमाल से ही दूसरी तस्वीर के इर्द-गिर्द बार्डर दिखाई दे रहा है | आप इस कोड में अपने अनुसार फेरबदल कर सकते हैं जहाँ पर 5px लिखा है इसका मतलब है कि उपरोक्त तस्वीर के इर्द-गिर्द जो बरदार दिखाई दे रहा है उसकी मोटाई 5px है इसकी मोटाई यदि आप कम करते हैं तो तस्वीर के इर्दगिर्द दिखाई देने वाले बार्डर की मोटाई कम हो जायेगी व ज्यादा करने पर ज्यादा | जहाँ पर solid लिखा है इसका मतलब है कि तस्वीर के इर्दगिर्द दिखाई देने वाला बार्डर ठोस, एकसार सा बार्डर हो| यदि आप सोलिड की जगह dotted लिखेंगे तो आपको तस्वीर के इर्द गिर्द निम्न अनुसार बार्डर दिखाई देगा :-



     इसी प्रकार यदि आप dotted की जगह dashed लिखेंगे तो उस तस्वीर के इर्दगिर्द बार्डर उपरोक्त से दूसरी तस्वीर अनुसार दिखाई देगा | अब बात आती है किसी भी तस्वीर के इर्दगिर्द दिखाई दे रहे बार्डर के रंग चयन करने की | जहाँ पर आप solid के बाद #f60 लिखा देख रहे हैं वह कोड किसी भी तस्वीर के इर्दगिर्द दिखाई देने वाले बार्डर के रंग को चयन करने के लिए है | आप हैश के बाद जिस कलर का प्रयोग करना चाहते हैं उस कलर का कोड लिख दें | बार्डर का रंग बदल जायेगा | आप निम्न दो तस्वीर में इसका प्रयोग देख सकते हैं पहली तस्वीर में मैंने #f60 की जगह #228C06का प्रयोग किया है व दूसरी तस्वीर में #f60 की जगह #158FC2का प्रयोग किया है | आप खुद फर्क महसूस करें :-

     अब बार्डर लगाने के बाद इस बार्डर के कार्नर को गोल करने के लिए भी एक कोड का इस्तेमाल किया जाता है | आप निम्न कोड को ध्यान से देखें | इस कोड में एक और छोटा सा को और लिखा गया है | कोड निम्नलिखित है :-

बार्डर की गोलाई के लिए कोड <div style="float:right; text-color:#fff;border:5px solid #f60;border-radius:10px 10px 10px 10px;"> <img width="200: height="190" src="यहाँ पर आप अपनी तस्वीर का लिंक लिखेंगे" title="यहाँ पर आप इस तस्वीर का टाइटल लिखेंगे"/><br/>लोगो "टिप्स हिंदी में"</div>



     आपने उपरोक्त कोड में देखा के एक और छोटा सा कोड border-radius"10px 10px 10px 10px; का इस्तेमाल करने से उपरोक्त दोनों तस्वीरों के किनारे गोल हो गए हैं | आप यहाँ पर 10px के जगह ज्यादा 15, 20 या 25 जितनी ज्यादा वैल्यू बढायेंगे उटी ही गोलाई बढती जायेगी व कम करने पर कम हो जायेगी | इसी प्रकार आप किसी भी तस्वीर के चारो तरफ हलकी सी छाया दिखाना चाहते है तो आप इस कोड का इस्तेमाल करेंगे -moz-box-shadow:0 0 10px #000;-webkit-box-shadow:0 0 10px #000;



     उपरोक्त दोनों तस्वीरों में मैंने दो अलग अलग रंग उपरोक्त कोड के साथ इस्तेमाल किये हैं | पहली तस्वीर के साथ मैंने -moz-box-shadow:0 0 10px #228C06;-webkit-box-shadow:0 0 10px #228C06; इस कोड का इस्तेमाल किया है व दूसरी तस्वीर के साथ -moz-box-shadow:0 0 10px #000;-webkit-box-shadow:0 0 10px #000;इस कोड का इस्तेमाल किया है | आप उपरोक्त दोनों तस्वीरों में अलग अलग रंग की छाया देख रहे हैं | ये छाया अलग अलग रंग के चयन से दिखाई देती है | मैंने पहली तस्वीर में हलके हरे रंग की छाया दिखने के लिए #228C06 इस कोड का इस्तेमाल किया व दूसरी तस्वीर में काले रंग की छाया दिखाने लिए #000 इस कोड का इस्तेमाल किया है |

     अब आप सोच रहे होंगे कि ये तो बड़ा पेचीदा काम हो गया | हर बार इतना बड़ा कोड प्रयोग करना तो बड़ा मुश्किल है | इसी मुश्किल को आसान करने के लिए पर्सनल व प्रोफैशनल साईटस में style.css नाम से एक फाइल बना कर उसे सर्वर पर अपलोड कर दिया जाता है व इसी प्रकार के कोड लिख दिए जाते है व इन कोड को आम भाषा में एक नाम दे दिया जाता है जैसे मैंने इस कोड को imgbx नाम दिया है | उसके बाद उस नाम का प्रयोग class="imgbx" इस प्रकार लिखकर उस कोड को कालबैक कर लिया जाता है | जबकि ब्लॉग में हमें इस प्रकार की सुविधा नही है | क्योंकि इन ब्लॉग पर हमारा कोई मालिकाना अधिकार नहीं है | परन्तु गूगल ने हमें इस प्रकार के कोड को टेम्पलेट के एडिट मोड में लगाने की सुविधा प्रदान की हुई है जिससे कि हम सभी किसी भी प्रोफैशनल साईटस की तरह ही इन कोड का इस्तेमाल कर सकते हैं | इसके लिए हमें इस प्रकार के कोड को ]]></b:skin> इस के ठीक ऊपर लिख दिया जाता है | अब इसी प्रकार की क्लास का निर्माण कैसे किया जाता है इसे आप नीचे देखें :-

.imgbx { float:right; text-color:#fff; border:3px solid #228C06; border-radius:10px 10px 10px 10px; -moz-box-shadow:0 0 10px #228C06; -webkit-box-shadow:0 0 10px #228C06; }

पहला तरीका :   अब इस कोड टेम्पलेट के Edit HTML मोड में जा कर ]]></b:skin>ठीक इस कोड के ऊपर पेस्ट कर दे व सेव टेम्पलेट पर कलिक करे दें | ये तरीका वो ब्लॉगर प्रयोग करें जो टेम्पलेट के एडिट मोड में नहीं जाना चाहते |

दूसरा तरीका : आप निम्न कोड को कापी करके अपनी उस पोस्ट में पेस्ट कर दें जिस पोस्ट में इस क्लास का प्रयोग करना चाहते हैं |

<style type="text/css"> .imgbx { float:right; text-color:#fff; border:3px solid #228C06; border-radius:10px 10px 10px 10px; -moz-box-shadow:0 0 10px #228C06; -webkit-box-shadow:0 0 10px #228C06; } </style>

तीसरा तरीका : आप इस दूसरे तरीके में दिखाए गए कोड को कापी करके HTML/Javascript विजेट का सलेक्शन करके उसमें इस कोड को पेस्ट करके इस विजेट को अपने ब्लॉग के साइड बार में लगा लें | ये तरीका वो ब्लॉगर प्रयोग करें जो टेम्पलेट के एडिट मोड में नहीं जाना चाहते |

चौथा तरीका : अपने ब्लॉग पर लागइन करें फिर सेटिंग पर फिर फार्मेटिंग पर फिर जहाँ पर सबसे अंत में "Post template" लिखा है उस के साहमने दिखाई दे रहे बाक्स में इस कोड को पेस्ट करने के बाद सेव सेटिंग अपर कलिक करे दें | आब जब भी आप नई पोस्ट लिखने के लिए न्यू पोस्ट पर कलिक करेंगे तो ये कोड आपको अपनी पोस्ट में पहले से उपलब्ध होगा |

     आप उपरोक्त तस्वीर को ध्यान से देखिए कि जो कोड आप को ऊपर दूसरे बाक्स में बताया गया था उसी कोड का इस्तेमाल किया गया है |

<div class="imgbx"><img src="तस्वीर का लिंक यहाँ पर लिखें"/></div>

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

<div class="imgbx"><img src="तस्वीर का लिंक यहाँ पर लिखें" width="300"/></div>


     आपने उपरोक्त कोड में देखा कि जहाँ पर मैंने ऑरेंज रंग में चौड़ाई को तय किया है | आप भी इसी प्रकार आपनी किसी भी तस्वीर की चौड़ाई को तय कर सकते हैं | इसी का एक उदाहरण आप नीचे देखें :-

     जहाँ पर "यहाँ पर आप अपनी तस्वीर का लिंक लिखेंगे" लिखा है का मतलब है कि वहाँ पर आप कहीं भी अपलोड की गई तस्वीर का लिंक लिखेंगे | जैसे मैंने आपने ब्लॉग को लोगो इस्तेमाल किया है उसका लिंक ये है https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg286UXzHtjdx3ZbjAM2_dq8UE_CFAdQga6G5BU1CSraInnNu2mfDtLqlDW2-TwVKsoV-AsbNFCObzNu6sCYEyZ6eZdBvVYrWR3Ogm3hR9D6-N_17_EyJD50hkgMMjQp8yWhX0qGL7x7_0/s1600/Stamp_tips_hindi_mein_1.png इसी प्रकार वहाँ पर अपने या खुद द्वारा प्रयोग की गई तस्वीर का लिंक प्रयोग करेंगे | तस्वीर का लिंक प्रयोग करने के बाद कोड कुछ इस तरह से होगा :-


जहाँ पर "यहाँ पर आप अपनी तस्वीर का लिंक लिखेंगे" लिखा है का मतलब है कि वहाँ पर आप कहीं भी अपलोड की गई तस्वीर का लिंक लिखेंगे | जैसे मैंने आपने ब्लॉग को लोगो इस्तेमाल किया है उसका लिंक ये है https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg286UXzHtjdx3ZbjAM2_dq8UE_CFAdQga6G5BU1CSraInnNu2mfDtLqlDW2-TwVKsoV-AsbNFCObzNu6sCYEyZ6eZdBvVYrWR3Ogm3hR9D6-N_17_EyJD50hkgMMjQp8yWhX0qGL7x7_0/s1600/Stamp_tips_hindi_mein_1.png इसी प्रकार वहाँ पर अपने या खुद द्वारा प्रयोग की गई तस्वीर का लिंक प्रयोग करेंगे | तस्वीर का लिंक प्रयोग करने के बाद कोड कुछ इस तरह से होगा :-

<div style="float:right; text-color:#fff;"> <img width="200: height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg286UXzHtjdx3ZbjAM2_dq8UE_CFAdQga6G5BU1CSraInnNu2mfDtLqlDW2-TwVKsoV-AsbNFCObzNu6sCYEyZ6eZdBvVYrWR3Ogm3hR9D6-N_17_EyJD50hkgMMjQp8yWhX0qGL7x7_0/s1600/Stamp_tips_hindi_mein_1.png" title="टिप्स हिंदी में"/>
लोगो "टिप्स हिंदी में"</div>
उपरोक्त कोड में तस्वीर के लिंक को ऑरेंज रंग से दिखाया गया है व टाइटल को भी ऑरेंज रंग में दिखाया गया है | इस टाइटल की जगह आप अपने ब्लॉग का कोई भी सन्देश या उस पोस्ट से संबंधित किसी भी मेसेज को लिख सकते हैं | तो लुत्फ़ उठाइए तस्वीर को अपने मनमाफिक ढंग से दिखा कर | हैपी ब्लॉगगिंग !!!!

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

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