[Blog-Add]

السلام عليكم ورحمة الله وبركاتة

اقدم لكم اليوم اضافة تسميات مدونتك بشكل انيق css 2014

الشرح :

اذهب الي صفحة التخطيط واضافة اداة جديدة HTML واضف بها الكود التالي :

كود PHP:

<style type="text/css">
.add-blogg-ahtrafy-up a {
display:block;
background:#eee;
border:1px solid #ccc;
margin: 0 0 20px 0;
height:65px;
width:290px;
overflow:hidden;
text-decoration:none;
font-family:inherit;
font-size:16px;
color:#000000;
text-shadow:0 1px 2px rgba(0, 0, 0, 0.75);
}
.add-blogg-ahtrafy-up h5 {
color:#000000;
margin-top:0px;
height:65px;
text-align:center;
line-height:65px;
-webkit-transition: margin-top 0.2s linear;
}
.add-blogg-ahtrafy-up a:hover h5{
margin-top:-90px;
}
.add-blogg-ahtrafy-up div {
font-family:inherit;
font-size:17px;
color:#FFFFFF;
text-align:center;
padding:0px;
opacity: 0;

-webkit-transition: all 0.3s linear;
-webkit-transform: rotate(10deg);
}
.add-blogg-ahtrafy-up a:hover div {
opacity: 1;
-webkit-transform: rotate(0deg);
}
.add-blogg-ahtrafy-up a:nth-child(1) div { background: #EF7901; line-height:70px;}
.add-blogg-ahtrafy-up a:nth-child(2) div { background: #98bf0d; line-height:70px;}
.add-blogg-ahtrafy-up a:nth-child(3) div { background: #01b0ec; line-height:70px;}
.add-blogg-ahtrafy a{ text-decoration:none; margin:10px; font-family:inherit; font-size:8px; font-weight:bold; color:#000000; overflow:hidden;-webkit-transition: All 1s ease;-moz-transition: All 1.5s ease;-o-transition: All 1.5s ease;-ms-transition: All 1.5s ease;transition: All 1.5s ease;
}
.add-blogg-ahtrafy a:hover{ text-decoration:none; margin:75px; font-family:inherit; font-size:13px; font-weight:bold; color:#1fd4e9;-webkit-transition: All 1s ease;-moz-transition: All 1s ease;-o-transition: All 1s ease;-ms-transition: All 1s ease;transition: All 1s ease;
}
</style>




<section class="add-blogg-ahtrafy-up">
<a href="الرابط">
<h5>
التسمية</h5>
<div>
التسمية</div>
</a>
<a href="الرابط">
<h5>
التسمية</h5>
<div>
 التسمية</div>
</a>
<a href="الرابط">
<h5>
css-css3</h5>
<div>
التسمية </div>
</a>

</section>
<section class="add-blogg-ahtrafy">
<a href="الرابط">التسمية</a>
</section> 


وضع الروابط والتسميات واحفظ العمل