إضافة أيقونات المشاركة أسفل التدوينة

إضافة أيقونات المشاركة أسفل التدوينة

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

لكي لا أطيل عليك ندخل في صلب الموضوع

إضافة أيقونات المشاركة أسفل التدوينة
الأن قم بالدخول لقالب المدونة و ابحث عن الكود التالي <data:post.body/> قد تجد أكثر من كود حسب القالب سيكون الثاني و إن لم يعمل جربه على باقي الأكواد الموجودة فسيعمل مع أحدها.

بعد ذالك قم بلصق الكود التالي تحث الأول مباشرة

<style> 
/*--------Flipper Sharing Widget ------*/ 
.flipper a { 
display:block; 
height:48px; 
width:48px; 
padding:0 4px; 
float:left; 
background:transparent url(http://4.bp.blogspot.com/-dlD3BDKTZjA/T9IuXkfhSeI/AAAAAAAAGno/s8BGOkjdwX0/s1600/flipper.png) no-repeat; 
-webkit-transition: ease-in 0.15s all;    
-moz-transition: ease-in 0.15s all;    
-o-transition: ease-in 0.15s all;    
-ms-transition: ease-in 0.15s all;    
transition: ease-in 0.15s all; 
cursor:pointer;
}

.flipper a.googleplus { 
background-position: 0px -348px;
.flipper a.googleplus:hover { 
background-position: 0px -406px;
}

.flipper a.pinterest { 
background-position: 0px -464px; 
.flipper a.pinterest:hover { 
background-position: 0px -522px;
}

.flipper a.delicious { 
background-position: 0px 0px; 
.flipper a.delicious:hover { 
background-position: 0px -58px;
.flipper a.digg { 
background-position: 0px -116px;
.flipper a.digg:hover { 
background-position: 0px -174px;
.flipper a.stumbleupon { 
background-position: 0px -812px;
.flipper a.stumbleupon:hover { 
background-position: 0px -870px;
.flipper a.technorati { 
background-position: 0px -928px;
.flipper a.technorati:hover { 
background-position: 0px -406px;
.flipper a.twitter { 
background-position: 0px -928px;
.flipper a.twitter:hover { 
background-position: 0px -986px;
.flipper a.facebook { 
background-position: 0px -232px;
.flipper a.facebook:hover { 
background-position: 0px -290px;
.flipper a.reddit { 
background-position: 0px -580px;
.flipper a.reddit:hover { 
background-position: 0px -638px;
}
.flipper a.rss { 
background-position: 0px -696px;
.flipper a.rss:hover { 
background-position: 0px -754px;
}

.Pleaseshare{ 
margin:10px 0px; 
color:#333333
font-weight:bold; 
font-size:20px; 
font-family:sans-serif;
</style>

<div class='flipper'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="Pleaseshare"> 
إن أعجبك الموضوع قم بنشره) </div>

<!--Google Plus--> 
<a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>

<!--Facebook--> 
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>

<!-- Twitter --> 
<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>

<!-- Pinterest --> 
<a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/>

<!-- Delicious --> 
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>

<!--DIGG--> 
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>
<!--Stumble--> 
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>

<!-- Reddit --> 
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>
<!--RSS --> 
<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Bookmark plz :&gt;'/> 
</b:if></div>
<div style="clear:both"/>



  1. ما هو باللون البرتقالي يمكنك تغيره بما تريد فهو لون النص.
  2. أما الكلام باللون الأحمر يمكنك كتابة ما تريد أو تركه كما هو.
  3. بعد ذالك قم بحفظ القالب و اذهب للمدونة لترى النتيجة.

إذا أعجبك الموضوع فشاركه مع أصدقائك فلن يأخد منك الأمر سوى 5 ثوان :)

هناك 9 تعليقات:

  1. مشكووووووور جداً على مجهودك اخـى الكريم ..

    ردحذف
  2. اخي بارك الله فيك الاضافة جيدة لكن عند نشر موضوع من مدونتي الى الفيسبوك او google+ لاتضهر صورة الموضوع بل تضهر صورة header وجربت العديد ن الاضافات لكن نفس المشكل

    ردحذف
  3. انا لم اجد الكود اخي

    ردحذف