Как да си кодираме дизайн ?

Може би един от най-често задаваните въпроси в Блогър е как да си кодираме дизайн, затова ето моят урок, с който ще кодирате бързо вашият дизайн, за целта трябва да имате готови - хедър, сайдбар и новини.

Хедър:

Сайдбар:

Новини:

Нека да започнем да го кодираме, първо трябва да поставите кода, ако не знаете как прочетете този урок

Кода може да свалите от тук

1. Поставяте кода, ако сте използвали този дето сте свалили от линка по горе, трябва да се е получило нещо такова:

2. Започвате с първата част от кода:

<title>ЗАГЛАВИЕ НА САЙТА</title>

На мястото на заглавието пишете името на вашия сайт, например

Pretty Little Liars Bulgaria.

2. След това поставяме хедъра, в кода търсите:

<table width="0" border="0" align="center" cellpadding="0" cellspacing="0">

  <tr>

<td width="299" height="600" align="center" valign="middle">

<div style="text-align:center; width:1120px; margin-left:auto; margin-right:auto;">

<img id="Image-Maps_6201303150634131" src="ХЕДЪРА" usemap="#Image-Maps_6201303150634131" border="0" width="1120" height="723" alt="" />

Където е ХЕДЪР слагате линк на хедъра, обикновено прикачвайте от prikachi.com 

И избирате Копиране на URL адреса. След това в черната линия е размера на вашият хедър, в случая 1000/507

Промяняте кода:

<div style="text-align:center; width:1120px; margin-left:auto; margin-right:auto;">

<img id="Image-Maps_6201303150634131" src="ХЕДЪРА" usemap="#Image-Maps_6201303150634131" border="0" width="1120" height="723" alt="" />

С точните размери, замествате 1120 с 1000, а 723 с 507.

Запазвате.

3. Сега е ред на новините. 

Търсите кода:

<COMIENZODELASENTRADAS--------------------------------------------------------------->

<blogger><table width="283" border="0" cellspacing="0" cellpadding="0">

      <tr>

        <td width="617" height="162" align="center" valign="top" background="НОВИНИ 1" class="titulocontenido"><p class="extrascontenido">Дата: <BlogDateHeader><$BlogDateHeaderDate$> </BlogDateHeader> 

          &middot; Час <$BlogItemDateTime$> &middot; Публикувано от: Sissie &middot; <a href="#">00 Comments </a></p>

          <p><$BlogItemTitle$>

                    </BlogItemTitle></p></td>

      </tr>

      <tr>

        <td align="center" valign="middle" background="НОВИНИ 2"><table width="500" border="0" cellspacing="0" cellpadding="0">

          <tr>

            <td width="458" valign="top" class="newcontenido"><$BlogItemBody$></td>

          </tr>

        </table></td>

      </tr>

      <tr>

        <td height="195" align="center" valign="top"><img src="НОВИНИ 3" width="617" height="221"></td>

      </tr>

    </table></blogger>

Новините трябва да ви бъдат разделени на три части, чрез фотошоп, ето така:

Новините се разделят на три част - вертикално.

И слагате първата част в ''НОВИНИ 1''. Втората в ''НОВИНИ 2'' и последната в ''НОВИНИ 3''.

4. Време е за сайдбара. Търсите кода:

<SIDEBAR1------------------------>

<table width="283" border="0" cellspacing="0" cellpadding="0">

      <tr>

        <td width="300" align="center" valign="middle"><img src="САЙДБАР 1" width="317" height="146"></td>

      </tr>

      <tr>

        <td align="center" valign="middle" background="САЙДБАР 2"><table width="200" border="0" cellspacing="0" cellpadding="0">

          <tr>

            <td width="283" valign="middle" class="sidebarcontenido">ТЕКСТА

<br /></span></td>

          </tr>

        </table></td>

      </tr>

      <tr>

        <td align="center" valign="middle"><img src="САЙДБАР 3" width="317" height="167"></td>

      </tr>

    </table>

<p></p>

  </tr>

</table>

И каквото направихте с новините така и със сайдбаровете, но само, че на мястото ан сайдбар 1,2 и 3 и не забраяйте да променяте размера.

Това е простия начин да си кодирате дизайна! :)