ازرار المواقع الاجتماعية عائمة تخرج من الدائره عند تحريك الماوس فوقها

Follow @TechPoint_Blog

 

السلام عليكم ورحمة الله وبركاته.

 اهلا وسهلا بكم في موضوع جديد وهذه المره اقدم لكم شرح اضافة

كما ترون في الصورة اعلاه فهي دائره مكتوب فيها "SHARE"  عند

تحريك المؤشر فوقها تخرج ازرار المواقع الاجتماعيه منها 

طبعا هذه الاضافة تكون عائمة في كل صفحات المدونه

  تم ترجمة الموضوع من قِبل مدونة ارشيف بلوجر ,المصدر 

فارجو ان تنال الاضافة اعجابكم الان مع كيفية التركيب.

1. اذهب للوحة تحكم مدونتك .
2. القالب.
3. تحرير HTML'
4. متابعه و اشر على توسيع القوالب.
5. اضغط Ctrl+F من لوحة المفاتيح.
6. ابحث عن الوسم التالي:

  <div class=’post-footer-line post-footer-line-1′>

7.الان الصق الكود التالي بعد الوسم مباشرة.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
.ringMenu {
width: 100px;
margin: 150px auto;
}
.ringMenu ul {
list-style: none;
position: relative;
width: 100px;
color: white;
}
.ringMenu ul a {
color: white;
}
.ringMenu ul li {
-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;
}
.ringMenu ul li a {
display: block;
width: 100px;
height: 100px;
background: rgba(50,50,50,0.7);
text-align: center;
line-height: 100px;
-webkit-border-radius: 50px;
border-radius: 50px;
font-size: 20px;
}
.ringMenu ul li a:hover {
background: rgba(230,150,20,0.7);
text-decoration: none;
}

.ringMenu ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.ringMenu:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.ringMenu ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: -70px;
left: 50px;
}
.ringMenu ul li.bottom {
-webkit-transform-origin: 50% -52px;
-moz-transform-origin: 50% -52px;
-o-transform-origin: 50% -52px;
transform-origin: 50% -52px;
position: absolute;
bottom: -70px;
left: 50px;
}
.ringMenu ul li.right {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: 10px;
right: -50px;
}
.ringMenu ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 10px;
left: -50px;
}
</style>
<div class="ringMenu">
<script type="text/javascript">var switchTo5x=false;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "ur-e9856caa-8f3b-40a6-82af-461e390fe167"});</script>
<ul>
<li class="main"><a href="#main">SHARE</a></li>
<li class="top"><span class='st_fblike_vcount' displayText='Like'></span></li>
<li class="right"><span class='st_sharethis_vcount' displayText='Share'></span></li>
<li class="bottom"><span class='st_plusone_vcount' displayText='+1'></span></li>
<li class="left"><span class='st_twitter_vcount' displayText='Tweet'></span></li>
</ul>
</div>
</b:if>

اضغط حفظ وبهذا تكون انتهيت.

طبعاً اي استفسار يمكنك وضعه في تعليق هنا كما ارجو منك

الضغط على ازرار المواقع الاجتماعيه ادناة

تحياتي.

الكاتب : Salem Shami

مؤسس نقطة تقنية، مهتم بأخبار التقنية و التجارة الإلكترونية،أسعد بالتواصل معك عبر حساباتي في المواقع الإجتماعية أدناه

• تواصل معي :
• fb
• tw
• gl