Cara Mudah Membuat Theme Tumblr : (Struktur Kode)

Tumblr.com merupakan sebuah Blog yang unik dibandingkan dengan jenis blog yang lain seperti WordPress maupun Blogspot. Cara tumblr dalam penulisan blog dibagi dalam 7 kategori utama yaitu Text, Foto, Link, Quote, Chat, Audio, Video. Jika kita ingin menuliskan sebuah Quote, maka langsung bisa kita publish tanpa mengisi judul dari Quote tersebut. Untuk lebih tahu fitur Tumblr silakan kunjungi websitenya saja 😛

Membuat Theme Tumblr Sendiri

Seperti blog-blog yang lain, Tumblr juga memberikan kebabasan bagi kita untuk membuat theme kita sendiri, membuat theme yang unik dan beda dengan pengguna Tumblr yang lain.

langkah awal sebelum kita membuat theme Tumblr adalah mengatahui bagaimana kode theme tumblr bekerja, selanjutnya mari kita pelajari stuktur kode theme tumblr.

Struktur Kode Theme Tumblr

Struktur kode tumblr mudah untuk diimplementasikan pada html/css, hanya membutuhkan 1 file dalam menghasilkan sebuah theme di tumblr, kode CSS dan HTML dijadikan satu dalam 1 file tersebut.

Tumblr memiliki 2 jenis operator khusus yang digunakan untuk menampilkan kontent.

  1. Variable : Variabel digunakan untuk memasukkan data dinamis seperti judul blog dan deskripsi.
    Contoh : kenampilkan blog title = {Title}

    <html>
        <head>
            <title>{Title}</title>
        </head>
        <body>
            ...
        </body>
    </html>
    
  2. Block : Untuk menampilkan postingan, text, photo, paging post dan lain sebagainya.
    Contoh : menampilkan post = {block:Posts} … {/block:Posts}

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

Berikut beberapa variable dasar untuk area Head HTML :

{Title} : Menampilkan Title dari Blog Tumblr.
{Description} : Deskripsi dari Blog Tumblr.
{MetaDescription} : Menampilkan Meta Description dr Blog tumblr.
{RSS} : link RSS Feed Blog Tumblr.
{Favicon} : Link favicon blog Tumblr.

Untuk penggabungan di HTMLnya seperti dibawah ini :

<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>
       ....
    </body>
</html>

Menampilkan Block Post untuk Text

{block:Posts}
     {block:Text}
          <li class="post text">
                {block:Title}
                     <h3><a href="{Permalink}">{Title}</a></h3>
                {/block:Title}
                {Body}
          </li>
     {/block:Text}
{/block:Posts}

Pada Block post text ini tampilannya seperti blog kebanyakan, yaitu berisi judul post dan konten, nah pada kode diatas konten tersebut dipanggil dengan variable {Body}

Baca Juga:  Membuat RSS Reader dengan PHP + JqueryMobile + YQL

Photo

{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}

Quote

{block:Quote}
     <li class="post quote">
           "{Quote}"
           {block:Source}
                 <div class="source">{Source}</div>
           {/block:Source}
     </li>
{/block:Quote}

Link

{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}

Chat

{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}

Audio

{block:Audio}
     <li class="post audio">
         {AudioPlayerBlack}

         {block:Caption}
             <div class="caption">{Caption}</div>
         {/block:Caption}
      </li>
{/block:Audio}

Video

{block:Video}
     <li class="post video">
          {Video-500}

          {block:Caption}
               <div class="caption">{Caption}</div>
          {/block:Caption}
     </li>
{/block:Video}

ke 7 jenis post diatas memang dibedakan, karena memang fitur ini yang membedakan tumblr dengan yang lainnya, dengan begitu bisa membuat layout yang berbeda dimasing-masing ke 7 block post diatas, seperti dibagian text kita buat backgroundnya garis-garis seperti garis pada buku, sedangkan pada audio kita bisa buat layout gambar kaset atau piringan hitam, kita bebas berekpresi dengannya.

Mudah bukan? hehehe…

Apa selanjutnya?

Oke, setelah kita mengerti (sedikit) tentang Variable dan Block diatas, pada tutorial selanjutnya kita akan membuat sebuah desain blog theme tumblr sederhana seperti dibawah ini :

Belajar Theme tumblr

Selanjutnya : Cara Mudah Membuat Theme Tumblr : (web design)

Komentar

comments

zulsdesign

Seorang Web Designer, Web Developer, Wordpress Development dan independen Blogger. Spesialisasi Personal Branding. Selalu haus akan ilmu tentang perkembangan dunia Web Design, Social Media, Online Marketing. Kadang-kadang juga berprofesi sebagai konsultan Website dadakan :)

grain storage steel silo grain bins