पेपर बोर्ड जैसी बैकग्राउंड अपने ब्लॉग पर कैसे स्थापित करें ?

पेपर बोर्ड जैसी बैकग्राउंड अपने ब्लॉग पर कैसे स्थापित करें ?

      क्या सच में ऐसा हो सकता हैं ? जी हाँ, ऐसा हो सकता है | आप ये पोस्ट जो देख रहे हैं, इसी पोस्ट पर पेपर बोर्ड बैकग्राउंड प्रयोग की गयी हैं | इस बैकग्राउंड को अपनी पोस्ट पर स्थापित करना बहुत ही आसान है | यदि आप इसे अपने ब्लॉग पर स्थापित करना चाहते हैं तो आप निम्न चरणों का पालन कीजिये :-

1. अपने ब्लॉग पर लाग-इन कीजिये |
2. डिजाईन पर कलिक करें |
3. निम्न बॉक्स में दिखाई दे रहे कोड को कापी करें |
4. HTML/Javascript विजेट का चयन करें |
5. कापी किये गए कोड को HTML/Javascript विजेट में पेस्ट कर के इस विजेट को अपने ब्लॉग की साईडबार में लगा लें |
<style type="text/css"> #wrapper {width:600px;margin:0 auto;margin-top:60px;margin-bottom:100px;} .wrapper-top {width:600px;height:19px;margin:0 auto; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiTAeSObBIqAKLf7OG9ZyYWJ5iwGW-eubEdkrzQi0q8Dv09WJTHqDHzejZtr8TsSa-P4Zyb60p3N6B8goRptzU-6VO01Xw8QiRnWc71BheqCqg60kspI2QcCctgIXBabEjrOvWF7IVxdw/s1600/btop.jpg);background-repeat:no-repeat;} .wrapper-mid {width:600px;margin:0 auto; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYDR5Mgs3-2KxoMX4a0xfZD47_CKyvhwgYag9u4tiqrG1KmYBHWdXq7uKvEEAqg4mRFpunSZ9QGv9FMR0NOIfLRLxdgjYRAQg7NKNGzGljqv86pmnFinTtvEIpMTUHhX5tc-Gr13dxAow/s1600/bmid.jpg);background-repeat: repeat-y;padding-bottom:40px;} .wrapper-bottom {width:600px;height:22px;padding:0;margin:0 auto; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2wQGV_1wucAECHEv2ZY9niUyUOZJ2SXpWZ5zbEl6EVkL4U0NYWGpacLPCVz5AuvuH2ziEQEPfoD37bnJw560alufEaT1WNOAed1y91BARv1QmWIK-AqZrqvDUnqLokNVUZWzRMFBoyb8/s1600/bbottom.jpg);background-repeat:no-repeat;} #paper {width:525px;margin:0 auto;} .paper-top {width:525px;margin:0 auto; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEireE4d3Gbnu_tr94dJnTuBiQEWLCLONVVv3HAepzP9m9gY0KD7exZssEKPzvHDrHTqzjNI49SOeaA_COTfI6pW9kVZ_BQ2G5rNUaKWMItzcUYioga_clbTILl-fp_58hwbYdYGKPioaUs/s1600/ptop.jpg);background-repeat:no-repeat;height:126px;} #paper-mid {width:525px;margin:0 auto;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9DK3LK-FurgkSzJVDKA4HfaowgsbITLYZkRWNTLGDD7v7x9tbRu5e6iGmcbJU8tPqO70QLn6kwr8eKcde5LihKw4FhDIVwBqYU_b5TPqo6iJ3XmK8dbZnvrno3yVO2Tte8XBicHzXexk/s1600/pmid.jpg);background-repeat:repeat-y;display:block;padding:0;overflow: hidden;padding-bottom:75px;padding-top:7px;} .paper-bottom {width:525px;height:18px;margin:0 auto; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7VPcuf7xrzkQ9ZobGp4kjKfCzm55Zuh7tWaD9aLD1XNVyza6SpNa3v6jAxghCnCvqNVImEMb0LuZazVN14-zKGksfmohtpZzyVwgf1Ttyo5Tq_PbFznUY_7xIZxhIKeGGx84d4DGaipk/s1600/pbottom.jpg);background-repeat:no-repeat;} img.portrait {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDFlWe5r1VzuMnK7G0TMuQjj9As_Pe6D8mYqPXZkRfrFLmaj3z28IcESBR1ldnFvcw8ON6-yy8zO5PBvGb_Y5bGzrlczUIcnntZjqM7XtbLARSNjALWFajym9VmDMynU__KEIxeu5p-54/s1600/frame.jpg);background-repeat: no-repeat; width:70px;height:70px;padding-top:14px;padding-left:8px;padding-right:11px; padding-bottom:36px;margin-left:17px;float:left;} .pp {color:blue; font-size:16px; line-height:25px; margin-left:15px; margin-right:15px; margin-top:15px; text-align:justify; } .pp b { color:#f60; } </style>

6. अब निम्न कोड में जहाँ पर यहाँ पर आप अपनी पोस्ट के बारे में विस्तार से लिखें | लिखा है वहाँ पर आप अपनी पोस्ट के बारे में लिखें | अपनी पोस्ट के कुछ अंश नारंगी रंग में दिखाने के लिए <b>हाईलाईट अंश यहाँ पर लिखें </b> इन टैग के बीच में उन अंश को लिखें |
<div id="wrapper">
<div class="wrapper-top"></div>
<div class="wrapper-mid">
<!-- Begin Paper -->
<div id="paper">
<div class="paper-top"></div>
<div id="paper-mid">
<div class="pp">यहाँ पर आप अपनी पोस्ट के बारे में विस्तार से लिखें | </div>
<div class="paper-bottom"></div>
</div>
<!-- End Paper -->
</div>
<div class="wrapper-bottom"></div>
</div>

7. आप को इस बैकग्राउंड का प्रयोग करने के लिए अपनी पोस्ट एडिट मोड में लिखनी होगी |
8. आप एडिट कोड का स्क्रीन शाट निम्न तस्वीर में देख सकते हैं |

Vaneet Nagpal
Interactive Designer

• 1154, Municipal Council Street, Jalalabad-152024
• mycityjalalabad@gmail.com
• +91 0 964 604 2574
• http://cityjalalabad.blogspot.com

लेबल : HTML ट्रिक्स ,

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

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