السلام عليكم ورحمة الله وبركاته
اليوم سوف اقدم لكم اضافة جميلة وهي التسميات بشكل انيق انا استعملها في مدونتي هده لكترة اعجابي بها
طريقة اضافة الاداة
- ادهب الى
- لوحة التحكم
- التخطيط
- إضافة أداة
- 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://meftahbloger.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://meftahbloger.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://meftahbloger.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://meftahbloger.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://meftahbloger.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;
انتهى بفضل الله
| روابط هذه التدوينة قابلة للنسخ واللصق | |
| URL | |
| HTML | |
| BBCode | |
ليست هناك تعليقات :