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

يوليو 10, 2014 omer mohamed

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

معاينة

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

الكود الاول يضاف فوق الوسم ]]></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'>

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

مشاركة