ابزارک کد اختصاصی در بلاگ اسکای

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

این ابزارک برای این منظور به نسخه جدید بلاگ اسکای اضافه شده که خیلی از کاربرا برای اضافه کردن کدی به قالبشون، دچار مشکل می شدند و ظاهر قالبشون بهم می ریخت.اما بوسیله این ابزارک براحتی کدهای خودتون رو میتونید در قالب قرار بدید. و اما نحوه استفاده از این ابزارک :

1- در ابتدا باید کدهای مربوط به تگ این ابزارک رو در قالبتون قرار بدید.

<customHtml>

    @caption

    @html

</customHtml>

توجه داشته باشید که این کدهارو هرجایی از قالبتون میتونید قرار بدید. مثلا ستون کناری، بالای مطالب، انتهای مطالب و هرجایی که بخواهید کدهاتون به نمایش دربیاد. بطور مثال در این آموزش من میخوام این ابزارک رو در بالای مطالب سایتم قرار بدم. پس کدهارو باید قبل از بلاک پست ها یعنی <post></post> قرار بدم. بصورت زیر:

...

<customHtml>

    @caption

    @html

</customHtml>

<post>

...

</post>

2- حالا باید این ابزارک با رفتن به مسیر "نمای وبلاگ" -> "ابزارک ها" -> "کد اختصاصی" فعال کنید.

توجه داشته باشید که نام بلاک (نامی که در صفحه وبلاگ برای این بلاک به نمایش در می آید) رو هم میتونید در این بخش تغییر بدید.

3- حالا کدی رو به عنوان نمونه در محل مربوطه قرار بدید. مثلا کد زیر:

<ul>

<li>گزینه 1</li>

<li>گزینه 2</li>

<li><a href="http://blogchi.ir">همیار بلاگ اسکای</a></li>

</ul>

4- به وبلاگ خود مراجعه کنید. مشاهده میکنید که بلاک کد اختصاصی بالای مطالب شما به نمایش در آمده است.

استایل دهی به ابزارک کد اختصاصی

1- تا اینجای کار تونستیم که این ابزارک رو فعال کنیم. اما میبینید که ابزارک ما هیچگونه استایل مناسبی برای نمایش نداره. برای اینکه بتونیم یه ظاهر مناسب به ابزارمون بدیم کدهای استایل زیر رو در کد قالبتون و بین تگ های <style></style> قرار بدید.

.chtml{margin:10px auto; background:#fff; border:1px solid #ccc; color:#444; }

.chtitle{color:#666; padding:10px 10px; font:9pt tahoma; font-weight:bold; border-bottom:2px solid #cdcdcd;  }

.chcodes{margin:5px 5px; padding:0 0;}

نکته : این کدهای css صرفا برای یادگیری و آشنایی شما قرار داده شده اند. شما می توانید کدهای استایل مطابق با سلیقه شخصی خود بنویسید.

2- حالا کد اچ تی ام ال ابزارک رو هم باید کمی تغییر بدیم. به شکل زیر :

<customHtml>

<div class="chtml">

    <div class="title">@caption</div>

    <div class="codes">@html</div>

</div>

</customHtml>

تبریک، شما توانستید به راحتی این ابزارک رو فعال کنید.

منبع : همیار بلاگ اسکای