عمل الاقسام بشكل احترافى لمدونه بلوجر بشكل انيق وبتقنيه css

السلام عليكم ورحمه الله وبركاته اليوم مع اداه جديده من اضفات بلوجر وهى اضافه ازار بشكل انيق و بكل احتراف ونضع على القالب منظر جمالى اليكم الاداه مباشره داخل الموضوع

مثال حى على الاضافه

اليكم الكود طريقه التركيب وضع الكود داخل اداه جافا اسكريبت فقط فى اى مكان تريد ومبروك عليك القائمه الجديده فى مدونتك

عمل الاقسام بشكل احترافى لمدونه بلوجر بشكل انيق وبتقنيه css

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

<h5>tamancentrعالم بلاحدود</h5>

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

</a>

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

<h5> tamancentrعالم بلاحدود </h5>

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

</a>

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

<h5> tamancentrعالم بلاحدود </h5>

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

</a>

</section>

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

<a href=" http://tamancenter.blogspot.com/2013/10/css.html ">Blogger-Widget</a>

</section>