Layout Free: Kuroshitsuji II

Yo minna-san, venho trazer mais um layout free para vocês \o/  bem que avisei. Mas antes quero saber se vocês conhecem o grupo de k-pop chamado AOA? Nossa amei elas principalmente a música MOYA, o tempo todo cantarolo a música sem perceber. Mas vamos lá hoje trago o layout anterior do BC decidi disponibilizar antes de esquecer e passar meses e não postar como muitos que já fiz. O nome deste layout e
 Kuroshitsuji II, antes desse tema a Roh tinha feito um do Kuroshitsuji para mim, verde com azul escuro, ficou lindo! E como amo o Kuroshitsuji fiz o layout seguinte também deste anime então coloquei II ou seja segundo. Ele é bem simples mas sua beleza e a falta de cores e as poucas usadas sendo frias. Estou dando ele para vocês agora espero que gostem.

 DEMO || DOWNLOAD 

No pack se encontra: Mini banner PNG, arquivo do template, imagens do menu+afiliados.


Arrumando o Layout:

~ Mini Banner+ Menu~

Ignorem o nome do cabeçalho "Becky G" a imagem é de outro layout mas estou com preguiça de tirar print de novo rs' É bem simples basta pegar o código mais abaixo e adicionar no gadget mostrado na imagem:

 <div style="position: absolute; margin-top: -89px; left: 630px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbwjzTGnAkfUrx0GznHusX1MCNGxTv2DeEhEuDrid4CNjyC5ZjeZknXrSdfwZmtStIa0NlOfzulVKBXmOG7D9jigQZfcg9EZ9cHNHmlIiv1_iyvoV97QzvrOV-Nif1q_sl0aGQXIvlbu0/s1600/Banner+5.png" /></div>

O código que se encontra abaixo e do menu flutuante que fica ao lado esquerdo do blog, adicione ele também no gadget que mostro na imagem. O código dele é meio grandinho e fica difícil de coloca-lo no blockquote.

<!-------http://wanaseoby.blogspot.com/ own. Do not remove this credit.----> <style> #dhtmltooltip{ position: absolute; width: 10px; text-align:center; border: 2px solid #F9CDAD; padding: 2px; visibility: hidden; z-index: 100; font-family: 'lucida sans unicode'; text-transform: uppercase; color:#F9CDAD; font-size:10px; background:#fff; -moz-box-shadow: 0px 0px 8px #ccc; -webkit-box-shadow: 0px 0px 8px #ccc; box-shadow: 0px 0px 8px #ccc; filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135); } #pos{ position:fixed; top:200px; left:10px; } a.nav{ color:#83AF9B; margin-bottom:24px; display:inline-block; width:50px; height:50px; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCi2Pqcj4oD0yOHfrU6YtxhmNHaYm_uAEA282dBepaIwv_ORA77LZ5UBJ7eZ2RGhNlh9pSqVAxo2PdYM9JihP8I85BUii_9Tkqp1hJTbIlsVN5D-5S4spsUB4e6Wtz-K-YR-RD0uxNQpc/s1600/Menu2.png"); border:2px solid #c5b1c2; border-radius:1111px; -moz-box-shadow: 0px 0px 6px #ccc; -webkit-box-shadow: 0px 0px 6px #ccc; box-shadow: 0px 0px 6px #ccc; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } a.nav:hover{ border:2px solid #82738c; } a.nav2{ color:#997992; margin-bottom:24px; display:inline-block; width:50px; height:50px; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Yy9FdJFIbb77PRepGYH4BI3jQ6mBhsnCqgkxBQVUx4yLYTW0fPuliQDii460Erb7vVwHXypgcTuRk56ef0GOcuO25ECqA61NFw6WeilvXpUFkvKr77L91O_3lSlH_V3R4qi_N2YdxFY/s1600/Menu3.png"); border:2px solid #c5b1c2; border-radius:1111px; -moz-box-shadow: 0px 0px 6px #ccc; -webkit-box-shadow: 0px 0px 6px #ccc; box-shadow: 0px 0px 6px #ccc; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } a.nav2:hover{ border:2px solid #7b3d7b; } a.nav3{ color:#83AF9B; margin-bottom:24px; display:inline-block; width:50px; height:50px; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLhO4Fp-fbPAm8VANIPmsAPG3df_ARdOczJivDVRgSuMnFQT6dMFd5aQ3OVTeo1q-9Se2hVlh67Ljlvz-LO68GZFxuH-s0fFeeqi8GZ0I__AUtDSEvgGI38Krd9imi5PKVOaTkaQKHizo/s1600/Menu1.png"); border:2px solid #c5b1c2; border-radius:1111px; -moz-box-shadow: 0px 0px 6px #ccc; -webkit-box-shadow: 0px 0px 6px #ccc; box-shadow: 0px 0px 6px #ccc; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } a.nav3:hover{ border:2px solid #82738c; } a.nav4{ color:#83AF9B; margin-bottom:24px; display:inline-block; width:50px; height:50px; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjozgdGwHeemYh3mSLUfJHytBj44dYpu_P4K5LhbH-pJ9UN741qdsSKNhE3lirAnH52tHbHCXN4Fn1kS0QqwTrJz35qxMdoxWorgovwTjraB3F9NqwzrURymVAVQvutQ6hz-Tb203hDhJs/s1600/Menu4.png"); border:2px solid #c5b1c2; border-radius:1111px; -moz-box-shadow: 0px 0px 6px #ccc; -webkit-box-shadow: 0px 0px 6px #ccc; box-shadow: 0px 0px 6px #ccc; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } a.nav4:hover{ border:2px solid #7b3d7b; } </style> <div id="dhtmltooltip"> </div> <script type="text/javascript"> /*********************************************** * Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ var offsetxpoint=-60 //Customize x offset of tooltip var offsetypoint=20 //Customize y offset of tooltip var ie=document.all var ns6=document.getElementById && !document.all var enabletip=false if (ie||ns6) var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : "" function ietruebody(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function ddrivetip(thetext, thecolor, thewidth){ if (ns6||ie){ if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px" if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor tipobj.innerHTML=thetext enabletip=true return false } } function positiontip(e){ if (enabletip){ var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft; var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop; //Find out how close the mouse is to the corner of the window var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20 var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20 var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000 //if the horizontal distance isn't enough to accomodate the width of the context menu if (rightedge<tipobj.offsetWidth) //move the horizontal position of the menu to the left by it's width tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px" else if (curX<leftedge) tipobj.style.left="5px" else //position the horizontal position of the menu where the mouse is positioned tipobj.style.left=curX+offsetxpoint+"px" //same concept with the vertical position if (bottomedge<tipobj.offsetHeight) tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px" else tipobj.style.top=curY+offsetypoint+"px" tipobj.style.visibility="visible" } } function hideddrivetip(){ if (ns6||ie){ enabletip=false tipobj.style.visibility="hidden" tipobj.style.left="-1000px" tipobj.style.backgroundColor='' tipobj.style.width='' } } document.onmousemove=positiontip </script> <link rel="stylesheet" type="text/css" href="stickytooltip.css" /> <div id="pos"> <a class="nav" href="LINK" onmouseover="ddrivetip('Facebook')"; onmouseout="hideddrivetip()"></a><br/> <a class="nav2" href="LINK" onmouseover="ddrivetip('Twitter')"; onmouseout="hideddrivetip()"></a><br/> <a class="nav3" href="LINK" onmouseover="ddrivetip('Tumblr')"; onmouseout="hideddrivetip()"></a><br/> <a class="nav4" href="LINK"onmouseover="ddrivetip('Formspring')"; onmouseout="hideddrivetip()"></a><br/> </div>

Menu de estatísticas:

<div class="heart">Digite aqui</div>
<div class="heart">Digite aqui</div>
<div class="heart">Digite aqui</div>
<div class="heart">Digite aqui</div>
<div class="heart">Digite aqui</div>
</div>

 Afiliados que roda:

<div id="imgss">
<marquee onmouseover="this.stop()" onmouseout="this.start()" direction="left" scrollamount="2" behavior="alternate">
<a href="ENDEREÇO DO SITE"><img src="LINK DA IMAGEM" /></a>
<a href="ENDEREÇO DO SITE"><img src="LINK DA IMAGEM" /></a>
<a href="ENDEREÇO DO SITE"><img src="LINK DA IMAGEM" /></a>
<a href="ENDEREÇO DO SITE"><img src="LINK DA IMAGEM" /></a>
</div>

O numero marcado em vermelho é a velocidade que passa as imagens, aumente ou diminua como desejar.
  

Afiliados expansivo:

<form><select onchange="window.open(this.options[this.selectedIndex].value)" select style="width: 95%;  margin-left: 07px; color: #c5b1c2; border: 1px solid #c5b1c2; background: #ffffff" name="links"><option selected />Veja Todos os Afiliados

<option style="background: #ffffff; border-bottom: 0px solid #6E7B8B" value="ENDEREÇO DO SITE" />NOME DO SITE

<option style="background: #ffffff; border-bottom: 0px solid #6E7B8B" value="ENDEREÇO DO SITE" />NOME DO SITE

<option style="background: #ffffff; border-bottom: 0px solid #6E7B8B" value="ENDEREÇO DO SITE" />NOME DO SITE

</div>

Apenas vá repetindo o código em vermelho quantas vezes necessária.

Mais Vistas:

<ul>
<a href="LINK DA TAG" class="tag">
       <span class="tag_name">NOME DA TAG</span>
       <span class="tag_count">veja</span>
      </a>
     
<a href="LINK DA TAG" class="tag">
       <span class="tag_name">NOME DA TAG</span>
       <span class="tag_count">veja</span>
       </a></ul>

Apenas vá repetindo o código quantas vezes necessária.

Pesquisa:

<form action="/search" class="search" method="get"> <input class="searchbar" id="s" name="q" placeholder='Digita que lhe mostro' type="text" value="" /> <input class="searchbut" type="submit" value="" /> </form> 

Sem querer eu apaguei o gadgets de créditos, mas lembro de alguns deles. Se alguém souber de onde e os códigos me avisem por favor:  WS.GI.TK.WK.CB Prontinho espero que tenham gostado e bom uso.Bye <3