إضافة أزرار مواقع التواصل الإجتماعي لمشاركة المواضيع لمدونات بلوجر.

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

الأزرار التي تحتويها هذه الإضافة هي : فيسبوك، تويتر، جوجل بلس، إنكدن، واتس اب.

تعال معي الان لنتعرف على طريقة تركيب هذه الإضافة.

أولا نتوجه إلى القالب ثم إلى تحرير الـ HTML.

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

ثم إبحث عن هذا الكود.

</head>

 ثم أضف الكود التالي فوقه مباشرة.

<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/>

ونضع مكانه الكود التالي:

<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>
الان لم يبقى عليك سوى حفظ القالب ومبروك عليك الأزرار الجديدة.

ملاحظة: عندما تضع مثل هذه الأزرار في بعض القوالب قد تتأثر بأكواد أخرى لذالك قد يتغير شكلها أو لا تقوم بوظيفتها بشكل أفضل أو ربما أنها لن تظهر في المكان المناسب، لذالك وبالتأكيد إذا كنت تجيد التعامل مع أكواد الـ CSS فأظن أنك ستصلح الوضع.

بوشعيب بنرحالي
بوشعيب بنرحالي
مدون ومصمم جرافيك وموشن جرافيك، مؤسس موقع Chobixo Tech، كنت أعمل كـ مدير ويب في أحد الجرائد الإلكترونية، أعمل حاليا كـ مترجم تقني لدى شركة EaseUS العالمية المتخصصة في إنتاج أدوات الإدارة الحوسبية - للتواصل معي : Benrahhali00[at]Gmail.com
تعليقات