🔔 Aktifkan notifikasi disini Google News

Cara Mengubah Tampilan Popular Post Median UI

Cara Mengubah 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).

Mau donasi lewat mana?

SeaBank - Saifullah (9016-9529-0071)

BRI - Saifullah (05680-10003-81533)

BCA Blu - Saifullah (007847464643)

JAGO - Saifullah (1060-2675-3868)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan memberikan DONASI. Tekan tombol merah.
Seorang Guru Bahasa Inggris, Kreator Digital, Editor, Publisher, Advertiser, Blogger, Youtuber, Distributor, Desain Grafis, Web Developer, dan Programmer.

9 komentar

Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😪😭😱😇🤲🙏👈👉👆👇👌👍❌✅⭐
  1. yang versi 1.6 nya bang
  2. mas kaya iya script ini ada yang salah pas saya coba nggak bisa
    1. Kakak pakai Median UI versi berapa?
  3. bang di median ui v1.5 pakai tutorial di atas gak ada Bingkai yang membuatnya seperti kartu yang mengapung
    1. Bisa kirim screenshotnya ke sini https://www.saifullah.id/p/forum.html
  4. Gak work untuk versi 1.6
    1. Iya, tutorialnya khusus untuk Median UI 1.5
  5. Bang Kalau yang tampil supaya Thumbnail dan judul Gimana Bang ?
    1. Harus ganti widget khusus bang. Untuk tutorialnya tidak bisa saya bagikan, kalau ingin punya widget popular post mirip dengan blog Saifullah.id, bisa memesan jasa pemasangannya di sini https://m.saifullah.id/product/jasa-pasang-widget-popular-post-blogger/
Centang Beri Tahu Saya untuk mendapatkan notifikasi ketika komentar kamu sudah di jawab.
Parse:

Gambar Quote Pre Kode



  • Home


  • Follow


  • MENU


  • Share


  • Comment
Cookie Consent
Kami menyajikan cookie di situs ini untuk menganalisis lalu lintas, mengingat preferensi Anda, dan mengoptimalkan pengalaman Anda.
Oops!
Sepertinya ada yang salah dengan koneksi internet Anda. Harap sambungkan ke internet dan mulai menjelajah lagi.