اقدم لكم اضافة ازرار التواضل الاجتماعي بشكل منزلق
الاضافة مهمة جدا و مفيدة
الاضافة تعطي جمالية للقالب
يمكن وضعها في المكان اللذي تريد
طريقة التركيب
نذهب الى المظهر و نبحث عن ]]></b:skin>
و نضيف الاكواد التالي اعلاها
/* Widget Author */
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {font-family: 'entypo', sans-serif;}
*{ box-sizing: border-box; }
a { text-decoration: none; transition: all .4s; }
.container { margin: 0 auto; }
.container:hover .author-body { height: 70px; }
.author-body a {color:#fff}
.author2 { overflow: auto; padding: 20px; background: #fff; border-radius: 5px 5px 0 0; font-size:12px; margin: -60px; color: #b9becd; }
.author2:before { content: ""; display: block; float: left; width: 80px; height: 80px; margin-right: 20px; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEMe9SzhZWUKqEC5n2FV2cAZHWKv3RB7nCiZUOLA3pNowI4cIUwYX2lZ-P9jjuwSJHuaz78Fw7olPVKEs954mkByX7c2oVaysG4MQsrxOZm9AaL4w4vEzTokPu4H4fOR1zNMY8pUaZpS8/w835-h833-no/Teja.jpg") no-repeat; background-size: 80px; border-radius: 100%; }
.author2 h1 { margin: 15px 0 5px; font-weight: 100; font-size:20px; color: #5e6d81; }
.author-body { height: 0; background: #323a45; color: #fff; vertical-align: middle; transition: all .3s; }
.author-body a { display: inline-block; width: 25%; height: 100%; padding: 20px; border-right: 1px solid rgba(255,255,255,.25); text-align: center; color: #fff!important;
font-size: 2.5em}
.author-body a:hover { background: #515761; }
.author-body a:last-child { border-right: none; }
.foot { /*height: 100px;*/ }
[class^="footItem"] { display: inline-block; width: 33.333333%; padding: 15px 0; text-align: center; color: rgba(255,255,255,.8); font-size: 1.1em; }
[class^="footItem"] span { display: block; font-size: 1.6em; margin-bottom: 5px; color: #fff; }
.footItem1 { background: #14b9d6; color: white!important;}
.footItem1:hover { background: #5bcee2; }
.footItem2 { background: #f27935; color: white!important; }
.footItem2:hover { background: #f6a172; }
.footItem3 { background: #1fbba6; color: white!important;}
.footItem3:hover { background: #63d0c1; }
.widget-content { box-shadow: 0 0 0 1px #D3D3D3;}
.section:first-child .widget:first-child {margin-bottom:15px}
ثم نذهب الى التخطيط و نضيف اداة جديدة و نضع الاكواد التالية بداخلها
<div class="container">
<div class="author2">
</div>
<div class="author-body">
<a href="#Twitter-LINK"><i class="fa fa-twitter"></i></a><a href="#Facebook-LINK"><i class="fa fa-facebook-f"></i></a><a href="#youtube-LINK"><i class="fa fa-youtube"></i></a><a href="#instagram-LINK"><i class="fa fa-instagram"></i></a>
</div>
<div class="foot">
<a class="footItem1" href="#"><span class="entypo-heart"></span>102</a><a class="footItem2" href="#"><span class="entypo-user"></span>4,587</a><a class="footItem3" href="#"><span class="entypo-plus"></span>84,023</a>
</div></div>
ملاحظة
تضيف الروابط المناسبة مثلا مكان #Twitter-LINK تضع رابط التويتر و هكذا