اضافة مواقع التواصل الاجتماعى مع تأثير التلميحات

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

معاينــة الاضافــة

بعد معاينة الاضافة هيا بنا لشرح التركيب المبسط لها 

شرح تركيب الاضافة 

اذهب لتخطيط مدونتك >> اضافة أداة >> HTML/JAVASCRIPt

ضع بها الكود التالى ثم قم بالحفظ 

<style type="text/css" >#followq {clear: both;width: 300px;height: 40px;margin:39px 0px 11px 10px;}
#followq ul { margin: 0px;padding: 0px;}
#followq ul li {position: relative;list-style-type: none;display: inline-block;}
.ikonz .ikonz-tooltip {display: block;padding: 5px 10px;position: absolute;bottom: 100%;
left: 0px;z-index: 77;margin-bottom: 40px;background-color: #141414;font-size:12px;
color: white;text-align: center;-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.4);box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
-webkit-border-radius: 5px;-moz-border-radius: 5px;
border-radius: 5px;opacity: 0;
visibility: hidden;-webkit-transition: all 0.26s ease-out;
-moz-transition: all 0.26s ease-out;
-ms-transition: all 0.26s ease-out;
-o-transition: all 0.26s ease-out;
transition: all 0.26s ease-out;}
.ikonz .ikonz-tooltip:before {content: "";width: 0px;height: 0px;border: 7px solid transparent;border-top-color: #141414;position: absolute;top: 100%;left:42%;}
.ikonz:hover .ikonz-tooltip {visibility:visible;width: 76px;opacity:1;margin:16px 12px 6px -28px;
z-index:99999;}
#followq .ikonz {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaE9WcWG7XnH_mEcCWVeCwO6sSM5k8Q4xT5w3SZoOX0SXF2r0KKsuVVmekJH0VN_TnWezlv7J7Rbh-nWppDFvI4uYFvI_zlKbQcOihzaSWAps9DXttTAv0hGVgZrg4xrKXfFqtj-akLQM/s1600/social3d.png') 0 0 no-repeat;display: block;
color: #141414;float: none;height: 39px;width: 39px;line-height:20px;position: relative;z-index: 5;}
#followq .ikonz:active {bottom: -2px;}
#followq .fb {background-position: 0px 0px;}
#followq .twitter {background-position: -40px 0px;}
#followq .google {background-position: -80px 0px;}
#followq .delcis {background-position: -120px 0px;}
#followq .stumble {background-position: -200px 0px;}
#followq .mail {background-position: -280px 0px;}
#followq .rss {background-position: -360px 0px;}
</style><div id="followq"><ul>
<li><a href="رابط الفيس بوك " class="ikonz fb"><span class="ikonz-tooltip"> فيس بوك </span></a></li>
<li><a href="رابط تويتر " class="ikonz twitter"><span class="ikonz-tooltip"> تويتر</span></a></li>
<li><a href="رابط جوجل " class="ikonz google"><span class="ikonz-tooltip"> جوجل </span></a></li>
<li><a href="رابط صفحة التواصل" class="ikonz mail"><span class="ikonz-tooltip"> البريد</span></a></li>
<li><a href="رابط الخلاصات" class="ikonz rss"><span class="ikonz-tooltip"> الخلاصة </span></a></li>
</ul>
</div>

استبدل الروابط المحددة فى الكود بما يناسبك 

√ فى انتظار تعليقاتكم المشجعة على تقديم المزيد لخدمتكم √