أزرار المشاركة الإجتماعية أسفل المواضيع

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

معاينة

طريقة تركيب أزرار المشاركة الإجتماعية أسفل المواضيع

نبحث عن هذا الوسم وتضع فوقه الكود التالي

]]></b:skin>

/*مشاركة*/
.sharetool {
border: 1px solid #eee;
display: block;
height: 80px;
margin: 10px auto;
padding: 20px;
width: 390px;
}
.sharetool ul {
list-style: outside none none;
margin: 0;
padding: 0;
}
.sharetool li {float: left;}
.sharetool strong {
float: right;
font-size: 13px;
line-height: 36px;
}
.sharetool a::before {
float: left;
line-height: 36px;
text-align: center;
width: 36px;
}
.sharetool a {
background-color: #333;
color: #fff;
display: block;
height: 36px;
margin-right: 4px;
padding: 0 5px 0 0;
width: 110px;
}
.sharetool .fa.fa-facebook::before {background-color: #3b5998;}
.sharetool .fa.fa-twitter::before {background-color: #11C1FF;}
.sharetool .fa.fa-google-plus::before {background-color: #DA4835;}
.sharetool .fa.fa-facebook:hover {box-shadow: 120px 0 0 0 #3b5998 inset;}
.sharetool .fa.fa-twitter:hover  {box-shadow: 120px 0 0 0 #11C1FF inset;}
.sharetool .fa.fa-google-plus:hover {box-shadow: 120px 0 0 0 #DA4835 inset;}
@media screen and (max-width : 540px) {
.sharetool {padding:0; border:0; width:auto;}
} 

 الكود الثاني 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sharetool'>
<ul>
<li><a class='fa fa-facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' target='_blank'><strong>فيسبوك</strong></a></li>
<li><a class='fa fa-twitter' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' target='_blank'><strong>تويتر</strong></a></li>
<li><a class='fa fa-google-plus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&quot;' target='_blank'><strong>جوجل بلس</strong></a></li>
</ul>
</div>
</b:if>

ويوضع أسفل هذا الكود

<div class='post-footer'>

أي أستفسار حول الاضافة ضعه في تعليق 

شارك المقالة عبر:

إقرأ أيضا