اضافة مواقع التواصل الاجتماعى بشكل جديد وحصرى من مدونة ابداعاتى

اليوم وفى موضوع جديد وحصرى من مدونه تقنيات الانترنت أقدم لكم اضافة مواقع التواصل الاجتماعى بشكل مختلف وجديد بتقنية css الاحترافية والاضافة سريعة جدا وسوف لا تؤثر فى سرعة المدونة وهى عبارة عن أزرار المواقع الاجتماعية كاملة بشكل منتظم بمجرد الوقوف على أحدهم ينزلق اسمه بشكل جميل جدا ، ولكى لا أطيل عليكم فى مقدمة يبخل الكثير عن النظر إليها فهيا بنا للشرح والمعاينة 

يمكنك معاينة الاضافة قبل الشروع فى تركيبها فى مدونتك  

من هنا
والأن جاء وقت شرح التركيب

♦ شرح التركيب ♦

اذهب للوحة التحكم >> التخطيط >> اضافة أداة >> Html/javascript
ضع بها الكود التالى ثم قم بالحفظ

<style>
    #socialbdrssliding a{width: 40px;transition:width 0.4s;-webkit-transition:width 0.4s;-moz-transition:width 0.4s;overflow: hidden;}#socialbdrssliding a:hover{width: 100px;overflow: hidden;}#socialbdrssliding {float: right;position: relative;height: 40px;}#socialbdrssliding ul { margin: 0; }#socialbdrssliding li,#socialbdrssliding li a,#socialbdrssliding li .bdrs-thumb,#socialbdrssliding li .bdrs-title {display: block;position: relative;width: 40px;height: 40px;}#socialbdrssliding li,#socialbdrssliding li a,#socialbdrssliding li .bdrs-title {float: left;width: auto;overflow: hidden;}#socialbdrssliding li a {width: 40px;line-height: 40px;color: #E9E9E9;font-size: 11px;font-weight: bold;text-shadow: 1px 2px 2px #000;text-decoration: none;}#socialbdrssliding li .bdrs-thumb { float: left; }#socialbdrssliding li.bdrs-facebook a { background-color: #3B5998; }#socialbdrssliding li.bdrs-facebook .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBxcUhT4W3RsccK12UilgddtgCLbz05AyhQMLnkbOBPzkIcGmzDl-iCKXnu1alyGgyW7M873P9yM7SFmvrlsAAnsmLFFwC7xX4LKGGqHXJxxk4MY7a1L7fEvrwfzO77Y11nTi1SFTogbA/s1600/FACEBOOK.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-gplus a { background-color: #d94a39; }#socialbdrssliding li.bdrs-gplus .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiofmtwx5212ZzeEEhyAog36iS5xLDsNrevhYf2Hmejhmdq9H4180I49JhVTEDqonsZIihELpOnnE6NRwPGtZGg8PnDa_LRoQLhCOyOs6v8ZiXnx2UJBha2vmmMAprhoXW0eyqJvTsrCHk/s1600/googleplus.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-twitter a { background-color: #3CF; }#socialbdrssliding li.bdrs-twitter .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs3cXlx2SAGvTSdQygHltBchXYguOrF2YjELLZVmn2tPnUzcdoroWQvLwEc6ZuzjiejTdCAXWfFx0UeMKxqIPZZN-uuVt-O6fkOzq6UWoT3rZ3bivuAe8-Icgb6gm9kN6OZFIi_PRZQQc/s1600/TWITTER.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-rss a { background-color: #F88F16; }#socialbdrssliding li.bdrs-rss .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsaZ-S7C7cyWGxSwWgt6X6PyVAtkDMeb5Bxm7kBJ8cErzxfhC-GLIDH8M8Kni-JWKQWZvuyrUiGshUNqZ61Xvb2fHtIZT78tuFoEprGIpfITH-xSwt5d2pKpIJ32AWcWUfqwqv7Cc1a-g/s1600/rssbd.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-youtube a { background-color: #BD3518; }#socialbdrssliding li.bdrs-youtube .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZwW5ScEBzhffxJbBteG4ivLBScX8jQAa_qcK1N2iBs0MApgKFD-5CEyRWsZIbwewx2neE1Yt1K4kBPLz3FbuegaaPbQgMlfQDmygnbthEl51xA8Mj2sY5fuR6uFIG-ExKYxnoSDp7n0M/s1600/youtube.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-facebook a:hover, #socialbdrssliding li.bdrs-youtube a:hover, #socialbdrssliding li.bdrs-rss a:hover, #socialbdrssliding li.bdrs-twitter a:hover, #socialbdrssliding li.bdrs-gplus a:hover {background-color:#666;}</style> 

    <div id="socialbdrssliding"><ul><li class="bdrs-gplus"><a href="رابط حساب جوجل بلس" target="_blank" rel="nofollow" title="جوجل بلس"><div class="bdrs-thumb"></div><div class="bdrs-title">جوجل بلس</div></a></li>
    <li class="bdrs-facebook"><a href="رابط حساب الفيس بوك" target="_blank" rel="nofollow" title="فيس بوك"><div class="bdrs-thumb"></div><div class="bdrs-title">فيس بوك</div></a></li>
    <li class="bdrs-twitter"><a href="رابط حساب تويتر" target="_blank" rel="nofollow" title="تويتر"><div class="bdrs-thumb"></div><div class="bdrs-title">تويتر</div></a></li>
    <li class="bdrs-rss"><a href="رابط حساب الخلاصة" target="_blank" rel="nofollow" title="rss feed"><div class="bdrs-thumb"></div><div class="bdrs-title">RSS</div></a></li>
    <li class="bdrs-youtube"><a href="رابط قناة اليوتيوب" target="_blank" rel="nofollow" title="يوتيوب"><div class="bdrs-thumb"></div><div class="bdrs-title">يوتيوب</div></a></li></ul></div>
</div>

♫ غير روابط المواقع الاجتماعية فى الكود السابقى بروابطك الخاصة

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