Layout Style

Full Width Boxed

Background Patterns

Color Scheme

Top Ad unit 728 × 90

آخر التدوينات

random

[ حصريا ] اضافة ازرار مواقع التواصل الدائرية الى مدونات بلوجر

[full_width]
السلام عليكم و رحمة الله و بركاته
أهلا و سهلا بكم متابعى و زوار مدونة الموسوعة
لا شك أن مواقع التواصل الاجتماعى من أهم الوسائل التى تعمل على انجاح المدونات و المواقع لذلك كلما كانت تدويناتك تم نشرها على مواقع التواصل الاجتماعى كلما زاد عدد زوار مواضيع مدونتك أو موقعك لان زوار مواقع التواصل الاجتماعى عدد لايستهان به.
لذلك أحبابى فى الله اليوم أقدم لكم اضافة رائعة لمواقع التواصل الاجتماعى على مدونتك و لن أطيل عليكم أحبابى

أولا : كود الـ ( 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>

ثانيا : كود الـ ( 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);
}

ثالثا : كود الـ ( JAVA Script)

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

[ حصريا ] اضافة ازرار مواقع التواصل الدائرية الى مدونات بلوجر Reviewed by Unknown on 8:03 ص Rating: 5

هناك تعليقان (2):

  1. شكرا على مشاركة الاضافة المميزة

    ردحذف
  2. مخاطر انتشار الحشرات - شركة التقوى 0540505502

    يعتبر انتشار الحشرات بأنواعها المختلفة من المشاكل التي تؤرق أي شخص وذلك لما تتسبب فيه من أضرار صحية ونفسية وكذلك اقتصادية على المكان الذي تتواجد وتنتشر فيه، وتتمثل المشكلة الرئيسية في انتشار الحشرات هو اعتبارها أحد أهم ناقلات الأمراض حيث تتمكن بعض الحشرات من حمل البكتيريا أو الفيروس المسبب لبعض الأمراض المعدية والخطيرة ومن ثم انتقالها للإنسان عبر طرق مختلفة، وتتمثل صعوبة مكافحة بعض أنواع الحشرات في قدرة تلك الأنواع على التكاثر بسرعة كبيرة وبالطبع ينتج عنها أعداد رهيبة من الحشرات الصغيرة، والتي تمتلك قدرة كبيرة على الانتشار والاختباء في أضيق الأماكن والمخابئ التي يصعب الوصول إليها، وبالتالي يصبح التخلص منها مهمة صعبة وتحتاج لتدخل فوري من أحد أكبر الشركات المتخصصة مثل شركة مكافحة الحشرات بمكة والتي توفر أحدث المعدات والمواد التي تجعلها قادرة على الوصول لتلك الحشرات مهما كان عددها ودرجة انتشارها داخل المكان، وهذا الحل بالطبع هو الأفضل من كافة وسائل المكافحة المنزلية التي تعتمد على استخدام بعض المبيدات المنتشرة في الأسواق، والتي لا تعطي النتيجة المطلوبة في المكافحة إما بسبب ضعفها أو بسبب صعوبة وصولها للأماكن الضيقة التي تختبئ فيها الحشرات دون إتاحة المعدات التي تساعد في هذه العملية، وكذلك فإن الحشرات تمتلك قدرة على تطوير أجهزتها ومع الوقت يقل تأثرها بتلك المبيدات حتى تصبح غير ذات جدوى، هذا بالتأكيد بخلاف تأثير تلك الكيماويات على صحة الإنسان وخاصة في حالة تواجد الأطفال بالمنزل فيجب أن يتم التعامل مع المواد الكيميائية بحرص وحذر لتجنب كافة المخاطر المحتملة، ولكل هذه الأسباب فنحن ننصح جميع العملاء بضرورة التواصل فورا مع شركتنا إذا ظهرت لكم الحشرات المزعجة وأردتم التخلص منها نهائيا دون تأخير أو إضاعة وقت ومجهود دون جدوى مع شركتنا
    شركة مكافحة الحشرات بجدة
    شركة مكافحة بق الفراش بجدة
    شركة مكافحة العتة بجدة
    شركة مكافحة الصراصير بجدة
    شركة مكافحة النمل الابيض بجدة

    ردحذف

All Rights Reserved by الموسوعة الشاملة © 2014 - 2015
Powered By Blogger, Designed by Sweetheme

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

يتم التشغيل بواسطة Blogger.