Postagens Recentes
Mostrando postagens com marcador Marcadores. Mostrar todas as postagens
Mostrando postagens com marcador Marcadores. Mostrar todas as postagens

23 de jul. de 2016

Marcadores em forma de menu suspenso e postagens que se abrem na mesma página

Nenhum comentário:





 Dois hacks que vão dar um toque especial e bacana a seu blog, além de deixa-lo mais eficiente e economizar espaço.



Vá até o "Modelo de seu blog", clique em "Editar HTML"
  Hack para o template do Blogger, implementado em  abril de 2013.





Procure por <b:skin>...</b:skin>  se não encontrar procure por ]]></b:skin>






Abaixo dele, cole o próximo código:




<style>
.sidebar li{list-style-type:none; }
a.loadpost{
display:block;
padding:8px;
background-color:#cc0000;
color:white;
text-transform:capitalize;
text-decoration:none
}
.labelnyatas a{
list-style-type:none;
display:inline-block;
padding:0 5px;height:17px;
font-size:8px;
line-height:17px;
text-decoration:none;
background-color:#cc0000;
color:white
}
.bwh-title .comment-link:hover,a.loadpost:hover,.labelnyatas a:hover{
background-color:#cc0000}
</style>

<style>
/* Label =====================*/
.labelnyatas a{
 list-style-type:none;
display:inline-block;
padding:0 5px;
height:17px;
font-size:8px;
line-height:17px;
text-decoration:none;
background-color:#cc0000;
color:white
}
.bwh-title .comment-link:hover,a.loadpost:hover,.labelnyatas a:hover{
background-color:#cccccc;
font-family: Sans-serif Courier New;
font-size: 18px;
}
.bwh-title .comment-link::after{
content:&quot;&quot;;
width:0;
height:0;
border-width:2px 4px;
border-style:solid;
border-color:#808080 #808080 transparent transparent;
position:absolute;
top:100%;
right:0
}

.menu-xitem{
list-style-type:none;
font-size: 14px;
height:35px;
border-bottom:5px solid #000000;/*cor da linha */
margin-bottom:20px;
color:white
}
.menu-xitem .xitem1{
list-style-type:none;
height:30px;
position:relative;
float:left
}
.menu-xitem .liat{
font-size: 18px;
display:block;
line-height:35px;
padding:0 20px 0 10px;
float:left;
background-color:#cc0000; /*cor botão*/
text-transform:uppercase;
color:white;
position:relative;
text-decoration:none
}
#labelxnya{
list-style-type:none;
position:absolute;
width:230px;
top:100%;
z-index:3;
background-color:#000000;/* cor fundo menu*/
display:none
}
#labelxnya.hidden{display:none}
.menu-xitem .xitem1:hover #labelxnya.hidden{
display:block
}
#labelxnya a{
list-style-type:none;
color:white;text-decoration:none;
display:block;padding:0 10px;line-height:25px
}
#labelxnya a:hover{
border-left:4px solid #cc0000
}
.menu-xitem .liat::before,.menu-xitem .liat::after{
content:&quot;&quot;;width:0;height:0;
border-width:4px 4px;
border-style:solid;
border-color:white transparent transparent transparent;
position:absolute;
top:14px;
right:8px
}
.menu-xitem .liat::after{
border-width:15px 6px;
border-color:transparent transparent black black;
left:100%;
top:0;
right:auto
}

</style>

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b+"-c");}}

window.labelnyacx=(function(){var a=function(d){var e=d||{},c=e.url_blog||window.location.host,b=e.id_labelcontent||"#labelxnya";$.ajax({url:"http://"+c+"/feeds/posts/summary?max-results=0&alt=json-in-script",type:"get",dataType:"jsonp",success:function(h){var f=h.feed.category,j="";if(f!==undefined){j="<ul class='subnya-xitem'>";for(var g=0;g<f.length;g++){j+='<li><a href="/search/label/'+encodeURIComponent(f[g].term)+'" target="_blank">'+f[g].term+"</a></li>"}j+="</ul>";$(b).html(j)}else{$(b).html("<span>No Label!</span>")}},error:function(){$(b).html("<strong>Error Loading Feed!</strong>")}})};return function(b){a(b)}})();
//]]>
</script>
  </b:if> </b:if>



Salve !



Procure agora por </body>

Acima dele cole o próximo código.



<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
resizeThumb("main",250);
labelnyacx();
(function($) {
var loadingGif = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhejKBEc5a7_kVvZWr-zZV27l1Z7GQegzONtlQJQpWRdSjGJ8dbsZHNVz6Ql9A-5stwbD7T2qfn5tchmeUzFyv3-nWi9UHfGQcQ2hAP2BRI8sNH_sBxfSBh8VDJUVL71xLRrlTYovGeWwCy/s32/ajax-loader.gif';
var olderPostsLink = '';
var loadMoreDiv = null;
var postContainerSelector = 'div.blog-posts';
var loading = false;
var win = $(window);
var doc = $(document);
// Took from jQuery to avoid permission denied error in IE.
var rscript = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;

function loadDisqusScript(domain) {
  $.getScript('http://' + domain + '.disqus.com/blogger_index.js');
}

function loadMore() {
  if (loading) {
    return;
  }
  loading = true;

  if (!olderPostsLink) {
    loadMoreDiv.hide();
    return;
  }

  loadMoreDiv.find('a').hide();
  loadMoreDiv.find('img').show();
  $.ajax(olderPostsLink, {
    'dataType': 'html'
  }).done(function(html) {
    var newDom = $('<div></div>').append(html.replace(rscript, ''));
    var newLink = newDom.find('a.blog-pager-older-link');
    if (newLink) {
      olderPostsLink = newLink.attr('href');
    } else {
      olderPostsLink = '';
      loadMoreDiv.hide();
    }

    var newPosts = newDom.find(postContainerSelector).children('.date-outer');
    $(postContainerSelector).append(newPosts);
resizeThumb("main",250);
    // Loaded more posts successfully.  Register this pageview with
    // Google Analytics.
    if (window._gaq) {
      window._gaq.push(['_trackPageview', olderPostsLink]);
    }
    // Render +1 buttons.
    if (window.gapi && window.gapi.plusone && window.gapi.plusone.go) {
      window.gapi.plusone.go();
    }
    // Render Disqus comments.
    if (window.disqus_shortname) {
      loadDisqusScript(window.disqus_shortname);
    }
    // Render Facebook buttons.
    if (window.FB && window.FB.XFBML && window.FB.XFBML.parse) {
      window.FB.XFBML.parse();
    }

    loadMoreDiv.find('img').hide();
    loadMoreDiv.find('a').show();

    loading = false;
  });
}


function init() {
  if (_WidgetManager._GetAllData().blog.pageType == 'item') {
    return;
  }

  olderPostsLink = $('a.blog-pager-older-link').attr('href');
  if (!olderPostsLink) {
    return;
  }

  var link = $('<a class="loadpost" href="javascript:;">Leia mais postagens</a>');
  link.click(loadMore);
  var img = $('<img src="' + loadingGif + '" style="display: none;">');

  loadMoreDiv = $('<div style="text-align: center; font-size: 140%;"></div>');
  loadMoreDiv.append(link);
  loadMoreDiv.append(img);
  loadMoreDiv.insertBefore($('#blog-pager'));
  $('#blog-pager').hide();
}

$(document).ready(init);

})(jQuery);
//]]>
</script>
</b:if></b:if>



Agora procure por:  <div class='columns-inner'>

Abaixo dele cole o próximo código


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='menu-xitem'>
    <div><div class='xitem1'><a class='liat' href='#'><b:if cond='data:blog.url == data:blog.homepageUrl'>
Postagem por assunto
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<data:blog.pageName/>
<b:else/>
<b:if cond='data:blog.searchQuery'>
<data:blog.searchQuery/>
<b:else/>
<b:if cond='data:blog.searchLabel'>
<data:blog.searchLabel/>
</b:if>
</b:if>
</b:if>
</b:if></a>  
    <div class='hidden' id='labelxnya'/>
    </div></div>
    </div>
</b:if></b:if>  

Salve

12 de mai. de 2013

Estilo zoom para os marcadores do Blogger

Um comentário:


Para dar um efeito diferente nos marcadores de seu Blogger é necessário primeiramente ter o widget em seu blog e depois deixar selecionado em seu gadget a função label, como mostra a imagem.



Tendo feito a modificação, agora vamos das estilo, personalizar as etiquetas.




Implementar CSS                                                                             



No modelo de seu blog", clique em "Personalizar"





Ao abrir essa janela, vá em Avançado  -------> Adicionar CSS 




Copie o código abaixo e cole no local indicado.





/*Marcadores efeit zoom-----------------------------------------------*/

.cloud-label-widget-content {
text-align: center;
}
.label-size a {
float:left;
display: block;
margin: 2px 2px 0 0;
padding: 4px;
text-transform: uppercase;
border: 1px solid #996666;
text-decoration:none;
font-size:12px;
color:#666;
background: #eee;
-moz-border-radius:8px;-webkit-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border-radius:8px;
}
.label-size a:hover {
border: 1px solid #000;
color: #000;
background: #fff;
text-decoration: none;
-moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5);
-moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; -ms-transition: all .5s;transition: all .5s;
}


Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.




Créditos: OloBlogger

3 de mai. de 2013

Marcadores em forma de menu com efeito Jquery

2 comentários:

Este modelo de menu de marcadores é diferente dos demais por algumas características

1-Você vai escolher quais os marcadores que farão parte do menu
2-Um bonito efeito Jquery que mostrará não apenas os títulos dos marcadores mas também thumbs e um pequeno resumo
3-Vai valorizar seu layout e ajudar seu visitante a navegar melhor pelo seu blog



Vá até o "Modelo de seu blog", clique em "Editar HTML"
  Hack para o template do Blogger, implementado em  abril de 2013.







Procure por </head>


Acima dele cole este próximo código.




<!--Início do código de marcadores-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/ajaxbloggermenu.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#w2bajaxmenu').ajaxBloggerMenu({
numPosts : 4, // Number of Posts to show
defaultImg : 'http://url-to-image.com/default-image.jpeg' // Default thumbnail Image
});
});
</script>
<!--Fim do código do menu de marcadores-->




Salve. Agora clique em Layout...




Clique em Adicionar um Gadget




Ao abrir, clique em  HTML/Javascript




Cole então o próximo código fazendo as modificações necessárias.



<ul id="w2bajaxmenu" class="w2bmenu">
<li>
<a href="#">Home</a>
</li>



<li>

<a href="#">Marcadores 1</a>
<ul>
<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 1-A">MARCADOR 1-A</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 1-B">MARCADOR 1-B</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 1-C">MARCADOR 1-C</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 1-D">MARCADOR 1-D</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 1-E">MARCADOR 1-E</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 1-F">MARCADOR 1-F</a></li>
</ul>
</li>


<li>
<a href="#">Marcadores 2</a>
<ul>
<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 2-A">MARCADOR 2-A</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 2-B">MARCADOR 2-B</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 2-C">MARCADOR 2-C</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 2-D">MARCADOR 2-D</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 2-E">MARCADOR 2-E</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 2-F">MARCADOR 2-F</a></li>
</ul>
</li>


<li>
<a href="#">Marcadores 3</a>
<ul>
<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 3-A">MARCADOR 3-A</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 3-B">MARCADOR 3-B</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 3-C">MARCADOR 3-C</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 3-D">MARCADOR 3-D</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 3-E">MARCADOR 3-E</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 3-F">MARCADOR 3-F</a></li>
</ul>
</li>

<li>
<a href="#">Marcadores 4</a>
<ul>
<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 4-A">MARCADOR 4-A</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 4-B">MARCADOR 4-B</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 4-C">MARCADOR 4-C</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 4-D">MARCADOR 4-D</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 4-E">MARCADOR 4-E</a></li>

<li><a href="ENDEREÇO DE SEU BLOG/search/label/NOME DO SEU MARCADOR 4-F">MARCADOR 4-F</a></li>
</ul>
</li>


<li><a href="ENDEREÇO DO SEU FACEBOOK">Facebook</a></li>

<li><a href="ENDEREÇO DO SEU TWITTER">Twiter</a></li>

<li><a href="ENDEREÇO DO SEU FEED">Feed</a></li></ul>


Implementar CSS                                                                             



No modelo de seu blog", clique em "Personalizar"





Ao abrir essa janela, vá em Avançado  -------> Adicionar CSS 




Copie o código abaixo e cole no local indicado.




/* Menu Stylings */ .w2bmenu *{margin: 0;padding: 0;} ul.w2bmenu {list-style: none;line-height: 1;overflow: visible !important;} ul.w2bmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;} ul.w2bmenu li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;} ul.w2bmenu li a{margin: 0;padding: 12px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #6b6b6b !important;text-shadow: 0 1px 0 #fff;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: 0 none !important;} ul.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #f5f5f5 !important;} ul.w2bmenu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;} ul.w2bmenu li:hover > ul{display: block;} ul.w2bmenu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;} ul.w2bmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;} ul.w2bmenu ul li a:hover,ul.w2bajaxmenu ul li a.hoverover{background: #fff !important;} ul.w2bmenu ul ul{display: none;left: 100%;top: 0;} /* AJAX Menu Stylings */ ul.w2bajaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #fff;border:1px solid #cccccc;border-top: 0 none;} ul.w2bajaxmenu li:hover div.submenu {display: block;} ul.w2bajaxmenu ul ,ul.w2bajaxmenu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;} ul.w2bajaxmenu ul li{background: none !important;float: none !important;} ul.w2bajaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;} ul.w2bajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;} ul.w2bajaxmenu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;} ul.w2bajaxmenu ul.postslist li:last-child{border-bottom: none 0;} ul.w2bajaxmenu ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #dcdcdc;font-size: 0;line-height: 0;} ul.w2bajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;} ul.w2bajaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0 !important;} ul.w2bajaxmenu .loader{background:url('http://i.imgur.com/SeivG.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;} ul.w2bajaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;} #w2bajaxmenu {background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;}


Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.





Créditos: Way2blogging

11 de abr. de 2013

Marcadores em forma de menu suspenso colorido

4 comentários:
 DEMO

Essa é uma boa dica para se organizar o widget de marcadores deixando-o com uma aparência simples, mas muito prática. Agora, graças ao novo editor html do Blogger, é possível implementar este hack com muita facilidade.


Clique em Editar HTML


Depois clique em  Ir para um widget



Agora substitua todo este código...




Por este abaixo. Depois é só salvar


<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTy_x9sXbUCGQ1xJJmzbJfaQlBIiRyi4x4rL9p1o1NDdyG2_YEVhgrIM9LA6Tv7pi0k5bIiG1RPn7uHedpKw93EPa6xgRpVzgjalxxcFs3JpcU3XJRbUaZMG0HE3s8NBugocCJdtNP90g/s1600/tag_icon%252624.png'/> <data:title/></h2>
</b:if>
<div class='widget-content'>
<select onchange='location=this.options[this.selectedIndex].value;' style='background: #eee;width:100%;  padding: 10px 0;'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
</option>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>



28 de fev. de 2013

Destacar marcadores específicos no Blogger

Nenhum comentário:


Em qualquer blog que use marcadores muitas vezes sentimos necessidade em dar destaque a um ou mais marcadores que julgamos importante. Seja por qual motivo for, sempre temos 1, 2 ou 3 marcadores que gostaríamos sempre de deixar em evidência para que nossos leitores tenham mais facilidade de navegação. Você pode fazer isso com facilidade usando essa dica de apenas duas partes. Vamos aprender...




Vá até o modelo de seu blog e clique em Editar HTML

Procure agora por </head>


Acima dele, cole o código abaixo

<script type='text/javascript'>
    //<![CDATA[
    function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
    if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
    {s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRfSJa5m08RFU5myofAZjwokQ2_Ub6WYOSQ9QDNFozqFI-XeK4tu4RrKbviAq710OBpd9ynyxqU3jG1k4WR5uUtz5qG3MTuhjMy-e2-0AM_8-RYmjAAjAZCkNO369L8eUDa4GL70juYMg/s1600/picture_not_available.png';}
    var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
    document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
    else
    if("summary"in entry){var postcontent=entry.summary.$t;}
    else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
    else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
    var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
    if(showcommentnum==true)
    {if(flag==1){towrite=towrite+' | ';}
    if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
    if(displaymore==true)
    {if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
    document.write(towrite);document.write('</li>');if(displayseparator==true)
    if(i!=(numposts-1))
    document.write('');}document.write('</ul>');}
    //]]>
    </script>


Salve !

Clique em layout




Clique em Adicionar um Gadget




Ao abrir, clique em  HTML/Javascript




Cole então o próximo código fazendo as modificações necessárias, colando o nome de seu marcador EXATAMENTE como está escrito em seu blog. (se tiver letra maiúscula, separação de palavras, acento, o importante é que fique igual.)


<style>
 /* Marcadores específicos
--------------------------------- */
img.label_thumb{
float:left;
margin: 1px 3px; padding: 2px;
height:65px; /* Altura das miniaturas */
width:65px; /* Largura das miniaturas */

-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);
}

img.label_thumb:hover{
-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

ul.label_with_thumbs li {
padding:2px 3px;
min-height:30px;
margin: 0 10px 10px 3px;
}
.label_with_thumbs strong {padding-left:0px;}
.post-header-line-1 {background: #000; padding: 6px 2px; -moz-box-shadow:0 5px 5px 5px rgba(0,0,0,0.6);-webkit-box-shadow:0 5px 5px 5px rgba(0,0,0,0.6);}

</style>

<span style="font-style:italic;"></span><script type='text/javascript'>var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/AQUI A INSCRIÇÃO EXATA DE SEU MARCADOR?published&amp;alt=json-in-script&amp;callback=labelthumbs"></script>

25 de jan. de 2013

Efeito deslizante nos marcadores do Blogger

2 comentários:



Coloque um pequeno efeito deslizante em seus marcadores com um código simples e leve.  Só mesmo para dar uma bossa a seu blog, quando o leitor passar o mouse por cima do link.


Vá até o modelo de seu blog e clique em Editar HTML










Procure por </head>






E acima dele, cole o código abaixo:




<!-- Codigo marcadores -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 450;
$(document).ready(function() {
$(&#39;a.linknudge, .Label ul li a&#39;).hover(function() {
$(this).animate({
paddingLeft: &#39;20px&#39;
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
});</script>


5 de jan. de 2013

Marcadores do Blogger em forma de menu horizontal

2 comentários:





Depois de 5 anos blogando, de blogar quase diariamente, procurando e fazendo tutoriais, chega uma hora que vai ficando difícil saber o que já foi postado ou não. Outra coisa é que hoje em dia, diferente da época que comecei, o Blogger  te da a opção de costumizar o blog em quase tudo, mas há muitas outras dicas que ainda precisamos fazer manualmente e para quem tem poucos marcadores e gosta de diferenças em seu blog, esta,  de deixar os marcadores como menu horizontal, é uma boa dica. Fica fácil a visualização e facilita para os leitores. Se te atende, eis aí os códigos para a tutorial.


Vá até o "Modelo de seu blog", clique em "Editar HTML"
  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 marcadores---------------------------------------------------------------------------------*/
.menu-marcadores h2 {
    display: none;
}
.menu-marcadores a {
border: none;
    color: #333333;
}
.menu-marcadores {
    background: #808080;
 
border:1px solid #DBC8AD;
-moz-border-radius:6px;
-webkit-border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
    margin: 0 auto;
    padding:  0px;
    text-shadow: 0 1px 0 #E1D4C1;
    text-transform: none;
    width: 960px;
}
.menu-marcadores li {
    border-right: 1px solid #666;
    color: #333333;
    float: left;
    font: bold 12px Arial;
    margin: 0 2px 5px 0;
    padding: 18px 14px;
    text-transform: uppercase;
}
.menu-marcadores ul {
    float: left;
    list-style: none outside none;
    margin-bottom: 0;
    margin-left: 10px;
    padding: 0;
    width: 920px;
}
 
]]></b:skin>




Agora procure por:

<div class='header-outer'>

E acima dele cole o código abaixo




<div class='menu-marcadores'> <b:section class='menu-marcadores' id='menu-marcadores' preferred='yes' showaddelement='no'>
<b:widget id='Label1' locked='true' title='Labels' type='Label'/>
</b:section></div>
<div class='clear'>&#160;</div>

15 de jun. de 2012

Dando estilo aos marcadores com efeito hover

8 comentários:


DEMO


Ontem, no Facebook, recebi do Dudu Srfstinha a dica dos marcadores com efeito hover que está instalado em seu blog, o TPSO. Dei umas modificadinhas e trago a dica para vocês e os meus agradecimentos ao Dudu.

Vá até o Layout


Clique em Adicionar um Gadget




Ao abrir, clique em  HTML/Javascript




Cole então o próximo código fazendo as modificações necessárias.


<style>
/* Marcador efeito hover ----------------------------------------------- */
#Label1 {
color: #000;
}

#Label1 ul li {
list-style-type:none;
}
#Label1 li a:link{
border-left: 12px #ccc solid;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
text-decoration: none;
 text-shadow: black 0.1em 0.1em 0.2em;
background: #808080;
padding: 8px 2px 8px 17px;
display: block;
color: #fff;
border: 1px ridge #5E5E5E;
border-radius:25px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
}
#Label1 ul li a:hover{
color: #fff;
background: #eee;text-shadow: 0 0 0.3em #cc0000, 0 0 0.3em #cc0000, 0 0 0.3em #cc0000;
text-align: left;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
border-left: 12px #cc0000 solid;
border-radius:25px;
-moz-border-radius:35px;
-webkit-border-radius:25px;
}
#Label1  li span{
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
text-decoration: none;
 text-shadow: black 0.1em 0.1em 0.2em;
background: #ccc;
padding: 8px 2px 8px 17px;
display: block;
color: #000;
border: 1px ridge #5E5E5E;
border-radius:25px;
border-left: 12px #cc0000 solid;
-moz-border-radius:25px;
-webkit-border-radius:25px;
}
 #Label1  li a:visited {
color: #fff;
display: block;
background: #cc0000;
border: 1px ridge #5E5E5E;
border-left: 12px #808080 solid;
}
</style>

Se você não conseguiu, faça o seguint: exclua o widget de marcadores de seu blog e depois reinstale o widget.

30 de abr. de 2012

Modelos de marcadores em forma de menu horizontal

Um comentário:



Continuando o post anterior, outros estilos para os marcadores em forma de menu horizontal pra quem tem blog com poucos marcadores, ou quer destacar os marcadores mais importantes do blog.

Já sabe ?  A primeira coisa a fazer é deletar o widget de marcadores de seu blog. Vamos, delete-o.



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









Procure por:

<div id='content-wrapper'>

Se não encontrar, procure por:

<div class='tabs-outer'>


Abaixo do código cole este trecho:



<div class='marcadores-menu'> <b:section class='marcadores-menu' id=' marcadores-menu ' preferred='yes' showaddelement='no'>
<b:widget id='Label1' locked='true' title='Labels' type='Label'/>
</b:section></div>
<div class='clear'>&#160;</div>




Salve !

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


E acima dele cole o código do modelo escolhido.






Modelo 1







/*Label------------------------------------------------------------------------------------------------*/
#Label1 {margin: 20px 5px;}
#Label1 h2 {display:none;}
#Label1 li {margin: 0 0 0 0px;display: inline;}

#Label1 li a:link {
font-size: 16px;
text-shadow: 1px 1px 1px #000;
background: #FDE8B5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw4TN-I4VU1KpNCymyW8MTuOvQvghnxe_TloHxECqXPKU0Jx1H0SE9xZ1JV4sXAjaCfBHvBJR85m0kZruT2CD8X6CPNn54eU14babyS6bWOsLuhp1tzmor4BFUCCPHlq0bx45-ig4FktI/s1600/tag%25281%2529.png) no-repeat 5px;
display: inline block; border: 2px outset  #FDE8B5;padding:8px 3px 8px 21px;color: #F6C252;line-height:1.15em;
}
#Label1 li a:hover, #Label1 li a:active {
text-shadow: 1px 1px 1px #fff;
background: #CAE4EC  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCEyTPIBgwWN9qQoV06lh-eRPNJuxjn9ZFhBgwHfZ7SToYsZIYiXBeJxLCrjxocZluboYx7ugnkNCYPZm07WSc4H0Y-D7zAon4lHXaFL9-HvDK15sEPqOyhmpz1B5LFtHfSjLEOKwZtQ8/s1600/tag_add.png) no-repeat 5px; display: inline block; line-height:1.15em;border: 2px intset  #CAE4EC;
padding:8px 3px 8px 21px; color: #344CDA;
}
 #Label1 li a:visited {
 background: #FAD4D4  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdHVjnFT3IoepjWbM7e4k9BJQMPgDJ0mAdWq0JZE7K9-m1rjFfaCvlqusheKXE1Do3sHS2T5mTeas__3I5fg6lpYOWNzqRT0ZM9Vuc4xfhx__upfd32U9p0BfwodCdl9uHy7ic3uS3EjU/s1600/tag_remove.png) no-repeat 5px; display: inline block; line-height:1.15em;border: 2px outset  #FAD4D4;
padding:8px 3px 8px 21px; color: #cc0000;
}




Modelo 2






/*Label------------------------------------------------------------------------------------------------*/
#Label1 {margin: 20px 5px;}
#Label1 h2 {display:none;}
#Label1 li {margin: 0 0 0 0px;display: inline;}

#Label1 li a:link {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 12px/18px sans-serif;
padding:2px 8px; margin-right:1px;
}
#Label1 li a:hover, #Label1 li a:active {
text-shadow: 1px 1px 1px #000;
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #000 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #B8B6B6) );
background: -moz-linear-gradient( center top, white 20%, #B8B6B6 100% );
font: 12px/18px sans-serif;
padding:2px 8px; margin-right:1px;
}
 #Label1 li a:visited {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #cc0000 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #cc0000) );
background: -moz-linear-gradient( center top, white 20%, #cc0000 100% );
font: 12px/18px sans-serif;
padding:2px 8px; margin-right:1px;
}








Depois abra o widget e desmarque os números e escolha os marcadores


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube