صناعة آداة مشاركة اجتماعية على ذوقك

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

معاينة

طريقة التركيب والتعديل

الكود الاول يضاف فوق الوسم ]]></b:skin>

/*cnmu.blogspot.com Custom Social Media Buttons*/
#cnmucsos {margin: 10px 0; padding: 0;}
#cnmucsos li {
    list-style:none;
    float:right;
    display:block;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 500ms;
    -moz-transition-property: opacity;
    -moz-transition-duration: 500ms;
 }
#cnmucsos:hover li {opacity:.2;}
#cnmucsos li:hover {opacity:1;}
#cnmucsos li a img {
    width:120px;
    height:34px;
    margin-left:2px;
}
#cnmucsos li,#cnmucsos li a img {
    border:0 !important;
    box-shadow:0 !important;
    background:none !important;
    padding:0 !important;
}

الرقم 120 هو عرض الصور التي ستستخدمها في الآداة

الرقم 34  هو ارتفاع الصور

الرقم 2 هو الفراغ الفاصل ما بين الصورة والأخرى

الكود الثاني

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ul id="cnmucsos">
<li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' target='_blank'><img src="https://lh3.googleusercontent.com/-0tVOpGac4AM/U751P39FyFI/AAAAAAAAEX8/5drUE5-OEvU/s120/share.png" /></a></li>
<li><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' target='_blank'><img src="https://lh5.googleusercontent.com/-6H4O512RdeI/U751PzLTaCI/AAAAAAAAEYA/RomrkUPKLZw/s120/tweet.png" /></a></li>
<li><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&quot;' target='_blank'><img src="https://lh6.googleusercontent.com/-ooeIjG-KlXY/U751PhqRnCI/AAAAAAAAEYI/6lVDuMHoJnI/s120/%252B1.png" /></a></li>
<div style='clear: both;'/>
</ul>
</b:if>

كل ما عليك فعله في هذا الكود هو استبدال الثلاث روابط الملونة

الرابط الاول هو صورة فيس بوك

الرابط الثاني هو صورة تويتر

الرابط الثالث هو صورة جوجل بلس

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

والكود السابق يضاف فوق احد هذه الاكواد

ان اردته في بداية التدوينة أضفه بعد احد هاذين الكودين

<div class='post-header'>
<div class='post-header-line-1'/>

وان اردته في نهاية التدوينة أضفه بعد احد هاذين الكودين

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>

وبهذا أصبح لديك إضافة على ذوقك تجربة موفقة  مع تحياتي