اضافة ازرار التواصل لقوالب البلوجر بشكل منزلق

اقدم لكم اضافة ازرار التواضل الاجتماعي بشكل منزلق

الاضافة مهمة جدا و مفيدة 

الاضافة تعطي جمالية للقالب 

يمكن وضعها في المكان اللذي تريد

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

نذهب الى المظهر و نبحث عن  ]]></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://lh4.googleusercontent.com/-d56xTkiZgmo/VBDU0Z7kMYI/AAAAAAAADX8/FHz1srAnmyI/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 تضع رابط التويتر و هكذا