Cara Mengubah Tampilan Popular Post Median UI

Saifulah.id - Sekarang ini banyak sekali pengguna template Median UI di internet. Saking banyaknya sampai bosan melihat tampilannya yang sama semua. Sampai-sampai blog mereka tidak memiliki ciri khas yang bisa ditonjolkan dibanding blog yang lain.

Memiliki ciri khas itu penting untuk menarik hati pengunjung, selain itu dapat mempermudah mereka mengingat blog kita dan menarik minat mereka untuk kembali lagi di lain hari.

Oleh sebab itu, berikut ini akan saya bagikan tutorial cara mengubah bentuk widget Popular Post pada Median UI agar tampilan blog kita beda sendiri.

Cara Mengubah Tampilan Popular Post Median UI

1. Buka Blogger

2. Klik Tema

3. Pilih Edit HTML

4. Lalu cari kode /* Widget PopularPosts */

5. Ganti kode yang ada di dalamnya dengan kode CSS di bawah ini

/* Widget PopularPosts */

.itemPopulars{counter-reset:popular-count} .itemPopulars .itemThumbnail > *{padding-top:45%} .itemPopulars .itemTitle{font-size:.9rem} .itemPopular:not(:last-child){margin-bottom:9px;padding-bottom:10px;border-bottom:2px dotted #ddd;} .itemPopular .itemInner{display:flex} .itemPopular .itemInner:before{flex-shrink:0; content:'#' counter(popular-count);counter-increment:popular-count; width:32px;font-weight:700;font-size:22px;font-family:var(--font-head); opacity:.3} .itemPopular .itemFlex{width:calc(100% - 32px)} .itemPopular .postHeader, .itemPopular .postLabel.sponsored{margin-left:32px;margin-bottom:5px;display:none} .itemPopular .itemInfo, .itemPopular .itemEntry{margin-top:10px;display:none}

6. Cari kode PopularPosts00

7. Hapus dari <b:widget ... sampai ... </b:widget>

8. Ganti dengan kode HTML di bawah ini

<b:widget id='PopularPosts00' locked='false' title='Banyak Dibaca' type='PopularPosts' version='2' visible='true'>

                    <b:widget-settings>

                      <b:widget-setting name='numItemsToShow'>7</b:widget-setting>

                      <b:widget-setting name='showThumbnails'>false</b:widget-setting>

                      <b:widget-setting name='showSnippets'>false</b:widget-setting>

                      <b:widget-setting name='timeRange'>LAST_WEEK</b:widget-setting>

                    </b:widget-settings>

                    <b:includable id='main' var='this'>

                      <b:if cond='data:title != &quot;&quot;'>

                        <h3 class='title'><data:title/></h3>

                      </b:if>

                      <div class='widget-content'>

                        <b:include name='snippetedPosts'/>

                      </div>

                    </b:includable>

                    <b:includable id='blogThisShare'/>

                    <b:includable id='bylineByName' var='byline'/>

                    <b:includable id='bylineRegion' var='regionItems'/>

                    <b:includable id='commentsLink'/>

                    <b:includable id='commentsLinkIframe'/>

                    <b:includable id='emailPostIcon'/>

                    <b:includable id='facebookShare'/>

                    <b:includable id='footerBylines'/>

                    <b:includable id='googlePlusShare'/>

                    <b:includable id='headerByline'/>

                    <b:includable id='linkShare'/>

                    <b:includable id='otherSharingButton'/>

                    <b:includable id='platformShare'/>

                    <b:includable id='postAuthor'/>

                    <b:includable id='postCommentsLink'/>

                    <b:includable id='postInfo'>

                      <div class='itemInfo postInfo'>

                        <b:if cond='data:post.labels any (label =&gt; label.name in [&quot;Sponsored&quot; , &quot;Advertorial&quot;])'>

                          <!--[ Post jumplinks ]-->

                          <b:include cond='data:widgets.Blog.first.allBylineItems.timestamp' name='postJumpLinks'/>

                          <b:else/>

                          <!--[ Post timestamp ]-->

                          <b:include cond='data:widgets.Blog.first.allBylineItems.timestamp' name='postTimestamps'/>

                        </b:if>

                      

                        <!--[ Post comment count ]-->                      

                        <b:if cond='data:widgets.Blog.first.allBylineItems.comments'>

                          <b:include name='postCommentsLinks'/>

                        </b:if>

                      </div>

                    </b:includable>

                    <b:includable id='postJumpLink' var='post'/>

                    <b:includable id='postLabels'/>

                    <b:includable id='postLocation'/>

                    <b:includable id='postReactions'/>

                    <b:includable id='postShareButtons'/>

                    <b:includable id='postTimestamp'/>

                    <b:includable id='sharingButton'/>

                    <b:includable id='sharingButtonContent'/>

                    <b:includable id='sharingButtons'/>

                    <b:includable id='sharingButtonsMenu'/>

                    <b:includable id='sharingPlatformIcon'/>

                    <b:includable id='snippetedPostByline'/>

                    <b:includable id='snippetedPostContent'>

                      <!--[ Post thumbnail ]-->

                      <b:include cond='data:i == 0 and data:this.postDisplay.showFeaturedImage' name='snippetedPostThumbnail'/>

                      

                      <div class='itemContent'>

                        <!--[ Post header ]-->

                        <b:if cond='data:post.labels any (label =&gt; label.name in [&quot;Sponsored&quot; , &quot;Advertorial&quot;])'>

                          <b:include name='postSponsored'/>

                          <b:elseif cond='data:post.labels any (label =&gt; label.name in [&quot;Product&quot; , &quot;Label_1&quot;])'/>

                          <b:include name='postProduct'/>

                          <b:else/>

                          <b:include name='postHeaders'/>

                        </b:if>

                        

                        <div class='itemInner'>

                          <div class='itemFlex'>                      

                            <b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>

                            <b:include cond='data:i == 0 or data:post.labels any (label =&gt; label.name in [&quot;Product&quot; , &quot;Label_1&quot;])' name='snippetedPostEntry'/>

                      

                            <b:if cond='data:post.labels none (label =&gt; label.name in [&quot;Product&quot; , &quot;Label_1&quot;])'>

                              <!--[ Post info ]-->

                              <b:include cond='!data:view.isPage' name='postInfo'/>

                            </b:if>

                          </div>

                        </div>

                      </div>

                    </b:includable>

                    <b:includable id='snippetedPostEntry'>

                      <b:if cond='data:this.postDisplay.showSnippet'>

                        <p class='itemEntry'>

                          <b:class cond='data:post.labels any (label =&gt; label.name in [&quot;Product&quot; , &quot;Label_1&quot;])' name='productPrice'/>

                          <b:include name='postEntrySnippet'/>

                        </p>

                        <b:elseif cond='data:post.labels any (label =&gt; label.name in [&quot;Product&quot; , &quot;Label_1&quot;])'/>

                        <p class='itemEntry productPrice'><b:include name='postEntrySnippet'/></p>

                      </b:if>

                    </b:includable>

                    <b:includable id='snippetedPostThumbnail'>

                      <div class='itemThumbnail postThumbnail'>

                        <b:tag expr:name='data:post.featuredImage ? &quot;a&quot; : &quot;div&quot;'>

                          <b:attr cond='data:post.featuredImage' expr:value='data:post.url' name='href'/>

                          <b:if cond='data:post.featuredImage'>

                            <img class='imgThumb lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.featuredImage, 600, &quot;16:9&quot;)' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

                            <b:else/>

                            <span class='imgThumb' data-text='No image'/>

                          </b:if>

                        </b:tag>

                      </div>

                    </b:includable>

                    <b:includable id='snippetedPostTitle'>

                      <h3 class='itemTitle'><a expr:href='data:post.url.canonical'><data:post.title.escaped/></a></h3>

                    </b:includable>

                    <b:includable id='snippetedPosts'>

                      <div class='itemPopulars' role='feed'>

                        <!-- Don't render the post that we're currently already looking at. -->

                        <b:loop index='i' values='data:posts filter (p =&gt; p.id != data:view.postId)' var='post'>

                          <article class='itemPopular'>

                            <b:class cond='data:this.postDisplay.showFeaturedImage and !data:post.featuredImage' name='noThumbnail'/>

                            <b:class cond='!data:this.postDisplay.showFeaturedImage' name='noImage'/>

                            <b:class cond='data:post.labels any (label =&gt; label.name in [&quot;Product&quot; , &quot;Label_1&quot;])' name='product'/>

                            <b:class cond='data:i == 0 and data:this.postDisplay.showFeaturedImage and data:post.featuredImage' name='mostPopular'/>

                            <b:include name='snippetedPostContent'/>

                          </article>

                        </b:loop>

                      </div>

                    </b:includable>

                  </b:widget>

9. Simpan Tema

Apa yang baru dari widget Median UI ini?

1. Tidak terdapat Tanggal
2. Tidak terdapat Label
3. Tidak terdapat Snippet
4. Tidak terdapat Thumbnail
5. Angka nol (0) diubah menjadi tanda pagar (#)
6. Terdapat Garis Pembatas antar judul
7. Memiliki Bingkai yang membuatnya seperti kartu yang mengapung
8. Lebih cepat, simpel, bersih, dan rapi

Widget Popular Post ini saya buat khusus untuk Median UI versi 1.5. Saya tidak tahu apakah widget ini bisa digunakan pada Median UI 1.6 (versi terbaru).