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

2 tips hindi me शुक्रवार, दिसंबर 09, 2011

क्या आप भी प्रोफैशनल साईट की तरह अपनी पोस्ट पर 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 रीबन का आई-मैजिक अंदाज़ पसंद आया ? यदि हां !!! तो अपने विचारों से अवगत कराएं |

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

एक टिप्पणी भेजें

2 टिप्पणियाँ

* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Atul Shrivastavaशनि दिस॰ 10, 12:39:00 am 2011
बढिया जानकारी।
जवाब देंहटाएं
उत्तर
बेनामीशनि जन॰ 28, 09:24:00 am 2012
Great article and blog and we want more :)
जवाब देंहटाएं
उत्तर

टिप्पणी जोड़ें

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