×

Author / Admin / Editor

     Jagoan Redesign    

Blog yang membahas Tutorial Blogger, Games, Template, Tips Adsense, SEO, Web Design dan Teknologi

Iklan Bawah Posting

Cara Membuat Sorotan Keren Seperti Blog Igniel di Blogger

Jagoanredesign - Kali ini saya akan membagikan sebuah tutorial Cara Membuat Sorotan Keren Seperti Blog Igniel di Blogger, Sorotan ini berguna untuk menampilkan artikel yang sedang diunggulkan di blog  anda. 

Cara Membuat Sorotan Keren Seperti Blog Igniel di Blogger

Menu sorotan ini saya terinspirasi dari blog Igniel, anda pasti juga pernah melihat menu sorotan di blog Igniel?. menu sorotan ini juga bisa anda gunakan untuk menampilkan breaking news /  pemberitahuan penting di blog anda. Sorotan ini saya buat menggunakan CSS dan tidak akan membuat kecepatan blog atau website anda menjadi lambat.

Cara Membuat Sorotan Keren Seperti Blog Igniel di Blogger

1. Silahkan Login ke Blogger.
2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.
3. Kemudian cari kode berikut ini ]]></b:skin>  atau </style>dan pastekan kode css dibawah ini tepat DIATAS kode tersebut.

 /* Sorotan Mirip Igniel By Jagoan Redesign */
.jagoanredesignsorotan{overflow:hidden;position:relative;border-radius:25px;transition:background-color .3s ease}.jagoanredesignsorotan:before{content:'';background-color:#fd0000;position:absolute;top:0;left:45px;width:calc(100% - 45px);height:100%}.jagoanredesignsorotan,.jagoanredesignsorotan .left{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;color:#fff}.isPost .jagoanredesignsorotan a,.jagoanredesignsorotan a:hover{color:#fff}.isPost .jagoanredesignsorotan a:hover{text-decoration:underline}.jagoanredesignsorotan svg{width:17px;height:17px;position:absolute;margin:auto;top:0;bottom:0;left:0;right:0}.jagoanredesignsorotan svg path{fill:#fff}.jagoanredesignsorotan .left,.jagoanredesignsorotan .right{padding:7px;z-index:1;transition:background-color .3s ease}.jagoanredesignsorotan .left{transition:all .5s ease;background-color:#1d2129;border-radius:25px}.jagoanredesignsorotan .icon{background-color:#fd0000;position:relative;width:30px;height:30px;border-radius:100px;margin-right:6px}jagoanredesignsorotan .text{margin:0 7px}.jagoanredesignsorotan .right{background-color:#fd0000;flex-grow:1;padding-left:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-radius:0 25px 25px 0}.jagoanredesignsorotan 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){.jagoanredesignsorotan .left,.jagoanredesignsorotan .right{padding:3px}.jagoanredesignsorotan .icon{background-color:transparent;width:27px;height:27px;margin-right:0}.jagoanredesignsorotan span.text{display:none}.jagoanredesignsorotan:before{width:calc(100% - 17px);left:17px}div#sorotan{margin-bottom:10px}}
4. Silahkan anda cari kode
<b:includable id='breadcrumb' var='posts'> selanjutnya Copy kode di bawah ini dan letakkan tepat DIBAWAH kode tersebut.
<div class='inner'>
<div class='section' id='mainbar'>
<div class='widget jagoanredesignsorotan' 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='https://www.jagoanredesign.eu.org/2020/10/cara-membuat-sorotan-keren-seperti-blog-igniel-di-blogger.html'>Cara Membuat Sorotan Keren Seperti Blog Igniel di Blogger</a>
</div>
</div>
</div></div>
Silahkan ganti https://www.jagoanredesign.eu.org/2020/10/cara-membuat-sorotan-keren-seperti-blog-igniel-di-blogger.html dengan url artikel yang ingin ditampilkan dan ganti juga Cara Membuat Sorotan Keren Seperti Blog Igniel di Blogger dengan Nama artikel yang ingin anda tampilkan
5. silahkan anda SIMPAN TEMA dan Selesai.

Nah, itu adalah tutorial Cara Membuat Sorotan Keren Seperti Blog Igniel di Blogger semoga totorial bermanfaat bagi anda semua. jika ada yang ingin  anda tanyakan silakan berkomentar saja di bawah.
Previous
Next Post »
avatar
Penulis Blog dan redesigner template blogger.

Related Posts

Komentar
Tutup Komentar

0

Post a Comment

  • Berkomentarlah secara bijaksana dan bertanggung jawab.
  • Tidak diperbolehkan mempromosikan barang atau berjualan.
  • Tulis komentar Anda untuk hal yang masih berhubungan dengan posting pada halaman ini.
  • Dilarang memuat Link Aktif pada kolom komentar
  • Komentar dengan link aktif akan otomatis dihapus.
  • Jika ingin menulis kode silahkan anda parse terlebih dulu (terutama Javascript dan HTML)
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel