اضافة مواقع التواصل مع عداد المتابعين فى السيدبار v1
السلام عليكم ورحمة الله وبركاته اهلا بكم متاعبي مايسترو التقنيه نقدم لكم اليوم متابعي مدونتنا اضافة لبلوجر جديده وحصريه لبلوجر وهي اضافة جميله وانيقة وهي اضافة مواقع التواصل مع عداد المتابعين فى السيدبار v1
وهي جميله وتحتوي علي عداد متابعين وشكل قلب جميل وفيها تاثير حرافي في ال hover ولن اطيل عليكم سادعكم مع شرح
التركيب شكرا .
- طريقة التركيب
- انتقل الى التخطيط
- بعد انتقلك الى التخطيط قم بتحرير اداة جديه فى السيدبار html/javascript ثم قم بوضع بها الكود التالى
<div class='clear'/>
<div class='container'>
<div class='social-followrs'>
<ul>
<li class='facebook2'>
<a href='https://www.facebook.com/maes1trotech'>
<span class='social-name'>
<i class='fa fa-facebook'/>
</i></span><span class='social-count'>+100 ألف</span>
<span class='social-follow'>متابع</span></a>
</li>
<li class='youtube2'>
<a href='https://www.youtube.com/channel/UCrtGhQwW1HpEdaml_OOfDgw'>
<span class='social-name'>
<i class='fa fa-youtube-play'/>
</i></span><span class='social-count'>+100 ألف</span>
<span class='social-follow'>مشترك</span></a>
</li>
<li class='twitter2'>
<a href='https://twitter.com/maes1tro'>
<span class='social-name'>
<i class='fa fa-facebook'/>
</i></span><span class='social-count'>+100 ألف</span>
<span class='social-follow'>متابع</span></a>
</li>
<li class='google-plus2'>
<a href='https://twitter.com/maes1tro'>
<span class='social-name'>
<i class='fa fa-google-plus'/>
</i></span><span class='social-count'>+1.5k</span>
<span class='social-follow'>متابع</span></a>
</li>
<li class='rss'>
<a href='http://feeds.feedburner.com/maes1tro'>
<span class='social-name'>
<i class='fa fa-rss'/>
</i></span><span class='social-count'>+1.5k</span>
<span class='social-follow'>متابع</span></a>
</li>
</ul>
</div>
</div>
<div class='clear'/>
<style>
.social-follow:after {
content: "\f184";
font-family: FontAwesome;
margin-right: 5px;
position: relative;
top: 1px;
}
.social-followrs ul li.rss a {
background: #f29a1d
}
.social-followrs ul li.google-plus2 a {
background: #DD4B39
}
.social-followrs ul li.twitter2 a {
background: #55acee
}
.social-followrs ul li.facebook2 a {
background: #3b5998
}
.social-followrs ul li.instagram a {
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.social-followrs ul li.youtube2 a {
background: #cb322c
}
.social-followrs ul li .social-follow {
float: left
}
.social-followrs ul li .social-name {
float: right;
margin-left: 8px
}
.social-followrs ul li a {
display: block;
color: #fff;
padding: 10px 18px;
font-size: 18px;
transition: 0.2s;
}
.social-followrs ul li {
overflow: hidden;
width: 31%;
margin-bottom: 3px;
}
.social-followrs ul li a:hover {
padding: 10px 31px
}
.social-followrs {
display: block;
overflow: hidden;
margin: 15px 0;
}
@media only screen and (max-width: 900px)
.social-followrs ul li {
overflow: hidden;
width: 100%!important;
margin-bottom: 3px;
}
</style></div></div>
- الان قم بتغيير روابط مواقع التواصل وعدد المتابعين لما تريد
كاتب الموضوع :
ليست هناك تعليقات:
إرسال تعليق