السلام عليكم ورحمة الله تعالى وبركاته في درس جديد واضافة جديدة من تقديم مدونتكم نكهة
في هذا الدرس سأقدم لكم اضافة جديدة وبصراحة لم اجد اي اسم لها ههه وهي اضافة جديدة وبسيطة بها صورتك الشخصية وصورة الغلاف خلفها بالاضافة الى ابقونات التواصل الاجتماعي التي تجعل مدونتك يزداد جمالية بها.
اترككم مع المعاينة لروا الاضافة مباشرة.

معاينة الاضافة

معاينة إضغط هنا

شرح طريقة التركيب

1. اولا نذهب الى التخطيط
2. ثم اختيار اذاة html/javascript
3. ثم ضع فيها هذه الأكواد

<style>
.donak1ha.join:hover,.donak1ha.gplus:hover,.donak1ha.facebook:hover,.donak1ha.instagram:hover,.donak1ha.twitter:hover { background: #696868; }
.donak1ha{float:none;margin-top:15px;margin-right:5px;width:32px;height:32px;line-height:32px}
.donak1ha a{padding:0;margin:0;width:32px;height:32px;line-height:32px;text-align:center}
.donak1ha a i{text-align:center;color:#fff;}
.donak1ha a:hover i{color:#fff;}
.donak1ha.join{background:#CC181E;}
.donak1ha.instagram{background:#406f94;}
.donak1ha.gplus{background:#f20000;}
.donak1ha.twitter{background:#00baff;}
.donak1ha.facebook{background:#516ca4;}
.donak1ha a i,.donak1ha a:hover i{color:#fff;}
.user-profile {
    background-color: #fff;
    text-align: center;
}
.user-profile>img {
    width: 100%;
}
.user-profile .user-img {
    text-align: center;
    display: block;
    margin: 0 auto;
    margin-top: -70px;
    height: 130px;
    width: 130px;
    position: relative;
}
.user-profile .user-img img {
    width: 100%;
    border: 3px solid #fff;
}

.user-profile .user-img .user-img-hover {
    background: none repeat scroll 0px 0px rgba(51, 51, 51, 0.8);
    color: #F4F4F4;
    font-size: 30px;
    text-align: center;
    line-height: 3.5;
    height: 115px;
    width: 136px;
    z-index: 999;
    display: inline-block;
    padding-top: 20px;
    position: relative;
    bottom: 141px;
    transition: all 800ms ease 0s;
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
}
.user-profile .user-img:hover .user-img-hover {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
}

.user-profile .details {
    display: inline-block;
}
.user-profile .details ul {
    padding: 0;
    margin-bottom: 20px;
    margin-top: 10px;
}
.user-profile .details ul li {
    display: inline-block;
    color: #797979;
    font-size: 16px;
    font-weight: 600;
}
.user-profile .details ul li:last-child {
    margin-left: 0;
}
.user-profile .details ul li span {
    display: block;
    font-size: 28px;
}
</style>
<div class="user-profile">
                    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVvG8yBli0Z6niXy_xL9gqXpvKy_xmS3YMfwzjWzuKr3LfcoX5jxJWiDyYC4QDmR_bXXI-VwEocmm175ECLi186H75cG6sxvEAKT8FeaCRusaHEAkNIg1j25STc6fn3EmZleZGwsoir38/s1600/yaminak1ha.png" class="img-responsive" />
                    <div class="user-img">
                       <a href="#" target="_blank">
                        <img src="http://www.rebox.tk/imagef-146957243022941-jpg.html" />
                        <div class="user-img-hover">
                            <i class="fa fa-link"></i>
                        </div></a>
                    </div>
                    <div class="details">
                      <ul>
<li class='donak1ha join'><a href='#' rel='nofollow' target='_blank' title='اشترك بالقناة'><i class='fa fa-youtube-play'></i><span class='inv'></span></a></li>
<li class='donak1ha gplus'><a href='#' rel='nofollow' target='_blank' title='تابعنا على جوجل+'><i class='fa fa-google-plus'></i><span class='inv'></span></a></li>
<li class='donak1ha facebook'><a href='#' rel='nofollow' target='_blank' title='تابعنا على فيسبوك'><i class='fa fa-facebook'></i><span class='inv'></span></a></li>
<li class='donak1ha instagram'><a href='#' rel='nofollow' target='_blank' title='تابعنا على أنستجرام'><i class='fa fa-instagram'></i><span class='inv'></span></a></li>
<li class='donak1ha twitter'><a href='#' rel='nofollow' target='_blank' title='تابعنا على تويتر'><i class='fa fa-twitter'></i><span class='inv'></span></a></li>
</ul>
                </div></div>

1. وأخيرا غير # الملونة بالأحمر بما يناسبك
2. ثم قم بعمل حفض
3. ومبروك عليك الاضافة