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


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


اليك طريقة تخصيص وأضافة هذه الأداة لمدونات بلوجر


1-توجة الى لوحة تحكم بلوجر وأختر تحرير HTML وأبحث عن الشفرة التالية <data:post.body/> ,وربما قد تجد اكثر من واحدة يجب عليك تجربتها جميعا,وربما قد تكون الأخيرة هي المقصودة.
2-أنسخ الأكواد والشفرات التالية مباشرة بعد الكود او الشفرة السابقة التي قمت بالبحث عنها في الخطوة الأولى
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tombol-berbagi-arlina'>
<div class='tombol-berbagi-arlina-fb'>
<a class='tombol-berbagi-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> أنشرها على الفيسبوك</a>
</div>
<div class='tombol-berbagi-arlina-tw'>
<a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>أنشرها على تويتر</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>أنشرها على جوجل بلس</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-lin' 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' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-lin-label' 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' rel='nofollow' target='_blank'>أنشرها على لينكدأن</a>
</div>
</div>
</b:if>
3-أبحث عن كود ]]></b:skin> وأنسخ الأكواد التالية قبلة مباشرة
/* CSS Share Button */
.tombol-berbagi-arlina{display:block;position:relative;height:43px;line-height:43px;padding:0;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}
.tombol-berbagi-arlina-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}
.tombol-berbagi-arlina-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}
.tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv0aqzrZ5FWwOAjLsvLRYzU0KJ9R1wWjk5eHlkxmGnBhG-KsJdfKitXarWgP-uUqr_HQ3WQuvqxo_RoPVTm5nc29AVi2rCBoMLUN1hyphenhyphent_2f9Xp9DSWvVLgGy1jx7Lq_CV6lybX06zp1GPF/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:0}
.tombol-berbagi-fb-label{color:#2d609b}
.tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}
.tombol-berbagi-tw{background-position:0 -43px}
.tombol-berbagi-tw-label{color:#00c3f3}
.tombol-berbagi-gp{background-position:0 -86px}
.tombol-berbagi-gp-label{color:#f00}
.tombol-berbagi-lin{background-position:0 -129px}
.tombol-berbagi-arlina a{color:#999;transition:all .3s;}
.tombol-berbagi-arlina a:hover{color:#7cb0ed}

@media only screen and (max-width:640px){
.tombol-berbagi,.tombol-berbagi-arlina-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
.tombol-berbagi,.tombol-berbagi-arlina-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}
4-قم بعملية حفظ القالب.

0 تعليق

إرسال تعليق