Cara Modifikasi Tampilan Postingan di Homepage
Cara ini merupakan postingan asli yang saya dapatkan dari tutorial mas taufik pemilik website dte.web.id tentang cara memposisikan Judul dan Ringkasan Posting di Samping Thumbnail atau Thumbnail di atas Judul dan Ringkasan Posting. Intinya adalah bagaimana cara membuat tampilan posting di homepage yang berbeda.
Untuk menerapkan metode ini akan ada beberapa perubahan yang akan kita ganti dan tentunya anda dituntut harus tahu tentang struktur HTML dalam blog anda. Sebab kalau tidak, maka hasilnya akan membuat blog anda menjadi rusak, ^_^ hehehehe.. menakutkan.. Untuk itu silakan backup dulu template anda agar jika terjadi sesuatu bisa dikembalikan lagi.
Keuntungan memakai metode ini adalah kita tidak perlu bersusah payah memasang javascript auto readmore, disamping itu template akan menjadi lebih ringan karena tidak memerlukan javascript yang banyak. Jadi bagi anda yang sudah menggunakan auto readmore bisa menghapus javascriptnya.
Sedangkan kekurangannya adalah kita harus tahu HTML itu saja, karena tidak sembarangan kita bisa mengganti struktur HTML blog.
Dan perlu diketahui, pada saat menerapkan metode ini, beberapa elemen seperti widget berbagi, widget artikel terkait, serta beberapa elemen yang berada dalam area main-wrapper akan menghilang. Untuk itu pertimbangkan lagi jika anda ingin menggunakan metode ini jika anda belum paham dengan edit HTML.
Baik langsung saja, ini dia tutorial memodifikasi tampilan postingan di Homepage dari dte.web.id
2 Cara Modifikasi Tampilan Postingan di Homepage
Pertama-tama kita harus mengganti struktur HTML di blog, untuk itu silakan cari kode
<b:includable id='post' var='post'> ... </b:includable>
Ganti dengan kode dibawah ini
<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'>
<a expr:href='data:post.url'>
<img alt='thumbnail' class='post-thumbnail' expr:src='resizeImage(data:post.thumbnailUrl, 200, "1:1")'/>
</a>
<b:else/>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'>
<img alt='thumbnail' class='post-thumbnail' expr:src='resizeImage(data:post.firstImageUrl, 200, "1:1")'/>
</a>
<b:else/>
<a expr:href='data:post.url'>
<img alt='no image' class='noimage post-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNb7ICHiTNlqTAgLmjngelj8qoiuT0ZoT61CKqJNtJztZLD2dwncUM_Ro5ti_rwH9FNmKvmcumUEDYAvYXYwAgLD-zoRkwdANY_NHn4bX0hrcaQL9LAZDQ-5_oAyb5ncEzjJgoKnEAEAmM/s320/no-image-chaidir-web-id.png'/>
</a>
</b:if>
</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'>
<b:eval expr='snippet(data:post.body, {length: 150})' />
<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>
Selesai. ^_^... sekarang tinggal kita edit CSSnya.
Terdapat 2 tampilan yang bisa anda pilih dan gunakan, yaitu :
Yang pertama adalah memposisikan judul dibawah gambar thumbnail
Berikut CSSnya
/*!
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}
Untuk tampilan yang kedua adalah judul berada disamping gambar thumbnail
Berikut CSSnya
/*!
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}
Untuk penggunaan CSS bisa kalian edit sesuai dengan selera ^_^
Demikian tutorial Cara Modifikasi Tampilan Postingan di Homepage, semoga bermanfaat.
Sekali lagi saya tegaskan, bahwa blog ini hanyalah blog dokumentasi yang saya pergunakan pribadi untuk menyimpan tutorial dan informasi yang berguna bagi saya, bukan untuk niat yang tidak baik terhadap blog lain.
Terima kasih telah membaca postingan Agung Jaka Nugraha
Sekali lagi saya tegaskan, bahwa blog ini hanyalah blog dokumentasi yang saya pergunakan pribadi untuk menyimpan tutorial dan informasi yang berguna bagi saya, bukan untuk niat yang tidak baik terhadap blog lain.
Terima kasih telah membaca postingan Agung Jaka Nugraha
