Skip to main content

Cara Membuat Featured Post Dua Mode, Thumbnail Besar dan Kecil

Mode Thumbnail Besar

Mode Thumbnail Kecil


Cara Membuat Featured Post Dua Mode, Thumbnail Besar dan Kecil
Widget Featured Post salah satu fungsinya ialah untuk memberikan tampilan postingan berbeda dari postingan lainnya dan hanya tampil di halaman beranda saja, selain itu ini juga dapat disetting untuk menampilkan posting terbaru saja atau posting pilihan dari postingan lama atau disebut juga post unggulan yang akan ditampilkan di widget ini pada urutan paling atas halaman beranda. Pada Template Contempo widget ini memiliki thumbnail besar diantara posting lainnya dan pada Template Notable widget ini memiliki thumbnail yang sangat besar diantara thumbnail post lainnya yang juga besar.

Cara kerja Widget Featured Post Dua Mode ini sederhana, anda hanya perlu ke halaman Tata Letak, pilih Edit (icon pensil), dan jangan conteng gambar, jika gambar tidak di conteng tampilan thumbnailnya akan berubah jadi kecil, jika di conteng maka thumbnailnya akan berubah jadi besar.

Sesederhana itu, Barangkali ada yang suka dengan thumbnail besar dan ada juga yang menyukai yang kecil, ini yang mendorong saya membuat keduanya agar kita punya pilihan dari yang kita sukai dan ini saya beri julukan Widget Featured Post Dua Mode. Bagaimana cara membuatnya tidak usah bingung, cukup salin kode berikut dan pasang pada bagian <b:defaultmarkups> di Template Notable, selesai deh.

Namun sebelumnya anda harus mengubah sedikit yang ini, aslinya disana tertulis begini <b:includable id='heroPost'> maka ubah teks dari id "heroPost" menjadi "jaeyZona", itu saja. Tujuannya agar kode tidak bertabrakan karena kode includable yang akan saya bagikan ini juga bernama "heroPost".

Saya ulangi, Pada Template Notable dibagian <b:defaultmarkups> Cari <b:includable id='heroPost'> dan ubah nama id-nya menjadi "jaeyZona" lalu tempelkan kode berikut diatasnya, diatas yang anda ubah id-nya tadi yaitu yang ini, diatas ini <b:includable id='jaeyZona'>.

Selain kode juga saya sertakan css, css ini berfungsi untuk mengubah warna background, link, text, border, dll pada widget ini, jadi widget ini akan memiliki warna berbeda dari postingan lainnya namun secara default memiliki warna yang sama dengan posting lainnya, jika ingin mengubah warna bisa melalui pallet warna yang sudah disiapkan Blogger yaitu pada halaman Tema pilih "Sesuaikan".

Berikut ini kodenya, pasang css kebagian <b:skin> css dan pasang kode ke bagian <b:defaultmarkups>, namun mungkin banyak hal yang harus disesuaikan lagi terutama pada tampilan css .post-content bawaan/asli di Template Notable.

<!-- css -->
.FeaturedPost .post-outer-container{
box-shadow:0 1px 3px $(heropost.secondary.dropcap.color);
background:$(heropost.main.background.color)
}
.FeaturedPost .post-content{
padding-bottom:10px
}
.FeaturedPost .post-title-container, .FeaturedPost .post-title-container a{
color:$(heropost.main.title.color)
}
.FeaturedPost .post-header-container .byline.post-author, .FeaturedPost .post-header-container .byline.post-author a{
color:$(heropost.secondary.background.color)
}
.FeaturedPost .post-header-container .byline.post-timestamp, .FeaturedPost .post-header-container .byline.post-timestamp a{
color:$(heropost.secondary.text.color)
}
.FeaturedPost .post-body, .FeaturedPost .post-body a{
color:$(heropost.main.text.color)
}
.FeaturedPost .byline.post-comment-link, .FeaturedPost .byline.jump-link{
color:$(heropost.main.link.color);
background:$(heropost.main.button.color)
}
.FeaturedPost .snippet-thumbnail img, .FeaturedPost .snippet-thumbnails img{
border:1px solid $(heropost.secondary.button.color)
}
.FeaturedPost .post-content .comments-no-link{
color:$(heropost.main.background.color);
}
@media screen and (max-width:1168px){
body.feed-view .block-posts{
margin-left:calc((100% - 920px)/ 2);
margin-right:calc((100% - 920px)/ 2)
}
}
@media screen and (max-width:968px){
body.feed-view .block-posts{
margin-left:24px;
margin-right:24px
}
}
.post-content .snippet-thumbnails{
float:$(startSide);
border:1px solid $(item.separator.color);
background:$(feed.button.background.color);
margin:8px 1em 0 0;
max-height:128px;
max-width:128px
}
.snippet-thumbnails, .snippet-thumbnails img{
border-radius:8px
}

<!-- kode -->
        <b:includable id='heroPost'>
<div class='block-posts container'>
<b:with expr:value='(data:postDisplay.showFeaturedImage ?: true) and data:post.featuredImage' var='hasImage'>
<div class='post-outer-container'>
<div class='post-outer'>
<b:if cond='data:hasImage'>
<b:if cond='(data:postDisplay.showFeaturedImage ?: true) and data:post.featuredImage'>
              <a class='snippet-thumbnail' expr:href='data:post.url'>
                <b:if cond='data:post.featuredImage.isResizable'>
                  <span class='snippet-thumbnail-img' expr:id='&quot;snippet_thumbnail_id_&quot; + data:post.id'/>
                  <style>
                    @media (min-width: 1168px) {
                      <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 256, &quot;1:1&quot;).cssEscaped'/>);
                      }
                    }
                    @media (min-width: 969px) and (max-width: 1167px) {
                      <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 1167, &quot;3:2&quot;).cssEscaped'/>);
                      }
                    }
                    @media (min-width: 601px) and (max-width: 968px) {
                      <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 968, &quot;3:2&quot;).cssEscaped'/>);
                      }
                    }
                    @media (max-width: 600px) {
                      <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 600, &quot;3:2&quot;).cssEscaped'/>);
                      }
                    }
                  </style>
                <b:else/>
                  <img expr:src='data:post.featuredImage'/>
                </b:if>
              </a>
              </b:if>
<div class='post-contents container'>
                  <b:if cond='(data:postDisplay.showTitle ?: true) and data:post.title != &quot;&quot;'>
            <div class='post-title-container'>
                    <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
            </div>
                  </b:if>
<div class='post-header-container container'>
              <b:include name='headerByline'/>
</div>
<b:include cond='(data:postDisplay.showSnippet ?: true)' data='post' name='postBodySnippet'/>
<b:include data='post' name='postFooter'/>
</div><!-- end post-contents -->
</b:if><!-- hasimage -->
<b:if cond='!data:hasImage'>
<div class='post-content container'>
<div class='post-title-container'>
<b:include data='post' name='postTitle'/>
</div>
<div class='post-header-container container'>
<b:include name='headerByline'/>
</div>
<b:include data='post' name='snippetThumbnails'/>
<b:include data='post' name='postBodySnippet'/>
<b:include data='post' name='postFooter'/>
</div><!-- end post-content -->
</b:if><!-- nohasimage -->
</div>
</div>
</b:with>
</div>
        </b:includable>
                    <b:includable id='snippetThumbnails' var='post'>
              <div class='snippet-thumbnails shaker'>
                <b:include data='{
image: data:post.featuredImage,                                     imageSizes: [64, 128, 256],                                     imageRatio: &quot;1:1&quot;,                                     sourceSizes: &quot;128px&quot;
}' name='responsiveImage'/>
              </div>
</b:includable>

Atau download https://drive.google.com/file/d/14M8iF1Ypkg69ScArG5i-hSrfCqQmj2Ej/view?usp=drivesdk

Comments