Postagens Recentes

28 de dez. de 2010

Menu em abas para widget no Blogger

5 comentários:
Outra forma de instalar o menu em abas em seu Blogger.


 DEMO

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. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI




Vá até o HTML de seu blog e troque:

]]></b:skin>

pelo código abaixo(ajuste a largura indicado na cor vermelha)


/* Tabs
----------------------------------------------- */
#tabs {
    width: 370px !important;
    height: auto !important;
        margin: 2px 0px 6px 8px;
    padding: 5px 9px 5px -2px;
    border: 1px solid #ddd;
    float: left;
    display: block;
    background: #eee;
}
#tabs h2 {
    display: none;
}
.inside {
    width: 348px !important;
    padding: 5px 5px 10px 5px!important;
    border: 1px solid #ddd !important;
    margin: 5px 4px 10px !important;
    background: #FFF;
}
ul.wooTabs {
    width: 100%;
    padding: 0 0 20px 6px;
}
ul.wooTabs li {
    float: left;
    display: inline;
    font-size: 11px;
    line-height: 14px;
    background: #fff;
    color: #000;
    border: 1px solid #ddd;
    font-weight: bold;
    margin: 0 2px 0 0px !important;
    cursor: pointer;
}
ul.wooTabs li a {
    line-height: 31px;
    color: #000 !important;
    display: block;
    float: left;
    padding: 0 6px;
}
ul.wooTabs li a.selected, ul.wooTabs li a:hover {
    text-decoration: none;
    color: #fff !important;
    background: #C00;
}
#tagcloud {
    padding: 10px;
}
#sub img {
    float: right;
    margin: 0 0 8px 8px;
}
.inside li {
    background: ;
    border-bottom: 1px solid #EEE;
    padding: 8px 0 0 2px;
    margin: 0 0 0 -30px;
        list-style-type: none;
}
.inside li img.avatar, .inside li img.thumbnail {
    border: 1px solid #ddd;
    padding: 3px;
    float: left;
    margin: 0 8px 0 0;
    background: #fff;
}


]]></b:skin>

<!-- tabs -->          
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2-vsdoc2.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){

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

       jQuery('.inside ul li:last-child').css('border-bottom','0px') // remove last border-bottom from list in tab conten
       jQuery('.wooTabs').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('.wooTabs 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>

 


Agora acima de:

 <div id='sidebar-wrapper'>

Cole o código abaixo. (Note que para as abas funcionarem os elementos precisam corresponder a grafia no endereço, no id e no class. Fiz esse esqueminha de cores para vc entender)


<div id='tabs'>
<ul class='wooTabs tabs'>
<li><a href='#pop'>Popular </a></li>
<li><a href='#perfil'>Perfil </a></li>
<li><a href='#feed'>Feed </a></li>
<li><a href='#marcadores'>Marcadores </a></li>
<li><a href='#seguidores'>Seguir </a></li>
</ul>  
      
<div class='fix'/>
<div class='inside'>

<div id='pop'>
<b:section class='pop' id='pop' maxwidgets='1'>
<b:widget id='PopularPosts2' locked='true' title='Postagens populares' type='PopularPosts'/>
</b:section></div>

<div id='perfil'>
<b:section class='perfil' id='perfil' maxwidgets='1'>
<b:widget id='Profile1' locked='true' title='Quem sou eu' type='Profile'/>
</b:section></div>

<div id='feed'> 
<b:section class='feed' id='feed' maxwidgets='1'>
<b:widget id='Subscribe1' locked='true' title='Inscrever-se' type='Subscribe'/>
</b:section></div>

<div id='marcadores'>
<b:section class='marcadores' id='marcadores' maxwidgets='1'>
<b:widget id='Label1' locked='true' title='Labels' type='Label'/>
</b:section></div>
       
<div id='seguidores'>
<b:section class='seguidores' id='seguidores' maxwidgets='1'>
<b:widget id='Followers1' locked='true' title='Seguir' type='Followers'/>
</b:section>
</div>

</div></div>
<div class='fix' style='height:15px !important;'/>
<!-- TABS END -->

Menu social com efeito jquery

4 comentários:
Encontrei esse código no blog da Gema e achei melhor fazer dele um menu social, mas ele pode ser adaptado para fotos também, fica excelente.

 DEMO



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. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI
Primeiro, no HTML de seu blog procure por:

]]></b:skin>

Agora o substitua por todo o código abaixo.


/* Menu social-----------------------------------------------*/
#menu-pro1{margin: -10px 0 0 0;
}
div.sc_menu_wrapper {
position: relative;
height: 250px; /* modifique o número para diminuir a altura */
width: 120px; /* modifique o número para modificar a largura */
margin-top: 10px;
overflow: auto;
}
div.sc_menu {
padding: 15px 0;
}
.sc_menu a {
display: block;
margin-bottom: 5px;
width: 114px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;

/* color y fondo efecto hover */
color: #fff;

}
.sc_menu a:hover {
background: #fff;
}
.sc_menu img {
display: block;
border: none;
}
.sc_menu_wrapper .loading { /* estilos de carga */
position: absolute;
top: 20px;
left: 10px;
margin: 0 auto;
padding: 10px;
width: 100px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
text-align: center;
color: #fff;
border: 1px solid #63B0B4;
background: #022A4A;
}
.sc_menu_tooltip { /* estilos tooltip */
display: block;
position: absolute;
padding: 6px;
font-size: 12px;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid rgb(79, 79, 79);
background: #08044E;
}

]]></b:skin>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>
<script type='text/javascript'>/*<![CDATA[*/

function makeScrollable(wrapper, scrollable){
    // Get jQuery elements
    var wrapper = $(wrapper), scrollable = $(scrollable);
  
    // Hide images until they are not loaded
    scrollable.hide();
    var loading = $('<div class="loading">Carregando...</div>').appendTo(wrapper);
   
    // Set function that will check if all images are loaded
    var interval = setInterval(function(){
        var images = scrollable.find('img');
        var completed = 0;
       
        // Counts number of images that are succesfully loaded
        images.each(function(){
            if (this.complete) completed++;   
        });
       
        if (completed == images.length){
            clearInterval(interval);
            // Timeout added to fix problem with Chrome
            setTimeout(function(){
               
                loading.hide();
                // Remove scrollbars   
                wrapper.css({overflow: 'hidden'});                       
               
                scrollable.slideDown('slow', function(){
                    enable();   
                });                   
            }, 1000);   
        }
    }, 100);
   
    function enable(){
        // height of area at the top at bottom, that don't respond to mousemove
        var inactiveMargin = 99;                   
        // Cache for performance
        var wrapperWidth = wrapper.width();
        var wrapperHeight = wrapper.height();
        // Using outer height to include padding too
        var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
        // Do not cache wrapperOffset, because it can change when user resizes window
        // We could use onresize event, but it's just not worth doing that
        // var wrapperOffset = wrapper.offset();
       
        // Create a invisible tooltip
        var tooltip = $('<div class="sc_menu_tooltip"></div>')
            .css('opacity', 0)
            .appendTo(wrapper);
   
        // Save menu titles
        scrollable.find('a').each(function(){               
            $(this).data('tooltipText', this.title);               
        });
       
        // Remove default tooltip
        scrollable.find('a').removeAttr('title');       
        // Remove default tooltip in IE
        scrollable.find('img').removeAttr('alt');   
       
        var lastTarget;
        //When user move mouse over menu           
        wrapper.mousemove(function(e){
            // Save target
            lastTarget = e.target;

            var wrapperOffset = wrapper.offset();
       
            var tooltipLeft = e.pageX - wrapperOffset.left;
            // Do not let tooltip to move out of menu.
            // Because overflow is set to hidden, we will not be able too see it
            tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); //tooltip.outerWidth());
           
            var tooltipTop = e.pageY - wrapperOffset.top + wrapper.scrollTop() - 40;
            // Move tooltip under the mouse when we are in the higher part of the menu
            if (e.pageY - wrapperOffset.top < wrapperHeight/2){
                tooltipTop += 80;
            }               
            tooltip.css({top: tooltipTop, left: tooltipLeft});               
           
            // Scroll menu
            var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
            if (top < 0){
                top = 0;
            }           
            wrapper.scrollTop(top);
        });
       
        // Setting interval helps solving perfomance problems in IE
        var interval = setInterval(function(){
            if (!lastTarget) return;   
                                       
            var currentText = tooltip.text();
           
            if (lastTarget.nodeName == 'IMG'){                   
                // We've attached data to a link, not image
                var newText = $(lastTarget).parent().data('tooltipText');

                // Show tooltip with the new text
                if (currentText != newText) {
                    tooltip
                        .stop(true)
                        .css('opacity', 0)   
                        .text(newText)
                        .animate({opacity: 1}, 1000);
                }                   
            }
        }, 200);
       
        // Hide tooltip when leaving menu
        wrapper.mouseleave(function(){
            lastTarget = false;
            tooltip.stop(true).css('opacity', 0).text('');
        });           
       
        /*
        //Usage of hover event resulted in performance problems
        scrollable.find('a').hover(function(){
            tooltip
                .stop()
                .css('opacity', 0)
                .text($(this).data('tooltipText'))
                .animate({opacity: 1}, 1000);
   
        }, function(){
            tooltip
                .stop()
                .animate({opacity: 0}, 300);
        });
        */           
    }
}
   
$(function(){   
    makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});
/*]]>*/</script>

 


Agora procure por:

<div id='main-wrapper'>

E cole antes dele este código abaixo, trocando no local indicado pelo endereço de suas páginas sociais.


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='sc_menu_wrapper'>
<div class='sc_menu'>
<a href='https://www.google.com/accounts/Login?service=blogger' title='Login'><img alt='' height='120px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf2ajclVlOoSPu3QS5gZezS3iVrhWYxpc9Taic8BDMdjmSKhuEZ2wxC79ZXvqR9oMZsGReNPajvgl_SYhdHDPe9GU4AB7r41HPaDzFtyyoCu46RONnEKSnoAQTDRsgzoPp442hvmZRsG0/s1600/blogger-webtreats.pn' width='115px'/></a>

<a href='ENDEREÇO DO FACEBOOK' title='Encontre-me no Facebook'><img alt='' height='120px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7moxanX8yFd6wIhDfXxpQjfySIsQCqGL8EkyvwhiWihl_L1TgXX25X8DLgNYel8ZqgQzkUZha7l-Vf34AeGR_rg9KnOYNo8G5e5KJ9r-QvGg1jJz11zml245bHUQofl9wkuFEDt4EnCo/s1600/facebook-logo-webtreats.png' width='115px'/></a>

<a href='ENDEREÇO DO TWITTER' title='Siga-me'><img alt='' height='120px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAy-Aw3bdlI2YRxe-H4o6TyNjIdj3HOcv_wOZuUlWNGgA7A3RUVZ4ejO_rLwaW1RKMWF0oljaXV7GSFlMUaiaKJe2Cnx-qlwZkSjQ45XyjEn0uzLGmRx9sdlUmxAxqMSlsGGCnGH5GnTE/s1600/twitter-bird3-webtreats.png' width='135px'/></a>

<a href='ENDEREÇO DO YOUTUBE' title='Assista ao meu canal'><img alt='' height='120px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim8Gdm78pAYx0iakkcdtBzQi9ocwXYj_dl3TYA-rZIA9xI1fJbLhOXsrO0gn9GgVIMMGhitNaQ1DwZYRdmSXMDVeDll7KFrCSz3f2Fv5MP68gbGAbDrmA0_G_uxhYEZc71YY_QICm2jxE/s1600/you-tube1-webtreats.png' width='115px'/></a>

<a href='ENDEREÇO DO FLICKER' title='Minhas imagens'><img alt='' height='120px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRCNAWAsuxRMeGHdS11hONSy_XWc_l5snpDJd-w19I_jvmUebpK2VaVgzzu777Q9s2Bw_qeR3ojEZj7USYMk8XsSsp0AoNJf1exw17QsZu4CCJa0-ZUZPBOsP2L8C8jn6KplVaG1tkVfs/s1600/flickr-webtreats.png' width='115px'/></a>

<a href='ENDEREÇO DO DIGG' title='Digg'><img alt='' height='120px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeTtJfaS2_HbY96uaqg-5VBU8jk7DvtYESAw3jJOKbHbUAKyhj8CHETHk7GYv5INy9V_TmjYHBOMYAoO6SlLVgM4zGaj4amgIE4w6npXru9ecgdTtNDXGVIDRP4CFKkBGZdhW8DLMimAg/s1600/digg-logo-webtreats.png' width='115px'/></a>

<a href='ENDEREÇO DO ORKUT' title='Encontre-me no Orkut'><img alt='' height='120px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1fmIvJa0lF_gzeHISDMs0HJl_I9az9Ky38WqTQhEzJqKxzBm02ZHJVC7aVC75w4yAF1zqBwaO3_ptA7HYgF1liiTBi8gse8fRSIGnQibr9FHXrXhJ4nOC_YjHB-vkjRCGFk8ASTMSt_Q/s1600/orkut-webtreats.png' width='115px'/></a>

<a href='ENDEREÇO DO FEED' title='Assine'><img alt='' height='120px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzxfSGfeusvnKGNHDgLqErS2a83dSWBGAMDQ4WbqrE7E1posP61hL3I0GejLiyNMK0bKcKTMXnM8s_oToWFPYg8kcaw4PvDn3vedywUT0mWJEf3ONrMqsx0IOCaOr4Amvu5SupjHlCC8g/s1600/rss-basic-webtreats.png' width='115px'/></a>


</div></div>
</b:if>
</b:if>

Slide para o Blogger

4 comentários:
Mais um slide para instalar no Blogger. Veja o demo para ver se gosta.

 DEMO






Já sabe, vá até o HTML de seu blog e proure por:
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. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI

]]></b:skin>
Troque-o então por todo este código abaixo

.
/* Slide
----------------------------------------------- */
#slider-holder {
    position: relative;
    height: 300px;/*altura do slide*/
    width: 600px;/*largura do slide*/
    margin-bottom: 30px;
    overflow: hidden;
    color: #fff;
    background: #808080;
}
#slider-holder .slide {
    position: absolute;
    top: 0;
    left: 600px;
    z-index: 1;
    height: 300px;/*altura do slide*/
    width: 600px;/*largura do slide*/
    overflow: hidden;
    background: #808080;
}
#slider-holder .slide-1 {
    display: block;
    left: 0;
    top: 0;
}
#slider-holder .slide a {
    display: block;
}
#slider-holder .slide img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
#slider-holder  img.full-mask {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: inline;
}
#slider-holder .slide-content {
    position: absolute;
    top: 300px;
    left: 0;
    height: 400px;
text-align: center;
    width: 620px;
    background: #000;/*cor tarja*/
    padding: -10px 10px 0 50px;
    z-index: 999;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
}
#slider-holder .slider-left, #slider-holder .slider-right {
    position: absolute;
    cursor: pointer;
    height: 350px;
    width: 120px;
    z-index: 999;
    display: block;
    color: white;
}
#slider-holder .slider-left {
    left: -30px;
    top: -48px;
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg15eDN5QINeWwLu5zlocjCiJm7z4Xt2dDDbtyUdtGPg0Adipz9DZ5JPKbirX6ubmH97FBnQuj1kDnbN9BeukrJvDa1lIdaGoEEBRQdImGMnLkp3Yr9loqQAscpB5WmGwqa79dfPAYGMMU/s1600/esquerda2.png') no-repeat center bottom;
}
#slider-holder .slider-right {
    right: -30px;
    top: -48px;
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNBrNyXSNQWU1gy7WEcrcpwA6OITFTb8f9s7AU46WXxM-wJ2hV6Asyaq91esSADwZDohQrnpG2WxfXHuaVeajdkU0jZzmwVgdQY9myfQhZDL2H0A1WSyvYbhkopcRVK9X15mzSaEyJPUc/s1600/direita1.png') no-repeat center bottom;
}

.slider-shelf {
    z-index: 999;
    background: #ccc;
    position: absolute;
    top: 0;
    width: 400px;
    overflow: visible;
}

]]></b:skin>

<!-- SLIDE -->
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2-vsdoc2.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){
  
    // You can edit the Sldier animation her
    var slide_fade = false;
    var content_fade = false;
    var padding_offset = 20; // Adjust for slider content -popup

    // --- CORE ---  
    var counter = 0;
    var amount_of_slides = jQuery('#slider-holder .slide').length;

    var rel_left = amount_of_slides;
    var slider_tracker = 1;
    var rel_right = 2;
    var slider_height = jQuery('#slider-holder').height();
    var slider_width = jQuery('#slider-holder').width();
   

    jQuery('#slider-nav .slider-left').attr('rel',rel_left);     //Setup
    jQuery('#slider-nav .slider-right').attr('rel',rel_right);
   // jQuery('#slider-holder .slide-1').css('opacity',1);
   
    // --- CORE END ---
   
    if(amount_of_slides == 1)
    {
       jQuery('#slider-holder .slider-shelf').add('#slider-holder #slider-nav').add('#slider-holder .shelf-content').add('#slider-holder .clicker').hide();  
      
    }
    else
    {
    var shelf_height = jQuery('#slider-holder .shelf-content').height();
    shelf_height = shelf_height + 8

    jQuery('#slider-holder .slider-shelf').css('opacity',0.9);
    jQuery('#slider-holder .clicker').css('opacity',0.9);
    jQuery('#slider-holder .shelf-content img').css('opacity',0.3);
    jQuery('#slider-holder .slider-shelf').css('height',shelf_height);
   
    var shelf =   jQuery('#slider-holder .slider-shelf').add('#slider-holder .shelf-content');
 
    shelf.css('top',shelf_height * -1);
   
    var flip = 1;
    jQuery('#slider-holder .clicker').click(function(){
   
        flip++;
        if(flip%2 == 0)
        {
          shelf.animate({top:0},300);
          jQuery(this).animate({top:shelf_height},300);
          jQuery('#slider-nav .slider-right').add('#slider-nav .slider-left').fadeOut(100);
       }
        else
        {
            shelf.animate({top:shelf_height * -1 },300);
            jQuery(this).animate({top:0},300);
            jQuery('#slider-nav .slider-right').add('#slider-nav .slider-left').fadeIn(400).attr('style','');
           
        }
       
    });
   
    jQuery('#slider-holder .shelf-content img').hover(function(){
        jQuery(this).stop().animate({ opacity:1});
        var title = jQuery(this).parent('span').attr('title');
        jQuery('#slider-holder .shelf-title').html(title);
       
    },function(){
        jQuery(this).stop().animate({ opacity:0.3})
        jQuery('#slider-holder .shelf-title').html('');
    });
   
    jQuery('#slider-holder .shelf-content span').click(function(){
        var shelf_rel = jQuery(this).attr('class');
    });
   
    jQuery('#slider-holder .shelf-content img').click(function(){
        var shelf_click = jQuery(this).parent('span').attr('class');

        var i = 0;
        var dif = shelf_click - slider_tracker;
       
        if (dif > 0){
            while(i < dif) {
                 jQuery('#slider-nav .slider-right').click();
                 i++;
            }
        }
        if (dif < 0){
             while(i > dif) {
                    
                     jQuery('#slider-nav .slider-left').click();
                    i--;
            }
        }
    })
   
    }
              
 // --- CORE ---
    jQuery('#slider-holder .slide-content-1').css('opacity','0').show(); // Crappy hack
    var content_height = jQuery('#slider-holder .slide-content-height-1').height();
    jQuery('#slider-holder .slide-content-1').hide().attr('style',''); //Crappy hack
    var cut_from_top = (slider_height - padding_offset) - content_height;
    if(content_fade == false) {
        jQuery('#slider-holder .slide-content-1').show().css({'opacity' : '0', 'top' : slider_height + 'px'}); //Set initial slider content
        jQuery('#slider-holder .slide-content-1').animate({ 'top':cut_from_top,opacity:0.8},1000);
    } else {
        jQuery('#slider-holder .slide-content-1').show().css({'opacity' : '0', 'top' : cut_from_top + 'px'}); //Set initial slider content
        jQuery('#slider-holder .slide-content-1').animate({opacity:0.8},1000);
    }

    jQuery('#slider-holder .slider-left')
        .add('#slider-holder .slider-right')
        .css('opacity',0.6);// Navigation Animation LEFT & RIGHT
  
    jQuery('#slider-holder .slider-left')
        .add('#slider-holder .slider-right')
        .hover(function(){ jQuery(this).animate({ opacity:1} , 200)},
               function(){ jQuery(this).animate({ opacity:0.6 }, 400); });
                   
    if(amount_of_slides > 1){
    //Amount of slide check
    var t;
    var timeout = 6000;
    function click_do(){
        t = setTimeout(function(){
            jQuery('#slider-nav .slider-right').click();
            click_do();
        },timeout);
    }
    click_do();
   
// CLICK FUNCTION - FORWARD
    jQuery('#slider-nav .slider-right').click(function(evt){ 
       
        clearTimeout(t);
        counter = counter + 2;
 
        var target_slide = jQuery(this).attr('rel'); // Lock in on what slide is next
        var content_height = jQuery('#slider-holder .slide-content-height-' + target_slide).height();         //Slider Content Animation
        var cut_from_top = (slider_height - padding_offset) - content_height;
       
        if(content_fade == false) {
        jQuery('#slider-holder .slide-content-' + target_slide)
            .css({'z-index' : counter, 'opacity' : '0', 'top' : slider_height + 'px'});   //Prep Slider Content
            } else {
        jQuery('#slider-holder .slide-content-' + target_slide)
            .css({'z-index' : counter, 'opacity' : '0', 'top' : cut_from_top + 'px'});   //Prep Slider Content
        }
      

        if(slide_fade == false){
        jQuery('#slider-holder .slide-' + target_slide)

            .css({'opacity' : '0', 'z-index' : counter, 'left' : slider_width + 'px'})
            .animate({ 'left' : '0px', opacity:1 },500,"linear", content_stuff ); //Prep , animate and call callback for slider_content
        } else {
        jQuery('#slider-holder .slide-' + target_slide)
            .css({'opacity' : '0', 'z-index' : counter})
            .animate({ opacity:1 },500,"linear", content_stuff ); //Prep , animate and call callback for slider_content
            }

        function content_stuff(){
        jQuery('#slider-holder .slide-' + target_slide).attr('style','').css({'z-index' : counter, 'left' :  '0px'})
            if(content_fade == false){
                jQuery('#slider-holder .slide-content-' + target_slide).animate({ 'top':cut_from_top,opacity:0.8},1000);
            } else {
                jQuery('#slider-holder .slide-content-' + target_slide).animate({opacity:0.8},1000);
            }
        }
       
        slider_tracker++; rel_left++; rel_right++;        // Clocks

       if(rel_left > amount_of_slides){rel_left = 1;}         // Clock Statements 
       if(rel_right > amount_of_slides){rel_right = 1;}
       if(slider_tracker > amount_of_slides){slider_tracker = 1;}
      
        jQuery('#slider-nav .slider-left').attr('rel',rel_left);        //Assign Values, Save action
        jQuery('#slider-nav .slider-right').attr('rel',rel_right);
       
        evt.preventDefault();         //Prevent Click Default Action

        // ----- CORE END ------------
      
       //Daily Edition Dots Tracking
        jQuery('.slider-dots span').fadeTo(200, 0.2);
        jQuery('.slider-dots span.dot-' + slider_tracker).fadeTo(200, 1);
       
    });

   
//  CLICK FUNCTIONS - REVERSE------------------------------

    jQuery('#slider-nav .slider-left').click(function(evt){
   
        clearTimeout(t);
        counter = counter + 2;
       
        var target_slide = jQuery(this).attr('rel'); // Lock in on what slide is next
        var content_height = jQuery('#slider-holder .slide-content-height-' + target_slide).height();         //Slider Content Animation
        var cut_from_top = (slider_height - padding_offset) - content_height;
        jQuery('#slider-holder .slide-content-' + rel_left).css({'top' : slider_height + 'px','left' : '0px', 'opacity'  : 0});
        jQuery('#slider-holder .slide-' + target_slide).attr('style','').css({'z-index' : counter-1, 'left' :  '0px'})    
       
        if(content_fade == false) {
        jQuery('#slider-holder .slide-content-' + slider_tracker)
            .css({'z-index' : counter, 'opacity' : 0, 'top' : slider_height + 'px'});   //Prep Slider Content
            } else {
        jQuery('#slider-holder .slide-content-' + target_slide)
            .css({'z-index' : counter, 'opacity' : 0, 'top' : cut_from_top + 'px'});   //Prep Slider Content
        }
           
        if(slide_fade == false){
        jQuery('#slider-holder .slide-' + slider_tracker)
            .css({'opacity' : 1, 'z-index' : counter, 'left' : '0px'})
            .animate({ 'left': slider_width + 'px', opacity:0 }, 500,"linear", content_stuff_alt ); //Prep , animate and call callback for slider_content
        } else {
        jQuery('#slider-holder .slide-' + target_slide)
            .css({'opacity' : '0', 'z-index' : counter})
            .animate({ opacity:1 },500,"linear", content_stuff_alt ); //Prep , animate and call callback for slider_content
            }

        function content_stuff_alt(){

            if(content_fade == false){
               
            //jQuery('#slider-holder .slide-' + target_slide).attr('style','').css({'z-index' : counter, 'left' :  '0px'})
                jQuery('#slider-holder .slide-content-' + target_slide).animate({ 'top':cut_from_top,opacity:0.8},1000);
            } else {
                jQuery('#slider-holder .slide-content-' + target_slide).animate({opacity:0.8},1000);
            }
        }

        slider_tracker--; rel_left--; rel_right--;     // Clocks

       if(rel_left < 1){rel_left = amount_of_slides;}          // Clock Statements
       if(rel_right < 1){rel_right = amount_of_slides;}
       if(slider_tracker < 1){slider_tracker = amount_of_slides;}

        jQuery('#slider-nav .slider-left').attr('rel',rel_left);        //Assign Values, Save action
        jQuery('#slider-nav .slider-right').attr('rel',rel_right);
       
        evt.preventDefault(); //Prevent Click Default Action
       
        //Daily Edition Dots Tracking
        jQuery('.slider-dots span').fadeTo(200, 0.2);
        jQuery('.slider-dots span.dot-' + slider_tracker).fadeTo(200, 1);
       

    });

    }// End amount of slide check
   
})
//]]>
</script>



Agora depois de:

<div id='main-wrapper'>

Cole este próximo código, fazendo as modificações necessárias.


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='slider-holder'>
<div class='slider-shelf'/>
<span class='clicker'>Featured Stories</span>
<div class='shelf-content'>
<div class='shelf-title'/>
</div>

<!-- SLIDE -->
<div class='slide slide-1'>
<a class='open' href='ENDEREÇO 1' title='BLA, BLA, BLA 1'><img alt='TÍTULO 1' class='slider-img' height='270' src='ENDEREÇO DA IMAGEM 1' width='595'/></a> 
        <div class='slide-content slide-content-1'>
            <div class='slide-content-height-1'>
                <h3>TITULO 1</h3>
                <p>INSCRIÇÃO 1</p>

            </div></div></div>
  
<div class='slide slide-2'>
<a class='open' href='ENDEREÇO 2' title='BLA, BLA, BLA 2'><img alt='TÍTULO 2' class='slider-img' height='270' src='ENDEREÇO DA IMAGEM 2' width='595'/></a>  
        <div class='slide-content slide-content-1'>
            <div class='slide-content-height-1'>
                <h3>TITULO 2</h3>
                <p>INSCRIÇÃO 2</p>

        </div></div></div>
   
<div class='slide slide-3'>
<a class='open' href='ENDEREÇO 3' title='BLA, BLA, BLA 3'><img alt='TÍTULO 3' class='slider-img' height='270' src='ENDEREÇO DA IMAGEM 3' width='595'/></a>  
        <div class='slide-content slide-content-1'>
            <div class='slide-content-height-1'>
                <h3>TITULO 3</h3>
                <p>INSCRIÇÃO 3</p>

            </div></div></div>
   
<div class='slide slide-4'>
<a class='open' href='ENDEREÇO 4' title='BLA, BLA, BLA 4'><img alt='TÍTULO 4' class='slider-img' height='270' src='ENDEREÇO DA IMAGEM 4' width='595'/></a>  
        <div class='slide-content slide-content-1'>
            <div class='slide-content-height-1'>
                <h3>TITULO 4</h3>
                <p>INSCRIÇÃO 4</p>

          </div></div></div>

<div class='slide slide-5'>
<a class='open' href='ENDEREÇO 5' title='BLA, BLA, BLA 5'><img alt='TÍTULO 5' class='slider-img' height='270' src='ENDEREÇO DA IMAGEM 5' width='595'/></a>  
        <div class='slide-content slide-content-1'>
            <div class='slide-content-height-1'>
                <h3>TITULO 5</h3>
                <p>INSCRIÇÃO 5</p>

          </div></div></div>
   
<div id='slider-nav'>
<span class='slider-left'/>
<span class='slider-right'/>
</div>
</div></b:if>

Template Clean 2

6 comentários:
Template com 2 colunas, slide, menu com sub-menu, menu em abas, menu no footer e leia mais.


DEMO/PEGAR CÓDIGO



Para habilitar o menu superior

Procure por:
<!-- MENU SUPERIOR -->

abaixo dele faça as modificações como mostra a imagem


Para habilitar o menu social

Procure por:

<!-- MENU SOCIAL -->

E faça as modificações necessárias



Para habilitar o slide

Procure por:
<!-- SLIDE -->

E modifique colocando o link, título e imagens de sua preferência. (preste bastante atenção ao trocar o endereço das imagens, cuidado para não apagar as aspas. Note que começa com http:// e termina com jpg )



Para habilitar o menu no footer

Procure por:

<!-- MENU INFERIOR -->

E faça as modificações como se pede


27 de dez. de 2010

Template Arco-iris

3 comentários:
Template com 2 colunas nas páginas internas e menu em abas com efeito j.query. Na página inicial slide, menu social com efeito j.query, e posts resumidos.




Para habilitar o menu social procure por:

<div id='menu-social'>


Então você verá um pouco abaixo para trocar os endereços de suas páginas sociais.




Galeria de imagens no Blogger

12 comentários:
Faça uma galeria de imagens para colocar em seu blog.



Vá até o HTML de seu blog e procure por :


]]></b:skin>

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. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI
Acima dele cole o código abaixo.


/* Gallery styles-------------------------------------- */

#gallery{
-moz-box-shadow:0 0 3px #AAAAAA;
-webkit-box-shadow:0 0 3px #AAAAAA;
box-shadow:0 0 3px #AAAAAA;
-moz-border-radius-bottomleft:4px;
-webkit-border-bottom-left-radius:4px;
border-bottom-left-radius:4px;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
border:1px solid white;
background:#FEDEEF;/*cor de fundo do slide menor*/
width:540px;
margin: 2px 3px 1px 8px;
border: 2px dotted #F672B6;
overflow:hidden;
}
#slides{
height:350px;
width:920px;
overflow:hidden;
}
.slide{
float:left;
}
#menu{
height:60px;
}
ul#gal{
margin:0px;
padding:0px;
}
#gal li{
width:57px;
display:inline-block;
list-style:none;
height:55px;
overflow:hidden;
}
#gal li.inact:hover{
background:transparent;
}
#gal li.act,li.act:hover{
background:#FEDEEF;
}
#gal li.act a{
cursor:default;
}
.fbar{
width:2px;
background:transparent;
}
#gal li a{
display:block;
background:#F672B6;/*cor cima menu pequeno*/
height:35px;
padding-top:10px;
}
.a img{border:none;}



Agora abaixo de:

]]></b:skin>

Cole o seguinte código:


<!-- slide-->

<!--[if lte IE 7]>
<style type="text/css">
ul li{
    display:inline;
    /*float:left;*/
}
</style>
<![endif]-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
    /* This code is executed after the DOM has been completely loaded */
  
    var totWidth=0;
    var positions = new Array();
   
    $('#slides .slide').each(function(i){
       
        /* Traverse through all the slides and store their accumulative widths in totWidth */
       
        positions[i]= totWidth;
        totWidth += $(this).width();
       
        /* The positions array contains each slide's commulutative offset from the left part of the container */
       
        if(!$(this).width())
        {
            alert("Please, fill in width & height for all your images!");
            return false;
        }
       
    });
   
    $('#slides').width(totWidth);

    /* Change the cotnainer div's width to the exact width of all the slides combined */

    $('#menu ul li a').click(function(e){

            /* On a thumbnail click */

            $('li.menuItem').removeClass('act').addClass('inact');
            $(this).parent().addClass('act');
           
            var pos = $(this).parent().prevAll('.menuItem').length;
           
            $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
            /* Start the sliding animation */
           
            e.preventDefault();
            /* Prevent the default action of the link */
    });
   
    $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
    /* On page load, mark the first thumbnail as active */
   
});
//]]>
</script>


Agora cole abaixo de :

<div id='main-wrapper'>

Este próximo código, fazendo a modificação pelas suas imagens. (REPITA A IMAGEM CONFORME MOSTRA O CÓDIGO)


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<!-- TROQUE ABAIXO O ENDEREÇO PELO DE SUAS FOTOS -->

<div id='contentWrapperPortfolio'><div id='gallery'><div id='slides'>
  
<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 1' width='572'/></div>
<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 2' width='572'/></div>
<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 3' width='572'/></div>
<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 4' width='572'/></div>
<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 5' width='572'/></div>
<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 6' width='702'/></div>
<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 7' width='572'/></div>
<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 8' width='572'/></div>
<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 9' width='572'/></div>
 
    
</div><div id='menu'><ul id='gal'>

<!-- TROQUE ABAIXO O ENDEREÇO PELO DE SUAS FOTOS MENORES -->
         
<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 1' width='70px'/></a></li>
<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 2' width='70px'/></a></li>
<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 3' width='70px'/></a></li>
<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 4' width='70px'/></a></li>
<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 5' width='70px'/></a></li>
<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 6' width='70px'/></a></li>
<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 7' width='70px'/></a></li>
<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 8' width='70px'/></a></li>
<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 9' width='70px'/></a></li>

        <li class='fbar'/>
        </ul>
</div>
</div>
</div>
</b:if>
</b:if>

26 de dez. de 2010

Template Blue

Nenhum comentário:
Template com 2 colunas, página inicial com postagens pequenas, menu social com efeito j.query, menu em abas com efeito j.query, menu horizontal com efeito.




Para instalar o menu social

Procure por:

<div class='sc_menu'>

e troque pelo endereço de suas páginas sociais conforme é pedido.


Template Estrela Gorjuss

3 comentários:
Template com 3 colunas, galeria de imagens, leia mais, menu animado, menu social. Para quem gosta de modelos cute.




Para ativar a galeria de imagens

Procure por:
 <!-- TROQUE ABAIXO O ENDEREÇO PELO DE SUAS FOTOS -->

E troque pelo endereço de suas imagens. Note que vc terá que fazer isso 2 vezes, para a galeria grande e a pequena.


  • Para ativar o menu social

Procure por:

<!-- TROQUE ABAIXO OS ENDEREÇOS PELOS DE SUAS PÁGINAS SOCIAIS -->

E troque os endereços como se pede.



  • Para ativar o menu animado

Procure por:
 <!-- TROQUE ABAIXO OS ENDEREÇOS PELOS ENDEREÇOS QUE QUISER NO MENU ANIMADO -->

E troque pelos endereços que se pedem.




*Para colocar os arquivos nos posts, copie o próximo código e cole onde vc posta, mas clique antes em "Editar HTML.

<script src="AQUI O ENDEREÇO DE SEU BLOG/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc"></script>



  • Para ativar o menu horizontal

Procure por:

<!-- TROQUE ABAIXO OS ENDEREÇOS PELOS ENDEREÇOS QUE QUISER NO MENU SUPERIOR -->

E troque no local pelos endereços do que quer linkar


20 de dez. de 2010

Gerador de slide

4 comentários:
Essa eu encontrei navegando pela net e não podia deixar de compartilhar com vocês. Um site onde você faz slides de fotos para compartilhar com os amigos no Blogger, Facebook e no Twitter. Você poderá fazer um lindo slide de natal para compartilhar com seus familiares e amigos.

Entre no site JalbumNet e se cadastre.






Preencha o cadastro como mostra a imagem abaixo.

  

Depois cheque seu email.
Abra o email e clique no link



Agora faça o login





Nessa próxima página, clique na opção 5




Você foi direcionado para uma página como essa abaixo. 
Para começar a fazer seu slide, suba primeiro as fotos que quer.
(Atenção pois há um limite de imagens, isso depende do tamanho de suas fotos)



Aparecerá o browser de seu computador, escolha então as fotos.





Agora, depois que suas fotos já foram selecionadas, elas aparecerão numa página como essa

Clique então em INFO para escrever informações sobre seu slide


Escreva o título e uma pequena discrição sobre seu slide



Agora você irá selecionar o tipo de slide.
Vá rolando o scroller para ver os modelos.
Note que você poderá escolher até as cores.
Ao encontrar, clique em CHOOSE




Depois de escolhido o slide e ter certeza que está satisfeita, clique então em SAVE AND EXIT, no lado direito do seu monitos, em cima.





Agora na página que você foi direcionado(a), você verá a imagem de seu álbum. Passe o mouse sobre a imagem.



Agora copie o código que irá aparecer e...

Se quer compartilhar seu slide, basta clicar sobre os botões do Facebook ou do Twitter




e cole dentro deste código abaixo:

  <iframe height="600px" scrolling="no" src="AQUI O ENDEREÇO DO SEU SLIDE" width="100%"></iframe>



Cole-os onde quer que apareça o slide, nas postagens de seu blog ou no HTML/Javascript.




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