الدرس 72: طريقة اضافة ازرار المشاركات الخاصة بمواقع التواصل الاجتماعي على بلوجر

شرح طريقة اضافة و تثبيث ازرار المشاركات الخاصة بمواقع صفحات التواصل الاجتماعي : فيسبوك , تويتر , جوجل بلس , Tumblr , Pinterest اسفل مواضيع مدونة بلوجر Blogger

السلام عليكم احبابي متتبعي دورة بلوجر على مدونة علوم و تقنيات فى هذا الدرس ان شاء  الله سوف نتطرق حول طريقة تثبيث و عمل ازرار المشاركات الخاصة بصفحات التواصل الاجتماعي اسفل المواضيع على مدونة بلوجر
طبعا سبب اختياري لهذه الازرار  بتحديد هو انها خفيفة و سريعة على المتصفح عكس الاضافات الاخرى الخاصة بازرار مشاركات التى تحتوي على سكريبات ثقيلة على المدونة
وايضا مايميز هذه الازرار انها تظهر بشكل جميل على المدونة و متوافقة مع جميع شاشات الاجهزة الذكية مثل الهواتف و الاجهزة اللوحية
ازرار المشاركات التى ستجدها هي : Facebook , Twitter , google plus , Tumblr , Pinterest و يمكنك حدف التى لا تحتاجها

كيفية تثبيث ازرار مشاركات مواقع تواصل اجتماعي اسفل مواضيع مدونة بلوجر

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

اكواد اضافة ازرار مشاركات على الصفحات الاجتماعية على مدونة بلوجر

1- الكود التى تضيفه

 اسفل الوسم :   او فوق الوسم :

ان وجدت هذا الكود مضاف من قبل فى قالبك لا تعيد اضافته

2- اكواد CSS

 التى تضيفها فوق الوسم : 

/* CSS Share Button */ .share-text {color: #434A54; font: 14px DroidKufi-Bold; padding: 1px 12px ;} .share-post{text-align:center;margin-bottom:20px;margin-top:20px;padding:10px 0;} .widget .post-body > .share-post ul {padding:0;} .share-post li{float:right;margin:0 1%;width:18%;padding:0;list-style:none;position:relative;} .share-post li a{padding:6px 7px 6px 38px;color:#fff;display:block;border-radius:2px;font-size:13px;transition:all 0.6s ease-out;} .share-post li a:hover{color:#fff;} .share-post li .twitter{background-color:#19bfe5;} .share-post li .facebook{background-color:#3b5998;} .share-post li .gplus{background-color:#d64136;} .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;left:0;display:inline-block;padding:5.5px 12px;font-family:fontawesome;text-align:center;color:#fff;line-height:20px;text-shadow:2px 2px rgba(0,0,0,0.1);font-size:14px;transition:all 0.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;} @media only screen and (max-width:640px){ .share-post li a{padding:6px 0 6px 0;} .share-post li .fa:before{display:none;}} @media screen and (max-width:480px) { .share-post li{width:100%}}

3- اكواد HTML تضيفها

 اسفل الكود : 

 تجد منه اثنان او ثلاثة  على الاغلب الكود الثالت قم بالتجربة او يمكنك تحديدها كما هو مشروح فى الفيديو

<b:if cond='data:blog.pageType == "item"'> <h3 class='share-text'>شارك الموضوع ! </h3><div class='share-post'> <ul><li><a class='facebook arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='شارك الموضوع على الفيسبوك' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/>فيسبوك</a></li><li><a class='twitter arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='شارك الموضوع على التويتر' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/>تويتر</a></li><li><a class='gplus arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='شارك الموضوع على جوجل بلس' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/>جوجل بلس</a></li><li><a class='tumblr arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Tumblr' href='http://www.tumblr.com/share' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/>Tumblr</a></li><li><a class='pinterest arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on 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><div style='clear:both'/></b:if>

موقع لمعاينة ظهور ازرار مشاركات على الشاشات المتعددة الذكية من هنا : mobiletest
و فى الاخير مبروك عليك الاضافة  , اي استفسار اترك تعليق