إضافة أيقونات المشاركة باللغة ماتيريال ديزاين إلي منصة بلوجر

السلام عليكم، مرة أخري سوف أقدم لكم إضافة أيقونات المشاركات باللغة ماتيريال ديزاين إلي منصة بلوجر فهذه الإضافة من خلالها يمكن لزائر نشر تدوينة أو مقال ما علي مدونتك من مواقع التواصل الإجتماعية مثل الفيس بوك و تويتر وجوجل بلس ، فهذه الإضافة مهمة جدا لمصممين القوالب وذلك من اجل إشهار مدونتك.

شرح تركيب الإضافة :

أولا من لوحة تحكم القالب ثم إلي قسم القالب وبالضغط علي تحرير HTML.
قم باللصق الأكواد الأتية بعد هذا الوسم <data:post.body/>

<h4 class='post-bawah'>شارك التدوينة عبر :</h4>
<div class='sharepost'>
<ul>
<li>
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook' /></a>
</li>
<li>
<a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter' /></a>
</li>
<li>
<a class='gplus' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus' /></a>
</li>
</ul>
</div>

بعد هذا قم باللصق الأكواد الأتية بعد هذا الوسم ]]></b:skin>

h4.post-bawah {
text-align: center;
}
.sharepost {
padding: 20px;
text-align: center;
}
.sharepost li a {
padding: 10px;
width: 20px;
height: 20px;
color: #fff;
display: inline-block;
border-radius: 50%;
margin: 0 10px;
transition: all 0.5s;
box-shadow: 0px 1px 5px rgba(0,0,0,0.5);
}
.sharepost li a:hover {
box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
}
.sharepost li a.facebook {
background: #3A5795;
}
.sharepost li a.twitter {
background: #1DA1F2;
}
.sharepost li a.gplus {
background: #DB4437;
}