Articolul cu un design mai placut

   Acest truc ar prinde bine celor care ar dori sa creeze articole ce contin coduri php ce ar trebui evidentiate. Dar in genere iti va face articolul mai clar si mai frumos.

Intram in contul blogger si gasim: "sablon", "editati HTML".

Pentru a gasi in sablon textul terbuie sa apasam pe "ctrl+f".

Gasim urmatorul rind:

]]></b:skin>

Codurele care vor urma mai jos le punem inainte de codul de mai sus.

.vajno, .info, .mail, .kod {
margin:10px; 
padding:15px 20px 15px 80px; 
border:1px solid #999999; 
border-radius: 10px; 
-moz-border-radius:10px 10px 10px 10px;
box-shadow:2px 2px 3px #999999; 
-moz-box-shadow:2px 2px 3px #999999; 
-webkit-box-shadow: #999 2px 2px 3px; 
background-position:20px 50%; 
background-repeat:no-repeat; 
position:relative; 
text-align:justify;
}
.vajno {
background-color:#FFD4A0;
background-image: url("http://lh4.ggpht.com/_G92voTj-yF0/TO0c43ebP4I/AAAAAAAAA7Y/9LgBZ8FG_70/vajno.png");
}
.mail {
background-color:#E4F6F8;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPP_fXbere_Aw4jYRzxPMlIYLh4n_8J-BjxFSmIgy3uT5vgZcOSJsYOp-xtaCvhnLd7ESBee3w7s8Df1qGiOIWkbwbEFWabdfDDM2I8qBq3Gu0cZw_6xJ7haAw32ic7lCbR8QSy_kxvj8/");
}
.info {
background-color:#FFFFCC;
background-image: url("http://lh5.ggpht.com/_G92voTj-yF0/TO0osHobz7I/AAAAAAAAA7c/UuJQ0vP5k18/info.png");
}
.kod { background-color:#E9FFD4;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9TruhgabK-TXtozxiZc7RxhRo0cpzEoN11YutU47nfEYJBjb0Wu4GVNFars_KnV-2uaqbLZ9FSR7K4fSi7mW36R3OZ31s3dgVsQAHUZ_9aHx6tMl7qEVXMXzbTnKfL64lrJzYHkn6QkS1/");
}

Observati ca datorita codului CSS ".vajno",".mail",".info",".kod" puteti schimba culoarea si directoriul imaginii. 

Cu prima etapa am terminat, insa cum sa indicam acest cod pentru textul care il redactam in aricol?

Deci dupa ce ati redactat un articol, dar inca nu l-ati salvat, alegeti sus din dreapta linga"Scrieti" este "HTML", gasim textul pe care vreti sa-l evidentiati cu design, si-l punem in codul urmator:

acest cod este un exemplu pentru "info", in dependenta de ce design doriti sa fie textul, in loc de info puteti pune: ".vajno",".mail",".kod"

 <div class="info">textul cu design info</div>

acest exemplu va arata in felul urmator:

textul care va fi cu design "info"

Ast-i tot si succes!

==============================================

Suntem recunoscatori pentru email, socializare si comentarii, succes!! :)

Introdu emailul tau si primesti articole gratis:

Apasa mai jos, arata si prietenilor