‏نمایش پست‌ها با برچسب جاوااسکریپت. نمایش همه پست‌ها
‏نمایش پست‌ها با برچسب جاوااسکریپت. نمایش همه پست‌ها

۱۳۸۹ تیر ۲, چهارشنبه

شیوه ی نمایش کدهای جاوااسکریپت در بلاگر

با عرض سلام و خسته نباشید خدمت شما دوستان عزیزم 
امروز که من خیلی خسته شدم 
از دیروز که خواستم یک تکه از یک متن اچ تی ام ال یا جاوااسکریپت رو توی متن وبلاگم و بعبارتی توی پست های وبلاگ خودم قرار بدم ، واقعا کلی بدبختی کشیدم تا اینکه بفهمم که باید چی کار بکنم .
اینترنت ، یک منبع خوب برای یادگیریه ، ولی یه مشکلی داره که اطلاعاتش اکثرا پراکنده هستند . 
بهرحال قبلا براتون نوشته بودم که چطوری باید یه کاری کنیم که بشه کدهای جاوااسکریپت یا اچ تی ام ال رو توی وبلاگ نوشت .
اما خوب ، وقتی یک کد توی یه خط خیلی بلند نوشته شده ، کلا می زنه از پنجره می ره بیرون ، حتی ساید بار شما هم زیرش قرار می گیره و کلی مکافات . 
رفتم نیگاه کردم ، دیدم توی سایت گوگل یا سایتای دیگه ، یه پنجره ای هستش که همه ی این کدها توی اون پنجره قرار داره و همه چی خیلی مرتبه . 
حتی اون پنجره ، زیرش یه اهرمی داره که می تونی باهاش این ور و اون ور بری و کل مطلب رو بخونی . بهرحال کلی باهاش حال کردم دیگه . 
اما این که آخر ماجرا نبود . 
حالا چه جوری می شه این پنجره رو درست کرد ؟
چی کار باید بکنم ؟
خب ، 
یه تغییراتی لازمه تا بتونیم به این پنجره دست پیدا کنیم . 
اون پنجره ، همونیه که الان دارین اینجا می بینین .



<div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
        <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
    </b:section>
</div>
<div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
        <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
        <b:widget id='HTML1' locked='false' title='' type='HTML'/>
        <b:widget id='Label1' locked='false' title='Labels' type='Label'/>
    </b:section>
</div>


پنجره ای که این بالا می بیننین ، همینطوری آزمایشی براتون گذاشتم که بفهمین منظورم چیه . 
پس می خوایم یه همچین چیزی درست کنیم . 
حالا 
این کدهایی که این زیر می بینین ، برامون مهم هستن .

.postCode{
 background:lightyellow none repeat scroll 0 0;
 border:1px inset orange;
 height:150px;
 margin:10px;
 overflow:auto;
 padding:6px;
 text-align:left;
}

خب ، 
این کدها رو که می بینین ، باید از اینجا کپی کنین و ببرین توی قالب وبلاگ خودتون بچسبونین . 
متوجه که شدین . مگه نه ؟
نیگاه کنین .
اگه وبلاگتون ، مال بلاگر باشه ، تقریبا اینطوریه که می گم : 
اگه روی قسمت ناوبر ، یعنی قسمت بالای بالای وبلاگتون نیگاه کنین 
یه جایی نوشته طرح ، که البته این قسمت ، تازه به بلاگر اضاف شده و تا یه ماه پیش ، خبری ازش نبود . 
بهر حال روش کلیک می کنین 
یه صفحه میاد 
همون بالا روی قسمت « بازگشت به مجموعه اطلاعات » کلیک کنین 
بعدشم روی قسمت « ویرایش اچ تی ام ال » کلیک کنین . 
خوب 
حالا کار اصلیتون شروع می شه .
قسمت اول اون کدهایی که می بینین ، تعاریف قسمتهای مختلف وبلاگه که ما باهاش کاری نداریم . 
توی کد وبلاگ من قسمتهای زیر هستش .که زیر هر قسمت یه خط کشیده و کلی مطلب هم زیرش نوشته شده . 
content
body
header
tabs
columns
headings
posts
accents
خوب ، 
حالا این کدهایی رو که  توی پنجره ی دومی براتون گذاشته بودم ، کپی کنین .
 اما کجا باید بذارین ؟
یکی از قسمت های بالا چی بود ؟
posts
برین آخرین خط از قسمت پست 
جایی که دیگه مطالبش تموم می شه و قسمت بعدی می خواد شروع بشه . 
قسمت بعدی چی بود ؟
accent
خوب ، اونا رو می چسبونین توی آخرین قسمت پست . 
دیگه تقریبا کارتون تموم شده و می تونین یه خسته نباشید به خودتون بگید . 
از این به بعد ، هر وقت که دلتون خواست مطالبتون توی یه همچین پنجره هایی که توی این صفحه دیدین باز بشه باید مطالبتون رو بین این دو تا کد وارد کنین .


<pre class="postCode">
YOUR CODE
</pre>
یعنی چی ؟
یعنی به خط اول و سوم که کار ندارین . 
اما به جای خط وسطی ، اون چیزی رو می ذارین که دوست دارین باشه . 
مثلا کدهای جاوااسکریپت .
درسته ؟

اما یه چیز دیگه یادتون نره ها !
نباید کدهای جاوااسکریپت به طور مستقیم ، نوشته بشن توی وبلاگ . 
چون اونا اجرایی هستن و اجرا می شن و توی متن وبلاگ نمی رن . 
اگه نمی دونین چه طوری باید این کارو بکنین ، این قسمت رو هم بخونین

۱۳۸۹ تیر ۱, سه‌شنبه

چگونه کد جاوااسکریپت را در متن وبلاگ بگذاریم ؟

شاید شما هم خواسته باشید که کدهای جاوااسکریپت یا اچ تی ام ال را در مطالب وبلاگ خودتان بنویسید ، اما هنگامی که خواستید این کار را بکنید ، متوجه شدید که این امر ، امکان پذیر نیست . این کدها اجازه ندارند که بعنوان متن قرار گیرند . این کدها ، اجرایی هستند . خب ، حالا راه حل چیست ؟
شما باید برخی از این علائم را تغییر دهید .
این تغییرات در نحوه ی نشان داده شدن اصل کدها ، هیچ تغییری ایجاد نمی کند .
فقط باعث می شود که از حالت اجرایی در آیند .
کافی است که چهار عبارت زیر را از حالات گفته شده به حالات نوشته شده در جلویشان تغییردهید .

بهمین راحتی
و اما کدها ، این ها هستند :
علامت های  ( کوچکتر از ) ، ( بزگتر از ) ، ( و ) ، ( نقل قول ) رو با این علایم خاصی که توی متن زیر نوشته شده ، باید عوض کنین . 
From    To <    &lt;     U+003C    LESS-THAN SIGN >    &gt;     U+003E    GREATER-THAN SIGN &    &amp;     U+0026    AMPERSAND "    &quot;     U+0022    QUOTATION MARK
البته نیازی نیست که شما این همه زحمت بکشید و خودتان را خسته کنید .
یک جایی هست که این کار را بطور مجانی و بسیار راحت برایتان انجام می دهد .
فقط کافی است که شما کدهایتان را در پنجره ی اول این سایت وارد کنید و در پنجره ی دوم کدهای تغییر شکل یافته را دریافت کنید . حالا می توانید این کدهای تغییر شکل یافته را ، در وبلاگ خودتان قرار دهید .
بهمین راحتی .
بهمین سادگی .
پس اگر لازم بود ، حتما به این سایت مراجعه فرمایید . 
این سایت ، کار تغییر چهار تا علامتی رو که بهتون گفتم ، بطور خودکار انجام میده .
در این سایت ، کدهای جاوااسکریپت رو توی پنجره ی اول کپی کنید . بعدش توی پنجره ی دوم کلیک کنین تا نتیجه ی کار رو ببینین . حالا از پنجره ی دوم می تونین کپی بردارین و بذارین توی وبلاگتون .

یکسری اطلاعات تکمیلی هم راجع به شیوه ی نمایش این کدها توی صفحه هست که می تونید اینجا بخونید .

Free counter and web stats