Mecha versi 2.6.4 sudah dirilis!

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

Tabel Konten
  1. Kode XML 
  2. Tata Letak 1: Thumbnail di Sebelah Kiri Judul dan Ringkasan Posting 
  3. Tata Letak 2: Thumbnail di Sebelah Atas Judul dan Ringkasan Posting 
  • Struktur Posting yang Tercipta 

    • 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 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 

    Post Thumbnail on the Left
    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 Before Post Title and Summary
    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 {}

    132 Komentar

    Unknown

    http://cungkrink96.blogspot.com/ ( blog baru lagi )

    numpang ngasih review mas taufik, bnyk belajar dari DTE, semua script ok banget + terstruktur belajar jadi mudah, cuma masih ada yang blm ane bisa mas taufik, gmn caranya supaya thumbnailnya bisa menjadi link ? karena sekarang kayanya kebanyakan orang lebih seneng klik gambar dari pada klik judul untuk membaca artikelnya.

    thanks before

    Taufik Nurrohman

    Terima kasih.

    Sebenarnya kamu tinggal membungkus bagian gambarnya saja dengan tautan judul seperti ini:

    <a expr:href='data:post.url'>
<img class='_post-thumbnail' … />
</a>

    Unknown

    oh iy gk kepikiran klo tinggal di bungkus mas taufik hahaha. tak cba dulu mas, tq tq

    Admin

    Om, mau tanya donk...
    Kalo saya pake code ini untuk thumbailnya ga apa-apa kan?
    <b:if cond='data:post.firstImageUrl'>
    <img expr:src='data:post.firstImageUrl' expr:title='data:post.title'/>
    </b:if>

    Taufik Nurrohman

    Tidak apa-apa. Malahan kalau pakai caramu, ukuran gambar bisa memakai resolusi yang sebenarnya.

    Admin

    Oke...

    Nah, kalo saya bandingkan dengan susunan bawaan blogger ada <meta .../>
    itu gunanya buat apa ya? soalnya yang buatan si om ga ada kan ya?
    <b:if cond='data:post.firstImageUrl'>
    <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>
    <a expr:name='data:post.id'/>

    Taufik Nurrohman

    Biasanya itu ditambahkan cuma supaya Google+ bisa dengan mudah merayapi data konten yang diperlukan pada saat kamu membagikan URL posting seperti URL halaman, judul, ringkasan dan gambar. Mirip seperti Facebook Open Graph. Kabar baiknya Google+ sudah dapat menerima/membaca tag meta Facebook Open Graph, jadi kamu bisa cukup memakai itu saja. Bahkan tanpa tag-tag meta tersebut sebenarnya data juga masih bisa tetap dirayapi. Cuma prinsipnya pakai perkiraan.

    Admin

    Wah, terima kasih. Sangat membantu sekali.

    Artinya, kita tidak perlu lagi memakai tag <meta/> pada kontent postingan? Jadi cukup di kontent <head/> saja?

    Anonim

    waahh.. artikelnya lengkap sekali.. perlu dicoba satu persatu supaya tidak membingungkan... sukses selalu mas..
    ditunggu kunjungan baliknya...

    Cuman Android

    Wah work 100% di web saya, terimakasih banyak kang \o/

    Cuman Android

    kang cara mengatur banyaknya kata yang mau di tampilin gimana ya ? =p*

    Anonim

    memang hebat... artikel yang benar-benar lengkap....terima kasih, benar-benar menambah ilmu pengembangan blog yang lebih baik...

    RW

    Ijin tes gan

    †Varius

    mas mau tanya ko pos saya jadi menyatu ya dengan postingan atas dan bawah, jadi gambarnya itu menyatu ga ada jarak antar postingan. gimana memperbaikinya?(pemula dalam kasus ini)

    †Varius

    “Saya sudah mengikuti langkah-langkah pada blog sesuai dengan tutorial di atas , tetapi susunan gambarnya menjadi menyatu dengan kata lain tidak ada jarak antara post/gambar dengan post/gambar lain.
    Saya sudah mencoba untuk mengakalinya akan tetapi saya masih belum mengerti cara membaca kode html.
    Saya memakai Blogger. Berikut ini adalah halamannya: blog ini hanya blogger uji coba bukan asli tetapi memakai template/html yang sama”

    Irfan Muhammad Ghani

    gan kalau pengen tampil judulnya aja gimana ya ? makasih sebelumnya ^_^

    Anonim

    mas saya mau nanya ni seputar blog saya.. untuk ukuran gambar thumbl gak pas ke kotak yang dibuat, dan juga klau kita klik Lead More Post gambar thumbl amburadur mas.. mohon informasinya mas [url=http://lensaterkini.web.id]

    idyn1d

    mas... bagaimana cara membuat tampilan yang berbeda (portail&lenscape)hanya di halaman depan tepatnya di (main posting)+ dengan nama label masing - masing/judul, seperti situs/blog ini : =http://blueapk-msdesignbd.blogspot.co.id/ dan ini =http://portal-uang.blogspot.co.id/ , atau mas ada artikelnya tentang itu, mohon bantuannya mas, udah nyari" kagak ketemu :\

    Unknown

    munkin yg situ maksud yg nih
    http://www.dte.web.id/2013/04/widget-blogger-untuk-menampilkan-daftar.html

    Taufik Nurrohman

    Tag kondisional?

    idyn1d

    apa hanya memakai tag kondisional mas... sekiranya itu adalah widget ya mas seperti template premium umumnya... bukan post... apa ada html dan CSS contohnya mas untuk di pahami... thanks sebelumnya :)

    Unknown

    I don't understand how to use it? Where do I have to put that coed? What do i have to change?

    you

    Mas mau tanya, bagaimana cara mengatur agar judul berubah setelah jeda halaman termuat sepenuhnya dengan jeda misalnya 10 detik menggunakan documen.title='contoh';