Memposisikan Judul dan Ringkasan Posting di Samping Thumbnail atau Thumbnail di atas Judul dan Ringkasan Posting

Bagaimana caranya memposisikan judul dan ringkasan posting di samping thumbnail, atau bagaimana cara memposisikan thumbnail di atas judul dan ringkasan posting (biasanya untuk membuat templat List & Masonry Grid)? Di sini Saya mencoba untuk membuat kode XML posting khusus yang Saya buat sefleksibel mungkin untuk keperluan modifikasi di masa datang. Kode ini sudah mencakup modifikasi ringkasan posting, sehingga jika Anda sudah mengimplementasikan modifikasi ini, maka Anda tidak perlu lagi repot-repot untuk mengimplementasikan tutorial pembuatan posting auto read-more.

Namun sebelum melakukan modifikasi ini, perlu dipertimbangkan bahwa nanti Anda akan mengubah struktur posting secara keseluruhan, sehingga beberapa kustomisasi lama Anda seperti penambahan widget artikel terkait, widget berbagi dan kustomisasi-kustomisasi lain yang terkait dengan posting semuanya akan menghilang. Disarankan untuk menyimpan salinan templat Anda terlebih dahulu sebelum melakukan modifikasi ini.

Kode XML

Langkah pertama adalah mengedit XML templat. Kode XML ini cukup diterapkan sekali saja. Mengenai pengaturan posisi setiap elemen bisa kita lakukan dengan CSS yang sudah Saya tuliskan di bawah:

<b:includable id='post' var='post'>

  <article expr:class='&quot;_post _post-&quot; + data:blog.pageType' expr:id='&quot;post-&quot; + data:post.id'>

    <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <div class='_post-part _post-thumbnail-area'>
          <b:if cond='data:post.thumbnailUrl'>
            <img class='_post-thumbnail' expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 200, &quot;1:1&quot;)' height='200' width='200'/>
          </b:if>
        </div> <!-- ._post-thumbnail-area -->
      </b:if>
    </b:if>

    <div class='_post-part _post-body-area'>

      <h3 class='_post-title'>
        <b:if cond='data:post.title'>
          <b:if cond='data:post.link'>
            <a expr:href='data:post.link'><data:post.title/></a>
          <b:else/>
            <b:if cond='data:post.url'>
              <b:if cond='data:blog.url != data:post.url'>
                <a expr:href='data:post.url'><data:post.title/></a>
              <b:else/>
                <data:post.title/>
              </b:if>
            <b:else/>
              <data:post.title/>
            </b:if>
          </b:if>
        <b:else/>
          [Untitled]
        </b:if>
      </h3> <!-- ._post-title -->

      <div class='_post-body'>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <data:post.body/>
        <b:else/>
          <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
            <data:post.body/>
          <b:else/>
            <b:if cond='data:post.snippet'>
              <data:post.snippet/>
            <b:else/>
              No content.
            </b:if>
          </b:if>
        </b:if>
      </div> <!-- ._post-body -->

      <footer class='_post-footer'>
        <div class='_post-footer-line _post-footer-line-1'>
          <span class='_post-author vcard'>
            <b:if cond='data:top.showAuthor'>
              <data:top.authorLabel/> <span class='fn'>
              <b:if cond='data:post.authorProfileUrl'>
                <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='Author Profile'><data:post.author/></a>
              <b:else/>
                <span class='g-profile'><data:post.author/></span>
              </b:if>
              </span>
            </b:if>
          </span> <span class='_post-time'>
          <b:if cond='data:top.showTimestamp'>
            <data:top.timestampLabel/> <a class='_post-time-link' expr:href='data:post.url' rel='bookmark' title='Permanent Link'><time class='_post-published published' expr:datetime='data:post.timestampISO8601'><data:post.timestamp/></time></a>
          </b:if>
          </span> <span class='_post-comment-link'>
          <b:if cond='data:blog.pageType != &quot;item&quot;'>
            <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
              <b:if cond='data:post.allowComments'>
                <a expr:href='data:post.url + &quot;#comments&quot;'><data:post.commentLabelFull/></a>
              </b:if>
            </b:if>
          </b:if>
          </span>
        </div> <!-- ._post-footer-line-1 -->
        <div class='_post-footer-line _post-footer-line-2'>
          <span class='_post-labels'>
            <b:if cond='data:post.labels'>
              <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'>
                <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>, </b:if>
              </b:loop>
            </b:if>
            <!-- b:include data='post' name='postQuickEdit'/ -->
          </span>
        </div> <!-- ._post-footer-line-2 -->
      </footer> <!-- ._post-footer -->

    </div> <!-- ._post-body-area -->

  </article> <!-- ._post -->

</b:includable>

Salin semua kode di atas untuk menggantikan kode yang tampak seperti ini di dalam templat:

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

Langkah berikutnya adalah menambahkan CSS khusus. Pilih salah satu saja.

Tata Letak 1: Thumbnail di Sebelah Kiri Judul dan Ringkasan Posting

Thumbnail di sebelah kiri judul dan ringkasan posting.

Salin kode CSS ini lalu letakkan di atas ]]></b:skin> atau </style>:

/*!
Thumbnail width: 200
Thumbnail height: 200
*/

._post {
  background-color:white;
  height:200px; /* Thumbnail height */
  margin:0 0 10px;
  overflow:hidden;
  *zoom:1;
}

._post:after {
  content:" ";
  display:block;
  clear:both;
}

._post-title {
  font:normal bold 20px/1.2 Arial,Sans-Serif;
  margin:0 0 10px;
  padding:0;
}

._post-thumbnail-area {
  width:200px; /* Thumbnail width */
  height:200px; /* Thumbnail height */
  background-color:#2D3957;
  float:left;
  overflow:hidden;
}

._post-thumbnail {
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  border:none;
  outline:none;
  position:static;
}

._post-body-area {
  padding:20px;
  margin-left:200px; /* Thumbnail width */
  font-size:11px;
}

._post-footer {
  margin:10px 0 0;
  padding:10px 0 0;
  border-top:1px dotted #ddd;
  font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif;
  text-transform:uppercase;
  color:#999;
}

/* Item + Static Page */
._post-item,
._post-static_page {height:auto}

._post-item ._post-body-area,
._post-static_page ._post-body-area {
  margin:0;
  padding:20px;
  font-size:13px;
}

._post-item ._post-title,
._post-static_page ._post-title {font-size:40px}

Tata Letak 2: Thumbnail di Sebelah Atas Judul dan Ringkasan Posting

Thumbnail di sebelah atas judul dan ringkasan posting.

Salin kode CSS ini lalu letakkan di atas ]]></b:skin> atau </style>:

/*!
Thumbnail width: 300
Thumbnail height: 300
*/

._post {
  background-color:white;
  width:300px; /* Thumbnail width */
  margin:0 10px 10px 0;
  overflow:hidden;
  *zoom:1;
  /* float:left; */
}

._post:after {
  content:" ";
  display:block;
  clear:both;
}

._post-title {
  font:normal bold 16px/1.2 Arial,Sans-Serif;
  margin:0 0 10px;
  padding:0;
}

._post-thumbnail-area {
  width:300px; /* Thumbnail width */
  height:300px; /* Thumbnail height */
  background-color:#2D3957;
  overflow:hidden;
}

._post-thumbnail {
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  border:none;
  outline:none;
  position:static;
}

._post-body-area {
  padding:20px;
  margin:10px 0 0;
  font-size:11px;
}

._post-footer {
  margin:10px 0 0;
  padding:10px 0 0;
  border-top:1px dotted #ddd;
  font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif;
  text-transform:uppercase;
  color:#999;
}

/* Item + Static Page */
._post-item,
._post-static_page {width:auto}

._post-item ._post-body-area,
._post-static_page ._post-body-area {
  margin:0;
  padding:20px;
  font-size:13px;
}

._post-item ._post-title,
._post-static_page ._post-title {font-size:40px}

Kode yang Saya beri tanda adalah resolusi gambar yang akan Anda terapkan. Ini tergantung dari ukuran standar masing-masing gambar posting di atas, yang sudah Saya sertakan dalam komentar CSS.

Simpan perubahan.

---

Struktur Posting yang Tercipta

Berikut ini adalah diagram markup HTML yang akan tercipta secara garis besar. Semoga bisa sedikit membantu untuk memberikan gambaran modifikasi lanjutan:

• ._post
  • ._post-part._post-thumbnail-area
    • ._post-thumbnail
  • ._post-part._post-body-area
    • ._post-title
    • ._post-body
    • ._post-footer
      • ._post-footer-line._post-footer-line-1
        • ._post-author
        • ._post-time
        • ._post-comment-link
      • ._post-footer-line._post-footer-line-2
        • ._post-labels

._post {}
._post-part {}
._post-thumbnail-area {}
._post-body-area {}
._post-title {}
._post-body {}
._post-footer {}
._post-footer-line {}
._post-footer-line-1 {}
._post-footer-line-2 {}
._post-author {}
._post-time {}
._post-comment-link {}
._post-labels {}

Catatan Tambahan: Setelah ini lebih baik Anda hapus beberapa kode CSS yang memiliki selektor seperti ini. Markup posting sudah berubah secara total, sehingga CSS ini sudah tidak diperlukan lagi:

.post {}
.post-title {}
.post-body {}
.post-footer {}
.post-footer-line {}
.post-footer-line-1 {}
.post-footer-line-2 {}
.post-footer-line-3 {}
.post-header-line {}
.post-header-line-1 {}
.post-header-line-2 {}
.post-header-line-3 {}
.post-author {}
.post-timestamp {}
.post-comment-link {}
.post-labels {}