طريقة اضافة اداة انضم الينا عبر مواقع التواصل الاجتماعي فيس بوك وتويتر وجوجل بلس الي مدونة بلوجر

السلام عليكم ورحمة الله وبركاتة
وصف قصير للأداة:
هنتعلم النهاردة طريقة اضافة اداة في المدونة بها صفحتك في الفيس بوك وصفحتك في تويتر وجوجل بلس
الاداة اكثر من رائعة لانها تعتبر بمثابة اعلان شخصي لك وطريقة اضافتها سهلة جدا جدا
شكل الاداة:

طريقة اضافة اأداة الي المدونة:
دا شرح فيديو:

اول خطوة:
اولا نتوجة الي موقع blogger.com
ثم نضغط علي المدونة التي سنضيف اليها الاداة
ثم من الجانب نختار التخطيط
ثم نختار اضافة اداة في اي مكان يعجبك
ثم نختار HTML/Java script
ثم نكتب في العنوان مثلا تابعونا
ثم في  المحتوي ..نضع الكود الاتي:

  <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/AVvXsEgxROugNjmKOrVkXqVLlaRHNOvBANol83joAAfPoLwMNRcRH16Xpu2noH7Lv2T8uVC6wrvYfXDd8K71Xm-sXkaxdmc8h57xbw2fA6_kNaJR0TDHQGjEUnF0-43_V68nSDySjTqX7vbagSoV/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/AVvXsEg5sxm7JlHH6bkfR3fBjQH8wYNe2FsOPlXATB-rT9g246wqVj2bg_YrkJhd_resJeUK9aHI9wPkMuyUyrh3HYr125AqBRvQcVvpHXRHMSCWBu9bE3dk_BF6lsnaALiUSzdgMDMijxe2Mhqn/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/AVvXsEiW243uUekxnGimFpzz-a9CDi5rkTAoECkvg-qZZ8SK3HqvtiNP5Kahukxln0gljUaSGOm9Wi27IsJdAk5N7CvIdk2bY83D623V_sKpRmy0sYToDiNabbzbiLo7sa-YFI_XjbnkTOMePm-R/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/AVvXsEiYPf7OmIGV0cQWyldc5Dlyuqu23TdnPEiV2nBHCNmBjBpYVBr9HSSAWzW3Mum2OMP3_yxWRC2KuVY3YoBAEmO9YphqQrROCsY-OFxAiOtAyd32Ysw4jv-gihRv7q14hlXdWS2P1QhwQFaw/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/AVvXsEhHbPJPQBfgHSOfP15r8LBZJP6IbiLRlCkoMfCWMkYLqZ8kYbXD5hDbgFAQU8z_el9yCsnxTuKPRKIXkPSi5pQVIUxKl8z0wj9llFuNdqkIZRuFWLBsWPpaFAR94LIHcKWGvUgqkM0y1bV7/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>

ثم نغير في الكود  ما يلزمنا المكتوب بالعربي نضع بدلة روابط
وهاقد انتهينا من الشرح

فيه شرح فيديو في اول الموضوع