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

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

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

الكود الاول يضاف فوق الوسم ]]></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 == "item"'>
<ul id="cnmucsos">
<li><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ 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='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' target='_blank'><img src="https://lh5.googleusercontent.com/-6H4O512RdeI/U751PzLTaCI/AAAAAAAAEYA/RomrkUPKLZw/s120/tweet.png" /></a></li>
<li><a expr:href='"https://plus.google.com/share?url=" + data:post.url + ""' 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>