أضف أزرار مواقع التواصل الإجتماعي بشكل جذاب الى مدونتك بإستخدام CSS

    <style>
      #bdrs-social {margin:0px auto;width: 300px;}#bdrs-social .bdbox-social a:link,.bdbox-social a:visited{float:left;width:32px;height:32px;margin:0 5px;padding:0;text-indent:-9999em;box-shadow:3px 3px 3px rgba(0,0,0,0.3);background-color:transparent;background-size:100% auto;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLuqGcHGyWA6LTtQeB4kordtvKEhb-j4sXOfUiYzhZs2JWPGVWDnKDaYrdBGolI6QusE8pBbetXlSt-E_Mn83snPO7Crg1i0kTD3s1cLxrsDuyhV2tNoErdYjHuld1QmgytFvp5RPB0FuA/s1600/BRS01-sosial.png');background-repeat:no-repeat;}#bdrs-social .bdbox-social a:hover,.bdbox-social a:active {box-shadow:3px 3px 7px #333 INSET;}#bdrs-social .bdbox-social a:first-child{margin-left:3px}#bdrs-social .bdbox-social a:last-child{margin-right:0}#bdrs-social .bdrs-rss{background-position:0 0}#bdrs-social .bdrs-goo{background-position:0 -32px}#bdrs-social .bdrs-fac{background-position:0 -64px}#bdrs-social .bdrs-lin{background-position:0 -96px}#bdrs-social .bdrs-tum{background-position:0 -128px}#bdrs-social .bdrs-twi{background-position:0 -160px}#bdrs-social .bdrs-wor{background-position:0 -192px}</style>
    <!-- www.madad2.blogspot.com -->
    <div id="bdrs-social">
      <div class="bdbox-social" >
        <a class="bdrs-goo" href="رابط جوجل بلس" rel="publisher" target="_blank" title="جوجل بلس+">
          جوجل بلس+
        </a>
        <a class="bdrs-fac" href="رابط صفحة فيس بوك" rel="nofollow" target="_blank" title="فيس بوك">
          فيس بوك
        </a>
        <a class="bdrs-twi" href="رابط تويتر" rel="nofollow" target="_blank" title="تويتر">
          تويتر
        </a>
        <a class="bdrs-lin" href="رابط ينكدين" rel="nofollow" target="_blank" title="LinkedIn">
          ينكدين
        </a>
        <a class="bdrs-tum" href="رابط مدونة تلنبر" rel="nofollow" target="_blank" title="Tumblr">
          نعرفكم
        </a>
        <a class="bdrs-rss" href="رابط التغذية لمدونتك" rel="external" target="_self" title="RSS Feed">
          RSS Feed
        </a>
      </div>
    </div>

    <style>
      #socialbdrssliding a{font-family: 'Open Sans', Helvetica, Arial, sans-serif;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/AVvXsEinJUx3bdL5HgZG03tVVQtYJ91zTuO8ARenbs6cLt_9ZMIrvxj4qjKVhbv0SpTpRfT4eo9kDWolzu1JNgRhL8LW5z9D3nhBUfcxIrFidB7wafOiV5Bwx_GnPx07IQRwclEGtlFyhfsn9Kys/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/AVvXsEiiSyb_AIdpF7AkLAbPHGAAWQsip-DBOS5rbIxOTny-0AuiSpkD2wZZPBtsf5eGIU9Y9X_csn54y_QGh_jxKMX56YO4lA6ViOl6lWoFYOXDGHZblRXFcX67PzEzSgAQCIfzyZL1G-34wTbA/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/AVvXsEii6WhMwrJ2lTE3oErevYE8aFo1caqwXHfFMliBFIZJP7bRfk7GHFbZPRMbE-H7IW7LVEwWVXYrIVanAJ9123XNlssJBurUT50kzgek7Hgif0pchAhp280LIaRjGbn9hQunNRb_j-UfAYUq/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/AVvXsEi-MW4sbvd6BIl3GUZM8jiN5fsYQyx1hdPQfQZXFrIfK53LgVYpNLNQ1vlvBnu6gy5cd96YEmcj1OKX3EIDskuti4Ln7f2cfLAbcQRqhPja4QJXX2Zsq6wzf9o-1DgUJco34in0H8aHNrmv/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/AVvXsEipmq-fJwx3gsTpb6CIuym25PNQ19VX7tMe8M-lnS7Cgz1Se5e1rhgp-uVcpxziiJu1APyQRZhhyphenhyphenYbDbH-rG4Aw_pIqr4yGKkvFWyeQFMG5UZxcEtZ9Dty33jY-iD4ip8LbjjOTVrTfZmiY/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>
    <!-- www.madad2.blogspot.com -->
    <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>

    <style>
      .social-ballbdrs {padding: 5;margin-left:-30px;}.social-ballbdrs li, .social-ballbdrs li, .social-ballbdrs li {float: left;margin-right: 10px;background-color: #CCCCCC;display: inline;border-radius:50%;border:solid #999999 1px;box-shadow:0 0 5px 2px #999 inset;}.social-ballbdrs li a {-moz-transition: all 0.3s ease 0s;display: block;float: left;height: 100%;width: 40px;height: 40px;text-indent: -9999px;}.social-ballbdrs li.facebookball a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinJUx3bdL5HgZG03tVVQtYJ91zTuO8ARenbs6cLt_9ZMIrvxj4qjKVhbv0SpTpRfT4eo9kDWolzu1JNgRhL8LW5z9D3nhBUfcxIrFidB7wafOiV5Bwx_GnPx07IQRwclEGtlFyhfsn9Kys/s1600/FACEBOOK.png') no-repeat 0 0;}.social-ballbdrs li.facebookball a:hover {background-color: #3b5998;}.social-ballbdrs li.googleplusball a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiSyb_AIdpF7AkLAbPHGAAWQsip-DBOS5rbIxOTny-0AuiSpkD2wZZPBtsf5eGIU9Y9X_csn54y_QGh_jxKMX56YO4lA6ViOl6lWoFYOXDGHZblRXFcX67PzEzSgAQCIfzyZL1G-34wTbA/s1600/googleplus.png') no-repeat 0 0;}.social-ballbdrs li.googleplusball a:hover {background-color: #d94a39;}.social-ballbdrs li.rssball a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-MW4sbvd6BIl3GUZM8jiN5fsYQyx1hdPQfQZXFrIfK53LgVYpNLNQ1vlvBnu6gy5cd96YEmcj1OKX3EIDskuti4Ln7f2cfLAbcQRqhPja4QJXX2Zsq6wzf9o-1DgUJco34in0H8aHNrmv/s1600/rssbd.png') no-repeat 0 0;}.social-ballbdrs li.rssball a:hover {background-color: #fe9900;}.social-ballbdrs li.twitterball a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii6WhMwrJ2lTE3oErevYE8aFo1caqwXHfFMliBFIZJP7bRfk7GHFbZPRMbE-H7IW7LVEwWVXYrIVanAJ9123XNlssJBurUT50kzgek7Hgif0pchAhp280LIaRjGbn9hQunNRb_j-UfAYUq/s1600/TWITTER.png') no-repeat 0 0;}.social-ballbdrs li.twitterball a:hover {background-color: #48c4d2;}.social-ballbdrs li.youtubeball a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipmq-fJwx3gsTpb6CIuym25PNQ19VX7tMe8M-lnS7Cgz1Se5e1rhgp-uVcpxziiJu1APyQRZhhyphenhyphenYbDbH-rG4Aw_pIqr4yGKkvFWyeQFMG5UZxcEtZ9Dty33jY-iD4ip8LbjjOTVrTfZmiY/s1600/youtube.png') no-repeat 0 0;}.social-ballbdrs li.youtubeball a:hover {background-color: #f45750;}.social-ballbdrs li a:hover {background-position: 0 -40px;box-shadow:3px 3px 10px 2px #333 INSET;border-radius:50%;}.social-ballbdrs li a:visited,.social-ballbdrs li a:active{background-position: 0 -40px;box-shadow:3px 3px 10px 2px #333 INSET;border-radius:50%;}</style>
    <!-- www.madad2.blogspot.com -->
    <div class="social-ballbdrs">
      <ul>
        <li class="twitterball">
          <a target="_blank" href="#" rel="nofollow" title="تويتر">
            تويتر
          </a>
        </li>
        <li class="googleplusball">
          <a target="_blank" href="#" rel="nofollow" title="جوجل بلس">
            جوجل بلس
          </a>
        </li>
        <li class="facebookball">
          <a target="_blank" href="#" rel="nofollow" title="فيس بوك">
            فيس بوك
          </a>
        </li>
        <li class="rssball">
          <a target="_blank" href="#" rel="nofollow" title="rss">
            rss
          </a>
        </li>
        <li class="youtubeball">
          <a target="_blank" href="#" rel="nofollow" title="يوتيوب">
            يوتيوب
          </a>
        </li>
      </ul>
    </div>