Страницы

четверг, 25 октября 2012 г.

Tumblr.com дизайню1

Итак сегодня расскажу как в принципе можно создать свой дизайн. Причем я надеюсь, что остальные вопросы, а то как управлять соц-сетью, ты сможешь сам разобраться, ибо ни чего сложного в этом нет. И поэтому я перехожу к другой части эжтого проект, более интересной для тех, кто хочет сам создать свой собственный дизайн.

Для этого у соц-сети есть специальные инструменты, которые позволяют изменить HTML-код конструкции, таким образом, что твой блог будет исключительно индивидуальным, и созданый для тебя только тобой. Нет конечно ты можешь в принципе свой собственный дизайн и не создавать, а использовать уже один из предлагаемых соц-сетью, но тема заметки в том, что здесь в них, а их будет не одна, я расскажу как можно проще создать или исправить готовый дизайн для себя любимого.

Итак мы уже выяснили, что дизайн блога в соц-сеть индивидуально настраиваемый на уровне HTML-кодов, до самой страницы. Чтобы использовать сервисы соц-сети, ее разработчики создали специальные псевдо-теги с помощью которых ты сам можешь вставить в текст твоего дизайна те куски и выборки, которые ты непосредственно вводишь в соц-сеть, и таким образом в твоей личной постоянной части, определяющие дизайн появится - та переменная составляющая, которая и создает содержимое твоего блога

Синтаксис этих вставок достаточно простой и очень напоминает вид тегов HTML

{block:тег_вставки}
Содержимое вставки
{/block:тег_вставки}

В этом примере ты видишь как вставляется значение Титла твоег блога в соответствующий HTML-тег. и таким образм то что вводишь в переменую часть блога как заглавие - отображается Заголовком но уже в твоем блоге.

<html>
  <head>
    <title>{Title}</title>
  </head>
  <body>
    ...
  </body>
</html>

Следующий вариант показывает как можно создать отображение заметок, которые ты ввел в блоке управления соц-сетью.

<html>
  <body>
    <ol id="posts">
       {block:Posts}
           <li> ... </li>
        {/block:Posts}
    </ol>
  </body>
</html>

Как видишь ни чего сложного в создании собственой темы нет. Нужно только терпение и немножко изобретательности и ты получишь свой уникальный и интересный дизайн, который ты можешь совершенствовать со временем, улучшать изменять и добавлять.

Чтобы не быть горлословным я здесь приведу простой вариант дизайна, на основе которого ты поймешь что делать свой собственный в соц-сети Тумблер достаточно просто.

<html>
  <head>
    <title>{Title}</title>
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
    {block:Description}
      <meta name="description" content="{MetaDescription}" />
    {/block:Description}
  </head>
  <body>
    <h1>{Title}</h1>
    {block:Description}
      <p id="description">{Description}</p>
    {/block:Description}
    <ol id="posts">
      {block:Posts}
        {block:Text}
          <li class="post text">
            {block:Title}
              <h3><a href="{Permalink}">{Title}</a></h3>
            {/block:Title}
            {Body}
          </li>
        {/block:Text}
        {block:Photo}
          <li class="post photo">
            <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
            {block:Caption}
              <div class="caption">{Caption}</div>
            {/block:Caption}
          </li>
        {/block:Photo}
        {block:Photoset}
          <li class="post photoset">
            {Photoset-500}
            {block:Caption}
              <div class="caption">{Caption}</div>
            {/block:Caption}
          </li>
        {/block:Photoset}
        {block:Quote}
          <li class="post quote">
            "{Quote}"
            {block:Source}
              <div class="source">{Source}</div>
            {/block:Source}
          </li>
        {/block:Quote}
        {block:Link}
          <li class="post link">
            <a href="{URL}" class="link" {Target}>{Name}</a>
            {block:Description}
              <div class="description">{Description}</div>
            {/block:Description}
          </li>
        {/block:Link}
        {block:Chat}
          <li class="post chat">
            {block:Title}
              <h3><a href="{Permalink}">{Title}</a></h3>
            {/block:Title}
            <ul class="chat">
              {block:Lines}
                <li class="{Alt} user_{UserNumber}">
                  {block:Label}
                    <span class="label">{Label}</span>
                  {/block:Label}
                  {Line}
                </li>
              {/block:Lines}
            </ul>
          </li>
        {/block:Chat}
        {block:Video}
          <li class="post video">
            {Video-500}
            {block:Caption}
              <div class="caption">{Caption}</div>
            {/block:Caption}
          </li>
        {/block:Video}
        {block:Audio}
          <li class="post audio">
            {AudioPlayerBlack}
            {block:Caption}
              <div class="caption">{Caption}</div>
            {/block:Caption}
          </li>
        {/block:Audio}
      {/block:Posts}
    </ol>
    <p id="footer">
      {block:PreviousPage}
        <a href="{PreviousPage}">&#171; Previous</a>
      {/block:PreviousPage}
      {block:NextPage}
        <a href="{NextPage}">Next &#187;</a>
      {/block:NextPage}
      <a href="/archive">Archive</a>
    </p>
  </body>
</html>

Таким образом мы создали шаблон будущего показа нашего блога. Причем каждая сисволическая единица, а то либо пост, группа постов, фотография , видио и прочая единица будет отображена во внешнем представлении по этому шаблону в своем оригинальном и заданым нами варианте.

~ продолжение следует ~
Автор: на
Ярлыки: