Simple blogger recent post Widget

simple blogger recent post widget


Hoje vamos apresentar simple recent post widget by kompiajaib isso é elegante e tem um layout diferenciado pode ser colocado na sidebar do Blogger e dar um tom elegante no template se deseja colocar no seu template siga os passos abaixo

Adicionando Simple Blogger Recent Post Widget No template 


Faça login no blogger então va no menu tema editar HTML/JavaScript com as teclas combinadas CTRL+F procure por </head> então antes disso copie e cole o seguinte código:

<style>
/*<![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);}
ul#recent-posts li img{width:90px;height:70px;margin:0 10px 0 0;float:left;}
ul#recent-posts li .title_post{padding:10px!important;line-height: 1;position:relative;margin-left:90px;}
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}
/*]]>*/
</style>
</b:if>

Agora procure por :</body> e antes disso copie e cole o seguinte código: 

<script type='text/javascript'>
//<![CDATA[
var homePage = window.location.origin,numPosts = 5;
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.rawgit.com/KompiAjaib/kompi-js/master/recent_post_with_thumbnail.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

Salve o modelo do template 


Agora va no menu layout então procure a sidebar do Blogger clique em adicionar novo gadget então HTML/JavaScript com copie e cole o seguinte código

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

Salve e pronto

Click to comment