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}
2. 1
2
3
4
5
6
7
8
|
3.
<html>
<head>
<title>{Title}</title>
</head>
<body>
...
</body>
</html>
|
4.
5.
Block : Untuk menampilkan
postingan, text, photo, paging post dan lain sebagainya.
Contoh : menampilkan
post = {block:Posts} … {/block:Posts}
6. 1
2
3
4
5
6
7
8
9
|
7.
<html>
<body>
<ol id="posts">
{block:Posts}
<li> ... </li>
{/block:Posts}
</ol>
</body>
</html>
|
8.
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 :
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<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
1
2
3
4
5
6
7
8
9
10
|
{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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
{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
1
2
3
4
5
6
7
8
|
{block:Quote}
<li class="post quote">
"{Quote}"
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
</li>
{/block:Quote}
|
Link
1
2
3
4
5
6
7
8
9
|
{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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
{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
1
2
3
4
5
6
7
8
9
|
{block:Audio}
<li class="post audio">
{AudioPlayerBlack}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Audio}
|
Video
1
2
3
4
5
6
7
8
9
|
{block:Video}
<li class="post video">
{Video-500}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Video}
|
Dengan begitu kita 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.
Tidak ada komentar:
Posting Komentar