Memindahkan Judul Posting ke Kanan Thumbnail

Thursday, October 10, 2013

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).

Letak judul di atas thumbnail

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.

2 comments:

  1. Apakah Anda dalam kesulitan keuangan? Apakah Anda perlu
    pinjaman untuk memulai bisnis atau untuk membayar tagihan Anda?
    Kami memberikan pinjaman kepada orang yang membutuhkan bantuan dan kami memberikan pinjaman kepada perusahaan lokal, internasional dan juga pada tingkat bunga yang sangat rendah dari 2%.
    Terapkan Sekarang Via Email: kellywoodloanfirm@gmail.com
    Terima kasih
    Terima kasih dan Tuhan memberkati
    Ibu Kelly

    ReplyDelete
  2. Halo, nama saya Setiabudi, saya telah ditipu 8 Juta karena aku butuh modal besar dari 40 Juta, bisnis saya hancur sampai saya bertemu dengan seorang teman yang memperkenalkan saya dan suami saya ke Mrs Alexandra yang akhirnya membantu kami mendapatkan pinjaman dalam dirinya perusahaan, jika Anda membutuhkan pinjaman dan kontak pinjaman dijamin ibu yang baik Alexandra melalui email perusahaan.

    alexandraestherloanltdd@gmail.com
    alexandraestherfastservice@cash4u.com,

    Anda dapat menghubungi saya melalui email ini; setiabudialmed@gmail.com informasi atau saran yang perlu Anda ketahui.
    Terima kasih .

    ReplyDelete

 
Copyright © 2015. Alur Kecil.
Design by Herdiansyah Hamzah. Published by Themes Paper. Powered by Blogger.
Creative Commons License
DMCA.com