أمــــــيـــــــنٌ Aminone

السلام عليكم ورحمة الله تعالى.

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

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

لإضافة هذه الأيقونات ما عليك سوى التوجه إلى لوحة تحكم المدونة، ثم اختيار قالب ثم "HTML".

بالضغط على "Ctrl+F" ابحث عن الكود التالي:

<data:post.body/>

سوف تجد أكثر من كود بهذا الاسم، اختر الكود الثاني، إن لم تنجح العملية مع الكود الثاني جربه على باقي الأكواد وستنجح الطريقة إن شاء الله. 
ثم قم بنسخ الكود التالي وقم بوضعه تحت الكود السابق.

<style> 

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

.flipper a { 

display:block; 

float:left; 

height:48px; 

width:48px; 

padding:0 4px; 

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT4fapZb3U-KvuYFD8ALDVO8wfFNJRCik6njyxDFRcHNfTEgm0lKoWAGSd-DtDwPIAcC8yAR810GXyDqCOsYQtgkJaQn68hGBOnU2eJ9AkJTzywvJf4pGcJhvdN0PhnvGNQJbJnqZGKxyy/s1600/flipper.png) no-repeat; 

-webkit-transition: ease-in 0.15s all;    

-moz-transition: ease-in 0.15s all;    

-ms-transition: ease-in 0.15s all;    

-o-transition: ease-in 0.15s all;    

background-position: 0px -406px;

transition: ease-in 0.15s all; 
cursor:pointer;
}


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

.flipper a.pinterest { 
.flipper a.googleplus:hover { 
}


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

.flipper a.delicious { 
background-position: 0px 0px; 
} 
.flipper a.delicious:hover { 
} 

.flipper a.stumbleupon:hover { 
.flipper a.digg { 
background-position: 0px -116px;
} 
.flipper a.digg:hover { 
background-position: 0px -174px;
} 
.flipper a.stumbleupon { 
background-position: 0px -812px;
} 
background-position: 0px -870px;

.flipper a.twitter:hover { 
} 
.flipper a.technorati { 
background-position: 0px -928px;
} 
.flipper a.technorati:hover { 
background-position: 0px -406px;
} 
.flipper a.twitter { 
background-position: 0px -928px;
} 

} 
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;

color:#333333; 
.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; 
font-weight:bold; 

<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;'/>
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--> 

<!--Facebook--> 

<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;'/>
<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 --> 

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

<!-- Delicious --> 

<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;'/>
<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--> 

<!-- Reddit --> 

<div style="clear:both"/> 
<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>