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

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

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

tamancentrعالم بلاحدود

قريبا

tamancentrعالم بلاحدود

قريبا

tamancentrعالم بلاحدود

قريبا

Blogger-Widget

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

عمل الاقسام بشكل احترافى لمدونه بلوجر بشكل انيق وبتقنيه 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>