أحدث إضافة لأزرار المشاركات الإجتماعية

أحدث إضافة لأزرار المشاركات الإجتماعية

يوجد الآن مشاهدة التعليقات : 3

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

اهمية ازار مشاركات المواضيع مهمة في كل موقع أو مدونة الكل يستخدمها ، توجد اضافات تقدمها مواقع منها المجانية وتظهر بها الحقوق ومنها المدفوعة بمميزات اعلى ، ولذا اضافتنا ليست لأي موقع يقدم تلك الخدمة للأزرار فهي إضافة مصممة خصيصا لتكن لمدونتك بدون أي رابط خارجي ليس هذا فقط فهي تحتوي على الأزرار المهمة من تويتر ، فيسبوك ، جوجل بلس .. بها تأثير ولا أروع بتطبيق سلايدر، يمكنك الإنتقال للمعاينة المباشرة
شرح طريقة التركيب
1. من داخل القالب ابحث عن <b:skin/><[[ وضع الكود التالي فوقه
/* Slide Share */
#button-count-share {
    width: 100%;
    overflow: hidden;
    background: transparent;
    margin: 0 auto;
    padding: 3px;
}

#button-count-share span {
    float: left;
    position: relative;
    font-size: 13px;
    color: #fff;
    margin: 12px 5px 12px 5px;
}

.button-share {
    background: #dce0e0;
    position: relative;
    display: block;
    float: left;
    height: 40px;
    overflow: hidden;
    width: 140px;
    margin: 4px;
    border-radius: 3px;
}

.ikons {
    display: block;
    float: left;
    position: relative;
    z-index: 3;
    height: 100%;
    vertical-align: top;
    width: 38px;
    text-align: center;
}

.ikons i {
    color: #fff;
    line-height: 33px;
}

.slide-share {
    z-index: 2;
    display: block;
    height: 100%;
    left: 38px;
    position: absolute;
    width: 108px;
    margin: 0;
}

.slide-share p {
    font-family: Verdana;
    font-weight: 400;
    border-left: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 14px;
    left: 0;
    position: absolute;
    text-align: center;
    top: 10px;
    width: 100%;
    margin: 0;
}

.button-share .slide-share {
    transition: all 0.4s ease-in-out;
}

.facebook .fb_iframe_widget {
    display: block;
    position: absolute;
    right: 5px;
    top: 0;
    z-index: 1;
}

.twitter iframe {
    left: 50px;
    top: 10px;
    z-index: 1;
    display: block;
    position: absolute;
}

.google #___plusone_0 {
    width: 90px!important;
    top: 10px;
    right: 5px;
    position: absolute;
    display: block;
    z-index: 1;
}

.facebook .ikons,.facebook .slide-share {
    background: #4f79bc;
}

.twitter .ikons,.twitter .slide-share {
    background: #63cef2;
}

.google .ikons,.google .slide-share {
    background: #f36261;
}

.facebook:hover .slide-share,.twitter:hover .slide-share,.google:hover .slide-share {
    left: 180px;
    opacity: 0.6;
}
2. ابحث عن <head/> وضع الكود التالي فوقه
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
<script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
3.ابحث عن <data:post.body/>
* قد تجده متكرر الأخير هو المقصود
4. ضع الكود التالي أسفله مباشرة
<div class='clear'/>
<div id='button-count-share'>
<div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i>
<div class='slide-share'>
<p>Share</p>
</div>
<a class='fb-share-button' name='fb_share' rel='nofollow' share_url='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' type='button_count'/>
</div>
<div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i>
<div class='slide-share'>
<p>Like</p>
</div>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>
</div>
<div class='google button-share'><i class='ikons'><i class='icon-google-plus icon-large'/></i>
<div class='slide-share'>
<p>G+</p>
</div>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/>
<script type='text/javascript'>
  window.___gcfg = {lang: &#39;id&#39;};
 
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
<div class='twitter button-share'><i class='ikons'><i class='icon-twitter icon-large'/></i>
<div class='slide-share'>
<p>Tweet</p>
</div>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div class='clear'/>
</div>
5. يمكنك حفظ العمل ومبروك عليك الإضافة
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 3 تعليقات:

  1. yasmine Ahmed12/27/2014

    بس حضرتك كل اما اضيف اى اضافة فى القالب بتظهر بشكل ده اى اضافة اياً كان تدوينات ذات صلة تعريق الكاتب سلايدشو او ازرار المشاكة ده قالب حدود قمت بتحميله من مدونتك اى شى

    ردحذف
  2. ايمن ايت مشماش4/07/2015

    شكرااا

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم