ازرار النشر للمواقع الإجتماعية والطباعة وتقييم الموضوع بشكل إحترافي

الكاتب بتاريخ عدد التعليقات : 14


مرحبا بكم اصدقائي متابعين مدونة مهووسين الويب في موضوع جديد ورائع اردت وضعه على المدونة منذ مدة وهو ازرار النشر للمواقع الإجتماعية والطباعة وتقييم الموضوع بشكل إحترافي,ثلاث إضافات بلوجر رائعة في ايضافة واحدة وهي ازرار المشاركة بشكل احترافي وهى خاصة بمواقع النشر كالفيسبوك وتويتر وجوجل بلس والطابعة ايضا وتقييم الموضوع بشكل احترافي

طريقة التركيب
ابحث في القالب عن ]]></b:skin>
ضع الكود التالي فوقه
/* CSS Social Share */
h9 {

color: #fff;
font-family: ge_dinar_tworegular;
margin-right: 140px;

}

.share-box{background-color:#2e3138;font-size:14px;padding:10px 0 11px;position:relative;margin-top:10px;color:#666;border-bottom: 1px solid #353942;}
/* Slide Share */

#button-count-share {
    margin-left:45px;
    overflow: hidden;
    background: transparent;
    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: 1;
    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: ge_dinar_tworegular;
    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: 15px!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;
}
/* CSS Print */

.printfriendly{float:left;left:10px;background:transparent;color:#666;text-decoration:none;padding:3px 0 3px 5px;font-family:&#39;Open Sans&#39;;font-size:20px;font-weight:400;}
.printfriendly span.print{opacity:0.7;background:url(http://3.bp.blogspot.com/-lk5nzkiNUx8/U8aAFYhsEZI/AAAAAAAAEZI/aH7XVyZ0K3M/s1600/print.png) no-repeat;border:none;box-shadow:none;margin:3px 6px -3px;padding-right:20px;transition:all 0.5s ease-in-out;}
.printfriendly span.print:hover{opacity:1;background:url(http://3.bp.blogspot.com/-lk5nzkiNUx8/U8aAFYhsEZI/AAAAAAAAEZI/aH7XVyZ0K3M/s1600/print.png) no-repeat;border:none;box-shadow:none;margin:3px 6px -3px;padding-right:20px}
.printfriendly span.pdf{opacity:0.7;background:url(http://1.bp.blogspot.com/-I0-5NsWqte0/U8Z_1fuHXlI/AAAAAAAAEYA/Wk_SRupt4j4/s1600/PDF.png) no-repeat;border:none;box-shadow:none;margin:3px 0 -3px;padding-right:20px;transition:all 0.5s ease-in-out;}
.printfriendly span.pdf:hover{opacity:1;background:url(http://1.bp.blogspot.com/-I0-5NsWqte0/U8Z_1fuHXlI/AAAAAAAAEYA/Wk_SRupt4j4/s1600/PDF.png) no-repeat;border:none;box-shadow:none;margin:3px 0 -3px;padding-right:20px;}
قم بالبحث عن </head> وضع الكود التالي فوقه

<link href='http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
<link href='https://ar1web-com.googlecode.com/svn/trunk/font-ge_dinar.css' rel='stylesheet'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
قم بالبحث عن الكود التالي <b:if cond='data:blog.pageType == &quot;item&quot;'> وضع الكود التالي اسفله
<div class='share-box'>
<span class='likebtn-wrapper' data-show_like_label='false' data-style='padded'/>
<script async='async' src='//w.likebtn.com/js/w/widget.js' type='text/javascript'/>
<script async='async' src='http://static.addtoany.com/menu/page.js' type='text/javascript'/>
<a class='printfriendly' href='http://www.printfriendly.com' onclick='window.print();return false;' title='طباعة التدوينة'><span class='print'/> <span class='pdf'/></a>
  <h9>اذا أعجبك الموضوع قم بمشاركته فى المواقع الإجتماعية</h9>
<div>
<div class='clear'/>
<div id='button-count-share'>
<div class='facebook button-share'><i class='ikons'><i class='icon-share icon-large'/></i>
<div class='slide-share'>
<p>نشر</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>إعجاب</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>جوجل +</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;en-US&#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/platform.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>تويتر</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'>غرد</a>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div class='clear'/>
</div>
<div class='clear'/>
  </div>
</div>
وبعد ذلك قم بحفظ القالب واستمتع بالاضافة في مدونتك

14 تعليقات على موضوع " ازرار النشر للمواقع الإجتماعية والطباعة وتقييم الموضوع بشكل إحترافي "

اخي لما ضفت هذا الكود الى القالب نجحت العملية وظهرت عندي ازرار المشاركة
لكن حصلت معي مشكلة
وهي ان ايقونات ازرار اعلى الصفحة (الرئيسية - اتصل بنا - سياسة الخصوصية والاستخدام) انا مخلي لهن ايقونات لكن اختفت
رفعت قالبي القديم وعادت ولما اضفت هذه الاكواد اختفت مرة اخرى
ما الحل لطفا ؟؟

اخي ارسل لي القالب على الايميل التالي almahmod2013@gmail.com او قم بمراسلتنا على صفحة المدونة من هنا http://fb.com/th3geekweb3

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

اخي كان لديه ملف خطوط ايقونات مثل الذي موجود في الشرح الذي لدي فلا يمكنه وضع خطين في نفس القالب فإذا ابقيته سوف تحذف ايقونات القائمة واذا ازلته فسوف تحذف ايقونات المشاركة لذلك قمت بإضافة ملف خطوط غير الموجود في مدونته

طيب اخي ممكن تعطينا الكود الكامل لهذه الاضافة مع ملف الخطوط الذي اضفته انت لتجنب حدوث هذه المشكلة
انا بصراحة ما اعرف اعدل على الكود
لكن لو تعطينا اياه كما طرحته بهذه التدوينة اعلاه لكن بملف الخطوط خاصتك
واكون لك شاكرا

اخي هذا الشرح سوف يوضح لك جميع الامور http://www.ar1web.com/2014/09/blog-post_9.html

اخي هذه التعديلات نضعها اسفل او فوق الاكواد التي نبحث عنها في القالب ؟؟

تم تعديل الموضوع وتصحيح الخطأ شكرا على التذكير

احسنت يا طيب ... اتمنى لك التقدم والنجاح

شكرا اخي وانت ايضا :)

أخي لم تظهر لي الأيقونات http://almowlaa.blogspot.com/2012/07/blog-post.html
ماذا أفعل ؟

جرب إضافة مكتبة الايقونات إبحث عن "إضافة خطوط الايقونات لبلوجر" في جوجل وسوف تجد الحل إنشاء الله ونصحك بموضوع عرب ويب :)

████ شروط التعليق ████
1- يجب على التعليق أن يكون بلا روابط إشهارية
2- أن يكون التعليق خاص بمحتوى التدوينة
3- لإضافة كود حوله أولاً بمحول الأكواد
4- لاستعمال خط عريض ضع الكود : <strong>النص هنا...</strong>
5- لاستعمال خط مائل ضع الكود : <em>النص هنا...</em>
6- لإضافة صورة ضعها بهذا الكود : <i rel="image"> ... رابط الصورة هنا ... </i>

الإبتسامات إخفاء