 |
اضافة ازرار المواقع الاجتماعية الى مدونة بلوجر (V2) |
السلام عليكم اخواني اعزائي اليوم سنتطرق لشرح ولا اروع الا وهو إضافة أزرار المواقع الإجتماعية إلى مدونتك بشكل مميز (النسخة الاولى).
إضافة أزرار صفحات المواقع الإجتماعية إضافة رائعة اصفها لك أفضل الإضافات و أكثرها أناقة, كما أنها لا تشكل حاجزا لشكل مدونتك, حيث تتناسب مع أي أنواع القوالب كان فلات ( Flat ) او اي نوع اخر, بالاضافة ان تركيبها ولا اسهل فهي مكون من كود واحد كامل .
↓ شرح تركيب اضافة ازرار المواقع الاجتماعية V2 ↓
- اولا اخي الكريم ادعوك للانضمام لاعضاء المدونة من هنا
- توجه الى لوحت تحكم منصت بلوجر
- افتح لوحت تحكم مدونتك
- تم ضع الكود التالي داخل اداة جديدة " 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>
الان لا تنسى تعوييض الارموز الملونة بالاخضر بالرابط المناسب لك و ايضا لا تنسى تغيير عدد المعجبين و المتابعين الملون باللون البرتقالي الى العدد الحقيقي لصفاحتك... كان معكم اخوكم بدر الدين وجيه اراكم في درس اخر.
ملاحضة: لا تنسى مشاركتنا رئيك باضافة اليوم في تعليق.
كلمات دلالية: