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

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

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

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

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

<style> 

/*--------Flipper Sharing Widget ------*/ 

.flipper a { 

display:block; 

height:48px; 

width:48px; 

padding:0 4px; 

float:left; 

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_v1aWdCcZ_GcWWO26qBeZAPpRuzGKl4BnoDhWtzP0Vd8EDQcZPx-Qp15cad_CRHXzaWlZWSWkDjV73JY7EFehaPv88-jhAQ25sj7rCJQRfRpjtgljzafdiWjlJwcFU0yrLSBm-ft08d5J/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 ثوان :)