ضافة التسميات بشكل رائع في blog

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

طريقة اضافة الاداة 

1. ادهب الى 
2.  لوحة التحكم
3.  التخطيط
4.  إضافة أداة
5. Html/javascript

..................................................................................................................................................

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

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://yemen-technology.blogspot.com//search/label/%D8%A7%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1">

<h5>

اضافات بلوجر</h5>

<div>

اضافات بلوجر</div>

</a>

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

<a href="http://yemen-technology.blogspot.com//search/label/%D8%A7%D9%84%D8%B1%D8%A8%D8%AD%20%D9%85%D9%86%20%D8%A7%D9%84%D8%A7%D9%86%D8%AA%D8%B1%D9%86%D9%8A%D8%AA">

<h5>

الربح من الانترنيت</h5>

<div>

الربح من الانترنيت</div>

</a>

<a href="http://yemen-technology.blogspot.com//search/label/%D8%AF%D8%B1%D9%88%D8%B3%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1">

<h5>

دروس بلوجر</h5>

<div>

دروس بلوجر</div>

</a>

<a href="http://yemen-technology.blogspot.com//search/label/%D8%AF%D9%88%D8%B1%D8%A9%20%D8%A7%D9%84%D8%B3%D9%8A%D9%88">

<h5>

دروس السيو</h5>

<div>

دروس السيو</div>

</a></section></section>

</section>

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

<a href="http://yemen-technology.blogspot.com//">Blogger-Widget</a>

</section> 

..................................................................................................................................

غير في الروابط 

وغير

 <h5>دروس السيو</h5>

<div>دروس السيو</div>

<h5>دروس بلوجر</h5>

<div>دروس بلوجر</div>

<h5>اضافات بلوجر</h5>

<div>اضافات بلوجر</div>

<h5>الربح من الانترنيت</h5>

<div>الربح من الانترنيت</div>

ولي التحكم في الطول و العرض 
height:65px;

width:150px;

المصدر:ر http://yemen-technology.blogspot.com/2016/06/blog-post_98.html#.V1LOx7LvO1s#ixzz4AcAnwFro