ايقونات التواصل الاجتماعي مع التلميح

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

معاينة الاضافة من (( هنا ))

طريقة التركيب :
 نتوجه الى لوحة التحكم في بلوجر > التخطيط > اضافة اداة > اداة جافا سكريب ونلصق فيها الكود التالي :

     <style type="text/css" >
    #followq {
    clear: both;width: 300px;
    font-family: 'Droid Arabic Kufi';
    height: 40px;margin-top:200px 0px 11px 10px;}
    #followq ul { margin-top:50px;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('http://1.bp.blogspot.com/-4O0XdDkxMps/UDDZHwvWCtI/AAAAAAAAEZA/PgP7Epi-x0Q/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>

واستبدل العبارات الملونة بروابطك ثم قم بحفظ الاداة  

ودمتم في حفظ الله ورعايته