 |
| اضافة أزرار المشاركة على مواقع التواصل بشكل أنيق |
بسم الله الرحمن الرحيم
السلام عليكم و رحمة الله و بركاته
أهلا و سهلا بكم متابعي مدونة سمارت المعلوماتية الكرام
لاشك أحبابى فى الله أن مواقع التواصل الاجتماعى هى أهم الوسائل التى تعمل على نجاح أى مدونة أو موقع أو مدونة لما فيها من عدد هائل للزوار فكل يوم يدخل مواقع التواصل الاجتماعى ملايين من الزوار لذلك هى من أهم الوسائل لكى تكسب عدد كبير جدا من الزوار لذلك أحبابى فى الله أقدم لحضراتكم اضافة رائعة جدا لكى تكسب الكثير من الزوار أو بمعنى أدق هذه الاضافة تسهل على المدونين من عمل مشاركات للتدوينات على مواقع التواصل الاجتماعى كما أنها جذابة جدا فتجعل الزوار يقومون بعمل مشاركة للتدوينات الى هذه المواقع المفيدة و بالتالى قد استفدت من زائر و هذا الزائر جلب اليك زوار آخرون.
معاينة الاضافة
يمكنكم أحبابى فى الله معاينتها من خلال الصورة العلوية و هى عبارة عن زر عند المرور عليه بالماوس تظهر مواقع التاصل الاجتماعى بطريقة رائعة جدا كما فى الصورة تماما.
تركيب الاضافة الى مدونتك
- من لوحة التحكم قم بالدخول على قالب و من ثم اضغط على تحرير HTML.
- خذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير.
- قم بالبحث عن الكود التالي و ذلك عن طريق الضغط على (CTRL+F).
- قم بالبحث عن الكود :
]]></b:skin>
واضف فوقه كود الخط التالى :
*, *: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>
ثم نضع فوقه الكود التالى
<script type='text/javascript'> $(document).ready(function(){$(".trigger").click(function(){$(".menu").toggleClass("active")})}) </script>
و أخيرا
- من لوحة التحكم اذهب التخطيط ثم إصافة اداة HTML/JavaScript
- ألصق هذا الكود :
<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>
.
.
.
.
.
اذا اعجبك الموضوع لاتبخل علينا بتعليق فتعليقك يشجعنا
amlmtar88@gmail.com
ردحذف