Banners Editáveis Naruto #1

Banner #1

 

Banner #2

Banner #3

Banner #4

Banner #5

Banners Perdidos

Esses são banners que não se usam mais hoje em dia , já que achei eles,podem usar!!

Template Free Bleach LP

Esse é um template dum Site Antigo Meu Bleach LP Só que não deu certo , então resolvi colocar aqui pra vcs,mais ele é totalmente editado pelo html dele , o menu , parceiros,etc.O Recomendado pra vc é colocar esse template num blog acabado de criar,ou se não , vai dar erro.

Uploader : Sasori

Download

Demo

Capa Guns N´ Roses

Como Alterar um Favicon pelo Html do Blogger

Vá em modelo, Logo depois em EDITAR HTML. Logo depois procure por:

<title>

Acima delas cole o seguinte código:

<b:include data='blog' name='all-head-content'/>

<Link href='link da sua imagem' rel='shortcut icon' type='image/x-icon'/>

BackGround no titulo dos Gadgets

Vá em >>Layout>>Editar HTML>> e procure pela seguinte tag:

.sidebar h2 {

Subistitua o codigo da tag citada por este:

.sidebar h2 {
margin: 0px;
padding-left:12px;
height:47px;/* Altura da Imagem */
background: #000 url("URL_DA_IMAGEM")no-repeat;/* Coloque uma imagem ou uma cor */
text-align: left;/* Posicione o titulo */
font: Arial black;
padding-top:13px;
color:#fff;
text-shadow: #000 0px 1px 2px;
margin-bottom:-19px;
}
Em padding, seja padding-top ou padding-lef você posiciona o texto em relação aos lados. Edite: Font, Height, Cor do texto (color), Cor da sombra (text-shadow)... em fim edite ao seu gosto.

Efeito Slide Toggle com JavaScript

Primeiro,devemos adicionar nosso JavaScript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"> <script type='text/javascript'> $(document).ready(function(){ $('#mascara').css('height', $(document).height()).hide(); $('.interruptor').click(function(e) { e.preventDefault(); $('#mascara').toggle(); if ($('#mascara').is(':hidden')) { $(this).html('Apagar luzes').removeClass('apaga-acende'); } else { $(this).html('Acender luzes').addClass('apaga-acende'); } }); }); </script> <script type="text/javascript"> jQuery.fn.toggleText = function(a,b) { return this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function(x){return(x==a)?b:a;})); } $(document).ready(function(){ $('.tgl').before('<span>Mostrar conteúdo</span>'); $('.tgl').css('display', 'none') $('span', '#box-toggle').click(function() { $(this).next().slideToggle('slow') .siblings('.tgl:visible').slideToggle('fast'); // aqui começa o funcionamento do plugin $(this).toggleText('Mostrar','Esconder') .siblings('span').next('.tgl:visible').prev() .toggleText('Mostrar','Esconder') }); }) </script>

Agora nosso CSS:

#box-toggle span { border:1px dashed #666; color:333; background:333 }

E por fim,nosso HTML,para seu utilizado!

<div id="box-toggle"> <div class="tgl"> Conteúdo/Códigos/Elementos Aqui! </div> </div>

Fast Menu com OnClick

O fast menu se baseia totalmente neste código:

<img src="IMAGEM01" style="cursor: pointer" onmouseover="this.src='IMAGEM02'" style="cursor: pointer" onmouseout="this.src='IMAGEM01'" 
style="cursor: pointer" onclick="location='LINK DO MENU'" />

Agora Vamos as Explicações, como vocês podem ver o código se dividi em 4 partes:

Imagem01: Aqui você coloca o link da imagem que vai aparecer normalmente no menu.
Imagem02: Aqui você coloca o link da imagem que vai aparecer quando se passar o mouse por cima do menu, realizando assim uma transação de imagens.
Imagem03: Aqui você coloca novamente o link da imagem 01.
Link do Menu: Aqui você poe o link do menu, ou seja o link da página ao clicar no menu.

Para usar o Fast Menu basta você criar uma nova Gadget de HTML e a posicionar onde quiser em seu template, e colocar o código acima, quantas vezes quiser, assim criando quantos botões forem da sua vontade. Espero que tenham gostado!

Área dos Posts dividida em colunas

vá em design>editar html> clique em expandir modelos widget
e procure por  

 ]]>

e cole este codigo abaixo dela

 <!-- Estilos da página Inicial Inicio -->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>

.main .widget{margin: 0 auto;clear:both;}
h2.date-header{
margin: 0px; 
padding: 0px;
text-indent: -9999em;
}
.post-footer{display:none;}

.post { /* --espaço ocupado pela postagem--*/
position: relative;
display: inline;
background:url(endereço-da-sua-imagem) no-repeat; /* --imagem no lugar das bordas--*/
width:45%;  /* --largura da coluna--*/
height:500px;  /* --altura da coluna--*/
float:left;
margin: 5px;
border:1px solid #ddd;  /* --edite cor da borda--*/
padding:8px;
letter-spacing:0px;
font-size: 12px;  /* --tamanho da fonte do texto--*/
line-height:1.4em;

No codigo acima coloque as bordas e coloque a altura height para as colunas com 500px.

Se você quiser, pode colocar uma imagem no lugar das bordas pra isso basta apagar o trecho
que se refere a as bordas e colocar a endereço da sua imagem neste trecho: background:url(endereço-da-sua-imagem) no-repeat;


Não se esqueça caso você coloque uma imagem de fundo para a coluna da área de postagem na página inicial, você deverá alterar largura width e a altura height da imagem que for utilizar.

Exemplo: você deverá substituir width:45%;
pelo valor referente a largura da sua imagem, desta forma:
background: url(ENDEREÇO-DA-IMAGEM) no-repeat;
widht:500px;
height:500px;

As modificações exemplificadas acima afetarão apenas a página inicial e de marcadores.

Você deve adaptar os estilos conforme sua preferência, os trechos editáveis já estão destacados no código.

Slider Costeleta com JQuery

Demonstração
Primeiro Passo: adicionando o CSS no HTML.
 Vá em editar HTML e adicione o código abaixo acima de ]]></b:skin>  

.container {
    height: 600px;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.content {
    margin:0 auto;
    width:900px;
}
@charset "utf-8";

p { margin:10px 0; }
h1, h2, h3, h4, h5, h6 { margin:0 0 10px; }
h5 { text-transform:uppercase; }
img { border:none; }
a {
 text-decoration:underline;
 color:#3c0d0d;
 outline:none;
}
h2 {
 margin:15px 0;
}
ul li {
 margin:5px 0;
}
.wrapper {
 position:relative;
 margin-left:auto;
 margin-right:auto;
 width:960px;
 height:300px;
 display:block;
 padding-top:150px;
 padding-bottom:120px;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrjUAMEfTmjbbng5__yYAfEQ1Xvmdfz1isxXQI8Ue_2D8RlhU-ALvftnSHXwHG-LiYIDOnKhObqiFa4Hs7uPB99e9xoxuW4od5SR81mXlhTxVyz1iz3oCFuR9EE2t-C6q5FIsPJdX6LqeS/s1600/podium.png) no-repeat bottom;
 z-index:2;
}
.wrapper2 {
 position:relative;
 margin-left:auto;
 margin-right:auto;
 margin-top:20px;
 width:960px;
 height:300px;
 display:block;
 z-index:2;
 text-align:center;
 padding-bottom:50px;
}
.wrapper2 a {
 display:inline-block;
 padding:0px 5px;
 background:#fff;
 border:1px solid #ccc;
 border-radius:3px;
 text-decoration:none;
 margin:0px 5px; 
}
.wrapper2 .active-transition {
 background:#222;
 color:#fff; 
}
/*---------- Slider ----------- */

/*---------- Gatilhos esquerdo e direito ----------- */
#slide-prev {
 position:absolute;
 width:21px;
 height:33px;
 bottom:39px;
 left:26px;
 z-index:4;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgymRw-pKzonAPhIUEQjPezItx3iU94BDSJAivJHTIOlMS4hJ4E0HclukBvp0NomYMweQgvIBJsksz9rcR1wwdBylgNR5b1wxndJCEUhaYVLQlxrWHIOgJgQUUEB7BNQkuFFbkHiRfNgKxz/s1600/sl-control.png) left top no-repeat;
}
#slide-next {
 position:absolute;
 width:21px;
 height:33px;
 bottom:39px;
 right:26px;
 z-index:4;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgymRw-pKzonAPhIUEQjPezItx3iU94BDSJAivJHTIOlMS4hJ4E0HclukBvp0NomYMweQgvIBJsksz9rcR1wwdBylgNR5b1wxndJCEUhaYVLQlxrWHIOgJgQUUEB7BNQkuFFbkHiRfNgKxz/s1600/sl-control.png) left bottom no-repeat;
}

/*---------- De sombra, para definir o estilo ----------- */
.s-shadow-b{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFKknZbdL9ixuzg6aYuUGVOs8VD7i8IaFauwd8WkNEfBce1fKFwMB8wuKls7jus3ZNge4dBAfwpTSulimUK7S1Gb5673osqBiAJM18bOB7L7NdoKvLBBHSOMa4RLAXG3IrrYl736qY3UI8/s320/shadow.png) no-repeat top;
 width:876px;
 height:55px;
 position:absolute;
 left:42px;
 bottom:60px;
 z-index:1;
}
/*---------- Menu Slider Container----------- */
#slider {
 width:900px;
 height:300px;
 margin-left:auto;
 margin-right:auto;
 position:relative;
 z-index:2;
 display:block;
}
/* Cada slide deve ser escondido por predefinição */
.slide { display:none; }

/* 
   E apenas o slide com "cs-ActiveSlide" classe deve ser visível!
! Reservado nome da classe. Classe exigida!
*/
.cs-activeSlide { display:block; }

/* Recipiente com texto legendas. Deve estar oculto  */
.slide-descriptions {
 display:none;
}

/* Recipiente com legenda, deve ser escondido por predefinição */
.caption {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgecBBNZ1opVKv6sds31m9vlcIg_FZzmlwk_CMlEYtGvSJjvFi-L79LYfIgzOmBVTPxGnZRYYHvgc9gJ4O5x3eSNy0FpGaaS0g-ZMAisuf2Z_32uz46XiDdJd8g56BJUzuJYDoN13a7Vdw6/s1600/d-bg.png") repeat scroll 0 0 transparent;
    color: #FFFFFF;
    display: none;
    height: 280px;
    padding: 20px;
    position: absolute;
    right: 40px;
    top: 140px;
    width: 180px;
    z-index: 3;
}
.full-3D {
 right: 40px;
    top: 580px;
    width: 840px;
 height:20px;
}
/* Recipiente com botões de paginação */
.pagination {
 bottom: 50px;
    left: 345px;
    margin-top: 50px;
    position: absolute;
    text-align: center;
}
.slider-pagination {
 display:inline-block;
 width:15px;
 height:10px;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB2tlTDEgFwIhzB4nHZGSj-RfL9tIRpYtoi5fnRR9IpKuouFeQ5LZomKCDLRc91ptzggtHDYLbtyA2yZe9olV9Q1uh4bEftx2mE1MFKhypZE1NlOCfhHIJM1v07vUdgo9IQBqCqL4tidZh/s1600/navi.png) no-repeat left bottom;
 margin:0 10px;
 cursor:pointer;
 position:relative;
 z-index:200;
}
/* Esta é uma classe necessária para o botão de paginação "Ativo". ! Nome da classe! */
.cs-active-pagination {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB2tlTDEgFwIhzB4nHZGSj-RfL9tIRpYtoi5fnRR9IpKuouFeQ5LZomKCDLRc91ptzggtHDYLbtyA2yZe9olV9Q1uh4bEftx2mE1MFKhypZE1NlOCfhHIJM1v07vUdgo9IQBqCqL4tidZh/s1600/navi.png) no-repeat left top;
}

/* Sliders múltiplos */
.slider-2 {
 padding-top:0;
 margin-top:20px;
}
#slider-1, #slider-2 {
 width:900px;
 height:300px;
 margin-left:auto;
 margin-right:auto;
 position:relative;
 z-index:2;
 display:block;
}
.cs-activeSlide-2 {
 display:block
}
.cs-active-pagination-2 {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB2tlTDEgFwIhzB4nHZGSj-RfL9tIRpYtoi5fnRR9IpKuouFeQ5LZomKCDLRc91ptzggtHDYLbtyA2yZe9olV9Q1uh4bEftx2mE1MFKhypZE1NlOCfhHIJM1v07vUdgo9IQBqCqL4tidZh/s1600/navi.png) no-repeat left top;
}

________________________________________________________
Agora vamos adicionar o script.
Acima de /head adicone o código.

 
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://demovinneh.site90.com/scaler/jquery.id.chopslider-2.2.0.free.min.js"></script>
<script src="http://demovinneh.site90.com/scaler/jquery.id.cstransitions-1.2.min.js"></script>
<script src="http://demovinneh.site90.com/scaler/main.js"></script>

________________________________________________________
Agora o html escolha onde você vai adiconar ou na postagem ou num gadget o slider.
NÃO SE ESQUEÇA DE SUBSTITUIR ONDE TA PEDINDO!!!

        <div class="container">

            <div class="wrapper">
              <div class="s-shadow-b"></div>
              <a id="slide-next" href="#"></a> 
              <a id="slide-prev" href="#"></a>
              <div id="slider">
                <div class="slide cs-activeSlide"> <img src="IMAGEM 01" width="900" height="300" alt="photo #1" /> </div>
                <div class="slide"> <img src="IMAGEM 02" width="900" height="300" alt="photo #2" /> </div>
                <div class="slide"> <img src="IMAGEM 03" width="900" height="300" alt="photo #3" /> </div>
                <div class="slide"> <img src="IMAGEM 04" width="900" height="300" alt="photo #4" /> </div>
                <div class="slide"> <img src="IMAGEM 05" width="900" height="300" alt="photo #5" /> </div>
                <div class="slide"> <img src="IMAGEM 06" width="900" height="300" alt="photo #6" /> </div>
                <div class="slide"> <img src="IMAGEM 07" width="900" height="300" alt="photo #7" /> </div>
              </div>
              <div class="pagination"> 
                <span class="slider-pagination"></span> 
                <span class="slider-pagination"></span> 
                <span class="slider-pagination"></span> 
                <span class="slider-pagination"></span> 
                <span class="slider-pagination"></span> 
                <span class="slider-pagination"></span> 
                <span class="slider-pagination"></span> 
              </div>
              <div class="slide-descriptions">
                <div class="sl-descr">Escreva seu texto 01 aqui </div>
                <div class="sl-descr">Escreva seu texto 02 aqui </div>
                <div class="sl-descr">Escreva seu texto 03 aqui </div>
                <div class="sl-descr">Escreva seu texto 04 aqui </div>
                <div class="sl-descr">Escreva seu texto 05 aqui </div>
                <div class="sl-descr">Escreva seu texto 06 aqui </div>
                <div class="sl-descr">Escreva seu texto 07 aqui </div>
              </div>
              <div class="caption"></div>
            </div>
        </div>

Ps CS5 Portable

Título: Adobe Photoshop CS5
Uploader: Sasori
Download Opção 01: DropBox
Download Opção 02: Mediafire

Headline Automática

Bom galera nesse tutorial vocês vão aprender a como por uma Headline Automática no blog pra não ficar aquela coisa toda hora tendo que ir lá na Headline atualiza-la manualmente.

É muito simples galera Primeiramente cole o código da Headline abaixo onde você quer :

<div id="mtrpwb"> <script src="https://sites.google.com/site/projectdigitaltomato/blogger/js/rpost-english2.js"> </script> <script> var numposts = 5;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true; </script> <script src="http://sekaidesigner.blogspot.com.br/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"> </script> </div>
 

Você irá alterar as seguintes partes:

numposts = 5 Altere aqui o numero de Links que vão aparecer na Headline
http://sekaidesigner.blogspot.com.br/ Aqui você coloca o o Link do seu blog

Salve e veja como ficou^^ e só isso galera alguma duvida comente.

Capa Naruto #1

Parceria

Para ser nosso parceiro, seu site precisará ter conteúdo voltado a animes, games ou tecnologia, NÃO pode ter conteúdo pornográfico (Sites de Hentai, Ecchi serão aceitos).

# P A R C E I R O S (Button 88x31)
- Ter no Minimo de 800 visitas diárias
- Ter um design organizado, facilitando a navegação.
- Ser atualizado frequentemente.

# A L I A D O S (Link)
- Ter no Minimo de 350 visitas diárias
- Ter um design organizado, facilitando a navegação.
- Ser atualizado frequentemente.

88X31 

<a href="http://www.sekaidesign.blogspot.com" target="_blank"><img src="http://img833.imageshack.us/img833/7803/bannersekaidesign.png" border="0" /></a>
 

Pack de Fontes #1

Comentem o que acharam das fontes contidas no Pack ^^. Espero ter ajudado...

...::Conteúdo::...UPLOADER : D4RKS0RCR3R
>> Tamanho: 1,1 MB
>> Fontes: 44
Crown Title - Fairy Tail
Ninja Naruto
Battlefield-Condensed
Entre outras...

Links: Mediafire - 4Shared

Recrutamento

Yo, Queremos você na nossa guilda!

Quer participar da equipe do Sekai Design? É muito fácil ^^. Veja as vagas abaixo.

Web-Designers

Basta saber utilizar o PhotoShop e saber programar. Precisamos que postem 1 Template Free a cada duas semanas no mínimo e alguns tutoriais também.

Sistematizador

Basta saber mexer em system e postar 2 tutoriais a cada duas semanas sobre isso no mínimo.

Uploader de Renders e Wallpapers

Só precisa saber usar o PhotoShop, saber fazer renders e criar alguns wallpapers por semana pra postar no blog.

Divulgadores

Basta sair divulgando o link do nosso blog em várias redes sociais e sites pra aumentarmos nosso número de visitas.

Caso você queira preencher qualquer uma dessas vagas, mande um e-mail para contato_df@live.com com seu Nick, Idade e o cargo que irá preencher. PS: mande anexado no e-mail um exemplo de seu trabalho a menos que seja divulgador.

Ruffy Wallpaper

Clique na imagem para vê-la em tamanho real.

POR:D4RKS0RC3R3R

Equipe SD

Banners Editáveis Bleach

Espero que gostem desses banners editáveis ^^. Comentem sua opinião por favor XD

Feitos por : D4RKS0RC3R3R

88x31 Opção 1 - Ichigo

88x31 Opção 2 - Ulquiorra

88x31 Opção 3 - Aizen

95x45 - Grimmjow

180x40 - Ichigo

468x60 - Ichigo

Template Minima White

Tamanho: 2,5 KB

Servidores: 4Shared, Mediafire
Uploader: D4RKS0RC3R3R