إضافة أزرار النشر على الشبكات الإجتماعية (تويتير ,فيسبوك ,جوجل+)

بسم الله الرحمن الرحيم والصلآة والسلآم على اشرف الانبياء والمرسلين سيدنا محمد عليه وعلى اله افضل الصلآة واتم التسليم السلآم عليكم ورحمة الله وبركاته إضافة أداة المتابعة عبر الشبكات الإجتماعية ( مع عدد المتابعين ) هذه الأداة تتضمن ثلاث مواقع يستعملها أغلب المدونين و هي (تويتر – فايسبوك – جوجل+) و كما أن هذه الأداة تتميز بشكلها الرائع و الخفة , بالإضافة إلى أنها تمكنك من تحديد عدد المتابعين لديك في كل موقع من مواقع الشبكات الإجتماعية.

ادخل مدونتك

ثم التخطيط

ثم اضافة اداة HTML/Javascript. 

انسخ هذا الكود والصقه مع تغيير ماسأذكره :

<style type="text/css"> .container { margin: 0px auto; width: 270px; text-align: center; float: center; } .btn-sbm { display: inline-block; vertical-align: top; position: relative; margin: 0 5px; padding-top: 40px; width: 75px; font-weight: bold; text-align: center; text-decoration: none; border-radius: 8px; -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); } .btn-sbm:active { margin-top: 3px; } .btn-sbm:active .btn-sbm-action { padding-bottom: 3px; -webkit-box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15); box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15); } .btn-sbm:active .btn-sbm-action:after { bottom: 3px; } .btn-sbm-count { position: absolute; top: 0; left: 0; right: 0; line-height: 40px; font-size: 20px; letter-spacing: -1px; color: #555; text-shadow: 0 1px white; background: #e6eff5; border-width: 1px 1px 0; border-style: solid; border-color: #c5c5c5 #bbb; border-radius: 8px 8px 0 0; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 0%, transparent 40%); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07); } .btn-sbm-count:before, .btn-sbm-count:after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #e6eff5; } .btn-sbm-count:before { margin-left: -7px; margin-top: 1px; border-width: 7px; border-top-color: rgba(0, 0, 0, 0.07); } .btn-sbm-action { display: block; position: relative; line-height: 32px; padding: 2px 0 6px; font-size: 18px; color: white; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); border: solid rgba(0, 0, 0, 0.18); border-width: 0 1px; border-radius: 0 0 8px 8px; } .btn-sbm-action:after { content: ''; position: absolute; top: 0; bottom: 6px; left: 0; right: 0; border-radius: 0 0 6px 6px; -webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25); box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25); } .btn-sbm-tweet { background: #83cfe8; background-image: -webkit-linear-gradient(top, #83cfe8, #6ebbd4); background-image: -moz-linear-gradient(top, #83cfe8, #6ebbd4); background-image: -o-linear-gradient(top, #83cfe8, #6ebbd4); background-image: linear-gradient(to bottom, #83cfe8, #6ebbd4); -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15); box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15); } .btn-sbm-tweet:after { -webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5); box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5); } .btn-sbm-tweet + .btn-sbm-count { -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04); } .btn-sbm-like { background: #6480bd; background-image: -webkit-linear-gradient(top, #6480bd, #3c5894); background-image: -moz-linear-gradient(top, #6480bd, #3c5894); background-image: -o-linear-gradient(top, #6480bd, #3c5894); background-image: linear-gradient(to bottom, #6480bd, #3c5894); -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2); } .btn-sbm-plus { background: #626262; background-image: -webkit-linear-gradient(top, #626262, #404040); background-image: -moz-linear-gradient(top, #626262, #404040); background-image: -o-linear-gradient(top, #626262, #404040); background-image: linear-gradient(to bottom, #626262, #404040); -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3); box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3); } </style> <div class="container"> <a class="btn-sbm" href="https://twitter.com/tncoool" rel="author" target="_blank" title="تابعنا عبر التويتر"> <span class="btn-sbm-action btn-sbm-tweet">تويتر</span> <span class="btn-sbm-count">150+</span> </a> <a class="btn-sbm" href="http://www.facebook.com/tounsi.coool" rel="nofollow" target="_blank" title="صفحتنا على الفايسبوك"> <span class="btn-sbm-action btn-sbm-like">فايسبوك</span> <span class="btn-sbm-count">650+</span> </a> <a class="btn-sbm" href="https://plus.google.com/114386753805776405823" rel="author" target="_blank" title="تابعنا على جوجل+"> <span class="btn-sbm-action btn-sbm-plus">جوجل+</span> <span class="btn-sbm-count">140+</span> </a><a href="http://www.7loll.blogger.com/"></a></div>

التغيرات :

 ابحث عن :

 270px : غيره إذا أردت تغيير حجم الأداة ( العرض ) .

tncoool : غيره باسم المستخدم على التويتر.

+150 : استبدله بعدد المتابعين لديك على التويتر.

 tounsi.coool : غيره باسم صفحتك على الفايسبوك.

+650 : استبدله بعدد المتابعين لديك على الفاسبوك.

114386753805776405823 : غيره برابط صفحتك على جوجل+.

+140 : استبدله بعدد المتابعين لديك على جوجل+.

إبحث عن الكود التالي :

من لوحة التحكم الرئيسية

•  أدخل إلى "قالب"

•  قُم بتنزيل القالب قبل القيام بأي خطوة في التعديل في الـ html   

•  من "نسخ احتياطي/استعادة" تحسبا لـ أي خطأ..

•  "تحرير html "

 إبحث عن الكود التالي ( لـ البحث إضغط على          ctrl+ f

 من الكيبود بعد وضع الماوس داخل النمودج 

 <data:post.body/>

- طريقة البحث مَشروحة في صُورة .. ( يتم الإضافة تحت آخر كود -لكي يظهر في الأسفل

 ثم ضع  الكود الآتي مُباشرة تحته

<style> .promote_post_bg { height: 75px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBmdLHCUlbrnNCui4ynlYH98kmLJ0c8UlREuWtVvKbeyD-oJwHuCys8eXgolZtlOWAeUKtLR0KebXCSosDUbAsvOtswB_jSBc0Cg89Hil-MLmLkttn4KIAy8EL-TdIQ3Z5tnsZmRp9L1m-/s1600/BloggerAdsenSeO.gif) 0 -7px no-repeat; width: 545px; margin-left: 40px; } .promote_twitter { width: 130px; height: 38px; float: left; margin: 0 30px 0 0; padding: 65px 0 0 13px; text-align: center; } .promote_facebook { width: 115px; height: 40px; float: left; margin: 0 39px 0 0; padding: 63px 0 0 28px; text-align: center; } .promote_google { width: 90px; height: 40px; float: left; margin: 0 39px 0 0; padding: 65px 0 0 28px; text-align: center; } </style> <div class='promote_post_bg'> <div class='promote_twitter'> <a class='twitter-share-button' data-via='BloggerAdsenSeO' href='https://twitter.com/share'>Tweet</a> <script> ! function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = "//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "twitter-wjs"); </script> </div> <div class='promote_facebook'> <div> <b:if cond='data:post.isFirstPost'> <script> (function (d) { var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; } js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); </script> </b:if> <p style="display:none;"> Sharing Widget by<a href="http://tounsicool.blogspot.com/">Tounsi Cool</a></p> <fb:like action='like' colorscheme='light' expr:href='data:post.canonicalUrl' font='verdana' layout='button_count' send='false' show_faces='false'/> </div> </div> <div class='promote_google'> <script type='text/javascript'> (function () { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> <a href='http://www.tounsicool.ml/2014/06/add-buttons-publishing-on-social.html' style='display:none;'></a> <g:plusone annotation='none' size='medium'/> </div> </div> </b:if> </center>

 ملاحظة :يمكنك ان تضع الإضافة في أول الموضوع .. ودلك بنسخالكود بالكامل ..وضعه فوق السطر الدي يوجد

 فيه 

</data:post .body>

لكن من الأفضل وضع الإضافة أسفل الموضوع .. في الغالب.. الزائر لن يقوم بنشر موضوع ..هو لم يقرأه ويُعجب به .. 

 في الأخير "حفظ" .. ومبروك عليك الإضافة الجديدة لمدونتك ..  

اتمنى ان يكون الشرح واضح .. 

وإلى اللقاء في موضوع جديد ضمن  إضافات بلوجر ..

• غرد
• شارك
• شارك
• شارك
• شارك

عن الكاتب محترف البلوجر

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

مواضيع ذات صلة