Blog Post में Code Box कैसे लगाए? Easy method

अगर आप अपने blog post के जरिये कोई code share करते हो तो आप ये जरुर चाहते होगे कि आपका code कोई भी easily copy कर सके और वो code एक box में show हो. वैसे भी आज हम सभी जानते है कि अगर अपने blog पर copy-paste disable नहीं किया गया तो कोई भी हमारे blog post को copy कर सकता है. अगर आप अपने blog में copy paste disable किये हो और आप अपने blog में कोई code share करते हो तो उस code को कोई भी copy नहीं कर सकता, और इसी वजह से आपके blog पर आने वाले visitor निरास हो कर चले जायेंगे.

अपने blog में copy paste disable करना ही चाहिए ताकि आपके content को कोई भी copy न कर सके, लेकिन हमे अपने blog पर आने वाले visitors का भी ध्यान रखना चाहिए. तो अब आप क्या करोगे ? आज हम आपको इसी के बारे में बताने वाले है, अगर आप अपने blog पर copy paste disable किया हो तो कोई बात नहीं. आज हम आपको एक ऐसे code box के बारे में बताने वाले है जिसे अपने blog पर लगाना बहुत ही आसान है और कोई भी उस code box के अंदर दिए गए code को easily copy कर सकता है.

सबसे पहले आप ये जान लो कि आज हम जिस code box कि बात कर रहे है वो दीखता कैसा है ? आप निचे दिए गए code box को देख कर अंदाजा लगा सकते हो कि आज आप क्या सिखने वाले हो.

Smart2Blogging
Code Box
Designed by S2b

ऊपर दिया गए code box कि तरह आप भी अपने blog post में code box लगा सकते हो. आपने एक चीज जरुर notice कि होगी कि हमारे blog में copy paste disable है , यानि कि आप हमारे blog के content को copy नहीं कर सकते लेकिन अगर आप code box के अन्दर जितने भी text है उन्हें copy करना चाहो तो आप easily इसे select करके copy कर सकते हो. है ना मजेदार.

आपको internet पर बहुत से ऐसे code box बनाने के तरीके मिल जायेंगे, पर वो सभी तरीकों को follow करने पर आपको अपने blog post के HTML code को edit करना होता है जो कि बहुत time taking work है.

Blog post में Code Box कैसे लगाए? Easy method

सबसे पहले आपको अपने blog में एक css code लगाना होगा. CSS code लगाने के लिए निचे दिए गए steps को follow करें.

STEP – 1

1. अपने blog dashboard पर जाए और Theme पर click करे.
2. Customize पर click करे.

STEP – 2

1. Advanced पर click करे.

2. Add CSS पर click करे.

3. निचे दिए गए code को copy करके Add custom CSS box में paste करे.

blockquote{ background-image: url(https://3.bp.blogspot.com/-qyiONtUHrSg/W_7wxLCxhHI/AAAAAAAAH28/9UwDW6zqTnovFvDxZARYBqTEeaNiOfX8ACLcBGAs/s1600/code.PNG); font-weight: 400; scroll-behavior: auto; max-height: 153px; min-height: 97px; 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;}

4. Apply to blog पर click करे.

CSS code लगाने के बाद आपके blog में code box enable हो जायेगा. अब चलिए जानते है कि अपने blog post में कैसे code box लगाया जाए.

1. आपको अपने जिस blog post में code add करना है उस post में जाए और Compose पर click करे.

2. अपने blog post जिस paragraph, line और sentance को code box के अन्दर रखना है उसे select कीजिये.

3. Text select करने के बाद blockquote icon पर click करे. Blockquote का icon कैसा नजर आता है आप ऊपर दिए गए image को देख कर समझ सकते हो.

4. Publish/Update पर click करे.

इतना करने के बाद आप अपने blog post को check करे, आपने अपने blog post के जिस text में code box लगाया है वो नजर आने लगेगा.

Overall आपको सिर्फ एक बार अपने blog में CSS code add करना है और आपको अपने blog post के जिस text को code box के अन्दर डालना है उसे blockquote में रखना है.

NOTE – अगर आपको हमारे code use करने के बाद code box सही से नहीं नजर आता तो ये आपके blog theme design कि वजह से हो रहा है जिसे easily solve किया जा सकता है, आप हमे अपने blog का url दीजिये ताकि हम आपकी problem solve कर सके. आप इस code को अपने wordpress blog पर भी use कर सकते हो, ये wordpress blog पर भी perfactly काम करता है.

आज का post आपको कैसा लगा हमे comment के जरिये जरुर बताये. और ऐसे ही blogging related information पाने के लिए हमारे blog को subscribe जरुर करें ताकि हमारे latest post कि information आपको सबसे पहले मिल सके. HAPPY BLOGGING