Membuat menu sorotan ala igniel

Santai - pada kesempatan kali ini saya akan memberikan sebuah cara membuat menu sorotan seperti igniel, Menu sorotan ini merupakan hasil inspact element dari website jagoredesign yang sangat menginspirasi saya untuk belajar mengedit template blog, Dan saya meminta izin untuk mba igniel dan jagoredesign untuk menshare cara membuat menu sorotan.

Cara Membuat menu sorotan ala igniel

Anda bisa lihat Template yang saya gunakan ini merupakan template viomagz yang menggunakan menu sorotan di bagian atas postingan, Jadi jika di gunakan pada template viomagz sangat cocok.

• Masuk Ke blog kalian, lalu masuk ke edit HTML 
• Copy code di bawah ini lalu tempelkan di atas ]]></b:skin>

/* Sorotan Ala Igniel - Jagoredesign.com */ 
.jagosorotan{overflow:hidden;position:relative;border-radius:25px;transition:background-color .3s ease}.jagosorotan:before{content:'';background-color:#009788;position:absolute;top:0;left:45px;width:calc(100% - 45px);height:100%}.jagosorotan,.jagosorotan .left{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;color:#fff}.isPost .jagosorotan a,.jagosorotan a:hover{color:#fff}.isPost .jagosorotan a:hover{text-decoration:underline}.jagosorotan svg{width:17px;height:17px;position:absolute;margin:auto;top:0;bottom:0;left:0;right:0}.jagosorotan svg path{fill:#009788}.jagosorotan .left,.jagosorotan .right{padding:7px;z-index:1;transition:background-color .3s ease}.jagosorotan .left{transition:all .5s ease;background-color:#fff;border-radius:25px}.jagosorotan .icon{background-color:#009788;position:relative;width:30px;height:30px;border-radius:100px;margin-right:6px}jagosorotan .text{margin:0 7px}.jagosorotan .right{background-color:#009788;flex-grow:1;padding-left:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-radius:0 25px 25px 0}.jagosorotan 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#jagosorotan .right a{color:#fff}div#jagosorotan .right a:hover{text-decoration:underline}@media screen and (max-width:480px){.jagosorotan .left,.jagosorotan .right{padding:3px}.jagosorotan .icon{background-color:transparent;width:27px;height:27px;margin-right:0}.jagosorotan span.text{display:none}.jagosorotan:before{width:calc(100% - 17px);left:17px}}
  

• Jika sudah, Selanjutnya cari kode <div class='post-container'> 
• Kemudian tempelkan kode berikut di bawah  kode tadi . Dan simpan

<div class='section' id='mainbar'>
<div class='widget jagosorotan' id='jagosorotan'>
<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='YOUR URL'>Judul Artikel</a>
  </div>
</div>
</div></div>

Catatan : Masukan link url yang anda ingin gunakan serta berikan judul pada judul artikel yang ingin anda buat.

Sekian pembahasan kita membuat menu sorotan igniel

Share this post