اولين قالب وبلاگ

حدود چند روز ديگه قالب جديدم آماده ميشه و ميخوام با اين قالب باي باي کنم. حسن اين قالب اين بود که تماما با سي اس اس ساخته شده بود ولي فکر مي کنم چون توش از border استفاده شده  موجب خراب شدن کل قالب در فاير فکس مي شه. و از روزي که با اين فاير فکس نازنين آشنا شدم. حالم از وبلاگم داره به هم مي خوره. و حتي تو آمار وبلاگم چند نفري هم با فايرفکس به وبلاگم سر ميزندن (غير از خودم) و از اون روزي که آقا محمد تو کامنت اشاره داشتند که اين قالب زياد جالب نيست به خودم اومدم و کاش زودتر اين اتفاق مي افتاد. براي همين خيلي دارم سعي مي کنم قالبfirsttemplate خيلي قشنگي ارائه بدم.

براي يادگاري هم يه عکسي از اين قالب گرفتم و از اين به بعد هم سعي مي کنم هر وقت مي خوام قالب را عوض کنم يک يادگاري از قالب داشته باشم.

 قالب جديدم هم فقط صفحه ي اول و نيمه اي از آرشيو تکي اون آماده شده. اينجوري که من پيش بيني مي کنم حدود يک هفته ديگه قالب آماده مي شه. نمي دونم چرا اين قدر کند پيش ميره. اصلا برام اهميت نداره. هر وقت مي شينم پاش حوصله اش را ندارم.

Advertisements

کتاب 101 نکته و ترفند و هک css 2.1

سي اس اس و تمام زبان هاي برنامه نويسي داراي چند ضابطه و دستور عمل هستند که برنامه نويس پس از يادگيري اين دستور عمل ها مي تواند استايل مورد نظر خود را بنويسد. اما سي اس اس و يادگيري آن صرفا به يادگيري قوانين آن نمي شود. بلکه بايد با تمرين بيشتر و يادگيري نکات ظريف آن قدرت خود را در سي اس اس افزايش دهيم. کتاب The CSS Anthology: 101 Essential Tips, Tricks & Hacks علاوه بر اينکه براي تازه کار ها نوشته شده حاوي نکاتي است که کمتر جايي مي توان به آن ها دست يافت. البته اين کتاب داراي 9 فصل و 377 صفحه  مي باشد که تنها 4 فصل اول آن رايگان مي باشد. من اين کتاب را براي تمام کساني که تمايل به ياد گرفتن سي اس اس در سطح نه زياد حرفه اي هستند پيشنهاد مي کنم. حتي در صورتي که سي اس اس را به خوبي ياد گرفته ايد پيشنهاد من اين است که يک مروري روي آن داشته باشيد.

نويسنده: Rachel Andrew
صفحات: 377
ناشر: SitePoint.com
دانلود 4 فصل اول کتاب
اطلاعات بيشتر

ساخت لينک «ادامه ي مطلب» در بلاگر

بعد از چند ماه فارق شدن از بلاگر چند روز پيش پسر خالم از من خواست که يک وبلاگ براش درست کنم من هم دست به کار شدم و يک وبلاگ براي ايشون در بلاگر ساختم. قسمت هايي از بلاگر تغيير کرده بود و خيلي خيلي جالب شده بود. من فکر مي کنم از اون موقعي که گوگل پشتيبان بلاگر شده بلاگر هر روز داره به امکاناتش اضافه مي کنه.  براي ساخت بعضي از قسمت هاي وبلاگ مجبور شدم به راهنماي بلاگر مراجعه کنم و واقعا بلاگر در اين قسمت خوب کار کرده. يکي از مقاله ها اسمش How can I create expandable post summaries? بود من هم اين مقاله را براي تمام بلاگري ها ترجمه مي کنم.

خيلي از از افراد  با قرار دادن مقاله ي هاي طولاني در وبلاگ شاهد سنگين شدن وبلاگشون مي شوند بهترين راه اينه که پس از نوشتن کمي از مقدمه ي مقاله لينکي به عنوان “ادامه ي مطلب” براي خواندن ادامه ي مطلب ايجاد کنيم. در اينجا سي اس اس به کمکمون مياد تمام مشکلاتمون را حل مي کنه.

دو نکته ي مهم

  • قبل از هر چيز post page  را در تنظيمات وبلاگ فعال کنيد اطلاعات بيشتر

  • قبل از هر تغييري در تمپليت و کدهاي وبلاگ يک کپي از آنها بگيريد تا در صورت بروز مشکل بتوانيد بلاگ خود را دوباره زنده کنيد.

استايل هاي شرطي

در ابتدا ما مي خواهيم اين روش را براي دو صفحه ي اصلي (main) و صفحه ي آرشيو فعال کنيم. براي اين کار ايتدا تگ هاي شرطي زير را در قسمت استايل تمپليت (بين دو تگ <stayle> … </style>) وارد کنيد.

<MainOrArchivePage>
   span.restpost {display:none;}
</MainOrArchivePage>

<ItemPage>
 %

Quickpost در خدمت لينکدوني

يکي از مشکلات کساني که در وبلاگشون لينکدوني دارند اينه که بايد ابتدا عنوان لينک را در title و سپس آدرس لينک را در قسمت Entry Body بنويسند. اين کار خسته کنند اي است. منم طبق معمول به خودم گفتم کار نشد نداره کلي نشستم روش فکر کردم و آخر دست هم چيزي دست گيرم نشد. تا اينکه مطب  Changing BlogJet This! Template را از نويسنده ي نرم افزار بلاگ جت خوندم. مطلب جالبي بود و ازش استفاده کردم ولي بازم مشکل لينکدوني را به طور کامل حل نمي کرد. البته براي من قانع کننده  نبود چون مي شد يک کارايي کرد. بالاخره امروز مطلب Quickpost Title را در وبلاگ Movalog خوندم.

در ضمن در صورتي که نمي دونيد QuickPost و  Bookmarklets چيه اينجا يک نگاهي بندازيد. من اين تنظيمات را روي MT 3.17 به کار بردم  فکر مي کنم در نسخه ي هاي ديگه هم به همين گونه باشه.

ابتدا به شاخه اي که ام تي نصب شده بريد و فايل زير را پيدا کنيد:
 lib/MT/App/CMS.pm
حدود خط 905 خطوط زير را پيدا کنيد.

$param{text} = sprintf qq(<a title=»%s» href=»%s»>%s</a>\n\n%s),
scalar $q->param(‹link<em>title›),
scalar $q->param(‹link</em>href›),
scalar $q->param(‹link_title›),
$param{text};

خطوط بالا را پاک کنيد و با جاي آن خط زير را وارد کنيد:

$param{title} = scalar $q->param(‹text›);
$param{text} = scalar $q->param(‹link_href›),

از اين به بعد هرگاه مطلب جالبي پيدا کرديد توي همون صفحه عنوان مطلب را انتخاب (select) کنيد و کليک سمت راست کنيد و روي QuicPost کليک کنيد. در اين هنگام صفحه اي باز مي شود که title پست شما همان مطلب انتخاب شده است و در قسمت Entry Body آدرس همان صفحه به صورت اتوماتيک نوشته مي شود. همان طور که ديديد اين را آسانترين راه ممکن براي اضافه کردن لينک به لينکدوني است. تا اينجا کار تموم شده و ميتونيد از روش استفاده کنيد.اما اگه دوست داريد مطالب بيشتري در مورد QuickPost بدونيد مطالب زير را دنبال کنيد:

اما اگه دوست داريد المان هاي ديگري از قبيل Extended Entry , Excerpt و Keywords هم به صورت بالا به صورت اتوماتيک وارد شوند فايل زير را باز کنيد:
tmpl\cms\bm_entry.tmpl
کد زير را در خط 203 يا حدود آن پيدا کنيد 

<TMPL_VAR NAME=TEXT ESCAPE=HTML>

همون طوري که مشاهده مي کنيد اين کد بين دو تگ باز و بسته ي  textarea قرار گرفته و اين دوتگ در اينجا  مربوط به title پست مي باشد.

textarea ي بعدي مربوط به Extended Entry مي باشد.براي مثال اگر مي خواهيد در PostQuick براي Extended Entry نيز مطلبي به صورت خود کار داشته باشيد بايد يک متغيري نيز براي textarea ي Extended Entry تعريف کنيم. به اين صورت که خط زير را در بين دو تگ باز و بسته ي textarea ي Extended Entry وارد کنيد.

<TMPL_VAR NAME=TEXT_MORE ESCAPE=HTML>

به جاي TEXT_MORE هر متغير ديگري که بخواهيد مي توانيد جايگزين کنيد.حالا داخل CMS.pm پس از کد هاي مربوطه که پيش از اين اضافه کرديم کد زير را اضافه کنيد.

$param{text_more} = scalar $q->param(‹text›),

به جاي text_more متغيري را که قبلا تعيين کرديد بنويسيد. و به جاي text در param(‘text’) مي توانيد موارد زير را وارد کنيد:

  • text: متن انتخاب شده
  • link_title: عنوان صفحه ي جاري
  • link_href: آدرس صفحه ي جاري

براي مثال در صورتي که ميخواهيد عنوان صفحه ي جاري در فيلد Extended Entry وارد شود بايد خط زير را به cms اضافه کنيد.

$param{text_more} = scalar $q->param(‹text›),

براي هر يک از قسمت هاي پست نيز مي توانيد مراحل بالا را تکرار کنيد

اميدوارم که مشکل تمام کساني که با لينکدوني ميونه ي خوبي ندارند حل بشه.

ادامهٔ مطلب »

Display Code In Entries

بعضي مواقع شما احتياج داريد کدي در پست خود نمايش دهيد. براي مثال من مي خواهم کدي براي لينک به وبلاگم نمايش دهم شبيه کد زير:  

<a href=”http://wintip.caspianblog.com”>WinTip</a&gt;

به هر حال اگر شما کد بالا را  در هنگام نوشتن پست بنويسيد هنگام نمايش آن پست در وبلاگ اين کد به صورت حقيقي نمايش داده نمي شود بلکه به صورت يک لينک نمايش داده مي شود: WinTip 

پس براي نمايش کد ها در پست ها چه بايد کرد؟ چند راه براي اين کار وجود دارد:

1– به صورت دستي معادل کد هاي خود را بنويسيد:
اگر تمام چيزي که شما مي خواهيد بنويسد نوشتن تگي کوتاه باشد راحت ترين راه  شايد نوشتن کاراکترهاي  < و > به صورت زير مي باشد:
 &lt;  به صورت  <
 &gt;  به صورت  >

پس در صورتي که در پست خود عبارت زير را تايپ کنيد:

 &lt;MTEntries&gt;

به صورت <MTEntries> توسط مرورگر تفسير ميشود.

در اينجا چند نمونه از معادل هاي نماد ها را آورده ام:

&raquo;     »      right double angle quotes
&laquo;     «       left double angle quotes
&lt;     <      less than sign
&gt;     >      greater than sign
&bull;     •      bullet
     or     &hearts;      ?      black heart
    ?      infinity symbol
&mdash;    —      long dash
&amp;    &      ampersand
&quot;    »      double quotes

براي اطلاعات بيشتر درمورد کد هاي اسکي و کارکترها و نمادها به اينجا مراجعه کنيد.

2–نرم افزارهاي انکودر
به اين ترتيب که شما با وارد کردن کدهاي خود در اين نرم افزار هاي مي توانيد معادل کدهاي خود براي استفاده در پست ها برداشت کنيد. براي نمونه نرم افزار SimpleCode HTML Encoder نرم افزار خوبي براي اين کار به شمار مي آيد.

3– استفاده از تگ text area
شما مي توايند کد هاي خود را در يک text box قابل اسکرول قرار دهيد و اين راهي بسيار خوب براي قرار دادن کدهاي بسيار بزرگ مي باشد.

براي اين کار کدهاي خود را بين تگ هاي باز و بسته ي textarea قرار دهيد. لازم به ذکر است که در اين روش احتياجي با انکود کردن نداريد.

 <textarea cols=»60″ name=»text» rows=»10″> Put your code here</textarea>

با عوض کردن تعداد رديف ها و ستون ها در rows و cols مي توانيد ابعاد text box خود را تغيير دهيد.

4– تگ نقل قول يا blockquote 
استايل زير را به استايل تمپليت خود اضافه کنيد:

 .content blockquote {
padding: 10px 10px 10px 10px;
border: solid 1px #cccccc;
background-color: #E7F1FD;
text-align: left;
}

به جاي content کلاس div اي که مربوط به محتواي پست ها مي شود را وارد کنيد در صورتي که از قالب اوليه ي MT 3 استفاده مي کنيد احتياجي به تغييرآن نداريد.و در صورتي که شما در طراحي قالب MT از تگ blockquote استفاده نکرده ايد مي توانيد content را از انتخاب کننده خدف کنيد و به صورت زير قانون css را بنويسيد:

  blockquote {
padding: 10px 10px 10px 10px;
border: solid 1px #cccccc;
background-color: #E7F1FD;
text-align: left;
}

از اين به بعد هرگاه خواستيد که کدي در وبلاگ قرار دهيد مي توانيد کدهاي انکود شده ي خود را داخل دو تگ باز و بسته ي blockquote قرار دهيد.

<blockquote>put your code here </blockquote>

نکته: در اين روش بايد کدهاي انکود شده را در داخل تگ هاي مربوطه قرار دهيد. 
مي توانيد از چند استايل زير نيز استفاده کنيد::

مثال 1

blockquote {
 background: #EEEEEE;
 border: thick solid Gray;
 border-left: none;
 border-right: none;
 font: 12px «Courier New», cursive;
 text-align: left;
 padding: 10px 20px 10px 20px;
}

در صورتي که از استايل بالا استفاده کنيد و کد هاي خود را بين دو تگ باز و بسته ي <blockquote> قرار دهيد کد هاي شما به صورت زير نمايش داده مي شوند:

You can insert your Code or  Blockquote here. e.g. :
The Blockquote element usually indicates content quoted from another source. This block element should be used ideally only when the quotation is longer and will likely span several lines (for shorter, in-line quotations using the Q element is suggested.)

مثال 2:

blockquote {
 border-left: 9px solid gray;
 background: #EEEEEE;
 text-align: left;
 padding: 14px 14px 14px 14px;
 font: 12px «Courier New», cursive;
 border-bottom: none;
 border-right: none;
 border-top: none;
}

هرگاه کدي در بين تگ هاي باز و بسته ي <blockquote>قرار گيرد کد ها به صورت زير نمايش داده مي شوند:

Insert your code and blockquote here. e.g.: blockquote {
 border-left: 9px solid gray
 background: #EEEEEE;
 text-align: left;
 padding: 14px 14px 14px 14px;
 font: 12px «Courier New», cursive;
}

5– ساخت کلاس جديدي براي کدها 
شما مي توانيد کلاس جديد فقط براي کدها بسازيد و براي آن ها استايل بسازيد.
در زير کلاس جديدي به نام  message تعريف کرده ايم و استايلي

 .message {
font-family: Courier New,Courier,monotype;
font-weight: bold;
font-size: 11px;
padding: 10px 10px 10px 10px;
background-color: #E8F2FB;
border: solid 1px #CADFEF;
}

و در پست هايتان يک span با کلاس message ايجاد کنيد و کدهايتان را در داخل دي تگ باز و بسته ي span وارد کنيد مانند زير:

 <span class=»message»>Your code would go here.</span>

6-استفاده از تگ هاي <pre> و  <code>
کدهاي خود را با تگ هاي باز و بسته ي code پوشش دهيد که به صورت زير نمايش داده مي شوند.

This is what your code looks like when placed within <code> and </code> tags
و هم چنين مي توانيد با استفاده از تگ <pre> از شکستن متن جلوگيري کنيد.

7–استفاده از تگ <xmp>
اين تگ کارش اينه که شما ديگه احتياج نداريد کدهاي خود را انکود کنيد بعني شما مي توانيد کدهاي حقيقي را بين دو تگ باز و بسته ي <xmp> قرار دهيد در اين صورت مرورگرها تا به اين تگ برخورد مي کنند بدون اينکه محتواي آنها را ترجمه کنند نمايش مي دهند. به مثال زير توجه کنيد:

<xmp><a href=”http://wintip.caspianblog.com”>WinTip</a></xmp&gt;

در اين صورت مرورگر به جاي اينکه کد بالا را به صورت يک لينک WinTip در آورد. شکل آن را حفظ خواهد کرد و به صورت زير تمايش مي دهد:

<a href=”http://wintip.caspianblog.com”>WinTip</a&gt;

من خيلي دوست داشتم اين روش را جزء اولين روش معرفي کنم ولي هنوز در مورد ساپورت مرورگرها در مورد اين تگ ترديد دارم.

من خودم اين تگ را روي Explorer 6 و Mozila Firefox امتحان کردم به خوبي جواب دادند ولي بقيه ي مرورگر ها را به طور دقيق نمي دونم. اينجور که اينجا نوشته به opera 2.1 و Netscape 2 beta 1 هم مي خوره.
دوستان اگه مرورگرهاي Netscape و opera آخرين ورژن دارند چک بکنند ببينم کار ميده يا نه.

به هر حال اگه به نتيجه رسيديد که اين راه بهتر از روش هاي ارائه شده است مي توانيد انتخاب گر يا همان selector را استايل هاي بالا را به xmp تغير دهيد براي مثال استايل هاي مثال 1 در بالا به صورت زير در مي آيند:

  xmp {
 background: #EEEEEE;
 border: thick solid Gray;
 border-left: none none;
 border-right: none;
 font: 12px «Courier New», cursive;
 text-align: left;
 padding: 10px 20px 10px 20px;
}

 مشکل کدهاي بسيار بلند

در صورتي که بخواهيد کد هاي بزرگ را در صفحات وبلاگ خود قرار دهيد باعث طولاني شدن آرشيوهاي تکي و غيره مي شود در اين حالت صفحات وبلاگ خسته کننده مي شوند براي جلوگيري از اين امر از ويژگي overflow سي اس اس کمک مي گيريم. 

هنگامي که ما جعبه اي با ابعاد خاصي تعريف مي کنيم و سپس درون آن المان ها را قرار مي دهيم ممکن است جعبه ي ما آنقدر بزرگ نباشد که بتواند تمام المان ها را درون خود نشان دهد با کمک ويژگي overflow مي تواينم المان هايي که خارج از جعبه قرار مي گيرند را تحت کنترل خود در آوريم.

ابتدا استايلي براي کد هاي overflow بنويسيد يا از کد هاي زير براي نمونه استفاده کنيد:

.overflowcode {
background: #EEEEEE;
width: 500px;
height: 150px;
overflow: auto;
text-align: left;
font: 12px «Courier New», cursive;
/* These code usuful for formatting scrollbars. You can change or delete these following code. */
scrollbar-3dlight-color : #999999;
scrollbar-arrow-color : #999999;
scrollbar-base-color : #666666;
scrollbar-darkshadow-color : Black;
scrollbar-face-color : #666666;
scrollbar-highlight-color : #999999;
scrollbar-shadow-color : #999999;
scrollbar-track-color : #8B8B8B;
}

هنگامي که ميخواهيد از کد هاي overflow در پست هايتان استفاده کنيد کافيست که کد هاي خود را در بين blockquote اي با کلاس overflowcode قرار دهيد

<blockquote class=”overflowcode”>Insert your code here <blockquote>

هر گاه طول و عرض پاراگراف هاي شما بيشتر از 500px و 150px شود بقيه ي کد ها به صورت اسکرول نمايش داده مي شود. به مثال زير توجه کنيد:

This code useful for MT Celender

<table border=»0″ cellspacing=»4″ cellpadding=»0″ summary=»Monthly calendar»>
<caption><$MTDate format=»%B %Y»$></caption>
<tr>
<th abbr=»Sunday» align=»center»>Sun</th>
<th abbr=»Monday» align=»center»>Mon</th>
<th abbr=»Tuesday» align=»center»>Tue</th>
<th abbr=»Wednesday» align=»center»>Wed</th>
<th abbr=»Thursday» align=»center»>Thu</th>
<th abbr=»Friday» align=»center»>Fri</th>
<th abbr=»Saturday» align=»center»>Sat</th>
</tr>
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td <MTCalendarIfToday>bgcolor=»#EEEEEE»</MTCalendarIfToday> align=»center»>
<MTCalendarIfEntries><MTEntries lastn=»1″><a href=»<$MTEntryLink$>»><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries>
<MTCalendarIfBlank>&nbsp;</MTCalendarIfBlank></td>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>
</table>

 

شرح بعضي از قوانين CSS:

  • background
    استايل خود را براي background پس زمينه ي کدها تعريف کنيد
  • border
    استايل  حاشيه ي مورد نظر خود را وارد نماييد.
  • float
    براي تعريف مکان قرار گيري کدهاي خود از اين سلکتور استفاده کنيد.
  • font
    استايل مربوط به خصيصه ي font را وارد نماييد..
  • padding
    متن خود را از لبه ي حاشيه ها تراز کنيد و يک فضاي خالي براي خوانايي بيشتر ايجاد نماييد.
  • overflow
    که همين الان توضيح دادم

بهينه سازي استايل ها

در صورتي که شما در طراحي صفحات و تمپليت خود از blockquote استفاده کرده باشيد استايل هاي بالا موجب مي شود که تمام blockquote ها را تحت تاثير خود قرار دهد پس بايد کاري کنيم که فقط blockquote هاي درون پست ها فرمت شوند نه همه ي blockquote ها.
در اين صورت selector  هاي استايل هاي بالا را به شکل زير تغيير دهيد:

.content blockquote

به جاي content کلاس اي را قرار دهيد که حاي پست هاي شما باشد. معمولا افراد محتواي پست هاي خود را با کلاس content فرمت مي کنند.
در اين صورت استايل ها را مي توانيد به صورت زير وارد کنيد:

.content blockquote {
 border-left: 9px solid gray
 float: left;
 background: #EEEEEE;
 text-align: left;
 padding: 14px 14px 14px 14px;
 font: 12px «Courier New», cursive;
}

بر گرفته از مقاله ي  Display Code In Entries  و اطلاعات بنده ي حقير

اطلاعات بيشتر:

 MT Forums support thread on this subject
Another MT Forum Support thread
Code Beautifier plugin
Quickcode Plugin – a plugin for encoding code, but rather buggy with some browsers.
ScriptyGoddess code decoder – bookmarklet that will easily generate code. Only works on Windows machines.

ادامهٔ مطلب »