Cara membuat menu sorotan di blogger dari a sampai z

Selamat datang di blog iptahudin.com. Pada kesempatan kali ini saya akan membahas tutorial Begini cara membuat menu sorotan di blogger dari a sampai z, siapa sih yang tidak kenal dengan mbak Igniel. Beliau adalah wanita asal sukabumi yang karyanya sangat dikagumi oleh para blogger

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

Cara Membuat Contact Form (Contact Us) Keren Di Blogger

Cara Mengatasi Blog Diserang AGC, Artikel di Copas Blog Lain

Cara Menghilangkan Tulisan Diberdayakan oleh Blogger

Cara Mengelompokkan Konten di Blogger Update


<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).