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:  Register Banyak Akun Twitter dengan Satu Alamat Email

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

Admin

Administrator dari @belajar_web yang tidak bosan untuk selalu mengajak para pelaku web development untuk bergabung menuliskan pengetahuannya untuk disharing ke teman-teman yang lain, Sharing is sexy

You may also like...

eskişehir bayan escort - samsun escort - diyarbakır escort