ازرار التواصل الاجتماعي بطريقة مميزة

بسم الله الرحمن الرحيم

من اهم الاضافات التي يجب ان تتواجد في كل مدونة و موقع الكتروني هي اضافة " ازرار التواصل الاجتماعي " , فهي احد الادوات التي تسمح للزائر بنشر مدونتك او متابعتك عبر مواقع التواصل الاجتماعي التي لها دور كبير في انتشار و اشهار المواقع الالكترونية , في هذا المقال نقدمها لكم بصورة مميزة و فريدة من نوعها .

لمعاينة الاضافة " اضغط هنا "

لتركيب الاضافة نتوجه الى لوحة التحكم في بلوجر > القالب > تحرير HTML ونبحث عن الوسم :

]]></b:skin>

ثم نلصق الكود التالي فوقه :

    #social_profiles-wrap{
        width: 450px;
      height: 80px;
      margin: 14px auto;
      border: 1px solid #ddd;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      -webkit-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
      -moz-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
      box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
    }
    .social_profiles{
      height: auto;
      margin: 0 auto;
    }
    .social_profiles li{
      float: left;
      list-style: none;
    }
    .social_profiles li a {
      display: block;
      width: 40px;
      height: 40px;
      margin: 0 auto;
      margin-top: 20px;
      outline: none;
      position: relative;
      z-index: 2;
      text-indent: -9000px;
      text-decoration: none;
    }

    .social_profiles li .facebook {
      background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPflMFpZFgkzf891wSTs8Wq073WkvgD0xSGZcuxE-VvOo_zZSvQdjj0miYr8pOo8qpwhinWsTPOG3Smm237UJ8PkJAm43pv_xWj8fKODMOmWaydiKMpbMZJviX8TG3lCkfdE01tFpWofak/s1600/social_sprite.png") no-repeat;
    }

    .social_profiles li .twitter {
      background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPflMFpZFgkzf891wSTs8Wq073WkvgD0xSGZcuxE-VvOo_zZSvQdjj0miYr8pOo8qpwhinWsTPOG3Smm237UJ8PkJAm43pv_xWj8fKODMOmWaydiKMpbMZJviX8TG3lCkfdE01tFpWofak/s1600/social_sprite.png") no-repeat 0px -45px;
    }
    .social_profiles li .gplus {
      background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPflMFpZFgkzf891wSTs8Wq073WkvgD0xSGZcuxE-VvOo_zZSvQdjj0miYr8pOo8qpwhinWsTPOG3Smm237UJ8PkJAm43pv_xWj8fKODMOmWaydiKMpbMZJviX8TG3lCkfdE01tFpWofak/s1600/social_sprite.png") no-repeat 0px -90px;
    }
    .social_profiles li .pinterest {
      background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPflMFpZFgkzf891wSTs8Wq073WkvgD0xSGZcuxE-VvOo_zZSvQdjj0miYr8pOo8qpwhinWsTPOG3Smm237UJ8PkJAm43pv_xWj8fKODMOmWaydiKMpbMZJviX8TG3lCkfdE01tFpWofak/s1600/social_sprite.png") no-repeat 0px -135px;
    }
    .social_profiles li .rss {
      background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPflMFpZFgkzf891wSTs8Wq073WkvgD0xSGZcuxE-VvOo_zZSvQdjj0miYr8pOo8qpwhinWsTPOG3Smm237UJ8PkJAm43pv_xWj8fKODMOmWaydiKMpbMZJviX8TG3lCkfdE01tFpWofak/s1600/social_sprite.png") no-repeat 0px -180px;
    }
    .social_profiles li .linkedin {
      background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPflMFpZFgkzf891wSTs8Wq073WkvgD0xSGZcuxE-VvOo_zZSvQdjj0miYr8pOo8qpwhinWsTPOG3Smm237UJ8PkJAm43pv_xWj8fKODMOmWaydiKMpbMZJviX8TG3lCkfdE01tFpWofak/s1600/social_sprite.png") no-repeat 0px -225px;
    }
    .social_profiles li .tumblr {
      background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPflMFpZFgkzf891wSTs8Wq073WkvgD0xSGZcuxE-VvOo_zZSvQdjj0miYr8pOo8qpwhinWsTPOG3Smm237UJ8PkJAm43pv_xWj8fKODMOmWaydiKMpbMZJviX8TG3lCkfdE01tFpWofak/s1600/social_sprite.png") no-repeat 0px -270px;
    }
    .social_profiles li .youtube {
      background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPflMFpZFgkzf891wSTs8Wq073WkvgD0xSGZcuxE-VvOo_zZSvQdjj0miYr8pOo8qpwhinWsTPOG3Smm237UJ8PkJAm43pv_xWj8fKODMOmWaydiKMpbMZJviX8TG3lCkfdE01tFpWofak/s1600/social_sprite.png") no-repeat 0px -315px;
    }
    .social_profiles li .mail {
      background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPflMFpZFgkzf891wSTs8Wq073WkvgD0xSGZcuxE-VvOo_zZSvQdjj0miYr8pOo8qpwhinWsTPOG3Smm237UJ8PkJAm43pv_xWj8fKODMOmWaydiKMpbMZJviX8TG3lCkfdE01tFpWofak/s1600/social_sprite.png") no-repeat 0px -360px;
    }

    .social_profiles li a span {
      width: 80px;
      height: 20px;
      line-height: 20px;
      padding: 5px;
      left: 50%;
      margin-left: -52px;
      font-family: 'Alegreya SC', Georgia, serif;
      font-weight: 400;
      font-size: 14px;
      color: #fff;
      text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
      text-align: center;
      border: 5px solid #446cb3;
      background: #446cb3;
      text-indent: 0px;
      position: absolute;
      pointer-events: none;
      border-radius: 5%;
      opacity: 0;
      box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
    -webkit-transform: translate(35px) rotate(25deg) scale(1.5);
      -moz-transform: translate(35px) rotate(25deg) scale(1.5);
      -o-transform: translate(35px) rotate(25deg) scale(1.5);
      -ms-transform: translate(35px) rotate(25deg) scale(1.5);
      transform: translate(35px) rotate(25deg) scale(1.5);
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
   
    }
    .social_profiles li a span:before,
    .social_profiles li a span:after {
      content: '';
      position: absolute;
      bottom: -15px;
      left: 50%;
      margin-left: -9px;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 11px solid rgba(0,0,0,0.1);
    }
    .social_profiles li a span:after {
      bottom: -15px;
      margin-top: 6px;
      margin-left: -12px;
      border-top: 10px solid #446cb3;
    }
    .social_profiles li a:hover span {
      opacity: 0.9;
      bottom: 50px;
      -webkit-transform: translate(0px) rotate(0deg) scale(1);
      -moz-transform: translate(0px) rotate(0deg) scale(1);
      -o-transform: translate(0px) rotate(0deg) scale(1);
      -ms-transform: translate(0px) rotate(0deg) scale(1);
      transform: translate(0px) rotate(0deg) scale(1);
    }

بعدها نتوجه الى > التخطيط  >  اضافة اداة  > اداة HTML/JavaScript ونلصق بداخلها الكود التالي :

<div id="social_profiles-wrap">
<ul class="social_profiles">
<li><a class="facebook" href=http://www.facebook.com/archer target="_blank"><span>Facebook</span></a></li>
<li><a class="twitter" href=http://twitter.com/archertarget="_blank"><span>Twitter</span></a></li>
<li><a class="gplus" href=https://plus.google.com/b/archer target="_blank"><span>Google Plus</span></a></li>
<li><a class="pinterest" href=http://www.pinterest.com/archer target="_blank"><span>Pinterest</span></a></li>
<li><a class="rss" href=http://feeds.feedburner.com/archer target="_blank"><span>RSS</span></a></li>
<li><a class="linkedin"href=http://www.linkedin.com/in/archer target="_blank"><span>LinkedIn</span></a></li>
<li><a class="tumblr" href=http://www.thumblr.com/archer target="_blank"><span>Tumblr</span></a></li>
<li><a class="youtube" href=http://www.youtube.com/archer target="_blank"><span>Youtube</span></a></li>
<li><a class="mail" href=archer@gmail.com target="_blank"><span>Mail</span></a></li>
</ul></div>

ثم نقوم بتغيير الروابط الملونة باللون الاحمر الى الروابط الخاصة بمدونتك في تلك المواقع , ثم نقوم بحفظ الاداة , لاي استفسار عن الاضافة يرجى التعليق اسفل الموضوع , وشكرا لكم .

الكاتب : Unknown

مدون عربي من السودان احب مجال التدوين على منصة بلوجر ولي فيه شغف كبير اعمل في هذا المجال لاكثر من سنة احب ان اشارككم افكاري عبر مدونتي ارشر

شارك المقال

شاركه على فيسبوكشاركه على جوجل+