Widget Recent post cara menbuat blogger template 2018

.

.

recent post blogger template by bungfrangki 2018

Hoje vamos compartilhar como adicionar o widget recent post na sidebar do Blogger isso é diferenciado tem uma linha de cor no inicio trazendo um layout bonito ao template isso foi criado por bungfrangki estamos a compartilhar essa novidade então se você deseja adicionar no seu template siga os passos abaixo 

Adicionando o widget no blogger

Faça login no blogger então procure no menu tema Editar HTML com as
teclas combinadas CTRL+F busque por </body> e acima disso copie e cole o seguinte código:

<script type='text/javascript'>
//<![CDATA[
var homePage = window.location.origin,numPosts = 7;
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.rawgit.com/rebozasambirejo/hostingjs/44009fad/recent-post-thumbnai.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;

function loadScript(d){var o=document.createElement("script");o.src=d,document.body.appendChild(o)}function downloadJSAtOnload(){loadScript("https://cdn.rawgit.com/mastamvan/backup/master/lazyload.js")}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

Então procure por </style> e antes disso copie e cole o seguinte código:

/*<![CDATA[*/
ul#recent-posts{width:100%;margin:0 auto;padding:0!important;list-style-type:none}
ul#recent-posts li{background:#FFF;padding:0!important;margin-bottom:10px;overflow:hidden;width:100%;height:auto;-webkit-box-shadow:2px 2px 3px rgba(0,0,0,.05);-o-box-shadow:2px 2px 3px rgba(0,0,0,.05);-ms-box-shadow:2px 2px 3px rgba(0,0,0,.05);box-shadow:2px 2px 3px rgba(0,0,0,.05);border-left:2px solid #3f91ce}
ul#recent-posts li img{width:90px;height:70px;margin:0 0 0 10px;float:right;}
ul#recent-posts li .title_post{padding:10px!important;line-height: 1;position:relative;margin-right:90px;text-align:left}
ul#recent-posts li a{color:#333;font-family:inherit;font-size:14px;font-weight:500;text-decoration:none}
ul#recent-posts li a:hover{color:#FF1744;}
ul#recent-posts:after{content:"";display:block;clear:both}
/*]]>*/

Então salve e procure o menu layout, adicionar novo gadget procure por JavaScript então cole o seguinte código:

<ul id="recent-posts"></ul>

salve e pronto.