Memindahkan Judul Posting ke Kanan Thumbnail

Beberapa waktu lalu Saya berusaha merombak template salah satu blog saya. Dengan pengetahuan html dan css yang sangat terbatas, saya ubah ukuran, warna, mengganti, mengurangi, memindahkan atau menambah fitur di template tersebut, katakanlah berhasil.

Tiba saatnya Saya ingin mengubah letak judul posting di halaman depan. Lihat gambar di di bawah ini (saya capture dari sembarang template).

Padahal saya menginginkan tampilan judulnya (juga post meta) ada di sebelah kanan thumbnail (gambar). Kira-kira seperti ini:

Cari-cari tutorialnya yang berbahasa Indonesia dan Inggris tidak ketemu. Apa keyword pencarian saya saja ya yang tidak tepat. Tapi akhirnya saya ketemu dengan blog keren ini. Silahkan mampir dulu kesitu.

Pengaplikasian tutorial dari blog tersebut memang mudah. Tapi akibatnya, seluruh struktur posting Saya berubah, seperti widget artikel terkait, widget sharing dll. Bukannya tutorial tersebut salah, tapi mana mungkin bagi empunya tutorial untuk menyamakan dengan seluruh template yang dibuat oleh banyak orang. Kan beda-beda strukturnya.

Akhirnya kutahan dulu mengaplikasikan tutorial tersebut, karena pada akhirnya akan banyak yang perlu Saya edit lagi (sambil belajarlah..). Ujung-ujungnya saya berpendapat jika kode urutan pada template saya (seperti gambar 1 - atas) adalah JUDUL>>GAMBAR>>DESKRIPSI yang dimulai dari kiri atas. Jika saya balik menjadi GAMBAR>>JUDUL>>DESKRIPSI, maka gambar akan memenuhi bagian kiri atas hingga ke bawah, selanjutnya judul dan deskripsi akan berada di samping kanan. Maen tebak-tebakanlah, kan kalau salah nggak bakal ditangkep pak polisi.

Pada tutorial itu, kode html yang diubah adalah yang berada di dalam kode ini (tentu saja):

<b:includable id='post' var='post'> bla..bla..bla... </b:includable>

Jadi saya pindahin aja tag untuk thumbnail ke atas tag untuk judul dan deskripsi. Berhasil, judul akhirnya pindah ke kanan. Setelah itu tinggal edit margin dan padding, ukuran thumbnail, panjang deskripsi, pindahin post meta dll biar cantik seperti gambar 2. Selesai deh.

Kalau sobat jeli, tidak perlu mengambil semua kode pada tutorial itu, cukup ambil saja satu dua kode yang diperlukan untuk itu. Nah, sayangnya saya termasuk yang tidak jeli he.. Selamat belajar.