blog me code box kaise add kare
blog post me code box kaise add kare
Code box Blogger Blog post me kaise add kare हेलो Bloggers अगर आप अपने ब्लॉग पर Widget Se Related पोस्ट करते हो तो आपको Code box की जानकारी होना चाहिए ताकि आपके रीडर्स को Widget Code Copy करने मे आसानी हो
 |
| 4 Code box |
Code box पोस्ट मे add करने से न केवल रीडर्स को Code Copy करने मे आसानी होती है बल्कि आपके पोस्ट का Look भी अच्छा दिखता है मैंने यहाँ पर 4 Code दिया है और सभी code Working है आपको जो Code box पसंद आए उसे Copy कर ले
Blog post me Code box kaise Add kare
ये Code ब्लॉग पोस्ट मे ऐड करना बहुत ही easy है इस Code को पोस्ट मे ऐड करने के लिए पोस्ट के HTML Mode मे Code pest कर के ऐड कर सकते है
Step.1 First आप Niche दिए गए Code Copy कर ले
<textarea rows="5" cols="40" onClick=select() readonly>Your text here.</textarea></form>
Step.2 Blogger post open करें
Html Slect करें जहाँ आपको कोड ऐड करना है वहाँ Code box Code pest करें
 |
| Simple code box |
Step.3 Code me Your Text here की जगह जिस code को box के अंदर ऐड करना चाहते है उसे पेस्ट करें
इसी तरह से सभी पोस्ट मे Code box ऐड कर सकते है
ये कोड बॉक्स भी स्टाइलिश है हमारे ब्लॉग के कई पोस्ट मे ये कोड बॉक्स इस्तेमाल किया गया है अगर आपको demo देखना है
 |
| Boxed Code box demo |
Step.1 niche दिए गए कोड करें
textarea { white-space: pre; overflow-wrap: normal; overflow-x: scroll; width: 100%; height: 500px; padding: 12px 20px; box-sizing: border-box; border: 2px solid #3155c4; border-radius: 4px; background-color: #f8f8f8; resize: none; font-size:18px; }Step.2 Blogger dashboard मे जाए
Layout >>> Sidebar Add A Gadget >>> Html/javascript >>>tittle मे कुछ भी नहीं लिखें बड़े वाले बॉक्स मे Code पेस्ट करके Save करें
Note ; Code BeginnIng (शुरुआत ) मे और Code के end (अंत ) मे type करके ही Save करें नहीं तो Code work नहीं करेगा
Step.3 पोस्ट open करें Html Mode Slect करें code जहाँ add करना है वहाँ ये Code पेस्ट करें
Your Code here की जगह जो Code आप पोस्ट मे add करना चाहते है उसे पेस्ट करें
 |
| Boxed Code box |
ये Code box Stylish है और अधिकतर WordPress ब्लॉग पर यूज़ किया जाता है ये code Hindivhelp यानी की इस ब्लॉग पर भी यूज़ किया जाता है और इस पोस्ट मे भी यही Code box यूज़ किया गया है
Step. 1 First Niche दिए गए Code Copy करें
.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; } .code:hover { background-repeat:no-repeat; } #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;} .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;} #blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;} .showpageOf{display:none!important} #blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);} body { background-color: #FFFFFF; }Note ; ये Css Code है और Css code ब्लॉग मे add करने के कई तरीके है यहाँ पर आपको सिंपल तरीका बताया गया है अगर ये तरीका Work ना करें तो direct Theme edit करके
]]></b:skin>
के ऊपर Code पेस्ट करके theme Save कर दे
Step.2 Blogger Dashboard >>>> Layout >>> Sidebar >>> add a Gadget >>> Html/javaScript >>> tittle को खाली छोड़ दे बड़े box मे Code box पेस्ट करें
Code के beginning <Style> और ending </style> me लिखना ना भूले नहीं तो code work नहीं करेगा
फाइनली Save पर click करके Save कर दे
Step.3 पोस्ट ओपन करें Html mode सलेक्ट करें
जहाँ code add करना है वहाँ ये code पेस्ट करें
<div class=”code”>
Your code here</div>
इस code मे Your Code here की जगह अपना वो code पेस्ट करें जिसे पोस्ट मे दिखाना चाहते है
 |
| Stylish Code box |
Step.1 niche दिए गए code को Copy करें
ये code S2b यानी की Smart2blogging blog Owner द्वारा generate किया गया है जो minimum Blogger के सभी Free and paid theme मे work करता है ये code box का Code Wordoress me भी work करता है अगर आपने अपने ब्लॉग पर Copy paste Enable कर रखा है तो आप ये Code को यूज़ कर सकते है क्योंकि Copy peste इसमें enable नहीं है matlab की इसके अंदर के text को कोई भी रीडर्स आसानी से Copy कर सकता है इसका demo देखने के लिए यहाँ Click kare
blockquote{ background-image: url
; font-weight: 400; scroll-behavior: auto; max-height: 500px; min-height: 500px; border-bottom: 1px solid black; background-repeat: no-repeat; overflow-y: scroll; color: #00a2e8; background-color: #00ffff14; margin: 1.5em 10px; padding: 5px 0px 10px 50px; font-family: monospace; font-size: 13px; word-wrap: break-word; -webkit-touch-callout: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; -o-user-select: text;}Step.2 Blogger Dashboard मे जाए >>>> Layout >>>> Sidebar >>> add a Gadget >>>> Html/javaScript >>> सलेक्ट करे
New window open होगा tittle को खाली रहने दे नीचे वाले box मे 4th Code यानी की ऊपर जो code Copy किया है उसे पेस्ट कर दे And Save करें
Step.3 Blogger post Open करें Compose Mode Slect करें उसके बाद जिस Code text को Code box के अंदर रखना है उसे Slect करें
Step.4 Slect करने के बाद Blockquote icon पर click करें Blockquote icon कैसा दिखता है ऊपर photo मे देख सकते है
 |
| Smart2blogging Code box |
Blockquote icon slect करने के बाद पोस्ट को पब्लिश करे
Congrats: आपने अपने ब्लॉग पोस्ट मे सफलता पूर्वक कोड box ऐड कर लिया है कोड box ऐड करने मे किसी प्रकार की परेशानी हो तो नीचे कमेंट box मे जरूर लिखें and पोस्ट पसंद आए तो social media मे share जरूर करें
