بسم الله الرحمن الرحيم الرحيم
قائمة احترافيه CSS3 تحت الهيدر للموقع مع خاصيه الهوفر
بعد الانتهاء من تصميم هذه الاداء وتطويرها اقدمها لكم على مدونة المطور.نت , الاضافة يظهر فيها صناديق مواقع التواصل الاجتماعي , قائمة جميلة بتقنية css بمدونات بلوجر 2014 , يمكنك اضافة تحت الهيدرمعاينة الاضافة !!
طريقة التركيب !!
الذهاب الى بلوجر >> التخطيط >> اضافة اداة وضع فيها الكود الاتي<ul class="ul_hm">
<li>
<a class="BeHsociallinks" target="_new" href="Facebook Link">
<div id="BeHsocialfb" style="background-position: 0px 0px;">Facebook</div>
</a>
<a class="BeHsociallinks" target="_new" href="Twitter Link">
<div id="BeHsocialtwit" style="background-position: -86px 0px;">Twitter</div>
</a>
<a class="BeHsociallinks" target="_new" href="LinkedIn link">
<div id="BeHsociallink" style="background-position: -172px 0px;">Linkedin</div>
</a>
<a class="BeHsociallinks" target="_new" href="YouTube link">
<div id="BeHsocialytube" style="background-position: -258px 0px;">You Tube</div>
</a>
<a class="BeHsociallinks" href="Blog link">
<div id="BeHsocialblog" style="background-position: -344px 0px;">Blog</div>
</li>
</ul>
<style>
.subscribebutton .mj_btnbg {
color: #141414;
font-weight: bold;
height: 35px;
line-height: 35px;
padding: 0 10px;
text-transform: uppercase;
}
.ul_hm li div {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdG4zPSDkmuigDt1hrf81fju6lmWlMvdObrww5yznJPmA4OSz0D0GJhGx6fbnNPByzinveACKYYA6c4jnmRWpv1Ld9qdo6cCNmWJ2X3IZ3BrtJ18GhG8-31K-YDt-XPPoTU9TswnzkPqo/s1600/social_icon_sprite.png");
float: left;
height: 83px;
margin-right: 3px;
width: 83px;
}
.BeHsociallinks {
font-size: 0;
}
#BeHsocialfb:hover {
background-position: 0 -86px !important;
}
#BeHsocialtwit:hover {
background-position: -86px -86px !important;
}
#BeHsociallink:hover {
background-position: -172px -86px !important;
}
#BeHsocialytube:hover {
background-position: -258px -86px !important;
}
#BeHsocialblog:hover {
background-position: -344px -86px !important;
}
ul li {list-style: none outside none;}
</style>
