Tutorial Dasar 4 Blogger Data Tags

Selamat pagi dan apa kabar, brother? Saya harap kamu tetap dalam keadaan sehat. Artikel kali ini saya akan memberitahu kalian tentang blogger data tags. Berbaring di sofa temukan posisi yang paling nyaman untuk bersantai, ambil segelas kopi, dan mainkan musik. Lalu let's Go! Ayo kita belajar!

Kali ini, kita akan belajar tentang blogger data tags. Blogger data tags adalah tag dimana kita bisa memanggil data yang disimpan dari blogger. Ini seperti, memanggil temanmu dengan nama panggilannya. Ketika kamu memanggil Leon, maka temanmu yang bernama Leon akan menyapamu kembali. Nah, itu contoh simpelnya.

Jadi, kita hanya perlu memanggil tag untuk menampilkan data yang sesuai kita ingin tampilkan.

Sebelum aku memulai tutorial, aku akan beranggapan kalau kalian sudah paham betul dengan CSS. Jika memang belum, silahkan dipelajari lagi tentang dasar-dasar CSS.

Tanpa perlu basa-basi, mari kita eksekusi.

Membangun Homepage

Letakkan CSS ini ke dalam blogger kalian.

.post-outer{padding: 15px; margin:15px; background: gray}
.post-outer img{max-width: 150px;}

Selanjutnya coba cari tag ini dengan cara menekan ctrl + f di blogger editor kalian.

<div class='post-outer'>

Jika tidak berhasil, cobalah untuk mencari nilai dari classnya saja yaitu post-outer.

Apa kamu sudah menemukannya? Jika sudah, disebalah code itu tepatnya di penomoran line code nya, tekan simbol tanda panah bawah. Lalu hapus semua yang ada di dalam tag div post-outer.

Hasilnya div dari post-outer akan seperti ini. Kosong dan masih bersih.>.<

<div class='post-outer'>

</div>

Kalau kalian akan mencoba save dan melihat hasilnya di blogger kalian, maka tampilannya akan seperti ini.

Hmm ... ada yang aneh. Aku tidak suka dengan tulisan tanggal tersebut, kalau begitu. Kita hapus saja, seharusnya itu tidak jauh dari post-outer. Coba kita lihat di editor blogger.

Kita menemukannya. Itu ada di tempat setelah post.isDateStart

Hapus code ini

<b:if cond='data:post.dateHeader'>
 <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

Kemudian simpan dan coba lihat hasilnya di website kalian.

Sudah binggung? Jangan menyerah dulu.

Di dalam post-outer coba tambahkan code ini.

<ul>
 <li>
 <a expr:href='data:post.url'><data:post.title/></a>
 </li>
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
 <li>
 <img expr:src='data:post.firstImageUrl' />
 </li>
 <li>
 <b:eval expr='snippet(data:post.longSnippet, {length: 400})'/>
 </li>
 <b:else/>
 <li>
 <data : post.body/>
 </li>
 </b:if>
 </ul>

Simpan dan liat hasilnya.

Hore! Kita sudah berhasil membangun homepage sederhana.

Penjelasan

Kita menggunakan 5 blogger tag yaitu data.post.title, data.post.url, data.post.firstImageUrl, data.post.snippet, dan data.post.body.

Kelima blogger tag tersebut seperti arti dari katanya, title digunakan untuk mendapatkan judul dari post, dan seterusnya. Snippet yaitu mengambil cuplikan isi dari content kita. Kita bisa mengatur panjang cuplikan nya dengan jumlah karekter sesuai keinginan kita.

Satu hal lagi yang penting yaitu post.body, tag ini berfungsi untuk menampilkan semua isi dari post kita. Jika kita ingin menampilkan semua content yang ada di postingan kita maka kita bisa menggunakan post.body.

Daftar Blogger Data Tags

Ini adalah beberapa blogger data tags yang sering digunakan.

Blogger Data Tags	What Show
<data:post.dateHeader/>	Waktu Publikasi sebagai header
<data:title/>	Judul Blog
<data:description/>	Deskripsi Blog
<data:olderPageTitle/>	Judul post terlama
<data:newerPageTitle/>	Judul post terbaru
<data:commentLabel/>	Komentar
<data:authorLabel/>	Akan menampilkan "dipublikasikan oleh ...."
<data:post.title />	Judul Post
<data:post.body/>	Content post
<data:post.author/>	Nama yang memposting
<data:post.url/>	URL postingan
<data:post.timestamp/>	Waktu dan tanggal Post
<data:label.name/>	Label post

Kalian bisa mempelajarinya lebih lanjut lagi di sini

Bagaimana sudah pusing? Jangan pusing dulu. Kita harus menikmati setiap proses dan terus semangat.

Aku sudahi dulu tutorial kali ini. Jika ada pertanyaan silahkan sampaikan unek - unekmu di komentar. Kalau ada kata - kata yang menyinggung perasaanmu aku minta maaf.

Terima kasih dan sampai jumpa lagi.

Semangat belajar! Have fun day! Ganbantte Minna!!