Postagens Recentes

29 de jan. de 2014

Loading gerador

Um comentário:




Mais uma dica de gerador, que há tempos não posto por aqui. Essa é para o loading, aquela imagem que fica rodando até seu blog ou algum widget abrir totalmente. Nos referidos sites você poderá escolher o modelo, a cor do loading e até a cor de fundo. No primeiro site é possível escrever palavras. Você poderá usa-lo para usar em um dos hacks que postei aqui como por exemplo, o hack de abertura dos posts.que é igual do Facebook, ou no hack onde usamos para contar o tempo de carregamento da página.

Clique aqui para visitar o site 1



Clique aqui para abrir o site





Imagem de carregamento no Blogger - Loading

Nenhum comentário:


Para quem tem muito conteúdo ou um blog muito pesado, uma boa distração é colocar uma imagem animada, o loading para que seu visitante n]ao perca a paciência e dê no pé. rs.
Uma dica antiguinha e bem simples de implementar em dois passos.


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.


<script type='text/javascript'> window.onload = detectarCarga; function detectarCarga() { document.getElementById(&quot;imgLOAD&quot;).style.display=&quot;none&quot;; } </script> 



 Salve !


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.

O código em vermelho é o código da imagem, bastando troca-la pelo endereço de outra imagem. Veja aqui dicas de geradores de imagem loading.


<div id="imgLOAD" style="text-align:center;">Carregando...
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKT27aQ2b9HbDRlBhnwzA0OhQsPZwhOr2wNHFz0SAQ0remeMOXvsjHRDU-2iCQBLjzqZizjaFFJbJiAYEM1D8Mqdb5mi4zxt_EBF5nHJVgHYocaggceBjFDPl-lB6Sz9TPOFnzuE3IkwYM/s1600/103.GIF"/></div>

25 de jan. de 2014

Widgets dentro de menu em abas

Um comentário:



Organização e economia de espaço é tudo em nosso blog. Um bom widget a se instalar é esse, de menu em abas onde se instala os posts populares, os útimos posts, os últimos comentários e os marcadores.
 Da um puquinho de trabalho e é necessário ter um sidebar mais largo, de pelo menos 380px para que fique bem estruturado e não embole os títulos dos widgets.



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





Clique no botão "Editar modelo" e depois nas teclas Ctrl e F. Ao abrir a janela, procure pelo seguinte trecho.





Procure por </head>


Acima dele cole este próximo código.


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
aBold = true;
summaryPost = 90;
summaryTitle = 25;
 numpostsf  = 8;
 numposts3 = 7;
numposts1 = 6;

function removeHtmlTag(strx,chop){
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
        if(s[i].indexOf(">")!=-1){
            s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
        }
    }
    s =  s.join("");
    s = s.substring(0,chop-1);
    return s;
}

function showhomeposts1(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();
    if (numposts1 <= json.feed.entry.length) {
        maxpost = numposts1;
        }
    else
       {
       maxpost=json.feed.entry.length;
       }  
       for (var i = 0; i < maxpost; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
        }
      
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                pcm = entry.link[k].title.split(" ")[0];
                break;
              }
        }
      
        if ("content" in entry) {
              var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
              var postcontent = entry.summary.$t;}
        else var postcontent = "";
      
        postdate = entry.published.$t;
  
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
  
    s = postcontent    ; 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!="")) img[i] = d;

    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];

    for(var u2=0;u2<month.length;u2++){
        if(parseInt(m)==month[u2]) {
            m = month2[u2] ; break;
        }
    }

    var daystr = day+ ' ' + m + ' ' + y ;
 
  
   if (i==0) {

  
var trtd = '<div class="grid-box"><div class="hover_play"><a href="'+posturl+'"><img src="'+img[i]+'" alt=""></img></a></div><h2 class="big_title"><a href="'+posturl+'" title="">'+posttitle+'</a></h2><span class="block-metas">'+daystr+' <a href="#" title="">- '+pcm+' Comments</a></span><p>'+removeHtmlTag(postcontent,summaryPost)+'</p></div>';

    document.write(trtd);
}
else{
  
    var trtd = '<div class="showthis"><div class="grid-box"><div class="grid-image"><a class="hover_play_small" href="'+posturl+'" title=" "><img src="'+img[i]+'" alt=" "></img></a></div><h2><a href="'+posturl+'" title="">'+posttitle+'</a></h2>  </div></div>';
  
    document.write(trtd);

}

    j++;
}
 }


 function showrecentposts1(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();
    if (numposts1 <= json.feed.entry.length) {
        maxpost = numposts1;
        }
    else
       {
       maxpost=json.feed.entry.length;
       }  
       document.write('<ul class="slides">');
      for (var i = 0; i < maxpost; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
        }
      
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                pcm = entry.link[k].title.split(" ")[0];
                break;
              }
        }
      
        if ("content" in entry) {
              var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
              var postcontent = entry.summary.$t;}
        else var postcontent = "";
      
        postdate = entry.published.$t;
  
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
  
    s = postcontent    ; 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!="")) img[i] = d;

    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];

    for(var u2=0;u2<month.length;u2++){
        if(parseInt(m)==month[u2]) {
            m = month2[u2] ; break;
        }
    }

    var daystr = day+ ' ' + m + ' ' + y ;
 
  
  var trtd = '<li> <a href="'+posturl+'"><img src="'+img[i]+'"/></a>   <h2 class="entry-title"><a href="'+posturl+'">'+posttitle+'</a></h2>   </li>';
    document.write(trtd);


    j++;
}
document.write('</ul>');
}

 function showrecentposts2(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();
    if (numposts3 <= json.feed.entry.length) {
        maxpost = numposts3;
        }
    else
       {
       maxpost=json.feed.entry.length;
       }  
     
      for (var i = 0; i < maxpost; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
        }
      
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                pcm = entry.link[k].title.split(" ")[0];
                break;
              }
        }
      
        if ("content" in entry) {
              var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
              var postcontent = entry.summary.$t;}
        else var postcontent = "";
      
        postdate = entry.published.$t;
  
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
  
    s = postcontent    ; 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!="")) img[i] = d;

    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];

    for(var u2=0;u2<month.length;u2++){
        if(parseInt(m)==month[u2]) {
            m = month2[u2] ; break;
        }
    }

    var daystr = day+ ' ' + m + ' ' + y ;
  

    var trtd = '<li><a href="'+posturl+'">'+posttitle+'</a></li>';
    document.write(trtd);


    j++;
}

}





var classicMode = false ;
var summary = 20;
var indent = 3;

function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')}

function getSummaryLikeWP(id) {
        return document.getElementById(id).innerHTML.split(/<!--\s*more\s*-->/)[0];
}

function getSummaryImproved(post,max){
   var re = /<.*?>/gi
   var re2 = /<br.*?>/gi
   var re3 = /(<\/{1}p>)|(<\/{1}div>)/gi
   var re4 = /(<style.*?\/{1}style>)|(<script.*?\/{1}script>)|(<table.*?\/{1}table>)|(<form.*?\/{1}form>)|(<code.*?\/{1}code>)|(<pre.*?\/{1}pre>)/gi
 
   post = post.replace(re4,'')
   post = post.replace(re3,'<br /> ').split(re2)
 
   for(var i=0; i<post.length; i++){
    post[i] = post[i].replace(re,'');
   }
 var post2 = new Array();
 for(var i in post) {
  //if(post[i]!='' && post[i]!=' ' && post[i] != '\n') post2.push(post[i]);
  if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;

 }


 var s = "";
 var indentBlank = "";
 for(var i=0;i<indent;i++){
  indentBlank += " ";
 }
 if(post2.join('<br/>').split(' ').length < max-1 ){
   s = post2.join(indentBlank +' <br/>');
 } else {
  var i = 0;
  while(s.split(' ').length < max){
   s += indentBlank + ' ' + post2[i]+'<br/>';
   i++;
  }
 }
 return s;
}


function createSummaryAndThumb(pID,title,url,date,comment){
 var posturl= url;
 var title=title;
 var date =date;
 var comment = comment;
 var div = document.getElementById(pID);
 var content = div.innerHTML;
 if (/<!--\s*more\s*-->/.test(content)) {
  div.innerHTML = getSummaryLikeWP(pID);
  div.style.display = "block";
 }
 else {

 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary;
 if(img.length>=1) {
   imgtag = '<a href="'+posturl+'"><img src="'+img[0].src+'"></a>';
   }
  var summary1 = '<div class="article-thumbnail">'+imgtag+'</div>  <div class="article-content"><div class="article-excerpt"> <p>'+stripHtmlTags(content,summary)+'... </p><div class="read-more"><a class="read-more-button"  href="'+posturl+'">Read More</a></div></div> </div>';


 div.innerHTML = summary1;
 div.style.display = "block";
 }
}


//]]>
</script>



<script type='text/javascript'>


//<![CDATA[

/*
 * Superfish v1.4.8 - jQuery menu widget
 * Copyright (c) 2008 Joel Birch
 *
 * Dual licensed under the MIT and GPL licenses:
 *     http://www.opensource.org/licenses/mit-license.php
 *     http://www.gnu.org/licenses/gpl.html
 *
 * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
 */

;(function($){
    $.fn.superfish = function(op){

        var sf = $.fn.superfish,
            c = sf.c,
            $arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')),
            over = function(){
                var $$ = $(this), menu = getMenu($$);
                clearTimeout(menu.sfTimer);
                $$.showSuperfishUl().siblings().hideSuperfishUl();
            },
            out = function(){
                var $$ = $(this), menu = getMenu($$), o = sf.op;
                clearTimeout(menu.sfTimer);
                menu.sfTimer=setTimeout(function(){
                    o.retainPath=($.inArray($$[0],o.$path)>-1);
                    $$.hideSuperfishUl();
                    if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
                },o.delay);  
            },
            getMenu = function($menu){
                var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
                sf.op = sf.o[menu.serial];
                return menu;
            },
            addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };
          
        return this.each(function() {
            var s = this.serial = sf.o.length;
            var o = $.extend({},sf.defaults,op);
            o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
                $(this).addClass([o.hoverClass,c.bcClass].join(' '))
                    .filter('li:has(ul)').removeClass(o.pathClass);
            });
            sf.o[s] = sf.op = o;
          
            $('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
                if (o.autoArrows) addArrow( $('>a:first-child',this) );
            })
            .not('.'+c.bcClass)
                .hideSuperfishUl();
          
            var $a = $('a',this);
            $a.each(function(i){
                var $li = $a.eq(i).parents('li');
                $a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
            });
            o.onInit.call(this);
          
        }).each(function() {
            var menuClasses = [c.menuClass];
            if (sf.op.dropShadows  && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
            $(this).addClass(menuClasses.join(' '));
        });
    };

    var sf = $.fn.superfish;
    sf.o = [];
    sf.op = {};
    sf.IE7fix = function(){
        var o = sf.op;
        if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
            this.toggleClass(sf.c.shadowClass+'-off');
        };
    sf.c = {
        bcClass     : 'sf-breadcrumb',
        menuClass   : 'sf-js-enabled',
        anchorClass : 'sf-with-ul',
        arrowClass  : 'sf-sub-indicator',
        shadowClass : 'sf-shadow'
    };
    sf.defaults = {
        hoverClass    : 'sfHover',
        pathClass    : 'overideThisToUse',
        pathLevels    : 1,
        delay        : 800,
        animation    : {opacity:'show'},
        speed        : 'normal',
        autoArrows    : true,
        dropShadows : false,
        disableHI    : false,        // true disables hoverIntent detection
        onInit        : function(){}, // callback functions
        onBeforeShow: function(){},
        onShow        : function(){},
        onHide        : function(){}
    };
    $.fn.extend({
        hideSuperfishUl : function(){
            var o = sf.op,
                not = (o.retainPath===true) ? o.$path : '';
            o.retainPath = false;
            var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
                    .find('>ul').hide().css('visibility','hidden');
            o.onHide.call($ul);
            return this;
        },
        showSuperfishUl : function(){
            var o = sf.op,
                sh = sf.c.shadowClass+'-off',
                $ul = this.addClass(o.hoverClass)
                    .find('>ul:hidden').css('visibility','visible');
            sf.IE7fix.call($ul);
            o.onBeforeShow.call($ul);
            $ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
            return this;
        }
    });

})(jQuery);

jQuery(document).ready(function() {
    jQuery('ul.nav').superfish();
    jQuery('ul.topnav').superfish();
});

/* Menu */
jQuery(document).ready(function() {
    jQuery('ul.nav').superfish();
    jQuery('ul.topnav').superfish();
});

/* Tabs */
jQuery(document).ready(function(){

        // UL = .tabs
        // Tab contents = .inside
      
       var tag_cloud_class = '#tag-cloud';
     
              //Fix for tag clouds - unexpected height before .hide()
            var tag_cloud_height = jQuery('#tag-cloud').height();

       jQuery('.inside ul li:last-child').css('border-bottom','1px') // remove last border-bottom from list in tab conten
       jQuery('.tabs').each(function(){
           jQuery(this).children('li').children('a:first').addClass('selected'); // Add .selected class to first tab on load
       });
       jQuery('.inside > *').hide();
       jQuery('.inside > *:first-child').show();
     

       jQuery('.tabs li a').click(function(evt){ // Init Click funtion on Tabs
      
            var clicked_tab_ref = jQuery(this).attr('href'); // Strore Href value
          
            jQuery(this).parent().parent().children('li').children('a').removeClass('selected'); //Remove selected from all tabs
            jQuery(this).addClass('selected');
            jQuery(this).parent().parent().parent().children('.inside').children('*').hide();
          
            /*
            if(clicked_tab_ref === tag_cloud_class) // Initiate tab fix (+20 for padding fix)
            {
                clicked_tab_ref_height = tag_cloud_height + 20;
            }
            else // Other height calculations
            {
                clicked_tab_ref_height = jQuery('.inside ' + clicked_tab_ref).height();
            }
            */
             //jQuery('.inside').stop().animate({
            //    height: clicked_tab_ref_height
            // },400,"linear",function(){
                    //Callback after new tab content's height animation
                    jQuery('.inside ' + clicked_tab_ref).fadeIn(500);
            // })
           
             evt.preventDefault();

        })
  
})


//]]>
</script>


Salve !


 Agora vamos procurar por um código e preste atenção.


Se a sidebar de seu blog fica do lado direito, procure por:

 <div class='column-right-outer'>


Se a sidebar de seu blog fica do lado esquerdo procure por:


 <div class='column-left-outer'>



Abaixo dele, cole


 <div id='tabber'>
          
        <ul class='tabs'>
            <li><a class='selected' href='#popular-posts'>Popular</a></li>
            <li><a href='#recent-posts'>Recente</a></li>
            <li><a href='#recent-comments'>Comentário</a></li>
            <li><a class='border-right-none' href='#tag-cloud'>Tags</a></li>
        </ul> <!--end .tabs-->
          
        <div class='clear'/>
      
        <div class='inside'>
      
<div id='popular-posts' style='display: block;'>
                <ul>
<b:section id='tab_pop'>
  <b:widget id='PopularPosts11' locked='false' title='Popular Posts' type='PopularPosts'>
    <b:includable id='main'>
   <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail-center'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
  </b:widget>
</b:section>
                </ul>          
            </div> <!--end #popular-posts-->
             
            <div id='recent-posts' style='display: none;'>
                <ul>
          <ul>
                    <script>
                                document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/?max-results=&quot;+numpostsf+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
                     </script>
 </ul>
                    
                </ul>  
            </div> <!--end #recent-posts-->
          
            <div id='recent-comments' style='display: none;'>
                <ul>
              
                <!-- Script Widget recent comments with avatar by http://www.way2blogging.org -->
                                             <script type='text/javascript'>
//<![CDATA[
    // Recent Comments Settings
    var
    numComments     = 5,
    showAvatar     = true,
    avatarSize     = 60,
    roundAvatar    = true,
    characters     = 40,
    showMorelink    = false,
    moreLinktext    = "More",
    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",
    hideCredits    = true;
//]]>
</script>
<script src='http://spicemag.googlecode.com/svn/trunk/spicemag/spicytricks_comments.js' type='text/javascript'/>
<script src='/feeds/comments/default?alt=json&amp;callback=spicytricks_recent_comments&amp;max-results=5' type='text/javascript'/>
                                     
                </ul>
            </div> <!-- end #recent-comments-->
            
            <div id='tag-cloud' style='display: none;'>
 <b:section id='tagsd'>
   <b:widget id='Label2' locked='false' title='Labels' type='Label'>
     <b:includable id='main'>

      <b:loop values='data:labels' var='label'>
       
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          
       </b:loop>
 
  </b:includable>
   </b:widget>
 </b:section>
 </div> <!--end #tag-cloud-->
          
            <div class='clear' style='display: none;'/>
          
        </div> <!--end .inside -->
      
        <div class='clear'/>
      
    </div> <!-- /tabber-->


<div class='widget  rece_cat_spicytricks'>
    <div class='widget-title'><script type='text/javascript'>
    document.write(&quot; <h3>&quot;+side_cat1_title+&quot;</h3> &quot;);
                                         </script></div>
           <ul class='widget-content'>
                <script type='text/javaScript'>
            document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+side_cat1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
                </script>
        </ul>
 <div class='clear'/>
</div>
  
<div class='widget  rece_cat_spicytricks'>
    <div class='widget-title'><script type='text/javascript'>
    document.write(&quot; <h3>&quot;+side_cat2_title+&quot;</h3> &quot;);
                                         </script></div>
           <ul class='widget-content'>
                    <script type='text/javaScript'>
            document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+side_cat2+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
                </script>
        </ul>
 <div class='clear'/>
</div>






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.





/*Widget tabs------------------------------------------ */
#tabber {
    background: #fff;
    display: block;
    height: auto;
    margin: 0 0 25px 0;
    clear:both;
}

#tabber ul.tabs {
    background: #fff;
    padding: 0 0;
}
#tabber ul.tabs li {
    background: none;
    border-bottom: 0;
    color: #fff;
    cursor: pointer;
    display: inline;
    float: left;
    font-size: 11px;
    font-weight: bold;
     padding: 0 0 0 0;
}
#tabber ul.tabs li a.selected, #tabber ul.tabs li a:hover {
    background: #cc0000;  /*Cor de fundo selecionada título*/
    color: #fff;
    text-decoration: none;
}
#tabber ul.tabs li a {
background: #443A3A; /*Cor de fundo título*/
color: #fff;
display: block;
float: left;
line-height: 22px;
padding: 8px 20px;
text-transform: uppercase;
}
#tabber #tag-cloud, #tabber .inside li {
    padding: 10px 10px 10px 0;
}
#tabber .inside li {
    background: none;
border-bottom: 1px solid #E9E9E9;
display: block;
clear: both;
min-height: 70px;
}
#tabber .inside li a {
    color: #555;
line-height: 19px;
font-size: 16px;
 }
 #tabber .inside li a:hover,#sidebar h2 a:hover{color:#FFC600;}
#tabber .inside li div.info {
    display: table;
    margin: 0 !important;
    padding: 0 !important;
    top: 0 !important;
}
#tabber .inside li span.meta {
    color: #999;
    display: block;
    font: 11px/20px Arial;
}
#tabber .inside li span.meta a {
    color: #999;
}
#tabber .inside li span.meta a:hover {
    text-decoration: none;
}
#tabber .inside li img.avatar, #tabber .inside li img.thumb {
    float: left;
    margin: 0 10px 10px 0;
}
#tabber .tab-thumb {
    float: left;
    margin: 0 10px 10px 0;
}
.avatarImage.avatarRound {
float: left;
height: 60px;
margin-right: -120px;}

#tagsd a {
padding: 3px;
font-size: 15px;
}
.item-thumbnail-center {
float: left;
margin-right: 5px;
}


#PopularPosts11{max-width:300px; margin: 0 0 0 -50px;}
#PopularPosts11 dd{float:left;border-bottom:none;margin:8px 8px 0 8px;background:none;display:block;padding:0}
#PopularPosts11 img{-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(#FF3E96), color-stop(0.5, #FF3E96), c#4F94CDolor-stop(0.5, #FF3E96), to(#aaa));background: -moz-linear-gradient(top, #ffffff, #ddd 50%, #FF3E96 50%, #ffffff);-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);}
#PopularPosts11 img: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);}

.Label a{
padding-left:20px;
background:#000;
padding:0 20px;
color:#fff!important;
border-radius:100px;
-moz-border-radius:100px;
height:32px;
line-height:32px;
text-transform:uppercase;
text-decoration:none;
border:none !important;
-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
float:left;
margin-left:5px;
margin-top:5px;
font-size:14px; }
.Label a:hover{
color:#000 !important;
background:#ff0; }


.slides img {
width: 80px;
height: 80px;
float: left;
margin: 2px 1px 6px -70px;
}
.slides h2 {
border: none !important;
margin: 2px 1px 2px 24px;
}

#footer .slides img{
border: 1px solid #777676;
padding: 3px;
display:none;
}
.flexslider .slides h2 {padding:15px 0;}

.slides h2 a {
color: #cc0000;
font-size: 16px;
}
.slides h2 a:hover {
color: #FFC600;
}



.spicytricks-related-posts{clear:both;overflow:hidden;}
.spicytricks-related-posts h3{
margin-bottom: 10px;
padding-bottom: 10px;
 }
.avatarImage {margin: 0 0 0 -40px}

.avatarImage .avatarRound{margin: 0 0 0 -30px}

/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}

/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;margin-right:36px;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; height:100%;margin:0;display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider {margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}

.carousel li {margin-right: 5px}



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

23 de jan. de 2014

Como baixar vídeos do Facebook

Nenhum comentário:
O Facebook, a meu ver, é a rede social mais completa, viciante e a que melhor compartilha conteúdo. De textos a links,  de vídeos a fotos o site veio e se estabeleceu em todo o nicho, em todas as classes e idades. Muitas vezes vemos conteúdos e gostaríamos de compartilha-los e muitas vezes essa opção não é disponibilizada, outrora queremos mesmo guardar alguma foto ou vídeo que por lá circula, então não sabemos como faze-lo. Para tanto, resolvi escrever este post, para mais uma vez ajuda-los e também não me esquecer dessa ferramenta.

Se você assistiu a um vídeo no Facebook e gostaria de guarda-lo em seu pc, saiba que é possível.  Para isso,  comece dando um clique em cima do vídeo que quer baixar, com o botão direito do esquerdo. Assim que abrir a nova janela, copie todo o código da barra de endereço.





Agora entre no site FB Download e cole o endereço no local indicado e depois clique em Baixar..




Aguarde...


Em pouco tempo, a página ficará assim. 

Clique em Download do vídeo em Alta Qualidade.

 
 Pronto, ao abrir a próxima janela, clique  em cima do vídeo com o botão direito do mouse  e depois clique em Salvar vídeo como... Pronto, já está em seu pc, basta agora dar a ele o destino desejado.







12 de jan. de 2014

Retirar navebar, links de área de atribuição e feed dos modelos do Blogger

3 comentários:


Eu gosto bastante dos modelos de template que veem junto ao Blogger, mas sinto que há certos elementos passando em seu código. Há pelo menos três desses elementos que sempre retiro quando faço modelos novos, que são a barra de navegação, as atribuições que veem no footer e aquele pequeno link de feeds que encontramos logo após a área de postagens.
Acho-os todos, desnecessários e feios. Se você quer dar um ar mais profissional em seu blog, é necessário retira-los pois além de estarem em locais indesejáveis. eles são pouco customizáveis. Com um pequeno código inserido na área de personalização, é possível fazer isso com facilidade.



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.




#navbar, .feed-links, #Attribution1{display:none}


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

Sroller do template colorido

Nenhum comentário:


Scroller ou scroll é a barra de rolagem que aparece nos blogs e sites para que façamos a navegação na vertical, muito embora existam os que façam também na horizontal.  Nos navegadores que aceitam CSS é possível dar um charme a mais ao layout de seu blog, dando integração e leveza ao template. Pura estética, mas que ajuda a deixar o template mais bonito. A máxima sempre vale, a de que Deus reside nos detalhes.

De fácil instalação, basta copiar o código e colar na parte de personalização do Blogger.




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.




/*SCROLL BAR*/
::-webkit-scrollbar {
width:8px;
height:8px;
}
::-webkit-scrollbar-track {
background:#FFF;
-webkit-box-shadow:inset 1px 1px 2px #E0E0E0;
border:1px solid #D8D8D8;
}
::-webkit-scrollbar-thumb {
background:#F78121; /*Cor do botão */
-webkit-box-shadow:inset 1px 1px 2px rgba(155,155,155,0.4);
}
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow:inset 1px 1px 10px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb:active {
background:#888;
-webkit-box-shadow:inset 1px 1px 2px rgba(0,0,0,0.3);
}



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

10 de jan. de 2014

Breadcrumb com css

Nenhum comentário:



O que todos os blogueiros querem, em qualquer  nicho que estejam é ter leitores e que os leitores permaneçam em seu blog o maior tempo possível. É interessante que você tenha a maior interatividade em seu blog para que ao ler um post, a curiosidade de seu leitor para outros posts seja aguçada assim seu leitor de um post passe a outro, e depois a outro, assim sucessivamente tornando seu blog mais acessado e aberto por mais tempo.
O breadcrumb é um bom recurso para isso pois traz em evidência os marcadores das postagens em sintonia com o post que seu leitor estiver, portanto, ajuda na navegação de seu blog. Siga o passo a passo e instale o menu de navegação em 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

  <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>





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

<!--Start Breadcrumbs code, get at http://htmlmaker.blogspot.com-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumb' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span class='crumbs'>
<span class='crust' typeof='v:Breadcrumb'>
<a class='crumb' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'><span itemprop='title'>Home</span></a>
<span class='arrow'><span>&gt;</span></span>
</span>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
<span class='crust' typeof='v:Breadcrumb'>
<a class='crumb' expr:href='data:label.url' property='v:title' rel='v:url'><span itemprop='title'><data:label.name/></span></a>
<span class='arrow'><span>&gt;</span></span>
</span>
</b:if>
</b:loop>
<b:else/>
Untagged
</b:if>
</b:loop>
<span class='crust'>
<a class='crumb' expr:href='data:post.url'><span><data:post.title/></span></a>
<span class='arrow'><span/></span>
</span>
</span>
</div>
   <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumb' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span class='crumbs'>
<span class='crust' typeof='v:Breadcrumb'>
<a class='crumb' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'><span itemprop='title'>Home</span></a>
<span class='arrow'><span>&gt;</span></span></span> <span class='crust' typeof='v:Breadcrumb'>
<a class='crumb' expr:href='data:blog.url' property='v:title' rel='v:url'><span itemprop='title'>Archives for <data:blog.pageName/></span></a>
<span class='arrow'><span/></span></span>
</span></div>
   <b:else/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <b:if cond='data:blog.pageName == &quot;&quot;'>
      <b:else/>
<div class='breadcrumb' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span class='crumbs'>
<span class='crust' typeof='v:Breadcrumb'>
<a class='crumb' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'><span itemprop='title'>Home</span></a>
<span class='arrow'><span>&gt;</span></span></span> <span class='crust' typeof='v:Breadcrumb'>
        <a class='crumb' expr:href='data:blog.url' property='v:title' rel='v:url'><span itemprop='title'>Posts tagged <data:blog.pageName/></span></a><span class='arrow'><span/></span></span>
</span>
       </div>
     </b:if>
</b:if>
</b:if>
</b:if>
<!--End Breadcrumbs code, get at http://htmlmaker.blogspot.com-->


Salve. Agora vamos implementar o estilo.

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.




/* Start CSS breadcrumb by Howeblog - http://htmlmaker.blogspot.com*/
.breadcrumb {
background: #F7F7F7;
border: 1px solid #E6E6E6;
box-shadow: 0 2px 3px #B5B5B5;
border-bottom:none;
width: 720px;
margin: 5px;
font-size: 9px;
text-transform:uppercase;
overflow: hidden;
}
.breadcrumb a, .breadcrumb a:visited {
    color: #848484;
    font-family: Oswald;
}
.breadcrumb .boardTitle {
    display: none;
}
.breadcrumb .crust {
    display: block;
    float: left;
    position: relative;
}
.breadcrumb .crust a.crumb {
    background-color: #EDEDED;
    display: block;
    height: 24px;
    line-height: 24px;
    margin-bottom: -1px;
    outline: 0 none;
    padding: 0 10px 0 18px;
    text-decoration: none;
}
.breadcrumb .crust:first-child a.crumb {
    padding-left: 10px;
}
.breadcrumb .crust:last-child a.crumb {
    background-color: #D9D7D7;
    font-weight: bold;
}
.breadcrumb .crust:last-child .arrow span {
    border-left-color: #D9D7D7 !important;
}
.breadcrumb .crust .arrow {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent black transparent #BBBBBB;
    border-image: none;
    border-style: solid none solid solid;
    border-width: 12px 1px 12px 12px;
    display: block;
    height: 0;
    position: absolute;
    right: -12px;
    top: 0;
    width: 0;
    z-index: 5;
}
.breadcrumb .crust .arrow span {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent black transparent #EDEDED;
    border-image: none;
    border-style: solid none solid solid;
    border-width: 12px 1px 12px 12px;
    display: block;
    height: 0;
    left: -13px;
    overflow: hidden;
    position: absolute;
    text-indent: 9999px;
    top: -12px;
    white-space: nowrap;
    width: 0;
    z-index: 6;
}
.breadcrumb .crust:hover a.crumb {
    background-color: #D9D7D7;
    color: #3C3C3C;
}
.breadcrumb .crust:hover .arrow span {
    border-left-color: #D9D7D7;
} /* End CSS breadcrumb by Howeblog - http://htmlmaker.blogspot.com*/




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




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