Recomendar post com efeito deslizante ao pé do Blogger

Para que seus visitantes passem mais tempo em seu blog, é necessário ter postagens bem elaboradas, um layout limpo e organizado e alguns truques para aguçar a curiosidade de seu leitor e fazê-lo ficar mais tempo em seu blog. Pensando nisso o Blogger Widget adaptou este menu do blog Coldrops e disponibilizou em seu blog. Traduzo e trago para que vocês.

Vá até o Modelo de seu blog, clique em Editar modelo

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Agora procure por: ]]></b:skin>


 

 

Substitua então pelo código abaixo:

/*Menu lateral---------------------------------------------------------------------*/
#bpslidein{
z-index:5;
width:400px;/*largura do menu*/
height:100px;/*comprimento do menu*/
background-color:#fff;/*cor de fundo*/
border-top:3px solid #F45118;/*cor borda*/
padding:10px;
position:fixed;right:-430px;bottom:0;
-moz-box-shadow:-2px 0 5px #aaa;
-webkit-box-shadow:-2px 0 5px #aaa;
box-shadow:-2px 0 5px #aaa;
font-family:Arial, Helvetica, sans-serif;
}
#bpslidein p{
font-size:11px;
text-transform:uppercase;
font-family:Arial,Helvetica,sans-serif;
letter-spacing:1px;
color:#555;
}
#bpslidein_title{
color:#555;
font-weight:700;
font-size:16px;
margin:10px 20px 10px 0;
}
#bpslidein a,#bpslidein a:hover,#bpslidein_title{
text-decoration:none;
color:#F45118;
}
#bpslidein .close,#bpslidein .expand,#bpslidein .help{
border:2px solid #EEE;
cursor:pointer;
color:#9A9AA1;
width:13px;
height:15px;
padding:2px 0 0 5px;
position:absolute;
right:10px;
font-size:17px;
font-weight:700;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#bpslidein .help{
right:35px;
}
#bpslidein_title,#bpslidein_image{
float:left;
width:80px;
}
#bpslidein_title{
width:290px;
}
]]></b:skin>

Salve


Clique em "Expandir modelos de widgets"

Procure então por:

<div class='post-footer-line post-footer-line-1'>

ou

<div class='post-footer-line post-footer-line-1'/>

Abaixo dele, cole o código abaixo:

<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='bpslidein_place_holder'></div>
</b:if>

Salve. Agora clique em Layout

Clique em Adicionar um Gadget

Ao abrir, clique em  HTML/Javascript

Cole então o próximo código.

<div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Recomendo a você</p> <div id="bpslidein_image"></div> <div  id="bpslidein_title">Loading..</div> </div>

<script> var bpslidein_custom_css = true; </script>
<script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("http://recommended-slide-out-for-blogger.googlecode.com/svn/trunk/bp-out-slide.min.js",function(){},"bp-out-slide")},"jQueryjs")} </script> <a href="http://www.bloggerplugins.org/2011/12/recommended-post-slide-out-for-blogger.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4uCnIGCD25EJj2PWAATO4XPNDZQOOWdjLyyfzdekKB8TyHQSz8ONcooQsvmAhFtUEBf-w3nDyRycvWRIaY22nzooAItcNnngnxj780q0GCcpBO_rI04aBd0n7tWviLVZ1AYZVwpX6pgo/I/bloggerplugins.png" alt="Recommended Post Slide Out For Blogger" /></a>