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

السلام عليكم ورحمة الله وبركاته 

اليوم سوف نتعرف على إضافة معروفه لدى الجميع ولكن عدلنا على هذه الإضافة بحيث أصبحت في قمة الإحترافية  تابعوا معنا كيفية تركيب الإضافة .

- طريقة تركيب الإضافة : 

1- أدخل إلى مدونتك ثم أختر تحرير قالب .

2- إبحث عن الوسم : ]]></b:skin>

3- ضع الكود التالي فوقه .

/* All-in-one-social share widget by Home Blogger----------------------------------------------- */
.dhi_menu,.dhi_menu ul,.dhi_menu li,.dhi_menu a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
.dhi_menu {
    height: 34px;
    width: 304px;
    background: #b8b8bc;
    background: -webkit-linear-gradient(top, #b8b8bc 0%,#38383a 10%);
    background: -moz-linear-gradient(top, #b8b8bc 0%,#38383a 10%);
    background: -o-linear-gradient(top, #b8b8bc 0%,#38383a 10%);
    background: -ms-linear-gradient(top, #b8b8bc 0%,#38383a 10%);
    background: linear-gradient(top, #b8b8bc 0%,#38383a 10%);
}
.dhi_menu:hover {
    height: 34px;
    width: 304px;
    background: #4c4e5a;
    background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 10%);
    background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 10%);
    background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 10%);
    background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 10%);
    background: linear-gradient(top, #4c4e5a 0%,#2c2d33 10%);
}
.dhi_menu li {
    list-style: none;
    float: left;
    display: block;
    height: 40px;
}
.dhi_menu li a {
    display: block;
    padding: 0 14px;
    margin: 6px 0;
    line-height: 25px;
    text-decoration: none;
    border-left: 1px solid #393942;
    border-right: 1px solid #4f5058;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #f3f3f3;
    text-shadow: 1px 1px 1px rgba(0,0,0,.6);
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}
.dhi_menu li:first-child a {
    border-left: none;
}
.dhi_menu li:last-child a {
    border-right: none;
}
.dhi_menu li:hover > a {
    color: #FFCC00;
}
.dhi_menu ul {
    position: absolute;
    left: 0;
    opacity: 0;
    background: #1f2024;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}
.dhi_menu li:hover > ul {
    opacity: 1;
}
.dhi_menu ul li {
    height: 0;
    overflow: hidden;
    padding: 0;
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}
.dhi_menu li:hover > ul li {
    height: 36px;
    overflow: hidden;
    padding: 0;
}
.dhi_menu ul li a {
    width: 75px;
    padding: 4px 0 4px 40px;
    margin: 0;
    border: none;
    border-bottom: 0px solid #353539;
}
.dhi_menu ul li:last-child a {
    border: none;
}
.dhi_menu a.twitter {
    background: url(http://1.bp.blogspot.com/-wzEBGWKeZU4/UV8inczouBI/AAAAAAAABUs/wBzqqtU7bic/s1600/03-twitter-20.png) no-repeat 6px center;
    background-color: #0ba6f7;
}
.dhi_menu a.comment {
    background: url(http://3.bp.blogspot.com/-uFd2iWN1pH8/UV8ippwVBsI/AAAAAAAABVc/AEkvcrJD-lI/s1600/bubble-24-20.png) no-repeat 6px center;
    background-color: #999999;
}
.dhi_menu a.share {
    background: url(http://4.bp.blogspot.com/-seFPyokr-r0/UV8inXo3xfI/AAAAAAAABU0/yi_NpXThs3g/s1600/06-facebook-20.png) no-repeat 6px center;
    background-color: #003366;
}
.dhi_menu a.plus {
    background: url(http://3.bp.blogspot.com/-u4-khRFgegA/UV8ioVy1XlI/AAAAAAAABVE/akdLtl9TaPg/s1600/40-google-plus-20.png) no-repeat 6px center;
    background-color: #dc311b;
}
.dhi_menu a.rss {
    background: url(http://4.bp.blogspot.com/-NLIejdClsKM/UV8ioW74__I/AAAAAAAABVI/Bci6hRET2hg/s1600/60-rss-20.png) no-repeat 6px center;
    background-color: #FF6600;
}
.dhi_menu a.newsletter {
    background: url(http://3.bp.blogspot.com/-qMK337O8X50/UV8iotjSeCI/AAAAAAAABVQ/C6h5DlEq5Os/s1600/Black_Email.png) no-repeat 6px center;
    background-color: #3b3c3c;
}
.dhi_menu a.faq {
    background: url(http://3.bp.blogspot.com/-fdquoSfUK74/UV8isjc9lVI/AAAAAAAABVk/Cghj6GrqX4Y/s1600/question-faq-128.png) no-repeat 6px center;
    background-color: #CDBFAC;
}
.dhi_menu a.follow {
    background: url(http://1.bp.blogspot.com/-wzEBGWKeZU4/UV8inczouBI/AAAAAAAABUs/wBzqqtU7bic/s1600/03-twitter-20.png) no-repeat 6px center;
    background-color: #0ba6f7;
}
.dhi_menu a.fanpage {
    background: url(http://4.bp.blogspot.com/-seFPyokr-r0/UV8inXo3xfI/AAAAAAAABU0/yi_NpXThs3g/s1600/06-facebook-20.png) no-repeat 6px center;
    background-color: #1950bf;
}
.dhi_menu a.youtube {
    background: url(http://2.bp.blogspot.com/-4QNq2BrfTaA/UV8inTMhcZI/AAAAAAAABUw/nOtg0NV3EC4/s1600/18-youtube-20.png) no-repeat 6px center;
    background-color: #880000;
}
.dhi_menu a.google {
    background: url(http://3.bp.blogspot.com/-u4-khRFgegA/UV8ioVy1XlI/AAAAAAAABVE/akdLtl9TaPg/s1600/40-google-plus-20.png) no-repeat 6px center;
    background-color: #dc311b;
}

4- بعد ذلك إبحث عن السطر التالي موجود منه أثنان المقصود منه الثاني :

<div class='post-footer'>

5- ضع الكود التالي تحته :

<ul class='dhi_menu'>
<li>    <a href='#'>
Share &#9660;
</a> <ul> <li>
<a class='twitter' data-via='labstrike' expr:href='&quot;
http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot;
+ data:post.url ' rel='nofollow' target='_blank' title='Tweet This!'>Twitter</a>
</li> <li>
<a class='share' expr:href='&quot;http://www.facebook.com/share.php?
v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot;
+ data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,
&apos;toolbar=0,status=0,width=626,height=436&apos;);
return false;' rel='nofollow' target='_blank' title='Share this on Facebook'>Share</a>
</li> <li>
<a class='comment' href='#comments1' id='cmtbtn'>Comment</a>
</li> <li>
<a class='plus' expr:href='&quot;https://plus.google.com/share?url=&quot;
+ data:post.url + &quot;&amp;imageurl=&quot;'
rel='nofollow' target='_blank' title='Post on GoogleBuzz'> Google+</a>
</li> </ul> </li> <li>
<a href=''>Subscribe &#9660;
</a> <ul> <li>
<a class='rss' href='http://feeds.feedburner.com/xxxxxxx' target='_blank'>RSS</a>
</li> <li>
<a class='newsletter' href='http://feedburner.google.com/fb/a/mailverify?uri=xxxxxxx'
target='_blank'>Newsletter</a>
</li> <li>
<a class='faq' href='#faq' target='_blank'>FAQ</a>
</li> </ul> </li> <li>
<a href='#'>Connect &#9660;
</a> <ul> <li>
<a class='follow' href='http://twitter.com/xxxxxxx' target='_blank'>Follow</a>
</li> <li>
<a class='fanpage' href='http://facebook.com/xxxxxxx' target='_blank'>Fanpage</a>
</li> <li>
<a class='youtube' href='https://www.youtube.com/user/xxxxxxx' target='_blank'>YouTube</a>
 </li> <li>
<a class='google' href='https://plus.google.com/xxxxxxx/' target='_blank'>Google+</a>
</li> </ul> </li> </ul>

- أخيراً إحفظ القالب .