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

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

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

<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/AVvXsEgLmlDik3hCTYPU2WitjDzNCaquE-AshRMnHXoov317kdn9yZKVn_DCOICPm2JhAU9Ul2HXS56OsFG2ZRYz9b7KucHdSodpwwGpeVnNa8LcbJDkuFJhOCgVgXW10ycYJI7YhSnHyb551O4/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/AVvXsEh3raYoX3Z8ZStrSirlfRVexzdk0p8U4YqCTiqUEb8WAsYN_9P5iG1BkPWVWZJZlhFCRZIgvW-ijNi0_RNG8PNvmLuStcu17QXT3Kx_VYu5_Wyas4nuenVmaALLKRmfX-kmZsIMx8w2UYA/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/AVvXsEhIFwvQ1CdoZ26wGl2OEScR3l5ZyyQbY8ZyWhoFC7NeK7M64j7qDPiOplxHgJYO7i7G6pLLW0jvNo0wYBOVXcrTlm2oXoRoiRfZMe_fzNvktdQPdf48E1nv4jxbkb-HZnT7b74KHBlktdo/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/AVvXsEhaCLdRlzeZtC51qGqtJLAZeBdh8ub-h7ANQnjMUnMFnDwgB1anZz0FRHnK6e9-_zywcxbqhe-SE5fibYkDKI_QNn6TNYGFBmhqpcH6QYOgyiUe5WG-8rY5cqczZAo8_6m-ZkPiJPBgqZ0/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/AVvXsEhkjYJC6DWPUeApuOH97h5hVuPQVKOE9sYPCu5ITCMKXliavquRyRRDQixQDM8TYG1EirXRpEydT7oXbZRFDGZ2XD9jTMH80DCjs3R_koUtXH1rS5K-DpVqOOTseB7BGULxGsNDSRL7J7U/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>