اضافة أزرار المشاركة أسفل الموضوع

اضافة أزرار المشاركة أسفل الموضوع

قمنا بدرس سابق بالشرح عن طريقة اضافة أزرار المشاركة بشكل جذاب في مدونتك ، والان نقدم لكم نسخة أكثر تطوراً وعصرية أكثر

ننتقل الى طريقة الاضافة

• قم بالبحث عن 

]]></b:skin>

• قم بوضع هذا الكود فوقه

/* أزرار المشاركة من ويب لايت */
.sharepost li{width:19%;padding:0;list-style:none;}
.sharepost li a { opacity: 0.8; padding: 10px 0; color: #fff; display: block; /* border: 2px dashed; */ /* box-shadow: 0px 0px 0px 2px rgb(217, 221, 223); */ font-size: 12px; font-weight: normal; line-height: 21px; border-radius: 4px; }.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}
.sharepost li a:hover{opacity:1;color:#444;}
.sharepost li .twitter{background-color:#55acee;}
.sharepost li .facebook{background-color:#3b5998;}
.sharepost li .gplus{background-color:#dd4b39;}
.sharepost li .pinterest{background-color:#cc2127;}
.sharepost li .linkedin{background-color:#0976b4;}
.sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,
.sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#444;color:#fff;}
.sharepost li{float:right;margin-left:1.2%}
.sharepost li:last-child{margin-left:0}
.sharepost li .fa:before{margin-left:5px}
#cssmenu > ul > li > a > span:hover { background-image: url(http://www.m5zn.com/newuploads/2015/11/12/png//c21d35ce4ad7386.png); background-size: 40px; }
.catalog { background: #ACC158 url(http://www.m5zn.com/newuploads/2015/11/12/png//9f60d4508bac045.png) no-repeat scroll right bottom; margin-bottom: 0; padding: 11px 0 9px; height: 40px; }

• قم بالبحث عن هذا الكود (إذا وجدت أكثر من واحد الأخير هو المقصود )

<data:post.body/>

• قم بوضع هذا الكود تحته

        <div style='clear: both;'/> 
  
<b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div class='sharepost'>
                <ul>
                <li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>غرد</a></li>

                <li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>شارك</a></li>

                <li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>شارك</a></li>

    <li><a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>شارك</a></li>

                <li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>شارك</a></li>

                </ul>
         </div>

وهكذا نكون انتهينا من الشرح

نلقاكم قريباً بأفضل ما عندنا

شارك التدوينة لتصل للجميع

• شارك
• شارك
• شارك
• شارك
• شارك