Animated Image Caption Kya Hai - Kaise Use Kare


Animated Image Caption In HTML

दोस्तों! आप सभी को राम-राम । मैं आज एक और खास चीज लेकर आपके सामने मौजूद हो गया हूँ, जिसका नाम है ब्लोग कि Photo पर Animated Image Caption कैसे लगाये (Animated Image Caption For Blog/Website) जोकि आपके ब्लोग कि फोटो को और भी अच्छा एवं जरुरी रुप देगी जिससे आपकी फोटो लोगो को और अच्छे से समझ आयेगी और कुछ अलग Effect भी देगी जो आपके ब्लोग पर आने वाले लोगों को खासा प्रभावित करेंगी। आपके ब्लोग का Template कितना भी अच्छा क्यों ना हो परन्तु इसमे भी कुछ ऐसी चीजे होती हैं जिसे आपको खुद ही Design करना होता है इनमें से ही एक चीज़ है फोटो डिजाइन करना यहाँ हम आपको यही बतानें की कोशिश करेंगे कि कैसे आप अपनी बेवसाइट कि फोटो को अपने हिसाब से सुन्दर बना सकते है।आइए ज्यादा समय ना गवांते हुए सीधा चलते हैं अपनी पोस्ट कि ओर।

  • Animated Image Caption For Blog
  • Animated Image Caption क्या है?

    फोटो कैप्शन का अर्थ है किसी फोटो के बारे मे लिखीं जाने वाली कुछ लाइनें जो उस फोटो को सप्ष्ट रुप से व्यक्त करती हो, यहाँ हम Animated Image Caption For Blog कि बात करेंगे, जो कि देखने मे भी अच्छा लगेगा। यहाँ चित्र मे आप देख सकते हैं कि किस प्रकार चित्र मे सबसे शीर्ष पर Title तथा सबसे नीचे उस फोटो के बारे मे कुछ Description या Caption लिखा हुआ है जो कि आपके द्वारा डाले गये चित्रों के विवरण को भलि भांति दर्शाता हैं। उम्मीद करता हूँ कि आप Animated Image Caption के बारे मे भलि प्रकार से समझ गये होगें। इसकी अहमियत समझने के लिये आइये इसकी कुछ खासियतो के बारे मे जान लेते हैं।

  • Animated image caption demo
  • Animated Image Caption की कुछ खासियते

    • 1. यह आपके ब्लोग को नया रुप देगा।
    • 2. इसे Apply करना बहुत आसान है।
    • 3. यह Image Caption, Hover पर ही दिखेगा, यानि जब आप फोटो पर Cursor लेकर जायेगे तो Image Caption अपने आप आ जायेगा।
    • 4. आप किसी भी फोटो को और अच्छी तरह Explain कर पायेंगे।


    यह भी पढे:कैसे चलाये फ्री इन्टरनेट ज़िन्दगी भर
    यह भी पढे:कैसे अपने वॉट्सएप अकाउंट को करे सिक्योर
    यह भी पढे:फेसबुक के बारे मे अजीबोगरीब बातें
    यह भी पढे:ये है वो 10 Apps जिनका साइज बहुत ही कम है।



    Animated Image Caption को Blog पर कैसे लगाये:-

      इसे अपने ब्लोग पर लगाना बहुत ही आसान है इसे आप चन्द मिनटों मे अपने ब्लोग पर Apply कर पायेंगे।

    1. सबसे पहले Blogger Dashboard >> Theme >> Edit Theme पर जाये।
    2. अब यहाँ Ctrl+f कि मदद से </style> tag को ढूंढ़े, तथा इसके ठीक ऊपर , नीचे दिया गया कोड (Code) Copy करके Paste कर दें।

    3. #bt_imageeffect { margin: 20px auto; width: 100%;min-height: 350px; padding: 20px 0; text-align: center; }
      .galleryItem { display: inline-block;; position: relative; padding: 0;margin: 0 20px; border: solid 10px #fff;-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25); }
      .caption { position: relative; width: 350px; height: 150px; z-index: 10; }
      .caption::before { content: attr(data-title); position: absolute; left: 27px; height: 0; font-family: 'Croissant One', cursive; font-size: 1.8em;font-weight: 600; line-height: 1.4em;color: #086FA1; background: rgba(255, 255, 255, 0.83); overflow: hidden; -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -ms-transition: all 0.9s ease; -o-transition: all 0.9s ease; transition: all 0.9s ease; }
      .caption::after { content: attr(data-description); position: absolute; bottom: -0;left: 0;height: 0; font-family: 'Poiret One', cursive; font-size: 1.1em; font-weight: 400; line-height: 1.4em;color: #fff; background: #222; overflow: hidden;-webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -ms-transition: all 0.9s ease; -o-transition: all 0.9s ease; transition: all 0.9s ease; }
      .caption:hover::before { height: 125px; } .caption:hover::after { bottom: 0;height: 125px; }
    4. अब आपको जहाँ भी फोटो लगानी हैं वहाँ आप नीचे दिया गया कोड कॉपी करके पेस्ट कर दे, तथा उसमें कुछ जरुरी बदलाव भी कर ले।

    5. <div id="bt_imageeffect"> <li class="galleryItem"> <a class="caption" data-description="Enter Text here" data-title="Image title" class="separator" style="clear: both; text-align: center;"><img src="Enter URL" alt="HaxiTrick" width="550" height="335"/></a></li></div>
      • सबसे पहले आप जहाँ Image Title लिखा है उसे अपनी फोटो के Title यानि कि अपनी फोटो के Title से बदल लें।
      • अब आप अपनी फोटो के बारे मे जो कुछ भी लिखना चाहते है उसे Enter text here me लिख ले ।
      • अब आपको अपनी फोटो का लिन्क यानि URL, Enter URL के स्थान पर डालना हैं ।
      • अब सिर्फ़ आपको अपनी फोटो के साइज को अपने हिसाब से Set करना है इसके लिए आप Width व Height अपने हिसाब से बदल ले।

    बस हो गया आपने सफलतापूर्वक अपने ब्लोग पर Image Caption लगा दिया हैं ।

    Demo:- Animated Image Caption का Demo आप इस पोस्ट कि पहली फोटो पर देख सकते है।

    अंतिम शब्द

    आपको Animated Image Caption For Blog कि यह पोस्ट आपको कैसी लगी हमे Comment करके जरुर बताये‌, यदि आपको इस पोस्ट मे किसी भी तरह कि दिक्कत आ रही है तो Comment करना ना भुले। हमें अपनी शिकायते तथा सुझाव Comments के द्वारा जरुर बताये।


    Animated Image Caption Kya Hai - Kaise Use Kare Animated Image Caption Kya Hai - Kaise Use Kare Reviewed by HaxiTrick on Tuesday, October 24, 2017 Rating: 5
    Powered by Blogger.