Showing Codes Beautifully in Blogger Posts

ब्लॉगर पर HTML/JavaScript Codes को सुंदर तरह से कैसे दिखाए ?

आज मैं आपको ब्लॉगर में HTML/JavaScript इत्यादि Codes को सुंदर तरह से कैसे दिखाए उसके बारे में बताने जा रहा  हूँ .

मेरे एक पुराने Post पर मेने बताया था की आप

गूगल के Bloggers Blog ko देश-विशिष्ट domain में redirect होने से कैसे बचाये। 

इस पोस्ट में मैने आपको एक Javascript Code को अपने Blog के Template में डालने के बारे में बताया था . 

Add caption

इस में आप देख सकते हैं की मेने Javascript Code हाईलाइट किया हुआ ताकि आप उसे समझ सके की वो कोई code हैं . परन्तु यह दिखने में उतना बढ़िया नहीं लगता.
अगर आप अपने Blogger Site पर Codes को और सुंदर तरीके से दिखाना कहते है, तो मेरे इस टिप को follow करे.

उदहारण के लिए सुंदर दिखने वाला Code का प्रकार निचे दिया गया है.

उदहारण के लिए 

अगर आप इस तरह से अपने Blogger Post पर Codes को दीखाना चाहतें है, तो नीचे दिए गए पद्धति का उपयोग करे.

1. आप अपने Blog के Blogger Dashboard पर जाकर Template पर click करे 
2. उसके बाद Edit HTML बटन दबाये 
3. उपरांत template में ]]></b:skin> टैग को Search करे. उसके लिए पहले template body पर click करे , फिर कीबोर्ड में CNTRL+F दबाये और Search के option में ]]></b:skin> डालकर सर्च करे. आपके template में आपको <b:skin>...</b:skin> भी मिल सकता है, तब आप उसके बायीं तरफ वाली एक छोटे से Arrow पर click करेंगे तो code खुल जायेगा और उसमे आपको  ]]></b:skin> मिल जायेगा. 
4. जब आपको ]]></b:skin> मिल जाये , तब ठीक ]]></b:skin> के पहले निम्नलिखित code को paste कर दे. 

/*--www.hindidost.com--------------*/
code {
color: #FFF003;
font: 108% "Courier new",Courier,mono;
padding: 0 2px;
white-space: nowrap;
}
pre code {
-moz-box-shadow: 0 0 10px #000000;
background: url("https://farm8.staticflickr.com/7718/16452419034_25925ed670_o.png") repeat scroll 0 0 #000000;
border: 2px solid #CCCCCC;
clear: both;
color: #000000;
display: block;
font-size: 12px;
line-height: 15px;
margin: 10px auto 10px 30px;
overflow: auto;
padding: 15px;
white-space: pre;
width: 85% !important;
word-wrap: break-word;
}
code .comment {
color: #888;
}
code .class, code .rules {
color: #ff00ff;
font-size: 100%;
}
code .value,  code .title, code .string {
color: #0000FF;
}
code .tag {
color: #000099;
}
code .keyword {
color: #000099;
}
.html .attribute {
color: #006600;
}

उसके बाद आप Save Template के बटन पर click करके template को Save कर ले. 

अब आप जब भी कोई code अपने Blog Post पर दिखाना चाहते है. तो पहले उस code को अपने पोस्ट पर Paste कर ले. फिर HTML tab पर click करे .
अगर और आसान करना चाहते है तो इस LINK पर click करे और अपने html code को पहले HTML Friendly कर ले 

फिर उस code के आगे <pre><code> और पीछे </pre></code> लगाये . 

उदहारण के लिए ऊपर दिए हुए code को ऐसे लिखे 

<pre><code>                                                 
&lt;div class=&quot;youtube-container&quot;&gt;
   &lt;div class=&quot;youtube-player&quot; data-id=&quot;VIDEOID&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

अब आपका code तैयार है. आप चाहे तो Preview tab पर click करके changes को देख सकते हैं.

शुरुआत में शायद आपको थोरा बहुत R&D करना पढ़ सकता है , पर अगर आप इस StepByStep follow करेंगे तो आसानी से इसका उपयोग कर सकते है .
मदद के लिए आप मुझसे संपर्क कर सकते है.