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

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

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

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

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

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

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

اسفل الوسم : <head> او فوق الوسم : </head>

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

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

2- اكواد CSS

التى تضيفها فوق الوسم : </b:skin>

/* 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 تضيفها

اسفل الكود : <data:post.body/>

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

<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
و فى الاخير مبروك عليك الاضافة , اي استفسار اترك تعليق

تعديل المقال

أقسام الوصول السريع ( مربع البحث )

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

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

مقالات قد تهمك