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

الأربعاء، 24 ديسمبر، 2014

الأربعاء، 24 ديسمبر، 2014

كارت ادوات المتابعة الاجتماعية

Social Card Blogger widget
أقدم لكم إضافة جديدة وحصرية من تصميمي لأزرار وادوات المتابعة الإجتماعية احببت أن جمل أدوات المتابعة في إضافة خفيفة وبسيطة وفي نفس الوقت تجمل غالبية المواقع الإجتماعية المعتمد عليها من قبل المدونين في بلوجر تم استخدام ادوات رسمية لموقعي جوجل بلس Google Plus وفيس بوك Facebook كونهم ازرار خفيفة وسريعة التحميل لتويتر Twitter ويوتيوب Youtube وبلوجر Blogger فضلت ان استخدم ازرار روابط فهي كافية وأخف من الأدوات الاصلية وفي نفس الوقت تؤدي نفس المهمة تماما لان اضافات الإشتراك الخاصة بتلك المواقع تحيل للموقع لتشترك به فالازرار العادية كافية وطبعا تم دمج نموذج اشتراك بالبريد لتكتمل الآداة 
وهذه معاينة حية للإضافة نرجوا لمن لم يتابعنا أن يسجل متابعته لنا عبرها


وهذا هو الكود أضفه في آداة HTML/JavaScript
<style>
#sosialandmail {
  box-shadow: 4px 4px 2px #444;
  width: 280px;
}
#sosialcnmes,.mailfcm {width: 100%;}
.gpluscm {
  background-color: #e01f28;
  display: block;
  float: right;
  height: 64px;
  overflow: hidden;
  padding: 10px;
  width: 95px;
}
.fbcm {
  background-color: #96c1e7;
  float: right;
  height: 64px;
  overflow: hidden;
  padding: 10px;
  width: 55px;
}
.ytweet {
  float: right;
  width: 90px;
}
.twittercm, .ytcm, .bfolcm {
  box-shadow: 0 0 1px #777 inset;
  display: block;
  float: right;
  color:#fff;
  font: bold 16px tahoma;
  overflow: hidden;
  padding: 3px 0 6px;
  text-align: center;
  text-decoration: none;
  transition: all 0.7s ease 0s;
  width: 100%;
}
.twittercm {background-color:#55ACEE;}
.ytcm {background-color:#555;}
.bfolcm {background-color:#FD7E00;}
.twittercm:hover,.ytcm:hover,.bfolcm:hover {background-color:#000; color:#fff;}
#cmfotext {
  background-color: #000;
  border: 0 none;
  color: #fff;
  display: block;
  float: right;
  font: bold 16px tahoma;
  padding: 10px 0;
  text-align: center;
  width: 100%;
}
#cmfobu {
  background-color: #00A903;
  border: 0 none;
  color: #fff;
  cursor: pointer;
  font: bold 16px tahoma;
  padding: 10px 0;
  transition: all 0.7s ease 0s;
  width: 100%;
}
#cmfobu:hover{background-color: #1A4D17;}
</style>
<div id='sosialandmail'>
<div id="sosialcnmes">
<!---جوجل بلس--->
<div class="gpluscm">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-follow" data-annotation="vertical-bubble" data-height="24" data-href="//plus.google.com/u/0/GPID" data-rel="publisher"></div>
</div>
<!---فيس بوك--->
<div class="fbcm">
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FPageID&amp;width=55&amp;layout=box_count&amp;action=like&amp;show_faces=true&amp;share=false&amp;height=65&amp;appId=185398838186125" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:55px; height:65px;" allowTransparency="true"></iframe>
</div>
<div class="ytweet">
<!---تويتر--->
<a class="twittercm" href='https://twitter.com/TwID' target="_blank" rel="nofollow">تويتر</a>
<!---يوتيوب--->
<a class="ytcm" href='https://www.youtube.com/user/YTID' target="_blank" rel="nofollow">يوتيوب</a>
<!---بلوجر--->
<a class="bfolcm" href='http://www.blogger.com/follow-blog.g?blogID=xxxxxxxxxx' target="_blank" rel="nofollow">بلوجر</a>
</div>
</div>
<div class='mailfcm'>
<form id='cmforb' action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FeedId', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input id='cmfotext' type="text" value="أكتب بريدك الإلكتروني" onfocus="if (this.value == &quot;أكتب بريدك الإلكتروني&quot;) {this.value = &quot;&quot;;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;أكتب بريدك الإلكتروني&quot;;}" name="email"/>
<input id='cmfobu' type="submit" value="إشترك" />
<input name="uri" type="hidden" value="FeedId"/>
<input name="loc" type="hidden" value="en_US"/>
</form>
</div>
</div>

الإعدادات

استبدل GPID بمعرف صفحة جوجل بلس
للحصول عليه ادخل الى صفحة مدونتك في جوجل بلس وانسخ الرقم او الغسم التعريفي منها مثال


استبدل PageID بإسم رابط صفحتك على فيس بوك
استبدل TwID بإسم حسابك في تويتر
استبدل YTID بإسم رابط قناتك على اليوتيوب
استبدل xxxxxxxxxx بمعرف مدونتك
وللحصول عليه ادخل الى لوحة تحكم المدونة ثم إنسخه من شريط عنوان المتصفح

استبدل FeedId معرف مدونتك في موقع فيد برنر مكرر مرتين موضوع به شرح ان لم تكن تعرف طريقة الحصول عليه

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

  1. موضوع رائع جدا أخي الفاضل

    ردحذف
  2. شكرا لك اخي عمرو صراحة اعحبني شكل الكارت
    شكلها بسيط و لكن زو فائدة كبيرة

    =r

    ردحذف
  3. حيا الله الأحباب =r تشرفت بمروركم اخواني الكرام
    دمتم بكل ود

    ردحذف
    الردود
    1. اخي ممكن كيفية استمالة

      حذف
    2. اخي الفاضل طريقة الإستعمال موضحة في الموضوع اما لو تقصد شئ آخر وضح فضلا

      حذف
  4. رائع بس محتاجه تطوير انا بقول كده لاني عارف انك ديما تقدر تقدم الافضل انا زبون دائم في المدونه بس بكسل اعلق :)
    وياريت تعملنا اداة متابعه خفيفه لعرض الموبايل
    انا بحب التطوير وعامل شغل في مدونتي ممكن يعجبك
    ده رابط مدونتي http://sayedo.blogspot.com/
    وشكراااااااااا

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

      حذف
    2. اهلا بيك اخي يسعدني التواصل معك
      هذه الآداة عجباني بس انا مش بحب زرار جوجل لان متابعيني فيه قليلين حاولت اشيله واحط مكانه زرار يوتيوب معرفتش لقيت زرار يوتيوب بيخليها تختفي
      يارت تعملي التعديل ده اكون شاكر ليك جدا لانها فعلا اخف من اللي عندي وعجباني

      حذف
    3. يصعب اخي أن اصنع الآداة بحسب الطلبات لان هذا سيجعل النسخ كثيرة لكن ما يمكن ان اقدمه لك هو يمكنك الغاء زر جوجل بلس بالشكل التالي
      تحت هذا الكود .gpluscm {
      أستبدل هذا display: block;
      بهذا
      display: none;
      ثم عدل الرقم 90 في هذا الكود
      .ytweet {
      float: right;
      width: 90px;
      }
      بـ 205

      حذف
  5. جزاك الله الفردوس
    أحبك في الله

    ردحذف
  6. شكراااااااااااااا جزيلااااااا

    ردحذف
  7. شكرا يا غالى
    لم أكسل فى التعليق هههههههههه :)

    ردحذف
    الردود
    1. ههههههههههههه =q تمام يا طيب
      هذا ما نريد نورت الموضوع

      حذف
  8. السلام عليكم ورحمة الله وبركاته
    أنت دائما تتحفنا بمثل هذه التصميمات
    شكرا لك وبارك الله فيك نتمنى لك المزيد من النحاح والتقدم =q

    ردحذف
  9. ممكن الكود بحجم اكبر للشكل نفسه

    ردحذف
    الردود
    1. يصعب ان اضيف كودين لكن جرب التالي أخي
      استبدل جميع الأرقام التي بجانب كلمة width:
      بنفس النسبة
      مثال
      width: 280px;
      زد الرقم 280 بالنسبة التي تريد وليكن مثلا ستزيده بنسبة 100 اى يصبح 380 زد بنفس النسبة جميع الأرقام التي بجانبك كلمة with:
      ماعدا الأرقام التي بعدها نسب مئوية مثل 100%

      حذف
  10. جزاك الله خيرا على مواضيعك النافعة
    استفسار : ذكرت بالموضوع ( تم استخدام ادوات رسمية لموقعي جوجل بلس Google Plus وفيس بوك Facebook كونهم ازرار خفيفة وسريعة التحميل )
    واريد اداة فيس بوك الرسمية فكيف احصل عليها ؟

    ردحذف
    الردود
    1. وجزاك الله بالمثل تفضل هذه صفحة آداة الزر الرسمية
      https://developers.facebook.com/docs/plugins/like-button

      حذف
  11. شكرا لك على الموضوع

    سؤال كيف اقوم بتغيير حجم الاداة لأنها حالا كبيرة

    ردحذف
    الردود
    1. هذا اقل حجم يمكن ان تكون به الآداة دون تشوهات وهي حجمها مناسب لحجم السايد بار العادي فحجم السايد بار العادي هو 300px او اكثر وهي حجمها اقل من ذلك لو السايد بار عندك صغير هذه الآداة لا تناسبه

      حذف
  12. شكراً لك اخي قمت بالتركيب .. لكن لدي سؤال اخر قمت تحميل قالب من مدونة اخرى لم اكن ارى مدونتك من قبل حتى هذه اللحظة في مدونتي بعد ان قمت بتحميلها عدة مرات لا يمكنني التعديل في اخر المدونة على (( اسم .. عبدالرحيم )) عند الضغط على هذا الاسم يحولني على مدونتة قمت بالبحث عن (( اسم .. ((عبدالرحيم )) داخل القالب html لكني لم اجده ارجو التكرم علي ومساعدتي بإزالتة هذه مدونتي http://zakaryahaj.blogspot.com/

    ردحذف
    الردود
    1. أخي الكريم طبعا من شروط التعليق ان لا يخرج التعليق خارج سياق الموضوع
      ولكن نظراً لانك متابع جديد نشرته لك ويشرفني ان تنضم لمتابعينا
      أخي ما تريد حذفه يسمى حقوق الملكية وهو اثبات ان هذا الشخص هو من تعب وبذل مجهود لتعريب او تصميم
      القالب لا يجوز حذفها فهذه تعتبر سرقة طبعا انت لا تعلم هذا لانك جديد في المجال لكن هذه الحقوق يجب المحافظة عليها وهي لا تنتقص من مدونتك ولا تسبب بها اى مشكلة بل بالعكس هي تظهر انك شخص يحترم حقوق الآخرين
      فلا تحذفها ولا تعمل على هذا وانا بالطبع لا اقدم مساعدة في حذف مجهود الآخرين

      حذف

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

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