Menu Sorotan Ala Igniel Keren 100% Responsive
Kok bisa mirip? iya bisa-lah orang saya inspact😁, jadi sebelum ketutorialnya saya mau meminta maaf kepada Mbak Igniel ya. Gak usah basa-basi langsung aja. Untuk demonya kelian bisa langsung melihat template yang saya gunakan.
Cara Membuat Menu Sorotan Ala Igniel
Cara ini sudah pernah saya coba di template Viomagz dan berhasil, jika kelian menggunakan template lain kelian haru sesuai kan dulu code-code yang akan dicari nanti.
- Pertama kali masuk ke blog, lalu masuk ke edit HTML
- Copy code dibawah ini dan tempel diatas ]]></b:skin>.
/* Sorotan Ala Igniel - Jagoredesign.my.id */
.jagosorotan{overflow:hidden;position:relative;border-radius:25px;transition:background-color .3s ease}.jagosorotan:before{content:'';background-color:#008080;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:#fff}.jagosorotan .left,.jagosorotan .right{padding:7px;z-index:1;transition:background-color .3s ease}.jagosorotan .left{transition:all .5s ease;background-color:#1d2129;border-radius:25px}.jagosorotan .icon{background-color:#008080;position:relative;width:30px;height:30px;border-radius:100px;margin-right:6px}jagosorotan .text{margin:0 7px}.jagosorotan .right{background-color:#008080;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}}Jangan lupa ganti code warna yang sudah saya tandai menggunakan Color Picker
- Selanjutnya kita cari code <div class='post-container'>.
- Kemudian copy code dibawah ini lalu tempel dibawah code yang tadi dicari.
<b:if cond='data:blog.pageType == "item"'>
<div class='inner'>
<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='URL Artikel'>Judul Artikel</a>
</div>
</div>
</div></div>
</b:if>- Jangan lupa ganti 'URL Artikel' dan 'Judul Artikel'
- Selanjutnya simpan dan lihat hasilnya.
Sekian tutoril singkat dari saya jika ada yang kurang dimengerti bisa disampaikan dikolom komentar/ atau bisa hubungi kami melalui halaman Contact.
1 comment