السبت، 6 مايو 2017

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

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

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

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

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

يجب على كل مدون اضافة أزرار المشاركات الاجتماعية على مدونته و خاصة ان مواقع التوصل الاجتماعي اليوم تعتبر اكبر مكان يتوافد اليه مستخدمي النت.
و الان الى خطوات اضافة أزرار المشاركة على مواقع التواصل الاجتماعي أسفل كل موضوع على بلوجر.
الخطوة 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>

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