Postingan Berbeda-beda Berdasarkan Label - Sering saya jumpai bagi para blogger yang ingin menciptakan postingan yang berbeda-beda berdasarkan label ini, mungkin mereka tertarik dengan blog kang ismet yang jika kita lihat pada homepage maka thumbnail postnya berbeda warna, mungkin itu sesuatu yang unik.
Pada dasarnya tutorial seperti ini sudah banyak dijumpai di blog lain, namun kebanyakan dari mereka masih belum mengerti cara menerapkannya, entah itu karena script yang terlalu ribet atau karena mereka yang masih sangat pemula sehingga sulit untuk mengerti tentang tutorial yang dibagikan oleh admin blognya.
Tapi sobat jangan khawatir karena saya akan membuat tutorial dari awalnya, mungkin sampai kalian mengerti. dan kita hanya akan menambahkan script yang minim sehingga tidak akan membuat anda kebingugan tentunya. Perlu diketahui script ini sudah saya terapkan pada Modifikasi template droid plus.
Membuat Warna Postingan Berbeda-beda Berdasarkan Label
Jika gambar pada template anda belum ada pembungkusnya, maka anda harus membuat pembugkusnya terlebih dahulu.
Silahkan Cari kode seperti ini <b:if cond='data:post.thumbnailUrl'>
atau lebih spesifiknya yang seperti ini <b:if cond='data:post.firstImageUrl'>.
Maka akan menemukan sederet kode seperti ini:
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.thumbnailUrl'> atau <b:if cond='data:post.firstImageUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' width='72'/>
</b:if>
........
........
........
........
</b:if>
</b:if>
Warna
Kuning adalah kode yang dicari
Perhatikan kode post-thumbnail yang saya beri tanda HIJAU itu adalah class gambar postingan yang ada pada homepagemu, kita perlu membungkusnya terlebih dahulu.
Taruh kode berikut tepat di atas
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' width='72'/>
Kode:
<div class='dp-thumbnail'>
<b:if cond='data:post.labels'>
<div class='post-label'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag nofollow'><data:label.name/></a><b:if cond='data:label.isLast != "true"'/>
</b:loop>
</div>
</b:if>
Dan taruh kode berikut tepat dibawahnya.
</div>
<b:else/>
<div class='dp-thumbnail'>
<b:if cond='data:post.labels'>
<div class='post-label'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag nofollow'><data:label.name/></a><b:if cond='data:label.isLast != "true"'/>
</b:loop>
</div>
</b:if>
<a expr:href='data:post.url'><img expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhORFYjKNBK30YCW1_eCFxFQAZQR-roDQrzKO1UQY6HtXk0yDI5mErRlykWsVWFwXE4WqIdczhnyBYIX4btC0UjTi_WBELNQaWyxhuOL_tsqdcrjf_1lTf5Ew8wSHuIGQyVA8290wUaAoA/s1600/SEO-blog-terbaru.jpg'/></a>
Sehingga semuanya akan menjadi seperti ini.
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.thumbnailUrl'>
<div class='dp-thumbnail'>
<b:if cond='data:post.labels'>
<div class='post-label'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag nofollow'><data:label.name/></a><b:if cond='data:label.isLast != "true"'/>
</b:loop>
</div>
</b:if>
<img class='post-thumbnail left' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' width='72'/>
</div>
<b:else/>
<div class='dp-thumbnail'>
<b:if cond='data:post.labels'>
<div class='post-label'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag nofollow'><data:label.name/></a><b:if cond='data:label.isLast != "true"'/>
</b:loop>
</div>
</b:if>
<a expr:href='data:post.url'><img expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhORFYjKNBK30YCW1_eCFxFQAZQR-roDQrzKO1UQY6HtXk0yDI5mErRlykWsVWFwXE4WqIdczhnyBYIX4btC0UjTi_WBELNQaWyxhuOL_tsqdcrjf_1lTf5Ew8wSHuIGQyVA8290wUaAoA/s1600/SEO-blog-terbaru.jpg'/></a>
</b:if>
........
........sederet kode lain dibawahnya . . .
........
........
</b:if>
</b:if>
Warna merah adalah kode yang ditambahkan. simpan terlebih dahulu, jika ada yang error berarti anda kurang teliti.
Jika sudah melakukan yang diatas berarti anda telah sukses membungkus gambar postinganmu. maka anda tinggal memasukkan CSS saja untuk merapikan tampilannya.
.dp-thumbnail {
top:10px;
display:block;
width:250px;
height:150px;
text-align:center;
margin:-10px 15px -6px 0;
border-radius:5px 0 0 5px;
padding-top:15px;
padding-left:8px;
border:0;
outline:0;
background:#1abc9c;
float:left;
margin-right:13px;
position:relative;
}
.dp-thumbnail:before {
content:"";
position:absolute;
top:44.5%;
right:0;
border:10px solid transparent;
border-color:transparent #fff transparent transparent;
}
.dp-thumbnail img {
width:120px;
height:120px;
float:none;
border-radius:100px;
border:5px solid #c3717b;
-webkit-filter:brightness(1);
transition:all .5s ease 0;
}
.dp-thumbnail img:hover {
border:7px solid #ecf0f1;
-webkit-filter:brightness(0.92);
}
.post-label {
position:absolute;
top:0;
right:0;
z-index:99;
}
.post-label a {
font-family: Verdana,Sans-serif;
text-transform:uppercase;
background-color:#c94e5c;
background-color:rgba(201,78,92,0.6);
color:#fff;
font-size:10px;
display:block;
float:left;
padding:4px 8px;
}
.post-label:first-child a {
border-radius:5px 0 0 0;
}
.post-label a:hover {
background:rgba(201,78,92,1);
}
Sekarang kita hanya membutuhkan script untuk membuatnya berwarna dan Script ini yang saya gunakan pada template droid pluss.
Pasang script ini tepat di atas tag
</body>
<script type="text/javascript">
//<![CDATA[
$('.dp-thumbnail').each(function() {
if ($(this).find('.post-label').length) {
var cl = $(this).find('.post-label a').text();
$(this).addClass(cl);
}
});
//]]>
</script>
Simpan Template sobat dan lihat hasilnya.
KOSTUMISASI???
Cara Penerapan Lengkapnya Baca disini =>
Membuat Thumbnail Post Berwarna Berdasarkan Label
Cocok juga bagi pengguna template droid plus.
Untuk Demonya silahkan kembali ke halaman depan. :)
Mudah mudahan anda mengerti mengenai tutorial Cara Membuat Postingan Berbeda-beda Berdasarkan Label di atas, atau anda malah kebingugan???
Jika anda kebingugan silahkan bertanya atau download saja langsung template yang sudah saya modifikasi.
Link =>
Modifikasi Template Droid Pluss
Dimohon kerjasamanya untuk tidak menyertakan link aktif dalam komentar. Lihat penjelasan mengenai tata cara berkomentar Disini