اضافة التسميات مدونتك بشكل جديد

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

درس اليوم هو اضافة الاقسام فى مدونتك بشكل جديد مثل ما فى الصورة

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

هذا هو كود الاضافة غير ما فى الكود واى استفسار اضف تعليقاتك وسف اساعدك 

على مدونتك

طريقة الاضافة ندخل الى التخطيط اضافة اداة ونختار html

<style type="text/css">
.Blogger-Widget-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);
}
.Blogger-Widget-ahtrafy-up h5 {
color:#000000;
margin-top:0px;
height:65px;
text-align:center;
line-height:65px;
-webkit-transition: margin-top 0.2s linear;
}
.Blogger-Widget-ahtrafy-up a:hover h5{
margin-top:-90px;
}
.Blogger-Widget-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);
}
.Blogger-Widget-ahtrafy-up a:hover div {
opacity: 1;
-webkit-transform: rotate(0deg);
}
.Blogger-Widget-ahtrafy-up a:nth-child(1) div { background: #EF7901; line-height:70px;}
.Blogger-Widget-ahtrafy-up a:nth-child(2) div { background: #98bf0d; line-height:70px;}
.Blogger-Widget-ahtrafy-up a:nth-child(3) div { background: #01b0ec; line-height:70px;}
.Blogger-Widget-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;
}
.Blogger-Widget-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="Blogger-Widget-ahtrafy-up">
<a href="http://bilokr.blogspot.com/">
<h5>مدونة بلوجر توب</h5>
<div>قريبا</div>
</a>
<a href="http://bilokr.blogspot.com/">
<h5>مدونة بلوجر توب</h5>
<div>قريبا</div>
</a>
<a href="http://bilokr.blogspot.com/">
<h5>مدونة بلوجر توب</h5>
<div>قريبا</div>
</a>

</section>
<section class="Blogger-Widget-ahtrafy">
<a href="http://bilokr.blogspot.com/">Blogger-Widget</a>
</section>

غير ما بالون الاحمر اسم التسميا 

غير ما بالون الازراق رابط التسميا