O linkList padrão Blogger e mais o segredo.

Observação: este código é simples o bastante, para estudar o funcionamento da dinâmica de pegar dados inseridos pelo gadget linkList padrão do Blogger e manipular para exibir nesse caso, num menu suspenso. Isso está obsoleto por não ser responsivo, não se adequa aos diferentes tamanhos de tela.
Adicione o css na head do seu blog. Como é só para estudo recomendo que use um blog de testes. Também recomendo que aproveite sempre a oportunidade para praticar o que já sabe, como por exemplo, fazer uso de tag condicional para que este menu renderize apenas em páginas estáticas, ou só numa postagem específica.
Obs: não esqueça de adicionar a tag CDATA.
<style> .vbt-contain.container{ max-width:1040px; margin:0 auto; } .LinkList{opacity:0;} .menulist { width:100%; height:48px; background:#030; color:#fff; position:relative; } .menulist h2 {display:none} .menulist .r-nav ul li a:link, .menulist .r-nav ul li a:visited { color:#fff; text-decoration:none; font-size:15px; } .menulist .r-nav ul li { display:inline-block; position:relative; margin:0px 20px; height:48px; line-height:48px; } .menulist .r-nav ul li ul { position:absolute; left:-10px; min-width: 250px; background:#040; opacity:0; z-index:-1; } .menulist .r-nav ul li ul li { display:block; border-bottom: 1px solid #070; } .menulist .r-nav a:hover { opacity:0.8; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; } .menulist .r-nav ul li ul li:last-child { border:none; } .menulist .r-nav ul li:hover ul { opacity:1; z-index:10; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-name: raintemplates-hang; animation-name: raintemplates-hang; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; } .hasdrop svg { width:13px; height:13px; position:relative; top:3px; left:8px; } .menulist .r-nav ul li:hover svg{ -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; } .search-box svg { display:none; } .r-nav { position: relative; width: 100%; height: 100%; } .searchbox form, .searchbox input{ position: absolute; right: 0; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; } .searchbox input.sb-search-input.placeholder { height: 29px; border: none; padding-left: 12px; font-size: 13px; } .searchbox .submit { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3pC_bYazCrwfbQ2bIKJTrMkuzyU6HZPZ12rDvTUOrCsEfjYjvRX7A0Xe7-X5-nEcW4gMLnXgBMmG3stzFs3dSxsgHBKYd8m0xWLzmwLvilCSI5wZy6C9E7_Eq9ZSxxo4FiaXzdGcDm5GC/s50/search.png) no-repeat; border: none; height: 16px; width: 16px; background-size: 100%; margin-right: 10px; font-size: 0px; } @-webkit-keyframes raintemplates-hang { 0% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 50% { -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes raintemplates-hang { 0% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 50% { -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } </style> Insere o script no modelo xml Blogger, próximo ao final do corpo, lá embaixo, bem no final. Isso é o que recomenda o desenvolvedor, faça seus próprios testes, veja onde funciona e onde deixa de funcionar, certifique-se de ter inserido corretamente e salvo todo o código, sem nenhuma deformação.
Obs: não esqueça de adicionar a tag CDATA.
<script> // este código requer o uso da biblioteca ajax do google https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js . $.extend($.expr[":"], {startsWith:function(a,c,b){return 0===$(a).text().trim().indexOf(b[3])}}); function vbttemplatesmenu(){ $(".LinkList li:not(:startsWith(_))").each(function(){ $(this).next("li:startsWith(_)").length&&$(this).find("a").addClass("hasdrop").append('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 407.4 407.4" width="512" height="512"><polygon points="386.3 91.6 203.7 273.5 21.2 91.6 0 112.8 203.7 315.9 407.4 112.8 " fill="#888"/></svg>'); $("<ul/>",{html:$(this).nextUntil(".LinkList li:not(:startsWith(_))"),appendTo:this})})} $(".LinkList").each(function(){ var a=$(this).find("h2"); if(a.is(':contains("Verbratectemplates")'))vbttemplatesmenu(),$(this).attr("id","listmenu1"),$(this).attr("class","menulist"),$(this).attr("data-version","vbttemplates-linklist"),$(this).find(".widget-item-control").remove(),$(this).find(".widget-content").attr("class","r-nav"),$(this).find(".clear").remove(),a.html('\x3c!--Widget de verbratec.com.br--\x3e<a href="//verbratec.com.br/">Verbratec Templates</a>'),$(".container").length?$(this).wrapInner('<div class="container"></div>'):$(idlist).wrapInner('<div class="vbt-contain container"></div>'),$(".r-nav ul li ul li a").each(function() {$(this).text($(this).text().replace(/[_]/,""))} ),$(".r-nav").append('<div class="searchbox"><a href="javascript:void(0)" class="search-box"><svg fill="#dddddd" viewBox="0 0 57.93 58.68" xmlns="http://www.w3.org/2000/svg"><path class="cls-1" d="M1,57.68a3.4,3.4,0,0,1,0-4.81L14.37,39.5l-.3-.39A24.39,24.39,0,1,1,33.53,48.8a24.2,24.2,0,0,1-13.86-4.33l-.39-.27L5.81,57.68a3.4,3.4,0,0,1-4.81,0ZM15.93,24.4A17.6,17.6,0,1,0,33.53,6.8,17.62,17.62,0,0,0,15.93,24.4Z"></path></svg></a><form accept-charset="utf-8" action="/search" class="navbar-form" method="get"><input class="sb-search-input placeholder" name="q" placeholder="'+searchtxt+'" type="text" value=""><input value="Search" class="submit" type="submit"/></form></div>'); else return!1; $(this).css({opacity:"1"})}); </script> A orígem do código: http://raintemplates.com/2017/10/09/using-linklist-widget-to-create-the-awesome-dropdown-navigation-menu-for-your-blogger-blog/ vale sempre citar alguém que lhe é útil.
Demostrado ao vivo neste link: https=//construtorjavascript.blogspot.com/ A imagem que segue dá uma idéia de como editar o gadget, que deve ser inserido de forma normal pelo layout do seu painel admin Blogger.

Uma imagem da section com o widget e o já conhecido código padrão do Blogger.

O Blogger não quer funcionar, nem do computador, nem pegando URL da imagem, problema vish!
Solução colocar direto pelo código.
Eu ia gravar, mas pensei, se der problema com vídeo será tempo perdido.

Espero que tenha um bom estudo e que realmente isso lhe seja útil para o estudo da plataforma Blogger.
Um abraço e até a próxima!