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:



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:



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:


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 















21 megjegyzés:

  1. Nagyon hasznos bejegyzést hoztál nekünk Roxana! :)

    VálaszTörlés
  2. Szia! Elvittem az egyik menükódot, nagyon szépen köszönöm! ❤

    VálaszTörlés
  3. Szia! Kipróbáltam a 2, menükódot és ugyan működik, de nem olyan kör alakú, mint a bejegyzésedben. Szerinted mi lehet a baj? :(
    válaszodat előre is köszönöm! :)

    VálaszTörlés
    Válaszok
    1. Szia!
      Nem tudom, hogy mi lehet a gond, jól másoltad egyáltalán ki? Mert én most kétszer is megnéztem bemásoltam egy blogba magamnak és kör alakú. Valamit biztos elnyomtál, vagy ha megváltoztattad a színeket, akkor lehet ott nyomtál el valamit, és így már az érthető ha nem jó valami, pl.hogy nem kör alakú. Szóval én csak azt tudom tanácsolni, hogy másold be még egyszer, vagy nézd meg hogy egyáltalán jól másoltad e be.

      Roxana

      Törlés
  4. Szia! Kipróbáltam a bejegyzés címének középre igazítása kódot,de nekem csak a dátumot igazította középre a cím úgy maradt oldalt.. Szerinted mi lehet a probléma,a segítséget előre is köszönöm :)

    VálaszTörlés
  5. Szia! Kicsit átalakítva vittem az első menüt :) Köszönöm!

    VálaszTörlés
  6. Szia! Vittem az elsőt, nagyon szépen köszönöm! :)

    VálaszTörlés
  7. Vittem a harmadik kódot, köszi!☺♥

    VálaszTörlés
  8. Szia! Vittem két kódot, köszönöm !!

    VálaszTörlés
  9. Hello! :) Elvittem a kódot! :)

    VálaszTörlés
  10. Sziasztok!
    Vittem a modul és bejegyzés középre állításához szükséges kódokat. A blogomon fel fogom tüntetni, hogy kódokat tőletek használtam.
    Puszi: Brooklyn. x

    VálaszTörlés
  11. Szia! Hasznos kis bejegyzés volt! Vittem textúrákat és egy kódot. Forrást írok! :)

    VálaszTörlés