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

شارك مع اصدقائك:

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

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

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

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

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

الخطوة 1: اذهب الى منصة بلوجر > المظهر > تحرير HTML

الخطوة 2 : ابحث عن الوسم <head>.بالضغط على CTRL+F و أسفله مباشرة ادخل الكود التالي:

هذا الكود خاص بالايقونات التي تظهر في ازرار المشاركات الاجتماعية.

الخطوة 3 : تحديد مكان وضع ازرار المشاركة على مواقع التواصل الاجتماعي.

ابحث عن <data:post.body/> في الغالب ستجد اكثر من وسم، كل ماعليك فعله و ضع تحت كل وسم كلمة لتحدده مثلا الوسم الاول ضع اسفله Test1 و الثاني Test2 و الثالث Test3 و هكذا بعد ذلك قم بحفظ القالب و قم بمعاينة المدونة و حدد مكان و ضع ازرار المشاركة على مواقع التوصل الاجتماعي على حسب ما وجدت.

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

الخطوة 4: ابحث عن </b:skin> و اضف فوقه الكود التالي.

.share{font-size:18px;margin:30px 0}
.knzshare li{width:19%;padding:0;list-style:none;}
.knzshare li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}
.knzshare{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}
.knzshare li a:hover{opacity:1;color:#444;border:double #fff;}
.knzshare li .twitter{background-color:#55acee;}
.knzshare li .facebook{background-color:#3b5998;}
.knzshare li .gplus{background-color:#dd4b39;}
.knzshare li .pinterest{background-color:#cc2127;}
.knzshare li .linkedin{background-color:#0976b4;}
.knzshare li .twitter:hover,.knzshare li .facebook:hover,.knzshare li .gplus:hover,
.knzshare li .pinterest:hover,.knzshare li .linkedin:hover{background-color:#444;color:#fff;}
.knzshare li{float:left;margin-Right:1.2%}
.knzshare li:last-child{margin-Right:0}
.knzshare li .fa:before{margin-left:15px}

الخطوة 5: قم بوضع الكود التالي في المكان الذي قمت بتحديده.

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

~~الخطوة 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:''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='"http://twitter.com/share?url=" + 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='"http://www.facebook.com/sharer.php?u=" + 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='"http://plus.google.com/share?url=" + 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='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.title' target='_blank'><i class='fa fa-pinterest'/>Pinterest</a></li>
~~</ul>~~
~~</div>~~

للاسف الشكل الثاني بعد التجربة لم بعمل كما كان يجب، اذ لم تجد ما كنت تتوقع فقم البحث في المدونة عن ما تريد.
لا تنسى التعليق و مشاركة المقال مع اصدقاءك فهذا أفضل ما نحصل عليه💖.
تم التحديث بتاريخ: 17/07/2018