ब्लॉगर ब्लॉग पोस्ट मे कोड बॉक्स कैसे ऐड करें 4

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

1. Simple Code box

ये 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 ऐड कर सकते है

2. Stylish 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

3. Stylish 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 पेस्ट करें

इस code मे Your Code here की जगह अपना वो code पेस्ट करें जिसे पोस्ट मे दिखाना चाहते है

Stylish Code box

4.S2B Design 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 जरूर करें