اضافة أزرار المشاركة على مواقع التواصل الأجتماعي بشكلين مختلفين على بلوجر

اضافة أزرار المشاركة على مواقع التواصل الأجتماعي بشكلين مختلفين على بلوجر

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

 ايقونات المشاركة على مواقع التواصل الأجتماعي بشكلين مختلفين

و لهذا في هذا الدرس سأشارككم طريقة اضافة ايقونات المشاركات الاجتماعي أسفل كل موضوع على بلوجر بشكلين مختلفين.
انصحك بالاطلاع على هذا الموضوع >>اضافة صندوق الاعجاب بصفحة الفيسبوك جانبي و عائم على بلوجر <<

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

يجب على كل مدون اضافة أزرار المشاركات الاجتماعية على مدونته و خاصة ان مواقع التوصل الاجتماعي اليوم تعتبر اكبر مكان يتوافد اليه مستخدمي النت.
و الان الى خطوات اضافة أزرار المشاركة على مواقع التواصل الاجتماعي أسفل كل موضوع على بلوجر.
الخطوة 1: اذهب الى منصة بلوجر > المظهر > تحرير HTML
الخطوة 2: ابحث عن font-awesome.min.css ستجد كود مشابه لهذا.
font awesome  ان لم تجده اضف الكود التالي فوق </head>.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
الخطوة 3: تحديد مكان وضع ازرار المشاركة على مواقع التواصل الاجتماعي.
ابحث عن <data:post.body/> في الغالب ستجد اكثر من وسم، كل ماعليك فعله و ضع تحت كل وسم كلمة لتحدده مثلا الوسم الاول ضع اسفله Test1 و الثاني Test2 و الثالث Test3 و هكذا بعد ذلك قم بحفظ القالب و قم بمعاينة المدونة و حدد مكان و ضع ازرار المشاركة على مواقع التوصل الاجتماعي على حسب ما وجدت.

الشكل الاول: اضافة ازرار مشاركة التواصل الاجتماعي مسطحة (فلات) على بلوجر

الخطوة 4: ابحث عن </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:double #fff;}
.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}
.sharepost li a:hover{opacity:1;color:#444;border:double #fff;}
.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:left;margin-Right:1.2%}
.sharepost li:last-child{margin-Right:0}
.sharepost li .fa:before{margin-Right:5px}
الخطوة 5: قم بوضع الكود التالي في المكان الذي قمت بتحديده.
<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> </b:if>

الشكل الثاني: اضافة ايقونات المشاركة على مواقع التواصل الاجتماعي بشكل جذاب و احترافي على بلوجر

الخطوة 4: </b:skin> و اضف الكود التالي فوقه.
.share-post{text-align:center;margin-bottom:20px;margin-top:20px;padding:10px 0 50px}.share-post ul{margin:0 auto;width:90%}.share-post li{float:Right;margin:0 1%;width:18%;padding:0;list-style:none;position:relative;text-align:center}.share-post li a{padding:6px 38px 6px 7px;color:#fff;display:block;border-radius:2px;opacity:.9;font-size:13px;transition:all .6s ease-out}.share-post li a:hover{color:#fff;opacity:1}.share-post li .twitter{background-color:#19bfe5}.share-post li .facebook{background-color:#3b5998}.share-post li .gplus{background-color:#d44132}.share-post li .pinterest{background-color:#cb2027}.share-post li .tumblr{background-color:#304e6c}.share-post li .twitter:hover,.share-post li .facebook:hover,.share-post li .gplus:hover,.share-post li .pinterest:hover,.share-post li .tumblr:hover{color:#fff}.share-post li:last-child{margin-Right:0}.share-post li .fa:before{position:absolute;top:0;Right:0;display:inline-block;padding:5.5px 12px;font-family:fontawesome;text-align:center;background:rgba(0,0,0,0.08);color:#fff;line-height:20px;text-shadow:2px 2px rgba(0,0,0,0.1);font-size:14px;transition:all .6s ease-out}.share-post li:hover .fa:before{text-shadow:-2px 2px rgba(0,0,0,0.1)}.share-post li .fa{display:initial}.share-tooltip{position:relative;display:inline-block}.share-tooltip:before,.share-tooltip:after{position:absolute;opacity:0;z-index:1000000;-webkit-transition:.3s ease;-moz-transition:.3s ease;pointer-events:none}.share-tooltip:hover:before,.share-tooltip:hover:after{opacity:1}.share-tooltip:before{content:&#39;&#39;position:absolute;background:transparent;border:6px solid transparent;position:absolute}.share-tooltip:after{content:attr(data-share-tooltip);background:rgba(0,0,0,0.7);background:hsla(0,0%,20%,0.9);color:#fff;padding:8px 10px;font-size:12px;white-space:nowrap;border-radius:3px;-webkit-backface-visibility:hidden}.share-tooltip-top:before{bottom:125%;Right:10%;margin:0 0 -18px 0;border-top-color:rgba(0,0,0,0.7);border-top-color:hsla(0,0%,20%,0.9)}.share-tooltip-top:after{bottom:125%;Right:10%;margin:0 0 -6px -10px}.share-tooltip-top:hover:before{margin-bottom:-10px}.share-tooltip-top:hover:after{margin-bottom:2px}.share-tooltip-bottom:before{top:100%;Right:50%;margin:-14px 0 0 0;border-bottom-color:rgba(0,0,0,0.7);border-bottom-color:hsla(0,0%,20%,0.9)}.share-tooltip-bottom:after{top:100%;Right:50%;margin:-2px 0 0 -10px}.share-tooltip-bottom:hover:before{margin-top:-6px}.share-tooltip-bottom:hover:after{margin-top:6px}.share-tooltip-Right:before{Right:100%;bottom:50%;margin:0 0 -4px -8px;border-Right-color:rgba(0,0,0,0.7);border-Right-color:hsla(0,0%,20%,0.9)}.share-tooltip-Right:after{Right:100%;bottom:50%;margin:0 0 -13px 4px}.share-tooltip-Right:hover:before{margin:0 0 -4px -0}.share-tooltip-Right:hover:after{margin:0 0 -13px 12px}.share-tooltip-Right:before{Right:100%;bottom:50%;margin:0 -8px -4px 0;border-Right-color:rgba(0,0,0,0.7);border-Right-color:hsla(0,0%,20%,0.9)}.share-tooltip-Right:after{Right:100%;bottom:50%;margin:0 4px -13px 0}.share-tooltip-Right:hover:before{margin:0 0 }
الخطوة 5: ضع هذا الكود مكان الكود الذي حددناه.

<div class='share-socials'>
<ul>
<li><a class='twitter share-tooltip share-tooltip-top' data-share-tooltip='شارك على Twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/>Twitter</a></li>
<li><a class='facebook share-tooltip share-tooltip-top' data-share-tooltip='شارك على Facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/>Facebook</a></li>
<li><a class='gplus share-tooltip share-tooltip-top' data-share-tooltip='شارك على Google Plus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/>Google</a></li>
<li><a class='tumblr share-tooltip share-tooltip-top' data-share-tooltip='شارك على Tumblr' href='http://www.tumblr.com/share' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/>Tumblr</a></li>
<li><a class='pinterest share-tooltip share-tooltip-top' data-share-tooltip='شارك على Pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.title' target='_blank'><i class='fa fa-pinterest'/>Pinterest</a></li>
</ul>
</div>

لا تنسى التعليق و مشاركة المقال مع اصدقاءك فهذا أفضل ما نحصل عليه💖.

ليست هناك تعليقات