الاثنين، 14 أبريل 2014

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

اليوم فى تواصل من حصريات مدونة ابداعاتى أقدم لمتتبعى مدونتى الكرام اضافة مواقع التواصل الاجتماعى مع تأثير التلميحات الاحترافى بشكلها المنبثق الجميل والاضافة جميلة جدا وأتمنى أن تنال اعجابكم متتبعى مدونة ابداعاتى الكرام ولا شك ان أداة مواقع التواصل الاجتماعى تعتبر من أفصل الادوات لمدونتك فهى التى تساهم بأكبر قدر فى سرعة اشهار مدونتك ووصولها الى اكبر عدد من الجماهير والمتتبعين فلذلك يجب ان تحتوى مدونة على هذه الأداة ولكن ليس بشكل تقليدى غير مشجع على المتابعة بل بشكل جميل وأنيق يجذب الزائر ويجعله ينضم لمتتبعيك على جميع مواقع التواصل الاجتماعى ولكى لا أطيل عليكم متتبعى مدونة ابداعاتى الكرام فهيا بنا للمعاينة والشرح 
بعد معاينة الاضافة هيا بنا لشرح التركيب المبسط لها 
شرح تركيب الاضافة 
اذهب لتخطيط مدونتك >> اضافة أداة >> 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/AVvXsEjY8NA2lNwhTYipogcrenMb-qCNHQmGUXtxrqPzTEoopPxnunzyBHJM95L3tD2q25TprrekPJ6hBhUEuW95DpAiVNuJrbUdYL9wylLZ8vkqOGfOvVd6BP9ZoJP1MlmwnjeL5v-gBPcSg7Q/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>

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

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

10 التعليقات:

  1. الردود
    1. أنت الأجمل بتعليقك الذى شجعنى
      شكرا لمرورك

      حذف
  2. شكرا على الإضافة روعة

    ردحذف

  3. شكرا على الموضوع حق مفيد و لقد قمت باتباع خطوات لتي ذكرتها و نفذتها على موقعي شبكة ولعة نت
    رابط موقعي http://home.wl3ah.net

    ردحذف

ملاحظة : للإبلاغ عن رابط محتوى لا يعمل المرجوا الضغط على " الاتصال السريع " في أسفل القائمة مباشرة لاصلاح الخطأ بسرعة : نحن نسعى دائما لرقي الموقع جميعا من أجل الاستقرار
جميع الحقوق محفوظة © 2014 مدونة ابداعاتىجميعا من أجل الاستقرار