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

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

والإضافة ستضهر كما في الصورة التالية:

ولكي لا أطيل عليكم الكلام سنمر مباشرة إلى طريقة التركيب:

1- دخول إلى القالب ثم تحرير Html ثم نقوم بالبحث بإستعمال CTRL+F عن الوسم ]]></b:skin> ثم نضع الكود التالي فوقه مباشرة .

#socialCounterWidget span.fa { width: 47px; height: 47px; color:white; vertical-align: top; padding: 10px; font-size: 26px; right: 0; text-align: center; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4xIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4xIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 1%, rgba(255,255,255,0.1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.1)), color-stop(1%,rgba(255,255,255,0.1)), color-stop(100%,rgba(255,255,255,0.1))); background: -webkit-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(255,255,255,0.1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(255,255,255,0.1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(255,255,255,0.1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(255,255,255,0.1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#1affffff',GradientType=0 ); } #socialCounterWidget > a { display: block; width: 100%; height: 47px; position: relative; cursor: pointer; } a.facebook-box {background-color: #506ba7;} a.twitter-box {background-color: #56A4C6;} a.googleplus-box {background-color: #BC4B37;} #socialCounterWidget > a.facebook-box:hover { -webkit-box-shadow: inset 0px 0px 80px 44px rgba(47,77,147,1); -moz-box-shadow: inset 0px 0px 80px 44px rgba(47,77,147,1); box-shadow: inset 0px 0px 80px 44px rgba(47,77,147,1); } #socialCounterWidget > a.twitter-box:hover { -webkit-box-shadow: inset 0px 0px 80px 44px rgba(45,122,186,1); -moz-box-shadow: inset 0px 0px 80px 44px rgba(45,122,186,1); box-shadow: inset 0px 0px 80px 44px rgba(45,122,186,1); } #socialCounterWidget > a.googleplus-box:hover { -webkit-box-shadow: inset 0px 0px 80px 44px rgba(207,40,27,1); -moz-box-shadow: inset 0px 0px 80px 44px rgba(207,40,27,1); box-shadow: inset 0px 0px 80px 44px rgba(207,40,27,1); } #socialCounterWidget span {display: block;position: absolute;color: #FFFFFF;right: 70px;font-size: 12px;} #socialCounterWidget .title {top: 7px;} #socialCounterWidget .count {top: 23px;} .author-social { margin-top: -8px; margin-left: -7px; }

2- قم بحفض القالب .

3- قم بوضع كود تفعيل الإضافة فى المكان الذى يناسبك في التخطيط .

<div class='socialCounterWidget' id='socialCounterWidget'> <a class='facebook-box' href='https://www.facebook.com/info24tagliout' id='sc-facebook' target='_blank'> <span class='fa fa-facebook'></span> <span class='title'>تابعنا على الفيس بوك</span> <span class='count'>لتصلك أخر التحديثات على الفيس بوك</span> </a> </div> <div class='socialCounterWidget' id='socialCounterWidget'> <a class='twitter-box' href='https://twitter.com/tagliout' id='sc-twitter' target='_blank'> <span class='fa fa-twitter'></span> <span class='title'>تابعنا على تويتر</span> <span class='count'>لتصلك أخر التحديثات على تويتر</span> </a> </div> <div class='socialCounterWidget' id='socialCounterWidget'> <a class='googleplus-box' href='https://plus.google.com/u/0/+المحترفإسماعيلللمعلوميات' id='sc-googleplus' target='_blank'> <span class='fa fa-google'></span> <span class='title'>تابعنا على جوجل بلس</span> <span class='count'>لتصلك أخر التحديثات على جوجل بلس</span> </a> </div>

4- غير الروابط بما يناسب .

5- مبروك عليك الإضافة .

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