Memposisikan Judul dan Ringkasan Posting di Samping Thumbnail atau Thumbnail di atas Judul dan Ringkasan Posting
Tabel Konten
- Kode XML
- Tata Letak 1: Thumbnail di Sebelah Kiri Judul dan Ringkasan Posting
- Tata Letak 2: Thumbnail di Sebelah 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='"_post _post-" + data:blog.pageType' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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, "1:1")' 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 == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.url + "#comments"'><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 != "true"'>, </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
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
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:
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?
Taufik Nurrohman
Yop.
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”
Taufik Nurrohman
Coba pakai
!important
: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 :)
OPMLoverz
cara mindahin tgl waktu dan share buttons nya supaya di atas kek blog2 pada umumnya atau kek blog DTE gini gmna?
Taufik Nurrohman
Pelajari dua referensi ini:
• /2012/11/xhtml-blogger-seksi-posting.html
• /2012/11/xhtml-blogger-share-buttons.html
Unknown
:-bd
Unknown
rumit mas,,hehe
Unknown
I don't understand how to use it? Where do I have to put that coed? What do i have to change?
Admin Coeg
klo cara nampilin post viewsnya bisa ga? di blogspot?
ditaruh abis label:v Trimakasih :D
budkalon
Add Post Views Counter to Blogger
Frets Wilson
mas boz....siapapun anda.thankz.
you
Mas mau tanya, bagaimana cara mengatur agar judul berubah setelah jeda halaman termuat sepenuhnya dengan jeda misalnya 10 detik menggunakan
documen.title='contoh';