Menükódok + Modul/ Bejegyzés címének középre igazítása +Textúrák + gif képek+ Lányok fejlécre

Manók!

Hoztam egy hosszú bejegyzést, mely kódokat, textúrákat, gif képeket és fejlécre való képeket tartalmaz. Sokan kérték már chatben, hogy hozzak menükódokat és eddig egy valaki jelentette ki, hogy konkrétan milyen színűt hozzak, így hoztam három darab menükódot, amiket olyan színre állítottam amilyenre a kérő kérte. A másik amit sokan kértek már az a modulok és a bejegyzések címének a középre igazítása. Pár hete pedig Harcos azt kérte, hogy hozzuk neki olyan gif képeket, amiken a karaktereknek szuperképességük van. Pórbáltam párat keresni remélem megfelelnek. Valamint hoztam képeket lányokról, amit már régen hoztam és textúrákat, mert olyan mindig kell annak, aki fejléceket készít. Remélem hasznos bejegyzést hoztam! 

Ui.: A kért szövegdobozokat is hamarosan hozni fogom!

További szép napot!

Roxana

Halványkék/Halvány rózsaszín menüstílusok:

Adél kérésére

Az első menüstílus így néz ki:

CÍM #1 CÍM #2 CÍM #3 CÍM #4

Kódja:

<center>

<span style="font-size: x-large;">

    <div class="noscript" id="animmenu">

<a href="http://lidodesign.gportal.hu/">CÍM #1</a> <a href="https://www.blogger.com/LINK">CÍM #2</a> <a href="https://www.blogger.com/LINK">CÍM #3</a> <a href="https://www.blogger.com/LINK">CÍM #4</a></div>

<style type="text/css">

#animmenu a  {

display: block; clear: both; width: 130px;

font-size: 100%; line-height: 30px;

padding: 0 10px 0 20px;

color: black; text-decoration: none;

margin: 0.5em;

background: #EAEEF2 url(http://data2.whicdn.com/images/134009571/large.jpg) 0px 0px no-repeat;

-moz-border-bottom-colors: #cccccc #ffffff #ffffff #cccccc; -moz-border-left-colors: #cccccc #ffffff #ffffff #cccccc; -moz-border-right-colors: #cccccc #ffffff #ffffff #cccccc; -moz-border-top-colors: #ff0099 #ffffff #ffffff #ff0099; -moz-box-shadow: 0px 0px 3px #cccccc inset, 0px 0px 3px #cccccc; -moz-border-radius: 0px 100px 0px 100px; text-shadow: 1px 1px 1px #535353;

}

#animmenu a:hover {color: #400;}

#animmenu.noscript a:hover {background: #AEB7C6 url(http://data3.whicdn.com/images/127268650/large.png) 0px -420px;}    </style>

</span></center>

A második menüstílus így néz ki:

• Cím1
• Cím2
• Cím3
• Cím4

Kódja:

<ul>

<li>

            <a href="http://blogdesign-critics-dreams.blogspot.hu/">Cím1</a></li>

<li>

            <a href="http://blogdesign-critics-dreams.blogspot.hu/">Cím2</a></li>

<li>

            <a href="http://blogdesign-critics-dreams.blogspot.hu/">Cím3</a></li>

<li>

            <a href="http://blogdesign-critics-dreams.blogspot.hu/">Cím4</a></li>

</ul>

</div>

<style type="text/css">

.circlemenu{

width: 100%;

overflow:hidden;

}

.circlemenu ul{

margin: 0;

padding: 0;

font: bold 18px Verdana;

list-style-type: none;

text-align: center;

}

.circlemenu li{

display: inline;

margin: 0;

}

.circlemenu li a{

display:inline-block;

text-align:center;

text-decoration: none;

color: white;

background:#eb8beb ;

text-shadow: 1px 1px 0px #eb8beb;

margin: 0;

margin-right:5px;

width:80px;

height:80px;

border-radius: 400px;

-moz-border-radius: 400px;

-webkit-border-radius: 400px;

}

.circlemenu a span{

position:relative;

top:40%;

}

.circlemenu li a:visited{

color: white;

}

.circlemenu a:hover{

background:#ABD0BC;

text-shadow: 1px 1px 0px #3D6B52;

}</style>

A harmadik menüstílus így néz ki:

Oldalak

• Menü1
• Menü2
• Menü3
• Menü4
• Menü5

Kódja:

<div id="vertmenu">

<h1>Oldalak</h1>

<ul>

<li><a href="LINK" tabindex="1">Menü1</a></li>

<li><a href="LINK" tabindex="2">Menü2</a></li>

<li><a href="LINK" tabindex="3">Menü3</a></li>

<li><a href="LINK" tabindex="4">Menü4</a></li>

<li><a href="LINK" tabindex="5">Menü5</a></li>

</ul>

</div>

<style type="text/css">

#vertmenu { /* a menü szélessége, betűtípusa, stb */

    font-family: Verdana, Arial, Helvetica, sans-serif;

    font-size: 11px;

    width: 150px;

    padding: 0px;

    margin: 0px;

}

#vertmenu h1 { /* a menü link címe, háttere, stb */

    display: block;

    background-color: #cfe2f3;

    font-size: 11px;

    padding: 3px 0px 5px 3px;

    margin-bottom: 2px;

    border: 0px solid #f06cf0;

    color: #f06cf0;

    width: 161px;

    text-align: center;

}

#vertmenu ul {

list-style: none;

margin: 0px;

padding: 0px;

border: none;

}

#vertmenu ul li {

margin: 0px;

padding: 0px;

}

#vertmenu ul li a { /* a link színe, stílusa, stb */

font-size: 80%;

display: block;

padding: 5px 0px 2px 4px;

text-decoration: none;

color: #666666;

width:160px;

}

#vertmenu ul li a:hover, #vertmenu ul li a:focus { /* ha ráviszed az egeret a linkre */

    color: #f06cf0;

    background-color: #FBFBFB;

    -moz-border-radius:0.7em;

    -webkit-border-radius: 0.7em;

    border: 1px solid #eeeeee;

}

</style>

Forrás: LidoDesign és LindaDesign

Modul/Bejegyzés címének középre igazítása:

Ahhoz, hogy a bejegyzéseid címei középen legyen, ahhoz rá kell kattintanod a sablonra, azon belül a speciálisra és ott pedig a stílusalapra. Ha megvan ezt kell oda beillesztened:

h3.post-title, .comments h4 { text-align:center; text-transform:normal; })

Ahhoz, hogy a moduljaid címe középre kerüljön, először be kell lépned az elrendezésbe, azon belül a HTML/JavaScript modulba és ott ezt kell beillesztened:

<style type="text/css">

h2 { /* blog címének kinézete, hirek/cikkek fejléc betűstílusa */

font-style: none;

text-shadow: #0000 1px 1px 1px;

font-weight: none;

text-align: center;}

a:hover h2 { /* blog címének kinézete, ha ráviszed az egeret */

font-style: none;

font-weight: none;

text-shadow: none;}

-->

</style>

#0000 - Ez a cím árnyékának a színe! Olyanra állítod be, amilyenre akarod!

Textúrák:

Lányok fejlécre:

GIF KÉPEK:

melyeknél az adott embereknek szuperképességük van

Harcos kérésére