قائمة الاقسام الملونة تصميم احترافي

بسم الله الرحمن الرحيم ..

السلام عليكم ورحمة الله وبركاته اهلا بكم اعضاء وزوار مدونة احترافي ارجوا ان تكونوا فى افضل حال , كما عودتك مدونة احترافي على تقديم كل ما هو جديد وحصري وغير موجود فى اى مدونة اخرى تأتي الان بقائمة رائعة جدا ذات الوان جميلة تصلح لاقسام المدونة او تبادل اعلاني او اى شئ وهذه القائمة تصميم مدونة احترافي ولا نسمح بحذف الحقوق فاذا وجدت هذه القائمة فى مدونة اخرى قم بحذف الحقوق كما تشاء ولكنها من تصميمنا فلن تجدها ابدا فى اى مدونة اخرى 

للمعاينة اذهب الى المدونة سوف تجدها في القائمة اليسرى

شرح التركيب

هذه هو الكود قم بتركيبة فى اداة جديدة فقط فلا يحتاج الى شرح ^__^

<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:250px;

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://a7trafy.blogspot.com">

<h5>مدونة احترافي</h5>

<div>قريبا</div>

</a>

<a href="http://a7trafy.blogspot.com">

<h5>مدونة احترافي</h5>

<div>قريبا</div>

</a>

<a href="http://a7trafy.blogspot.com">

<h5>مدونة احترافي</h5>

<div>قريبا</div>

</a>



</section>

<section class="Blogger-Widget-ahtrafy">

<a href="http://a7trafy.blogspot.com/2013/08/List.html">Blogger-Widget</a>

</section>

قم بتغير ما يلزم

ومبروك عليك القائمة 

منشورة في: اضافات بلوجر, بلوجر