HomeBlogger

Code Box Ko Blogger Me Kaise Add Kare

Hello dost aaj mai aapko bloger ka ek chota sa lekin aham chij ke bare me batane wala hu ish post me mai aapko batauga ki code box ko blog article me kaise add karte hai, Ye blog post ke liye utni jaruri to nahi hoti hai par isse visitor ko kafi madad milti hai code box ke andar ke content ko copy karne me, kai bloggers iska use sirf ishliye karte hai ki content saaf suthri lage. ek taraf se ye thik bhi hai agar aap apne blog me text selection rok ke rakhe hai to aise me jab aap kisi bhi tarah ka code post me dalege to wo visitor ke dwara copy kaise hoga ishliye bhi ye jaruri hai.

Blogger Me Code Box Ko Kaise Add Kare

Code box aapko kai tarah ke mil jayege par mai aapko aaj iske 2 type ke bare batauga jisko aap apne blogger post me aasaniu se use kar sakte hai agar aapka blog wordpress me hota to aap ish tarah ke kai stylish code box ka istemaal kar article ko sundar bana sakte the, blogger ke liye mai aapko ek simple aur ek stylish code box ke bare me batuga usse pahle aap ye jaan le ki code box hota kya hai

Code Box Hota Kya Hai

Jaisa ki aapko iske naam se hi pata chal raha hai ye ek box hoti hai jisme aap html, css aur special charecter jaise word add karte hai ya likhte hai, agar aapko kabhi apne article ke liye aise code ka istemaal karna pad gaya jisme aap apne visitor ko code copy karwana chahte hai to ye box aapke bahut help aayega,

Blogger Post Me Code Box Kaise Add Kare

Jaisa ki maine aapko kaha tha mai aapko 2 tarah ke boxex ke bare me batuga jisme se ek ko post article me add karna bahut hi aasan hai isko aap aasani se post me add kar sakte hai

  • Simple code box – Ishe Blogger post me add karna bahut hi aasan hai isko add karne ke liye sabse pahle aap ishe copy kare.

<form><textarea rows=”5″ cols=”40″ onClick=select() readonly>Your Text Here</textarea></form>

Copy karne ke baad ab aapko bas post Html me jana hai aur box ko jaha fit karna chahte hai waha paste kar de puri tarah se samjhne ke liye niche diya image image dekhiye

code box ko html section me copy kare

  • Style Code Box – beginers ko ishe add karne me thodi problem ho sakti hai par agar aap ishe achhe se samjhe to aapko isme koi problem nahi hogi ishe aasan banane ke liye mai aapko step by step samjhane ki kosis karuga.

Step 1. Sabse pahle aap ish code ko copy kare.

.code1 {
overflow:auto;width:503px;height:200px;
font-family: “Consolas”, “Courier New”, Courier, mono, serif;
color:#848176;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
list-style-type : none;
background : #000000 url(http://1.bp.blogspot.com/-nic37VqULoA/UDdTubWtwcI/AAAAAAAABbs/zv-i-PbnWHQ/s1600/labstrike-1.png) repeat-y top left;
border : 1px solid #000000;
border-left:20px solid #ccc;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border–moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.code1:hover{
background : #000000 url(http://1.bp.blogspot.com/-alUx-JlZsZw/UDdT4qYXglI/AAAAAAAABb0/7ili3p2WHa4/s1600/labstrike-2.png) repeat-y top left;
color:#FEF9BF;
border : 1px solid #000;
border-left:20px solid #ccc;
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 10px 10px 5px #888888;
}

Step 2. Copy karne ke baad blogger Dashboard >> Template me jaiye.

step 3. Ab Edit Html me click kariye.

step 4. Jab Html page khul jaye to Ctrl + f dabakar ]]></b:skin find kare aur uske upar code copy kar de, Agar aap html section me css code ko add karne nahi sak rahe hai to aap us code blogger ke css me add kar sakte hai css code ko blogger me add kaise kare post padhe.

code ko yaha copy kare

Ab save me click kare.

Step 5. Ab aapko jaha bhi code box karna hai waha Html me <div class=”code1″> Your Code Here </div> ish code ko paste kar de aur apna html, css ya phir special charecter Your Code Here ki jagah copy kar de.

Dosto ye ek stylish code box hai jisme background img bhi hai jise ya to aap change kar sakte hai ya man ho to rahne de, agar aap change karna chhte hai to css code me red colour se mark kiya hua img url ko remove karke usme apna ya kisi ka bhi img url daal dijiye

To dosto aapko ye post kaisi lagi ? agar aap code box se related kuch sawal puchna chahte hai to aap comment me puch sakte mujhe ummid hai ki aapko hamara ye post jarur achaa laga hoga agar han to ish post ko social media me share karna mat bhule.

Comments (16)

Leave a Reply

Your email address will not be published. Required fields are marked *

Share
Tweet
Share
Pin
Share