أزرار المشاركة الإجتماعية لمدونات بلوجر لها دور مهم جدا لأنها تساعد الزوار على نشر محتوى المدونة بسهولة بحيث يؤدي ذلك إلى زيادة عدد الزيارات والصفحات المشاهدة. اليوم سنقدم لكم ازار من نوع آخر وبشكل أنيق جدا يناسب جمالية مدونتك.
معاينة
ابحث عن الوسم ]]></b:skin> و اضف الكود التالي قبله
رمز Code:
#SHare {padding: 0;list-style: none;margin-right: -5px;}
#SHare li {float: left;width: 33%;height: 48px;line-height: 48px;text-align: center;}
#SHare a {display: block;height: 100%;line-height: 48px;font-size: 20px;color: #fff;text-decoration: none;}
#SHare a:hover {background-color:#000 !important;}
#SHare .fa.fa-facebook {background-color: #485A96;}
#SHare .fa.fa-twitter {background-color: #50ABF1;}
#SHare .fa.fa-google-plus {background-color: #DC4A38;}
ثانيا ابحث عن الوسم <data:post.body/> و اضف الكود التالي تحته
رمز Code:
<b:if cond='data:blog.pageType == "item"'>
<ul id='SHare'>
<li><a class='fa fa-facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' target='_blank'></a></li>
<li><a class='fa fa-twitter' expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' target='_blank'></a></li>
<li><a class='fa fa-google-plus' expr:href='"https://plus.google.com/share?url=" + data:post.url + ""' target='_blank'></a></li>
</ul>
<div style='clear: both;'></div>
</b:if>
المصدر : مدونة خدمات بلوجر
رمز Code:
#SHare {padding: 0;list-style: none;margin-right: -5px;} #SHare li {float: left;width: 33%;height: 48px;line-height: 48px;text-align: center;} #SHare a {display: block;height: 100%;line-height: 48px;font-size: 20px;color: #fff;text-decoration: none;} #SHare a:hover {background-color:#000 !important;} #SHare .fa.fa-facebook {background-color: #485A96;} #SHare .fa.fa-twitter {background-color: #50ABF1;} #SHare .fa.fa-google-plus {background-color: #DC4A38;}
رمز Code:
<b:if cond='data:blog.pageType == "item"'> <ul id='SHare'> <li><a class='fa fa-facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' target='_blank'></a></li> <li><a class='fa fa-twitter' expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' target='_blank'></a></li> <li><a class='fa fa-google-plus' expr:href='"https://plus.google.com/share?url=" + data:post.url + ""' target='_blank'></a></li> </ul> <div style='clear: both;'></div> </b:if>
تعليقات: 0
إرسال تعليق