क्या आप भी प्रोफैशनल साईट की तरह अपनी पोस्ट पर 3D रीबन लगाना चाहते हैं ?

क्या आप भी प्रोफैशनल साईट की तरह अपनी पोस्ट पर 3D रीबन लगाना चाहते हैं ?

     आप ने बहुत सी प्रोफैशनल साइटस पर उपरोक्त अनुसार 3D रिबन लगे देखें होंगे | आपका भी मन करता होगा कि काश इस प्रकार के रीबन का प्रयोग हम भी अपने ब्लॉग पर कर सकते ! यदि आप कुछ ऐसी चाहत अपने मन में रखते हैं तो आप ऐसा कर सकते हैं | इन्टरनेट पर भ्रमण करते हुए ऐसा ही एक कोड प्राप्त हुआ है | ये पोस्ट उसी पोस्ट का हिंदी में अनुवाद है | जैसा के आप ऊपर देख रहे है कि मैंने इस पोस्ट के टाइटल को इसी प्रकार के रीबन पर लिखा है | बस इसी के प्रयोग के बारे में आपको बताने जा रहे हैं | बहुत ही आसान है इसका प्रयोग करना |

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

<style type="text/css"> .ribbon { font-size: 16px !important; /* This ribbon is based on a 16px font size and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */ position: relative; z-index: 1; background: #224718; width:400px; color: #fff; text-align: center; padding: 1em 2em; /* Adjust to suit */ margin: 0 0 3em 2em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */ } .ribbon:before, .ribbon:after { content: ""; position: absolute; display: block; bottom: -1em; border: 1.5em solid #224718; z-index: -1; } .ribbon:before { left: -2em; border-right-width: 1.5em; border-left-color: transparent; } .ribbon:after { right: -2em; border-left-width: 1.5em; border-right-color: transparent; } .ribbon .ribbon-content:before, .ribbon .ribbon-content:after { content: ""; position: absolute; display: block; border-style: solid; border-color: #34B701 transparent transparent transparent; bottom: -1em; } .ribbon .ribbon-content:before { left: 0; border-width: 1em 0 0 1em; } .ribbon .ribbon-content:after { right: 0; border-width: 1em 1em 0 0; } </style>

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

<p class="ribbon"> <strong class="ribbon-content">इस जगह पर आप अपना टेक्स्ट लिखेंगे |</strong> </p>

     यहाँ इस बात का ध्यान रखें कि आपने इस कोड का इस्तेमाल एडिट HTML मोड में करना है न कि कंपोज मोड में |

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

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