Anda pasti sudah sering mengunjungi blog Igniel.com bukan, jika iya pasti anda sangat suka dengan template pribadi beliau. Walaupun beliau tidak menjual template tersebut. Tetapi banyak yang menginspect element dari template beliau karena ingin digunakan ke template mereka
Terutama di bagian menu Sorotan, nahh. Kali ini saya akan membagikan tutorialnya kepada anda, dan tentu saja tidak memberatkan loading blog anda. Tutorial ini juga sudah saya praktekan di blog saya dan hasilnya work!, daripada lama-lama yuk langsung saja simak tutorialnya
Begini cara membuat menu sorotan di blogger
1. Login ke akun Blogger anda
2. Masuk ke menu Tema Edit HTML
3. Lalu salin kode CSS yang saya berikan di bawah ini tepat diatas kode ]]></b:skin>
/* Sorotan - GudangCaraQue */
.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}}
4. Kemudian cari kode <b:includable id='breadcrumb' var='posts'> lalu salin kode dibawah ini dan letakkan di bawah kode tersebut
<div class='inner'>
<div class='section' id='mainbar'>
<div class='widget sorotan1' id='gudangcaraquesorotan'>
<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-Artikel'>Begini cara membuat menu sorotan di blogger dari a sampai z</a>
</div>
</div>
5. Jika sudah Save / Simpan Tema
Ganti tulisan ‘Link-Artikel’ dengan URL yang akan anda gunakan
Ganti tulisan ‘Begini cara membuat menu sorotan di blogger dari a sampai z’ menjadi Judul artikel anda
Bagaimana cukup mudah bukan?. Semoga dengan adanya artikel ini bisa membantu anda ya, jika ada pertanyaan silahkan komen di kolom komentar, akan saya balas kok (jika sempat hehe, tapi diusahakan).
Terimakasih
Demikian artikel saya tentang Begini cara membuat menu sorotan di blogger dari a sampai z. Semoga bermanfaat
MAU BELAJAR DIGITAL MARKETING
Pengalaman Kami memiliki pengalaman bertahun-tahun, dan menghasilkan ratusan video..
Kualitas tinggi Beberapa desain video kami telah menghasilkan puluhan rupiah.
Cepat Anda tidak perlu menunggu lama, Karena sudah ada jadwal pelatihan.
Fasilitas Template Tidak hanya mendesain video, kami juga Memberikan template Anda.
