Tumblr / Posted 3 years ago / 19 Komentar
cara-mudah-membuat-theme-tumblr

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 :P

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}

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)

Tags

contoh web sederhana,cara mendesain tumblr,cara membuat tema tumblr,contoh desain web sederhana,tutorial tumblr,tema tumblr unik,membuat tema tumblr,contoh tampilan website,cara membuat theme tumblr sendiri,contoh tampilan web sederhana,cara tumblr,tampilan web sederhana,jenis layout,theme tumblr,contoh css sederhana,contoh web desain sederhana,skrip html,membuat tema tumblr sendiri,tema tumblr,cara membuat tema untuk tumblr Tags: , , , , , , , , , , , ,
cToko Toko Online

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

http://belajarwebdesign.com


18 Comments

  1. Posted October 10, 2011 at 9:21 am | Permalink

    artikel ini yg sedang sy cari… makasih yaaa… ;o)

    • Posted October 28, 2011 at 12:33 pm | Permalink

      Semoga bermanfaat, ditunggu saja tulisan lanjutannya nanti :)

  2. Posted October 10, 2011 at 2:22 pm | Permalink

    Strukturnya lebih enak dipandang dari pada wp dan blogspot..
    artikelnya mantapp :)

    • Posted October 28, 2011 at 12:33 pm | Permalink

      Yup, soalnya tumblr ini sangat mirip kode smarty, jadi kodenya simple, dibandingkan dengan WP yang masih kode PHP asli :)

      • Posted October 29, 2011 at 10:38 am | Permalink

        Tapi dari segi Customizablenya, wordpress masih juara.. hehe

        • Posted October 31, 2011 at 4:18 pm | Permalink

          Betul, memang belum ada yg ngalahin WP sih :D

          • Posted June 26, 2014 at 9:21 pm | Permalink

            memang WP itu jawara nya cms opensource ya min :D

  3. Posted November 22, 2011 at 12:09 pm | Permalink

    Yeah, saya juga pernah bikin theme Tumblr. Undtuk memudahkan coding, saya pake Thimble, script php. Saya jalankan di localhost, jadi bisa bikin theme Tumblr offline :D

    • Posted November 22, 2011 at 12:43 pm | Permalink

      Mantab nih infonya, nanti di review di postingan ah :)

  4. Posted April 8, 2012 at 4:58 pm | Permalink

    Mau tanya ni. skarang tiap saya posting d tumblr..updatannya da keluar d beranda facebok. knpa ya? mohon bantuannya ya…terima kash. Salam

    • Posted April 8, 2012 at 5:17 pm | Permalink

      Dibagian seringnya sudah dicek? Takutnya ada perubahan. Atau memang sekarang dibatasi

    • Posted April 11, 2012 at 8:03 pm | Permalink

      Sekarang fungsi share Facebook di Tumblr sydah diperbarui. Di dashboard pas login biasanya ada pemberitahuan untuk seting ulang share Facebook.

  5. Posted April 26, 2012 at 8:13 pm | Permalink

    appan sih ini? nggak maksud,,:P
    .maklum ..^^

  6. jujuz Kamilia
    Posted May 19, 2012 at 6:17 pm | Permalink

    haduh bru pertama kali punya blog,, pdhl artikel ini yg sedang d cari.. pas udh ketemu,, eh malah gak ngerti :(

  7. Posted May 23, 2012 at 7:15 pm | Permalink

    wah sangat bermanfaat dan membantu sekali artikelnya, terima kasih :D

  8. fidi
    Posted August 14, 2012 at 8:52 am | Permalink

    maaf, saya kurang mengerti. apa bisa dibuatkan video tutornya agar saya bisa lebih paham?

  9. Posted October 3, 2012 at 8:20 pm | Permalink

    Waaahhh, makasih banyak gan atas tutorialnya…
    Berkunjung juga ke website ane ya gan..

  10. Posted December 6, 2012 at 11:21 am | Permalink

    kalo biar ada menu Di atas sehabis Judul Tumblr : Ask, Archive Instagram, Twitter, Soundcloud, Youtube, About. jadi pas salah satu link ini di klik… ntar langsung ke web yg di tuju.

    Gimana tu buatnya mas? thanks anyway

One Trackback

  1. [...] tulisan sebelumnya Cara mudah membuat theme tumblr : struktur kode saya sudah menjelaskan bagaimana bentuk struktur kode yang dipakai di theme tumblr, sangat simple [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

webdesign