Topics :

मंगलवार, अक्तूबर 02, 2012

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

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

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


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

इस पापअप स्क्रीन में विडियो कैसे दिखाई देते हैं इसे आप निम्न चित्र में इसका डेमो देख सकते है :-

PopUp Video
आप इस स्क्रिप्ट का डेमो निम्न लिंक पर कलिक करके देख सकते हैं |
----View Demo----


यदि आप इस स्क्रिप्ट का प्रयोग करना चाहते है तो ये स्क्रिप्ट आप के लिए पेश है ये स्क्रिप्ट :-
पहला कदम : आप निम्न बटन पर कलिक करके इस स्क्रिप्ट को अपने ब्लॉग पर स्थापित कर लें | यदि आपने पहला स्टेप पूर्ण कर लिया तो समझिए के इस स्क्रिप्ट को अपने अपने ब्लॉग पर स्थापित कर लिया |







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


<table width="640">
<tr><td class=portfolio clearfix">
<h3><a href="#">Beginner PHP Tutorial - 2 - Installing XAMPP Part 1 </a></h3>
<a data-pretty="prettyPhoto[gallery1]" href="http://www.youtube.com/watch?v=k6ZiPqsBvEQ?rel=0">
<img alt="YouTube Demo" class="frame" height="207" src="http://4.bp.blogspot.com/-ZXeYbEV7UZk/UDtPUQShHOI/AAAAAAAAACY/QepMF407Ybc/s1600/default4.jpg" width="320" /></a> <br />
<br />
<a class="btn orange" href="http://cityjalalabad.blogspot.in">Learn More </a><br />
</td>
<td><h3><a href="#">Beginner PHP Tutorial - 2 - Installing XAMPP Part 2 </a></h3>
<a data-pretty="prettyPhoto[gallery1]" href="http://www.youtube.com/watch?v=k6ZiPqsBvEQ?rel=0">
<img alt="YouTube Demo" class="frame" height="207" src="http://4.bp.blogspot.com/-ZXeYbEV7UZk/UDtPUQShHOI/AAAAAAAAACY/QepMF407Ybc/s1600/default4.jpg" width="320" /></a><br />
<br />
<a class="btn orange" href="http://cityjalalabad.blogspot.in">Learn More </a><br />
</td>
</tr>
<tr>
<td><h3><a href="#">Beginner PHP Tutorial - 4 - Creating Your First PHP File </a></h3>
<a data-pretty="prettyPhoto[gallery1]" href="http://www.youtube.com/watch?v=7NuTyB8Ypxc?rel=0">
<img alt="YouTube Demo" class="frame" height="207" src="http://4.bp.blogspot.com/-ZXeYbEV7UZk/UDtPUQShHOI/AAAAAAAAACY/QepMF407Ybc/s1600/default4.jpg" width="320" /></a> <br />
<br />
<a class="btn orange" href="http://cityjalalabad.blogspot.in">Learn More </a><br />
</td>
<td><h3><a href="#">Beginner PHP Tutorial - 5 - Writing Your First PHP File</a></h3>
<a data-pretty="prettyPhoto[gallery1]" href="http://www.youtube.com/watch?v=saxBXBb-f8c?rel=0">
<img alt="YouTube Demo" class="frame" height="207" src="http://4.bp.blogspot.com/-ZXeYbEV7UZk/UDtPUQShHOI/AAAAAAAAACY/QepMF407Ybc/s1600/default4.jpg" width="320" /></a> <br />
<br />
<a class="btn orange" href="http://cityjalalabad.blogspot.in">Learn More </a><br />
</td>
</tr>
</table>

ये चार विडियो का कोड है | यदि आप सिर्फ एक विडियो का कोड लगाना चाहते हैं तो कोड निम्न प्रकार से होगा |


<table width="640">
<tr><td class=portfolio clearfix">
<h3><a href="#">Beginner PHP Tutorial - 2 - Installing XAMPP Part 1 </a></h3>
<a data-pretty="prettyPhoto[gallery1]" href="http://www.youtube.com/watch?v=k6ZiPqsBvEQ?rel=0">
<img alt="YouTube Demo" class="frame" height="207" src="http://4.bp.blogspot.com/-ZXeYbEV7UZk/UDtPUQShHOI/AAAAAAAAACY/QepMF407Ybc/s1600/default4.jpg" width="320" /></a> <br />
<br />
<a class="btn orange" href="http://cityjalalabad.blogspot.in">Learn More </a><br />
</td>
</tr>
</table>

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

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



Share this post :

4 टिप्‍पणियां:

Vaneet Nagpal
  1. [co="green"][si="3"] धन्यवाद सर, इसी की तलाश मुझे थी.....
    यह स्क्रिप्ट मेरे साथ और भी कई लोगों के काम आएगी आपका बहुत बहुत धन्यवाद सर. [/co][/si]

    उत्तर देंहटाएं
  2. Script lgane tak to samajh me aaya.aage vala samajh me nhi aaya.Post ko HTML me likhna he ya dusre me.

    उत्तर देंहटाएं
    उत्तर
    1. Compose व HTML दो मोड होते है आपने HTML में अपनी पोस्ट व लिंक को लिखना है |
      [im]http://2.bp.blogspot.com/-LP6_9kFrt_g/UHlvbO-eY_I/AAAAAAAAEE4/TyrZTTkQCrk/s1600/edit-html.jpg[/im]

      हटाएं

आपकी टिप्पणी मेरे लिए मेरे लिए "अमोल" होंगी | आपके नकारत्मक व सकारत्मक विचारों का स्वागत किया जायेगा | अभद्र व बिना नाम वाली टिप्पणी को प्रकाशित नहीं किया जायेगा | इसके साथ ही किसी भी पोस्ट को बहस का विषय न बनाएं | बहस के लिए प्राप्त टिप्पणियाँ हटा दी जाएँगी |