اضافة ازرار المواقع الاجتماعية بتصميم انيق الى مدونة بلوجر (V2)

اضافة ازرار المواقع الاجتماعية بتصميم انيق الى مدونة بلوجر (V2)

اضافة ازرار المواقع الاجتماعية الى مدونة بلوجر,اضافة ازرار المواقع الاجتماعية بشكل انيق جدا الى مدونة بلوجر,اضافة ازرار المواقع الاجتماعية بلوجر,اضافة ازرار المواقع الاجتماعية بشكل ميترو,إضافة أزرار المواقع الإجتماعية إلى مدونتك بشكل مميز,اضافة ازرار مواقع النشر الاجتماعية اسفل التدوينة,إضافة أزرار عائمة للمواقع الإجتماعية في المدونة,إضافة أزرار مواقع التواصل الإجتماعي شكل جميل متحرك على بلوجر,اضافة ازرار المواقع الاجتماعية,شرح إضافة أزرار مواقع النشر الاجتماعية أسفل التدوينة

اضافة ازرار المواقع الاجتماعية الى مدونة بلوجر (V2)


السلام عليكم اخواني اعزائي اليوم سنتطرق لشرح ولا اروع الا وهو إضافة أزرار المواقع الإجتماعية إلى مدونتك بشكل مميز (النسخة الاولى).
إضافة أزرار صفحات المواقع الإجتماعية إضافة رائعة اصفها لك أفضل الإضافات و أكثرها أناقة, كما أنها لا تشكل حاجزا لشكل مدونتك, حيث تتناسب مع أي أنواع القوالب كان فلات ( Flat ) او اي نوع اخر, بالاضافة ان تركيبها ولا اسهل فهي مكون من كود واحد كامل .

↓ شرح تركيب اضافة ازرار المواقع الاجتماعية V2 



  1. اولا اخي الكريم ادعوك للانضمام لاعضاء المدونة من هنا
  2. توجه الى لوحت تحكم منصت بلوجر
  3. افتح لوحت تحكم مدونتك
  4. تم ضع الكود التالي داخل اداة جديدة " Html/Javascript " او اي مكان تريد
<style>
/* Social Counter V2 by Ara1tech.blogspot.com
-----------------------------------------*/
.social_item-wrapper {
float: left;
width: 48%;
text-align: center;
margin-right: 4% !important;
margin-bottom: 10px !important;
color: #fff;
}
.social_item-wrapper:nth-child(2n+2) {
margin-right: 0 !important;
}
#sidebar .widget {
margin-bottom: 35px;
}
.social_item {
position: relative;
display: block;
height: 107px;
padding: 10px;
overflow: hidden;
color: #fff;
}
.social_icon {
font-size: 2rem;
display: inline-block;
margin-top: 5px;
margin-bottom: 9px;
color: #fff;
}
.social_num {
line-height: 44px;
width: 100%;
height: 41px;
font-size: .875rem;
display: inline-block;
}
a.social_item.social_facebook {
background: #3F5B9B;
}
.fa-facebook.social_icon ~ .social_num {
background: #2E4372;
}
li.social_item-wrapper:hover .fa-facebook.social_icon ~ .social_num {
background: #3F5B9B;
}
li.social_item-wrapper:hover .social_facebook {
background: #2E4372;
}
a.social_item.social_twitter {
background: #1C97DE;
}
.fa-twitter.social_icon ~ .social_num {
background: #1571A5;
}
li.social_item-wrapper:hover .fa-twitter.social_icon ~ .social_num {
background: #1C97DE;
}
li.social_item-wrapper:hover .social_twitter {
background: #1571A5;
}
a.social_item.social_youtube {
background: #E22020;
}
.fa-youtube.social_icon ~ .social_num {
background: #B31919;
}
li.social_item-wrapper:hover .fa-youtube.social_icon ~ .social_num {
background: #E22020;
}
li.social_item-wrapper:hover .social_youtube {
background: #B31919;
}
a.social_item.social_dribbble {
background: #E82159;
}
.fa-dribbble.social_icon ~ .social_num {
background: #B51A45;
}
li.social_item-wrapper:hover .fa-dribbble.social_icon ~ .social_num {
background: #E82159;
}
li.social_item-wrapper:hover .social_dribbble {
background: #B51A45;
}
a.social_item.social_rss {
background: #E86321;
}
.fa-rss.social_icon ~ .social_num {
background: #C2521B;
}
li.social_item-wrapper:hover .fa-rss.social_icon ~ .social_num {
background: #E86321;
}
li.social_item-wrapper:hover .social_rss {
background: #C2521B;
}
a.social_item.social_google-plus {
background: #E82C2C;
}
.fa-google-plus.social_icon ~ .social_num {
background: #BF2424;
}
li.social_item-wrapper:hover .fa-google-plus.social_icon ~ .social_num {
background: #E82C2C;
}
li.social_item-wrapper:hover .social_google-plus {
background: #BF2424;
}
a.social_item.social_linkedin {
background: #0275B6;
}
.fa-linkedin.social_icon ~ .social_num {
background: #02669E;
}
li.social_item-wrapper:hover .fa-linkedin.social_icon ~ .social_num {
background: #0275B6;
}
li.social_item-wrapper:hover .social_linkedin {
background: #02669E;
}
a.social_item.social_instagram {
background: #8E714D;
}
.fa-instagram.social_icon ~ .social_num {
background: #6F583C;
}
li.social_item-wrapper:hover .fa-instagram.social_icon ~ .social_num {
background: #8E714D;
}
li.social_item-wrapper:hover .social_instagram {
background: #6F583C;
}
a.social_item.social_pinterest {
background: #CA2027;
}
.fa-pinterest.social_icon ~ .social_num {
background: #AB1B21;
}
li.social_item-wrapper:hover .fa-pinterest.social_icon ~ .social_num {
background: #CA2027;
}
li.social_item-wrapper:hover .social_pinterest {
background: #AB1B21;
}
a.social_item.social_tumblr {
background: #3a5c7e;
}
.fa-tumblr.social_icon ~ .social_num {
background: #36465D;
}
li.social_item-wrapper:hover .fa-tumblr.social_icon ~ .social_num {
background: #3a5c7e;
}
li.social_item-wrapper:hover .social_tumblr {
background: #36465D;
}
</style>
<ul class="social-counter"><li class="social_item-wrapper"><a href="#" class="social_item social_facebook"><i class="fa fa-facebook social_icon"></i><br><span class="social_num">215K</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_twitter"><i class="fa fa-twitter social_icon"></i><br><span class="social_num">115K</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_youtube"><i class="fa fa-youtube social_icon"></i><br><span class="social_num">215,635</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_dribbble"><i class="fa fa-dribbble social_icon"></i><br><span class="social_num">14K</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_linkedin"><i class="fa fa-linkedin social_icon"></i><br><span class="social_num">556</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_google-plus"><i class="fa fa-google-plus social_icon"></i><br><span class="social_num">200K</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_instagram"><i class="fa fa-instagram social_icon"></i><br><span class="social_num">152,500</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_rss"><i class="fa fa-rss social_icon"></i><br><span class="social_num">5124</span></a></li></ul>

 الان لا تنسى تعوييض الارموز الملونة بالاخضر بالرابط المناسب لك و ايضا لا تنسى تغيير عدد المعجبين و المتابعين الملون باللون البرتقالي الى العدد الحقيقي لصفاحتك... كان معكم اخوكم بدر الدين وجيه اراكم في درس اخر.

ملاحضة: لا تنسى مشاركتنا رئيك باضافة اليوم في تعليق.

كلمات دلالية:

اضافة ازرار المواقع الاجتماعية بشكل انيق جدا الى مدونة بلوجر

اضافة ازرار المواقع الاجتماعية V2

اضافة ازرار المواقع الاجتماعية الى مدونة بلوجر

اضافة ازرار المواقع الاجتماعية بلوجر

إضافة أزرار عائمة للمواقع الإجتماعية في المدونة

قد تُعجبك هذه المشاركات