Cara Membuat Menu Sorotan Ala Igniel dengan Breaking News di Blogger

• Pertama kali buka blogger.com dibrowser anda, selanjutnya pilih menu Tema, kemudian pilih Edit HTML
• Copy kode CSS dibawah ini dan letakkan sebelum tag ]]></b:skin>.
  

  /* SOROTAN ALA IGNIEL DENGAN BREAKING NEWS BY JAGOREDESIGN.MY.ID */
  .jagosorotan{overflow:hidden;position:relative;border-radius:25px;transition:background-color .3s ease;}
  .jagosorotan{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;color:#fff}
  .jagosorotan:before{content:'';background-color:#3a7bd5;position:absolute;top:0;left:45px;width:calc(100% - 45px);height:100%;}
  /* KIRI */
  .jagosorotan .left{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;color:#fff}
  .jagosorotan .left{transition:all .5s ease;background-color:#1d2129;border-radius:25px}
  .jagosorotan .left{padding:7px;z-index:1;transition:background-color .3s ease}
  .jagosorotan .left .icon{background-color:#3a7bd5;position:relative;width:30px;height:30px;border-radius:100px;}
  .jagosorotan .left .text{margin-left:5px;margin-right:5px}
  .jagosorotan .left .icon svg{width:17px;height:17px;position:absolute;margin:auto;top:0;bottom:0;left:0;right:0}
  .jagosorotan .left .icon svg path{fill:#fff} 
  /* KANAN */
  .jagosorotan .right{padding:7px;z-index:1;transition:background-color .3s ease}
  .jagosorotan .right{width:100%;max-width:990px;line-height:30px;height:30px;overflow:hidden;font-size:13px;}
  .jagosorotan .right{background-color:#3a7bd5;flex-grow:1;padding-left:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-radius:0 25px 25px 0;}
  div#sorotan{display:flex;margin-bottom:20px}
  /* BREAKING */
  #jagobreaking{color:black}
  div#jagosorotan .right #jagobreaking a{color:white;font-weight:600;font-size:13px;}
  div#jagosorotan .right #jagobreaking li a:hover{color:black;text-decoration:underline}
  div#jagosorotan .right #jagobreaking ul,div#jagosorotan .right #jagobreaking li{list-style:none;margin:0;padding:0}
  /* Responsive */
  @media screen and (max-width:480px){
  #sorotan{margin-top:20px;}
  .jagosorotan .left .icon svg{width:20px;height:20px}
  .jagosorotan .left,.jagosorotan .right{padding:3px}
  .jagosorotan .left .icon{background-color:transparent;width:32px;height:30px;}
  .jagosorotan span.text{display:none}
  .jagosorotan:before{width:calc(100% - 17px);left:17px}}

• Pertama pastikan terlebih dahulu apakah template yang anda gunakan sudah memiliki jQuery Library, jika belum kelian salin kode dibawah ini dan letakkan diatas/sebelum tag </head>.
  

  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

• Selanjutnya cari tag </body>, kemudian letakkan script dibawah ini diatas/sebelum tag tersebut.
  

  <script>
  //<![CDATA[
  // Breaking News by jagoredesign
  var _0x3fb5=['title','jsonp','href','length','ready','https://www.jagoredesign.my.id/','#jagobreaking\x20li:first','#jagobreaking','ajax','feed','</a></li>','alternate','slideDown','#jagobreaking\x20ul','link','\x22\x20target=\x22_blank\x22>','html','rel','<strong>Error\x20Loading\x20Feed!</strong>','<ul>','appendTo','<li><a\x20href=\x22'];(function(_0x5524ca,_0x3fb589){var _0x2d1628=function(_0x6ee5b9){while(--_0x6ee5b9){_0x5524ca.push(_0x5524ca.shift())}};_0x2d1628(++_0x3fb589)}(_0x3fb5,0x8a));var _0x2d16=function(_0x5524ca,_0x3fb589){_0x5524ca=_0x5524ca-0x0;var _0x2d1628=_0x3fb5[_0x5524ca];return _0x2d1628};var _0x51e921=_0x2d16;$(document)[_0x51e921('0x14')](function(){var _0x210f71=_0x51e921,_0x6ee5b9=_0x210f71('0x15'),_0x210281=0xa;$[_0x210f71('0x2')]({'url':''+_0x6ee5b9+'/feeds/posts/default?alt=json-in-script&amp;max-results='+_0x210281,'type':'get','dataType':_0x210f71('0x11'),'success':function(_0x11ccca){var _0x37eaf7=_0x210f71;function _0x569bf3(){var _0x2c666d=_0x2d16;$(_0x2c666d('0x0'))['slideUp'](function(){var _0x5963bd=_0x2c666d;$(this)[_0x5963bd('0xe')]($(_0x5963bd('0x7')))[_0x5963bd('0x6')]()})}var _0x1ae7f,_0x2339bf,_0x455e88='',_0x5d8bd4=_0x11ccca[_0x37eaf7('0x3')].entry;if(void 0x0!==_0x5d8bd4){_0x455e88=_0x37eaf7('0xd');for(var _0x1e9f01=0x0;_0x1e9f01<_0x5d8bd4[_0x37eaf7('0x13')];_0x1e9f01++){for(var _0xae729b=0x0;_0xae729b<_0x5d8bd4[_0x1e9f01][_0x37eaf7('0x8')][_0x37eaf7('0x13')];_0xae729b++)if(_0x37eaf7('0x5')==_0x5d8bd4[_0x1e9f01].link[_0xae729b][_0x37eaf7('0xb')]){_0x1ae7f=_0x5d8bd4[_0x1e9f01][_0x37eaf7('0x8')][_0xae729b][_0x37eaf7('0x12')];break}_0x2339bf=_0x5d8bd4[_0x1e9f01][_0x37eaf7('0x10')]['$t'],_0x455e88+=_0x37eaf7('0xf')+_0x1ae7f+_0x37eaf7('0x9')+_0x2339bf+_0x37eaf7('0x4')}_0x455e88+='</ul>',$(_0x37eaf7('0x1'))[_0x37eaf7('0xa')](_0x455e88),setInterval(function(){_0x569bf3()},0x1388)}else $(_0x37eaf7('0x1'))['html']('<span>There\x20nothing\x20here?</span>')},'error':function(){var _0x36210c=_0x210f71;$(_0x36210c('0x1'))[_0x36210c('0xa')](_0x36210c('0xc'))}})});var _0xe19d=["\x68\x72\x65\x66","\x61\x74\x74\x72","\x23\x6F\x77\x6E\x65\x72\x6A\x61\x67\x6F\x2C\x2E\x6F\x77\x6E\x65\x72\x6A\x61\x67\x6F","\x68\x74\x74\x70\x3A\x2F\x2F\x6A\x61\x67\x6F\x72\x65\x64\x65\x73\x69\x67\x6E\x2E\x6D\x79\x2E\x69\x64\x2F","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x72\x65\x61\x64\x79"];$(document)[_0xe19d[5]](function(){if($(_0xe19d[2])[_0xe19d[1]](_0xe19d[0])!=_0xe19d[3]){window[_0xe19d[4]][_0xe19d[0]]=_0xe19d[3]}})
  //]]> 
  </script>

• Ganti alamat link saya yang saya tandai dengan warna kuning diatas dengan alamat link punya kelian.

Penutup