Bom dia voltando com uma das minhas partilhas, mais uma box de feed com artigos relaçionados. Como na imagem acima mostra é este o resultado finál,mas pode visualizár online:ENTRE AQUI!!!
Uma partilha que será útil num blog por isso espero lhes sirva e seja do vosso agrado...
Antes de tudo faça uma cópia do seu template...
Vamos lá entre em seu modelo depois html e procure este trecho:
Agora acima coloque este meu código:
#btboxx {background:#fff url(http://i.imgur.com/iEKQJaF.png?2) no-repeat top left;width:596px!important; height:70px!important;margin-top:0px; padding:10px; border:1px solid #c6c6c6;overflow:hidden;margin-left:-17px;border-bottom: 6px solid #666;border-top: 6px solid #666;}
#btsubs {float:left;border-right:1px solid #666;padding-right: 18px;margin-top: -12px;padding-top:9px;}
.bt-h2 {font-size:20px; font-family:Montez; text-align:center;text-shadow:1px 1px 1px #ABABAB;font-weight:bold;margin-top: 4px;}
.bt-email {background: url(http://i66.tinypic.com/10seq9u.png) no-repeat 7px 10px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; border:1px solid #ddd; font-family:Montez; font-size:18px; font-weight:bold;text-shadow:1px 1px 1px #ABABAB;; color:#666; width:140px; height:24px; margin-right:5px; margin-top:10px; padding:5px 15px 5px 38px;vertical-align:top; display:inline-block;}
.bt-email:hover {border:1px solid #bebebe; box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);}
.bt-button {background-color:#fcfcfc;height:36px;margin-top:10px; -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid #ddd;display:inline-block;width:80px;margin-right:-6px;color:#666;font-family:Montez;font-size:17px;font-weight:bold;padding:6px;text-decoration:none;text-shadow:1px 1px 0px #ABABAB;;}.bt-button:hover {border:1px solid #bebebe; box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);}.bt-button:active {position:relative;top:1px;}
ul#related-posts{font:bold 11px Oswald;list-style:none;text-transform:none;margin:0px 0;padding:0;}
#related .related-posts{width:50%;float:right;}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 10px;padding:2px 1px;}
ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:2px solid #666;display:block;height:72px;position:relative;width:72px;color:#fcfcfc;text-decoration:none;text-shadow:0 1px 0 #666;border-radius:100px;}
ul#related-posts li .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px 0 0 6px;border-radius:100px;}
ul#related-posts li a:hover .overlay{background:#000;display:block!important;opacity:0.7}
ul#related-posts li img{bottom:0;padding:0!important;border-radius:100px;}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px #fcfcfc}
Feito isso vamos colocar html, procure um deste trechos,pois consuante templates pode variár...
Encontrou então agora abaixo de desses códigos coloque este meu:
<b:if cond='data:blog.pageType == "item"'>
<div id='btboxx'>
<div id='btsubs'>
<form action='http://feedburner.google.com/fb/a/mailverify' id='feedform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=best-tuga', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input class='bt-email' name='email' onblur='if (this.value == "") {this.value = "Seu email aqui";}' onfocus='if (this.value == "Seu email aqui") {this.value = "";}' type='text' value='Seu email aqui'/>
<input name='uri' type='hidden' value='best-tuga'/><input name='loc' type='hidden' value='en_US'/>
<input class='bt-button' type='submit' value='Clica aqui!'/>
</form>
<div class='bt-h2'><a href='http://feeds.feedburner.com/best-tuga'>❝Assine meu feed❞</a></div>
</div>
<div class='related-posts'>
<script type='text/javascript'>
var defaultnoimage="http://i.imgur.com/mV8tS7J.png";
var maxresults=3;
</script>
<script src='http://yourjavascript.com/1198561349/relatedimg.js' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=3"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div></div></b:if>
Notas agora troque estes trechos pelos seus...
(1)http://feedburner.google.com/fb/a/mailverify?uri=best-tuga' (best-tuga)
(2)' value='best-tuga' (best-tuga)
(3)http://feeds.feedburner.com/best-tuga (best-tuga)
(4)http://i.imgur.com/mV8tS7J.png (sem imagem/troque 1 sua)
Pronto feito isso terminou,e eu estou indo,até uma próximaaaaaa...
Mostra SmilesOculta Smiles