توجد العديد من الإضافات المهمة التي يمكنك إضافتها إلى مدونتك على البلوجر، من بين أهم هذه الإضافات هي أزرار مواقع التواصل الإجتماعي، حيث أن هذه الأزرار تمكن الزائر من نشر ومشاركة مواضيع مدونتك بكل سهولة.
الأزرار التي تحتويها هذه الإضافة هي : فيسبوك، تويتر، جوجل بلس، إنكدن، واتس اب.
تعال معي الان لنتعرف على طريقة تركيب هذه الإضافة.
أولا نتوجه إلى القالب ثم إلى تحرير الـ HTML.
الان أنقر في أي مكان داخل محرر الـ HTML ثم إضغط على Ctrl + F.
ثم إبحث عن هذا الكود.
</head>
ثم أضف الكود التالي فوقه مباشرة.
<b:if cond='data:blog.pageType == "item"'>
<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 == "item"'> <b:if cond='data:blog.pageType != "static_page"'> <div class='sharebar'> <div class='Share_buttons'> <ul> <li class='btn_linkdin'> <a expr:href='" http://www.linkedin.com/shareArticle?mini=true& url=" + data:post.url + " & title=" + data:post.title + " & summary=& source=" ' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); 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='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + ""' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); 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='"http://plus.google.com/share?url=" + data:blog.url' onclick='javascript:window.open(this.href," " ," menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600" ); 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='" http://www.facebook.com/share.php?v=4& src=bm& u=" + data:post.url + " & t=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); 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='" whatsapp://send?text=" + data:post.title + " !-" + data:post.url' id='whatsapp-share-button' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); 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 فأظن أنك ستصلح الوضع.
لا يتم نشر التعاليق إلى بعد مراجعتها من طرف الإدارة، لا نقبل السب والشتم أو الكلام الجارح، التعاليق أسفل كل مقالة تعبر عن صاحبها، صديقي الزائر إذا رأيت اي تعليق غير مناسب، المرجوا إبلاغنا عن طريق صفحة إتصل بنا للموقع.