إضافة أزرار (متجاوبة) لمشاركة الموضوع في مواقع التواصل الإجتماعي إلى مدونة بلوغر ( واتساب ، فيسبوك ، غوغل+ ، تويتر... )

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

أولا

نتجه إلى قالب > تحرير HTML

ثانيا

ننقر في أي مكان داخل محرر ال HTML ثم نضغط Ctrl + F

نبحث عن:

</head>

ثالثا

فوقها مباشرة نلصق الكود css التالي الذي سيقوم بتنسيق مظهر أزرارنا و الذي سيعطيها الأبعاد المناسبة تبعا لمقاس الشاشة:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /><style type='text/css'>
.share-text{display:none!important}.sharebar{height:28px;background:#F7F7F7;border-top:1px solid #EAEAEA;position:relative;z-index:2;width:100%;display:inline-block;clear:both;margin:10px -20px -6px;padding:10px 0 0 36px}.sharebar .Share_buttons{display:block;margin:0 auto}.sharebar .Share_buttons .wrap{text-align:center;margin:0 auto;display:inline-block;min-width:41px}.sharebar .Share_buttons .wrap1{display:inline-block;width:31px;float:left}.sharebar .Share_buttons ul{margin:0;padding:0}.sharebar .Share_buttons ul li a,.sharebar .Share_buttons ul li a:hover{color:#FFF!important;cursor:pointer;line-height:25px;height:100%;display:block;text-decoration:none}.sharebar .Share_buttons ul li{list-style:none;padding:0;margin:-4px 1px;float:left;width:16%;max-width:100px;display:inline-block;font-size:13px;overflow:hidden;height:25px;line-height:25px;color:#fff;border:1px solid rgba(0,0,0,.04);-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.sharebar .Share_buttons ul li .fa{color:#fff;font-size:17px;font-weight:400;font-family:FontAwesome;display:inline-block;text-align:center;padding:0;height:25px;line-height:inherit;width:30px;background-color:rgba(0,0,0,.1);border-right:1px solid rgba(0,0,0,.05)}.sharebar .Share_buttons .btn_whtspp{background-color:#5CBE4A}.sharebar .Share_buttons .btn_whtspp:hover{background-color:#53AB43}.sharebar .Share_buttons .btn_fb{background:#3a579a}.sharebar .Share_buttons .btn_fb:hover{background:#314a83}.sharebar .Share_buttons .btn_twtr{background:#00abf0}.sharebar .Share_buttons .btn_twtr:hover{background:#0092cc}.sharebar .Share_buttons .btn_gplus{background:#df4a32}.sharebar .Share_buttons .btn_gplus:hover{background:#be3f2b}.sharebar .Share_buttons .btn_linkdin{background:#0077b5}.sharebar .Share_buttons .btn_linkdin:hover{background:#005480}.sharebar .Share_buttons .share.h6{font-size:10px;font-weight:700;text-shadow:none!important;text-decoration:none;text-align:center;color:#000;border-top:3px solid #FFF600!important;border-bottom:0;padding:5px 0 0!important;margin:0!important;line-height:8px;border-radius:75% 0}.sharebar .Share_buttons .share{border:none;margin:0 5px 0 1px;overflow:visible!important;width:95px!important}.sharebar .Share_buttons .share .count.h4{font-size:18px;font-weight:700;text-shadow:none;text-decoration:none;font-family:sans-serif;text-align:center;color:red;line-height:15px;margin:-4px 0 2px;min-height:15px;padding:0;border:none}.sharebar .Share_buttons .btn_fb .share-btn,.sharebar .Share_buttons .btn_gplus .share-btn,.sharebar .Share_buttons .btn_linkdin .share-btn,.sharebar .Share_buttons .btn_twtr .share-btn,.sharebar .Share_buttons .btn_whtspp .share-btn{position:relative;color:#C3C3C3;display:inline-block;text-align:center;font-weight:700;font-size:11px;float:right;min-width:12px;font-family:sans-serif;padding:0 5px;background-color:rgba(0,0,0,.28);border-radius:0 0 0 15px}@media only screen and (max-width:979px){.sharebar .Share_buttons .btn_linkdin{width:34px}.sharebar .Share_buttons .btn_fb,.sharebar .Share_buttons .btn_gplus,.sharebar .Share_buttons .btn_twtr,.sharebar .Share_buttons .btn_whtspp{width:78px}.sharebar .Share_buttons .btn_fb .share-btn,.sharebar .Share_buttons .btn_gplus .share-btn,.sharebar .Share_buttons .btn_linkdin .share-btn,.sharebar .Share_buttons .btn_twtr .share-btn,.sharebar .Share_buttons .btn_whtspp .share-btn{display:none!important}}@media only screen and (max-width:768px){.sharebar .Share_buttons ul li a,.sharebar .Share_buttons ul li a:hover{color:#FFF!important;cursor:pointer;line-height:25px;font-size:11px;height:100%;display:block;text-decoration:none}.sharebar .Share_buttons .wrap{min-width:34px}.sharebar .Share_buttons .btn_linkdin,.sharebar .Share_buttons .btn_twtr{width:30px}.sharebar .Share_buttons ul li{margin:1px 3px}.sharebar .Share_buttons{margin:-4px auto 0}}@media only screen and (max-width:479px){.sharebar .Share_buttons .share{border:none;margin:0 5px 0 1px;overflow:visible!important;width:80px!important}.sharebar .Share_buttons ul li{width:25px!important;margin:2px;border-radius:50px;border:2px solid rgba(0,0,0,.14)}.sharebar .Share_buttons ul li .fa{width:34px!important}.sharebar{height:28px;display:inline-block;clear:both;margin-right:-14px;padding:10px 0 10px 36px}.sharebar .Share_buttons{display:inline-block;float:left;margin-top:-4px}.sharebar .Share_buttons .btn_fb,.sharebar .Share_buttons .btn_whtspp{width:78px!important}}
</style>
</b:if>

رابعا

هنا سنضع قالب أزرارنا. و قد نجد شيئا من الصعوبة في إيجاد المكان المناسب. ما علينا إلا الحاولة حتى نصل لمبتغانا.
لكن عموما في أغلب القوالب يكون المكان المناسب هو قبل/فوق:

<data:post.body/>

إذن لنبحث عن هذه العبارة و نضيف فوقها مباشرة الكود التالي:

<b:if cond='data:blog.pageType == &quot;item&quot;'>   <b:if cond='data:blog.pageType != &quot;static_page&quot;'>      <div class='sharebar'>      <div class='Share_buttons'>      <ul>         <li class='btn_linkdin'>            <a expr:href='&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'>               <div class='wrap1'>                  <i class='fa fa-linkedin'/>               </div>               <div class='wrap'>                  شارك               </div>               <div class='share-btn' data-service='linkedin'>               <div class='count'/>               </div>            </a>         </li>         <li class='btn_twtr'>            <a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&quot;' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'>               <div class='wrap1'>                  <i class='fa fa-twitter'/>               </div>               <div class='wrap'>                  غرد               </div>               <div class='share-btn' data-service='twitter'>               <div class='count'/>               </div>            </a>         </li>         <li class='btn_gplus'>            <a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   return false;   ' rel='nofollow'>               <div class='wrap1'>                  <i class='fa fa-google-plus'/>               </div>               <div class='wrap'>                  شارك               </div>               <div class='share-btn' data-service='google'>                  <div class='count'/>                  </div>            </a>         </li>         <li class='btn_fb'>         <a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot; + data:post.url + &quot;   &amp;   t=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'>         <div class='wrap1'>         <i class='fa fa-facebook'/>         </div>         <div class='wrap'>         شارك         </div>         <div class='share-btn' data-service='facebook'>         <div class='count'/>         </div>         </a>         </li>         <li class='btn_whtspp'> <a alt='WhatsApp' data-action='share/whatsapp/share' expr:href='&quot; whatsapp://send?text=&quot; + data:post.title + &quot; !-&quot; + data:post.url' id='whatsapp-share-button' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'>          <div class='wrap1'>         <i class='fa fa-whatsapp'/>         </div>         <div class='wrap'>         أرسل         </div>         </a>         </li>      </ul>      </div>      </div>    </b:if></b:if>

خامسا 

نقوم بحفظ القالب و نتأكد من نجاح ما قمنا به.


هنيئا.

دعواتكم. 

تم تعديل هذه التدوينة مرة واحدة 05/01/2016 لتصحيح خطا.