Cara Membuat Widget Sorotan ala Igniel di Blogger

Fernn.id - Pada kesempatan kali ini admin akan berbagi sedikit seputar blogging untuk mempercantik tampilan di blog, apakah itu? sesuai judul Cara Membuat Widget Sorotan ala Igniel di Blogger yang mungkin sudah lama sobat cari tutorialnya tapi belum juga menemukannya.

Widget ini kegunaannya hampir mirip dengan Featured Post hanya saja memiliki perbedaan letak, yang dimana Featured Post hanya dapat menampilkan artikel khusus di halaman beranda sedangan widget Sorotan mampu menampilkan artikel khusus pada setiap halaman blog.

Kami sendiri berhasil membuat widget ini karena sedikit bantuan inspect element yang kami lakukan langsung di blog Igniel. Penasaran bagaimana tutorialnya? langsung saja simak artikel ini sampai akhir ya sob.

Sebelum melanjutkan ke tutorial, nih ada demonya agar kalian mengetahui bagaimana hasilnya.
Live Preview


Tutorialnya

  1. Silahkan login ke halaman dashboard blogger.
  2. Pilih dan klik menu Template > Edit HTML
  3. Salin kode css berikut ini, dan letakkan tepat sebelum kode ]]></b:skin>
    /* Sorotan Ala Igniel - Fernn.id */ 
    .Fernnsorotan{overflow:hidden;position:relative;border-radius:25px;transition:background-color .3s ease}.Fernnsorotan:before{content:'';background-color:#008080;position:absolute;top:0;left:45px;width:calc(100% - 45px);height:100%}.Fernnsorotan,.Fernnsorotan .left{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;color:#fff}.isPost .Fernnsorotan a,.Fernnsorotan a:hover{color:#fff}.isPost .Fernnsorotan a:hover{text-decoration:underline}.Fernnsorotan svg{width:17px;height:17px;position:absolute;margin:auto;top:0;bottom:0;left:0;right:0}.Fernnsorotan svg path{fill:#fff}.Fernnsorotan .left,.Fernnsorotan .right{padding:7px;z-index:1;transition:background-color .3s ease}.Fernnsorotan .left{transition:all .5s ease;background-color:#1d2129;border-radius:25px}.Fernnsorotan .icon{background-color:#008080;position:relative;width:30px;height:30px;border-radius:100px;margin-right:6px}Fernnsorotan .text{margin:0 7px}.Fernnsorotan .right{background-color:#008080;flex-grow:1;padding-left:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-radius:0 25px 25px 0}.Fernnsorotan article{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:flex-start;justify-content:space-between}div#sorotan{display:flex;margin-bottom:20px}div#Fernnsorotan .right a{color:#fff}div#Fernnsorotan .right a:hover{text-decoration:underline}@media screen and (max-width:480px){.Fernnsorotan .left,.Fernnsorotan .right{padding:3px}.Fernnsorotan .icon{background-color:transparent;width:27px;height:27px;margin-right:0}.Fernnsorotan span.text{display:none}.Fernnsorotan:before{width:calc(100% - 17px);left:17px}}
  4. Kemudian salin juga kode html berikut ini, dan letakkan setelah kode
    <div class='post-container'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='inner'>
    <div class='section' id='mainbar'>
    <div class='widget Fernnsorotan' id='Fernnsorotan'>
    <div class='left'>
    <span class='icon'>
    <svg viewBox='0 0 24 24'><path d='M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z'/></svg>
    </span>
    <span class='text'>Sorotan</span>
    </div>
    <div class='right'>
    <a href='URL Artikel'>Judul Artikel</a>
    </div>
    </div>
    </div></div>
    </b:if>
    Keterangan:
    Ubah tulisan yang sudah ditandai sesuai dengan perintah.
  5. Terakhir, klik tombol Save Template.

Nah, sampai disini kalian sudah berhasil untuk membuat widget tersebut, namun jika masih ada kesulitan atau kurang paham silahkan bisa ditanyakan melalui kolom komentar sob. Sebisa mungkin akan kami tanggapi jika tidak ada kesibukan diluar blogging.

Mungkin sekian dulu artikel dari Cara Membuat Widget Sorotan ala Igniel di Blogger, semoga bermanfaat.
Terimakasih