.

ازرار المشاركة على مواقع التواصل بشكل دائري انيق

السلام عليكم , في هده التدوينة اقدم لكم اضافة من اضافة بلوجر المهمة جدا لكل مدونة وهي ازرار المشاركة على اغلب مواقع التواصل الاجتماعي , الاضافة في غاية الروعة وتمتاز بشكل منبتق على شكل دائرة تتعطي بالطبع طابع احترافي لموقعك وتتير انتباه الزوار ,
ازرار المشاركة على مواقع التواصل بشكل دائر انيق Circular Social Network


طريقة تركيب الاضافة 

  1. توجه الى لوحة تحكم بلوجر 
  2. اختر المدونة 
  3. القالب تحرير html 
  4. ثم ابحث عن 
]]></b:skin>   او  </style>  على حسب قالب مدونتك  
ثم نضع فوقه كود css هدا 

*, *:before, *:after {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.absolute-center, .menu, .menu .btn .fa, .menu .btn.trigger .line {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.menu {
    width: 5em;
    height: 5em;
}
.menu .btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #237dac;
 color: #fff;
    opacity: 0;
    z-index: -10;
    cursor: pointer;
    -webkit-transition: all 1s, z-index 0.3s, -webkit-transform 1s;
    transition: all 1s, z-index 0.3s, transform 1s;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
.menu .btn .fa {
    font-size: 3em;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}
.menu .btn:hover .fa {
    color: #30abd5;
}
.menu .btn:hover {
    background: #f5f7fa;
}
.menu .btn.trigger {
    opacity: 1;
    z-index: 100;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}
.menu .btn.trigger:hover {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    background-color: #f5f7fa;
    color: #30abd5;
}
.menu .btn.trigger:hover .line {
    background-color: #30abd5;
}
.menu .btn.trigger:hover .line:before, .menu .btn.trigger:hover .line:after {
    background-color: #30abd5;
}
.menu .btn.trigger .line {
    width: 60%;
    height: 6px;
    background: #fff;
    border-radius: 6px;
    -webkit-transition: background-color 0.3s, height 0.3s, top 0.3s;
    transition: background-color 0.3s, height 0.3s, top 0.3s;
}
.menu .btn.trigger .line:before, .menu .btn.trigger .line:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 6px;
    background: #fff;
    border-radius: 6px;
    -webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
    transition: background-color 0.3s, transform 0.3s;
}
.menu .btn.trigger .line:before {
    top: -12px;
    -webkit-transform-origin: 15% 100%;
    -ms-transform-origin: 15% 100%;
    transform-origin: 15% 100%;
}
.menu .btn.trigger .line:after {
    top: 12px;
    -webkit-transform-origin: 25% 30%;
    -ms-transform-origin: 25% 30%;
    transform-origin: 25% 30%;
}
.menu .rotater {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.menu.active .btn-icon {
    opacity: 1;
    z-index: 50;
}
.menu.active .trigger .line {
    height: 0px;
    top: 45%;
}
.menu.active .trigger .line:before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 110%;
}
.menu.active .trigger .line:after {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 110%;
}
.rotater:nth-child(1) {
    -webkit-transform: rotate(-22.5deg);
    -ms-transform: rotate(-22.5deg);
    transform: rotate(-22.5deg);
}
.menu.active .rotater:nth-child(1) .btn-icon {
    -webkit-transform: translateX(-10em) rotate(22.5deg);
    -ms-transform: translateX(-10em) rotate(22.5deg);
    transform: translateX(-10em) rotate(22.5deg);
}
.rotater:nth-child(2) {
    -webkit-transform: rotate(22.5deg);
    -ms-transform: rotate(22.5deg);
    transform: rotate(22.5deg);
}
.menu.active .rotater:nth-child(2) .btn-icon {
    -webkit-transform: translateX(-10em) rotate(-22.5deg);
    -ms-transform: translateX(-10em) rotate(-22.5deg);
    transform: translateX(-10em) rotate(-22.5deg);
}
.rotater:nth-child(3) {
    -webkit-transform: rotate(67.5deg);
    -ms-transform: rotate(67.5deg);
    transform: rotate(67.5deg);
}
.menu.active .rotater:nth-child(3) .btn-icon {
    -webkit-transform: translateX(-10em) rotate(-67.5deg);
    -ms-transform: translateX(-10em) rotate(-67.5deg);
    transform: translateX(-10em) rotate(-67.5deg);
}
.rotater:nth-child(4) {
    -webkit-transform: rotate(112.5deg);
    -ms-transform: rotate(112.5deg);
    transform: rotate(112.5deg);
}
.menu.active .rotater:nth-child(4) .btn-icon {
    -webkit-transform: translateX(-10em) rotate(-112.5deg);
    -ms-transform: translateX(-10em) rotate(-112.5deg);
    transform: translateX(-10em) rotate(-112.5deg);
}
.rotater:nth-child(5) {
    -webkit-transform: rotate(157.5deg);
    -ms-transform: rotate(157.5deg);
    transform: rotate(157.5deg);
}
.menu.active .rotater:nth-child(5) .btn-icon {
    -webkit-transform: translateX(-10em) rotate(-157.5deg);
    -ms-transform: translateX(-10em) rotate(-157.5deg);
    transform: translateX(-10em) rotate(-157.5deg);
}
.rotater:nth-child(6) {
    -webkit-transform: rotate(202.5deg);
    -ms-transform: rotate(202.5deg);
    transform: rotate(202.5deg);
}
.menu.active .rotater:nth-child(6) .btn-icon {
    -webkit-transform: translateX(-10em) rotate(-202.5deg);
    -ms-transform: translateX(-10em) rotate(-202.5deg);
    transform: translateX(-10em) rotate(-202.5deg);
}
.rotater:nth-child(7) {
    -webkit-transform: rotate(247.5deg);
    -ms-transform: rotate(247.5deg);
    transform: rotate(247.5deg);
}
.menu.active .rotater:nth-child(7) .btn-icon {
    -webkit-transform: translateX(-10em) rotate(-247.5deg);
    -ms-transform: translateX(-10em) rotate(-247.5deg);
    transform: translateX(-10em) rotate(-247.5deg);
}
.rotater:nth-child(8) {
    -webkit-transform: rotate(292.5deg);
    -ms-transform: rotate(292.5deg);
    transform: rotate(292.5deg);
}
.menu.active .rotater:nth-child(8) .btn-icon {
    -webkit-transform: translateX(-10em) rotate(-292.5deg);
    -ms-transform: translateX(-10em) rotate(-292.5deg);
    transform: translateX(-10em) rotate(-292.5deg);
}
.rotater:nth-child(9) {
    -webkit-transform: rotate(337.5deg);
    -ms-transform: rotate(337.5deg);
    transform: rotate(337.5deg);
}
.menu.active .rotater:nth-child(9) .btn-icon {
    -webkit-transform: translateX(-10em) rotate(-337.5deg);
    -ms-transform: translateX(-10em) rotate(-337.5deg);
    transform: translateX(-10em) rotate(-337.5deg);
}


ثم بعد دالك نبحث عن  </body>

ثم نضع فوقه كود   jQuery

<script type='text/javascript'> $(document).ready(function(){$(".trigger").click(function(){$(".menu").toggleClass("active")})}) </script>

الان وكخطوة اخيرة نظع كود html في اي مكان تشاء في القالب او يمكنك الدهاب الى التخطيط ووضعه في اداة HTML/JavaScript  وقم بحفظ القالب

كود html

<div class="menu">
  <div class="btn trigger">
    <span class="line"></span>
  </div>
  <div class="rotater">
    <div class="btn btn-icon">
      <i class="fa fa-codepen"></i>
    </div>
  </div>
  <div class="rotater">
    <div class="btn btn-icon">
      <i class="fa fa-facebook"></i>
    </div>
  </div>
  <div class="rotater">
    <div class="btn btn-icon">
      <i class="fa fa-google-plus"></i>
    </div>
  </div>
  <div class="rotater">
    <div class="btn btn-icon">
      <i class="fa fa-twitter"></i>
    </div>
  </div>
  <div class="rotater">
    <div class="btn btn-icon">
      <i class="fa fa-dribbble"></i>
    </div>
  </div>
  <div class="rotater">
    <div class="btn btn-icon">
      <i class="fa fa-linkedin"></i>
    </div>
  </div>
  <div class="rotater">
    <div class="btn btn-icon">
      <i class="fa fa-github"></i>
    </div>
  </div>
  <div class="rotater">
    <div class="btn btn-icon">
      <i class="fa fa-behance"></i>
    </div>
  </div>
</div>