رنگارنگ ازدانستنیهای مفید - شروع آموزش طراحي قالب وب

تاريخ : یک شنبه 16 مهر 1391 | 12:35 AM | نويسنده : Mohammad ali Hajian

در اين قسمت از آموزش قصد دارم مهمترين قسمت از طراحي قالب براي وبلاگ تبيان را

توضيح بدهم كه بعد از اين آموزش مي توانيد راحت قالب هاي بلوگفا و پرشين بلوگ و ميهن بلاگ

... را براي تبيان تغيير بدهيد

براي مثال من يكي از قالب هاي سايت mytheme را مي خواهم تغيير بدهم

اينم لينك دريافت قالب

http://www.mytheme.ir/view_themes.php?no=40

اينم عكس قالب

شما هم مثل من قالب بلاگ اسكاي را انتخواب كنيد

دريافت قالب از عكس لينك دار زير

خوب دوستان وارد سايت زير بشويداين سايت دو قسمت بالا و پايين دارد

و كدها را در قسمت بالاي سايت وارد كنيد

http://htmledit.squarefree.com

نمونه قالب در پايين سايت نمايش داده مي شود

خوب دوستان حالا وارد پنل مديريتي وبلاگتون در تبلاگ تبيان بشويد و قسمت ايجاد قالب جديد

كليك كنيد

روي دكمه راهنما در عكس زير با رنگ قرمز مشخص شده كليك كنيد يك صفحه باز مي شود

براي نمايش بزرگتر عكس راست كليك + veıw ımage

يكسري تگ هاي اختصاصي تبلاگ رو شما مي بينيد كه بايد جايگزين تگ هاي بلاگ اسكاي كنيد

من اول يه توضيحي درباره اين تگ ها به شما مي دهم بعد مي رويم سراغ تغيير قالب

هر سيستم وبلاگدهي يكسري تگ اختصاصي دارد

مثلا" براي اينكه هربار از قسمت مديريتي وبلاگتون اقدام به تغيير نام وبلاگ كرديد اين عمليات

بر روي وبلاگ هم اعمال مي شود اگر از تگ هاي خود سيستم استفاده نكنيد عمليات ها اعمال

نمي شود

اين تگ ها مثل يك لينك عمل مي كنند

بعضي ها يك قسمتي هستند مثل <-BlogUrl-> آدرس وبلاگ و مارو به صفحه اول وبلاگ هدايت

مي كنه

بعضي ها دو قسمتي هستند كه يك قسمت آدرس لينك و قسمت ديگر متن لينك مثل تگ عنوان

مطلب ارسال شده

<-PostTitle-> متن يا تيتر پست

<-PostLink-> آدرس يا لينك پست

بعضي از اين تگ ها تگ شروع و پايان دارند مثلا" ستون يا بلاك آرشيو مثل زير است

<BlogArchive>

<-PageTitle-><-PageUrl->

<BlogArchive/>

خوب حالا مي روم سراغ تغيير قالب براي تبيان

تغيير منو قالب

به قسمت <body> كدهاي قالب بلاگ اسكاي برويد اين كدها را پيدا كنيد

<div class="s5">
<div class="s4 , text10"><a href="<BlogSky:Weblog URL />">صفحه نخست</a></div>
<div class="s4 , text10"><a href="<BlogSky:Weblog MobileHRef />" target="_blank">نسخه موبايل</a></div>
<div class="s4 , text10"><a href="<BlogSky:Weblog PostsHRef />">عناوين مطالب</a></div>
<div class="s4 , text10"><a href="javascript:void(0)" onclick="window.open('<BlogSky:Profile ContactHRef />','_blank','width=450, height=460, scrollbars=yes, resizable=yes');">ارتباط با ما</a></div>
<div class="s4 , text10"><a href="http://www.mytheme.ir" target="_blank">طراح قالب</a></div>
</div><a href="http://www.blogskin.ir" target="_blank">قالب وبلاگ</a></div></div>

اين كدهاي منوي قالب است اگر اين كدها را پيدا نكرديد كليدهاي ctrl + f را در كيبورد فشار دهيد

و در كادر كوچكي كه باز مي شود بنويسد صفحه نخست و اينتر را بزنيد

ما فقط بايد لينك ها را تغيير بديم مثلا"

اونجايي كه نوشته <BlogSky:Weblog URL /> ما تگ <-BlogUrl-> تبلاگ را جايگزين آن مي كنيم

خوب حالا اين لينك مطابق سيستم تبلاگ تنظيم شد

عناوين مطالب نقشه سايت طراح قالب مي توانيد متن ها شون رو تغيير بدهيد و لينك هاي دلخواه بگذاريد

براي ارتباط با ما مي توانيد از تگ ايميل استفاده كنيد براي اينكار در قسمت راهنمايي تبلاگ به

جستجوي تگ ايميل برويد

خوب دوستان اينم تگ ايميل <-BlogEmail-> اين تگ رو جايگزين كنيد

اما قسمت ديگر همون آر آر اس است كه مي تونيد از اين تگ تبلاگ استفاده كنيد

<-BlogXmlLink->

تغيير نام و توضيحات وبلاگ

براي تغيير در نام وبلاگ به قسمت <head> هدر وبلاگ برويد و بعد تگ هاي لازم رو از قسمت

راهنماي تبلاگ انتخاب كنيد و و جايگزين كنيد

عنوان وبلاگ . مانند: وبلاگ آزمايشي <-BlogTitle->

توضيحات وبلاگ كه معمولا معرفي كننده نوع مطالب وبلاگ است. <-BlogDescription->

نكته : اين قسمتها در قالب بالا نيومده

تغيير ستونها و بلاك هاي وبلاگ

تغيير ستون درباره وبلاگ

اين بلاك براي تعيين جايگاه و نحوه نمايش تصوير نويسنده وبلاگ و يا لوگو وبلاگ و همچنين

توضيحاتي است كه نويسنده وبلاگ درباره خود يا محتواي وبلاگ خود داده است.تمام كدها و

محتوايي كه داخل اين بلوك باشد تنها موقعي نمايش داده خواهد كه يا تصوير و يا توضيحات

وبلاگ توسط نويسنده وبلاگ تعيين شده باشد

اين بلاك با تگ <BlogProfile> شروع و با تگ <BlogProfile/> پايان و بسته مي شود

بين اين دو تگ بايد تگ هاي زير را وارد كنيد

توضيحات در مورد نويسنده و يا وبلاگ <-BlogAbout->

تصوير نويسنده وبلاگ و يا لوگو وبلاگ <-BlogPhoto->

نمونه كد مي شه مثل تگ زير

<BlogProfile>
درباره وبلاگ

<img src="<-BlogPhotoLink->">
<-BlogAbout->
</BlogProfile>

تغيير بلاك موضوعات

ما در بلاگ اسكاي داريم

<BlogSky:Category Body><div class="mdiv24">
<div class="mdiv35">
<div class="mdiv25"><font class="text5">موضوعات</font></div></div>
<div class="mdiv341 , text1"><ul>
<BlogSky:Category Categories><li><a href="<BlogSky:Category HRef />"><BlogSky:Category Title /></a> (<BlogSky:Category PostCount />)</li></BlogSky:Category Categories>
</ul></div><div class="mdiv30"></div>
</div></BlogSky:Category Body>

در تبلاگ مي شود

<BlogCategories><div class="mdiv24">
<div class="mdiv35">
<div class="mdiv25"><font class="text5">موضوعات</font></div></div>
<div class="mdiv341 , text1"><ul>
<li><a href="<-CategoryLink->"><-CategoryName-></a></li>
</ul></div><div class="mdiv30"></div>
</div></BlogCategories>

براي مثال من قسمت آمار وبلاگ را هم براتون تغيير مي دهم
در بلاگ اسكاي داريم

<div class="mdiv24">
<div class="mdiv35">
<div class="mdiv25"><font class="text5">آمار وبلاگ</font></div></div>
<div class="mdiv341 , text1"><ul>
<li>كل بازديدها: <pb:BlogTotalVisit/></li>
</ul></div><div class="mdiv30"></div>
</div>

در تبلاگ مي شود

<div class="mdiv24">
<div class="mdiv35">
<div class="mdiv25"><font class="text5">آمار وبلاگ</font></div></div>
<div class="mdiv341 , text1"><ul>
<li>كل بازديدها: <-PostCount-></li>
</ul></div><div class="mdiv30"></div>
</div>

يعني ما <-PostCount-> تبيان را جايگزين <pb:BlogTotalVisit/> بلاگ اسكاي كرديم

تغيير قسمت پست هاي وبلاگ

اين قسمت از مهمترين بخش هاي وبلاگ مي باشد
تگ هاي زيادي در اين قسمت وجود دارند از جمله تگ پست عنوان پست نظرات پست ادامه

مطلب پست تاريخ و نويسنده پست و ...

نمونه اين قسمت مثل كد زير است

نكته : كدهاي زير به ترتيب قالب هاي تبلاگ قرار گرفتند

تگ شروع پست ها
<BlogPost>

تگ عنوان و آدرس پست
<a href="<-PostLink->"><-PostTitle-></a>

تگ صفحه و پست هاي بعدي
<BlogNextPostBlock>
<a href="<-BlogUrl->viewPost.aspx?PostID=<-PostNext->" ><span class="Next"
title="پست بعدي"></span></a> </BlogNextPostBlock>

تگ پرينت و فرستادن پست
<-PostPrint-><-PostSend->

تگ صفحه و پست قبلي
<BlogPreviousPostBlock>
<a href="<-BlogUrl->viewPost.aspx?PostID=<-PostPrevious->" > <span
class="Back" title="پست قبلي"></span> </a>
</BlogPreviousPostBlock>

تگ متن پست
<-PostContent->

تگ ادامه مطلب پست
<BlogExtendedPost>
<a href="<-PostLink->"> ادامه مطلب</a>

</BlogExtendedPost>

temlog.tebyan.net

نظرات 0

تقویم شمسی

کد تماس با ما

دانلود صوت و فیلم