Cara Membuat Menu Sorotan Seperti Blog Igniel

Tutorial kali ini adalah bagaimana Cara Membuat Menu Sorotan Seperti Blog Igniel.
Pembahasan pada artikel ini yaitu membahas tentang menu sorotan yang keren dan responsive seperti blog Mba Igniel. Kalangan pengguna blogger atau penyuka template blogger pasti sudah kenal blogger wanita asal sukabumi yang tidak lain dan bukan adalah Igniel. ya, memang dari karyanya sudah banyak membuat pengguna blogger mengagumi karya beliau salah satunya template Igniplex.

Menu sorotan ini sangat cocok untuk kamu yang menginginkan postingan favoritnya bisa dibaca oleh semua orang atau biasanya sebagai breaking news bila ada pemberitahuan penting. Sorotan ini dibuat 100% Pure CSS yang tidak akan membuat kecepatan website kamu menjadi berkurang.

Untuk mempersingkat pembahasanya langsung saja kita ke tutorialnya. disini saya menyarankan bahwa tidak semua template blog bisa support atau digunakan jadi bila kodenya ada yang sama tinggal di sesuaikan aja ya.

Cara Membuat Menu Sorotan Keren Ala Blog Igniel

• Salin kode CSS di bawah ini dan tempatkan tepat di atas kode ]]></b:skin>

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

• Selanjutnya cari kode <b:includable id='breadcrumb' var='posts'> Kemudian salin kode di bawah ini dan tempel atau paste tepat di bawah kode tersebut

<div class='inner'>
<div class='section' id='mainbar'>
<div class='widget sorotan1' id='sorotan'>
<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='Link-Anda'>Membuat Sorotan Ala Igniel - Faizall TM</a>
</div>
</div>
</div></div>

• Klik Simpan Tema dan selesai

Ganti tulisan 'Link-Anda' dengan url sobat yang ingin ditampilkan
Ganti tulisan 'Membuat Sorotan Ala Igniel - Faizall TM' dengan Nama yang ingin ditampilkan

Demikian Artikel singkat tentang Cara Membuat Menu Sorotan Seperti Blog Igniel Semoga Bermanfaat.

✖

Bagikan:

• Bagikan melalui Facebook Bagikan melalui Twitter Bagikan melalui Pinterest Bagikan melalui Whatsapp Bagikan melalui Linkedin Bagikan melalui Telegram

Subscribe Our Newsletter