Blogger Post Me Stylish HTML CSS Coding Box Add Kare For Good Looking

Blog website me coding box Kaise add Kare.
Hello dear blogger Blog Post Me Without code box ke ap "HTML CSS JavaScript" code past karte hain to kitna bora lagta hai total post ki looking change kar deta hai,

Use se better ye nahi ke hum "blogger post me stylish coding box add" kar ke apne visters ko aur zyada extracted kar sakte hain, use vister ko code copy karna bhi aasan hota hai.








Bloggr post main coding box kyu add kare? Iske kya benefit hain?

Blog website me HTML CSS HTML JavaScript coding box add karne ke benefit main ap ko btati hun ap khud hi samajh Jao ge,
  1. Agar aap ke blog par 100% useful contents hain to aap ko zroor coding box add karna chaye uski waja bhi sune.
  2. Aap ke usfull contents copy hone lag jate hain mean koi aur blogger copy kar ke apne blog par past karta hai ap ko maloom ho jata hai to ap contents copies hona site se disabled kar dete hain.
  3.  to aap ki kisi widget post me kisi vister ko code copy karna ho to vister widget code copy kaise karega ?
  4. Jab code copy nahi hoga to aapka vister gya :)
  5. Wo kisi aur website se apna kaam chala le ga isi waja se coding box blogger post me add karna zaroori hota hai, vister ko coding box se HTML CSS widget copy karna aasan hota hai, so plz aap bhi agar success hona chahte hain to mere Sab steps ko follow kare aur din ba din oper badhte jaye, 


To aao dekhte hain hum blogger ki post main "stylish HTML CSS coding bo kaise add kare" ?


Blogger post me stylish HTML, CSS JavaScript, Coding box Kaise Add Kare



Stylish post coding box demo #1



Code ( 1 )
//* Bloggerdsense post code *// .code { 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 ; 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 } .code:hover{ 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; }



Stylish post coding box demo #2


Coding-box-for-blogger-post


Code ( 2 )


//* stylish coding box by bloggerdsense *// .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 }

Step #1
In main se Jo demo pic aap ko pasand ati hai uski coding copy Karen aur

]]></b:skin>
Ke oper past kar de.

Blogger post me stylish code bo kaise add kare

Step #2 
Ab ap ne jis post me HTML CSS code past karna hai WO post select kare aur compose to HTML select kare ab jahan ap ne code show karna hai waha likhe

<div class"code">
Apna code yaha beach me past kare
</div>


Add coding box in blogger


Ab back compose pe select kare aur preview kar dekh sakte hain code box show ho raha hai scrolling post publish karne ke bad karega. Same aise hi aap blogger ki har post coding box add kar sakte hain.




Agar ap ko lagta hai ye post bhut helpfully hai to plz social media par other friends ke sath zroor share kare aur apna feed back dena na bhole kyun ke next articles mein dil laga kam kron gi.