قائمة احترافيه CSS3 مواقع التواصل الاجتماعي بلوجر 2014

بسم الله الرحمن الرحيم الرحيم

قائمة احترافيه 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/AVvXsEgAUGCz5MMlfBbGyH0QMappxtnlEHRpXgjLBk_BPTy94MjbwmJp9VROeq7SgXqnVAf4e-HiXq3S_x14Iqxo45ZX_ehGIO1tOt6P2nvfIN1XVUjlPgllt7iqrsyQYyAxpq3JWWcq0KimWWw/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> 

تحميل الكود