حصريا اضافة عداد المتابعين بشكل جديد و احترافي جدا

ديسمبر 13, 2017 omer mohamed

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

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

معاينة الاضافة:

يمكنك معاينة الاضافة من هنا

صورة عن الاضافة:

طريقة التركيب:

اول شيء ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه:

/* Social Media Cntr */
.social-widget .widget-content {
margin: -2.5px
}
.social-widget li a {
width: 44px;
display: block;
height: 44px;
line-height: 50px;
font-size: 23px;
border-radius: 50%;
text-align: center;
color: #FFF;
background-color: rgb(17, 34, 51);
margin: 2.5px;
transition: 0.3s;
}
.social-widget li {
float: left;
padding: 0
}
.social-widget li a:hover {
transition: 0.3s;
transform: rotate(360deg);
}
div#suded-social ul li {
overflow: hidden;}
div#suded-social ul li i {
float: left;
margin-top: 7px;
margin-left: 6px;
font-size: 20px;
}
#Social-ul {    -webkit-padding-start: 0;}
div#suded-social {
font-family: amni8-font;
overflow: hidden;
border-radius: 3px;
}
div#suded-social ul li p {
display: inline-block;
width: 83%;
font-size: 16px;
}
div#suded-social ul li a {
display: block;
background: #000;
color: #fff;
padding: 10px 20px;
}
div#suded-social ul li.fb-c a {
background: #3b5998;
border: 2px solid #2c4373;
}
div#suded-social ul li.fb-c a:hover{background:#2c4373}
div#suded-social ul li.twt-c a {
background: #55acee;
border: 2px solid #2fa4fd;
}
div#suded-social ul li.twt-c a:hover{background:#2fa4fd}
div#suded-social ul li.ytb-c a {
background: #bb0000;
border: 2px solid #a80000;
}
div#suded-social ul li.ytb-c a:hover{background:#a80000}
div#suded-social ul li.plusgg-c a {
background: #dd4b39;
border: 2px solid #cb3b29;
}
div#suded-social ul li.plusgg-c a:hover{background:#cb3b29}
.social {
margin-bottom: 10px;
}

الان احفظ القالب
الان مع كود اظهار الاضافة :

• ادخل الى لوحة التحكم ثم التخطيط
• اضف اداة  Html/JavaScript و ضع هذا الكود و حفظ الاضافة.

<div class="social">
<div id="suded-social">
<ul id="Social-ul">
<li class="fb-c"><a href="https://facebook.com/amnitech8" target="_blank"><p>تابع جديدنا على الفيسبوك و انظم لاكثر من 90 الف متابع</p><i class="fa fa-facebook"></i></a></li>
<li class="twt-c"><a href="https://twitter.com/amni_8" target="_blank"><p>ضغطة بسيطة تجعلك تتوصل بأحدث تغريداتي التقنية التويتر</p><i class="fa fa-twitter"></i></a></li>
<li class="ytb-c"><a href="https://youtube.com/c/amnitech8" target="_blank"><p>إنظم لأكثر من 350 ألف مشترك في قناتي الرسمية على موقع اليوتيوب</p><i class="fa fa-youtube-play"></i></a></li>
<li class="plusgg-c"><a href="https://plus.google.com/+amnitech8" target="_blank"><p>تابعنا مباشرة من حسابك جوجل + و توصل بجديد الدروس و الكورسات التقنية الفريدة</p><i class="fa fa-google-plus"></i></a></li>
</ul>
</div></div>

ملاحظة: يمكنك تغيير النصوص و الروابط بما تريد.

مشاركة