مساحة إعلانية

الخميس، 10 يوليو، 2014

الخميس، 10 يوليو، 2014

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

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

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

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

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

هناك 21 تعليقًا:

  1. جميل جدا اخي عمرو بارك الله فيك

    ردحذف
    الردود
    1. ربي يعزك أخي محمد ودائما ما يسعدني مرورك يا طيب

      حذف
  2. اضافة في قمة الجمالية q= شكرا d=

    ردحذف
    الردود
    1. أشكرك يا طيب على هذا المرور العطر =r

      حذف
  3. جميل جداا اخى بارك الله فيك

    ردحذف
    الردود
    1. وفيك بارك الله أخي احمد ودي وتقديري =r

      حذف
  4. أخي شرح جميل و موضوع جميل جداً كنت أبحث عنه لكن كيف يمكنني كتابة شارك الموضوع مع أصدقائك ؟! أريد كتابة هذه العبارة السابقة قبل صورة مشاركة و صورة غرد و صورة شارك +1 أريد كتابتها قبلهم و على خط متوازاً هل فهمتني أخي هذه صورة توضح أكثر http://im52.gulfup.com/pT34Bu.png

    محل الصندوق الرفيع أريد كتابة عبارة عبر إزالة الصور إلى الأمام

    ردحذف
    الردود
    1. جرب هذه الطريقة أخي أضف الكود التالي فوق الوسم <li>
      <li style="font: bold 24px tahoma;">شارك</li>
      يعني ستجد الوسم متكرر ثلاث مرات فوق كل مرة اضف الكود السابقة مع تعديل كلمة شارك بالكلمة التي تريد والرقم 24 هو حجم الخط
      مسالة الصندوق لم أفهمها يرجى التوضيح
      وملحوظة يمكنك الإستعانة بهذا الموضوع لعمل تلميحات يعني يمكنك بدلا من كتابة كلمة شارك قبلها ان تضع تلميح
      http://cnmu.blogspot.com/2014/06/Tooltip.html

      حذف
  5. اخي ممكن اضافة التالي و السابق كما لديك
    =q

    ردحذف
    الردود
    1. راجع هذا الموضوع اخي الكريم
      http://cnmu.blogspot.com/2014/02/Show-Next-and-Previous-Post-Titles.html

      حذف
  6. موضوع رائع كالعادة من شخص مبدع

    يعطيك الف عافية يا غالي

    ردحذف
  7. اخي عمر انت مرة قلت لي انك ستضع اعلان لمدوني لمدة 15 يوما كهدية منك عند اكمال مدونتي 10 مواضيع الان اصبح بالمدونة 20 موضوع و كلهم من جهدي و لا موضوع منقول من اي مدونة عربية كلهم ترجمتي و مواضيع حصرية
    هل استطيع وضع الاعلان الان و كم هو حجم الاعلان كي اقوم بتصميمه و شكرا لك

    ردحذف
    الردود
    1. وأنا عند وعدي أخي الكريم الإعلان بمقاس 125x125 بإذن الله أرسله لي في رسالة

      حذف
  8. اخي بالله عليك اريد قالب كالذي في هذه المعاينة تماما لوسمحت ؟؟

    ردحذف
    الردود
    1. أخي الفاضل القالب هو من قوالب بلوجر الأساسية كل ما عليك فعله الدخول للوحة التحكم الخاصة بمدونتك
      ثم اختار القالب ستجد في الاسفل مجموعة نماذج جاهزة هناك مجموعة بإسم Awesome Inc‎. ستجد القالب ضمنها قف عليه بمؤشر الفأرة واضغط تطبيق على المدونة
      وستجده يعمل على المدونة

      حذف
  9. شكرا لك اخي على لاضافة وكنت ابحت عنها مند مدة لكن بدون جدوة دائما استفيد من مواضيعك المميزة ممكن ان توض كيفية التحكم في مكان ضهور لازرار فمتلا انا تضهر لي في جانب لايمن مذا لو اردت تحميلها للجانب لايسر و شكرا لك

    ردحذف
    الردود
    1. لجعل الإضافة الى اليسار استبدل
      float:right;
      بـــ
      float:left;
      وشكراً على مرورك أخي الكريم

      حذف
  10. كيف تجعل الاضافة في سطر واحد

    ردحذف
    الردود
    1. ما الآداة بالفعل في سطر واحد اخي

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

    ردحذف
    الردود
    1. يمكنك إستخدام الكود كما هو دون تعديل
      التعديل فقط لمن يريد شكل مخصص لنفسه

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©