ازرار التواصل الإجتماعي ب 3 أشكال


ازرار التواصل الاجتماعي ب 3 أشكال ، في تدوينة اليوم احضرت لكم ازرار تواصل الاجتماعي ب 3 اشكال مختلفة وسهلة التركيب الذي طلبها مجموعة من المتابعين .

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

1.نتوجه لقالب >> تحرير .
2.ابحث عن <b:skin/><[[ ثم ضع كود الازرار  فوقه.

الشكل الأول

/*================= CSS Social Icons Widget by libya-web.blogspot.com =====================*/ .widget_social_apps{margin-left:-.5%;margin-right:-.5%}.widget_social_apps:before,.widget_social_apps:after{content:" ";display:table}.widget_social_apps:after{clear:both}.widget_social_apps .app_social{margin:0 .5% .5%;width:24%;float:left;text-align:center;background-color:#111;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.widget_social_apps .app_social.facebook{background-color:#3e64ad}.widget_social_apps .app_social.twitter{background-color:#58ccff}.widget_social_apps .app_social.pinterest{background-color:#de010d}.widget_social_apps .app_social.instagram{background-color:#125688}.widget_social_apps .app_social.google{background-color:#dd4b39}.widget_social_apps .app_social.linkedin{background-color:#007bb6}.widget_social_apps .app_social.flickr{background-color:#ff0084}.widget_social_apps .app_social.vine{background-color:#00bf8f}.widget_social_apps .app_social:hover{background-color:#111}.widget_social_apps .app_social a{display:block;color:#fff;padding:15px 5px}.widget_social_apps .app_social span{display:block}.widget_social_apps .app_social span.app_icon i{font-size:24px;margin-bottom:5px}.widget_social_apps .app_social span.app_count{font-weight:700;line-height:16px}.widget_social_apps .app_social span.app_type{font-size:14px;line-height:16px}
3.من "تخطيط" اختر اضافة أداة HTML/Javascript






<div class="widget_social_apps">
<div class="app_social facebook">
<a href="https://www.facebook.com/" target="_blank">
<span class="app_icon"><i class="fa fa-facebook"></i></span>
<span class="app_count">7845</span> <span class="app_type">معجب</span> </a></div>
<div class="app_social twitter">
<a href="https://www.twitter.com/" target="_blank">
<span class="app_icon"><i class="fa fa-twitter"></i></span>
<span class="app_count">32</span>
<span class="app_type">متابع</span>
</a></div>
<div class="app_social pinterest">
<a href="https://www.pinterest.com/" target="_blank">
<span class="app_icon"><i class="fa fa-pinterest"></i></span>
<span class="app_count">4774</span> <span class="app_type">اشخاص</span> </a></div>
<div class="app_social instagram">
<a href="https://www.instagram.com/" target="_blank">
<span class="app_icon"><i class="fa fa-instagram"></i></span>
<span class="app_count">65684</span> <span class="app_type">متابع</span> </a></div>
<div class="app_social google">
<a href="https://www.google.com/" target="_blank">
<span class="app_icon"><i class="fa fa-google-plus"></i></span>
<span class="app_count">65684</span> <span class="app_type">اشخاص</span> </a></div>
<div class="app_social linkedin">
<a href="https://www.linkedin.com/" target="_blank">
<span class="app_icon"><i class="fa fa-linkedin"></i></span>
<span class="app_count">65684</span> <span class="app_type">معجب</span> </a></div>
<div class="app_social flickr">
<a href="https://www.flickr.com/" target="_blank">
<span class="app_icon"><i class="fa fa-flickr"></i></span>
<span class="app_count">44</span>
<span class="app_type">متابع</span>
</a></div>
<div class="app_social vine">
<a href="https://www.vine.com/" target="_blank">
<span class="app_icon"><i class="fa fa-vine"></i></span> <span class="app_count">574</span> <span class="app_type">اشخاص</span> </a></div>
</div>
*غير مالونه برتقالي بروابطك
الشكل التاني
 شرح طريقة التركيب:
1.نتوجه لقالب >> تحرير .
2.ابحث عن <b:skin/><[[ ثم ضع كود الازرار فوقه.




/*============== CSS Metro style Social Icons Widget by msdesignbd.com ==============*/
#social-wrapper{background:#000;height:400px;width:50%;margin:auto}
#social-wrapper a{float:left;text-align:center;color:#FFF;font-size:45px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;transition:all .2s ease-in-out;height:50%}
#social-wrapper i{position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
#social-wrapper a:hover{background:#888}
#social-wrapper .fb{background:#3b5998}
#social-wrapper .tw{background:#4099FF}
#social-wrapper .yt{background:#e52d27}
#social-wrapper .gp{background:#D34836}
#social-wrapper .fb{width:75%}
#social-wrapper .gp{width:25%}
#social-wrapper .tw,#social-wrapper .yt{width:50%}
.cnir{position:fixed;right:10px;bottom:5px;color:#888;text-decoration:none}
@media screen and (max-width: 1000px) {
#social-wrapper .fb{width:100%}
#social-wrapper .tw, #social-wrapper .yt, #social-wrapper .gp{width:33.3333333333%}
}
@media screen and (max-width: 650px) {
#social-wrapper .tw,  #social-wrapper .yt,#social-wrapper .gp, #social-wrapper .fb{width:50%}
}
@media screen and (max-width: 300px) {
#social-wrapper .tw, #social-wrapper .yt, #social-wrapper .gp, #social-wrapper .fb{width:100%;height:25%}
}

3.من "تخطيط" اختر اضافة أداة HTML/Javascript


<div id="social-wrapper">
<a class="fb" href="https://facebook.com/USER_NAME" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a class="gp" href="https://plus.google.com/USER_NAME" target="_blank">
<i class="fa fa-google-plus"></i>
</a>
<a class="yt" href="https://youtube.com/USER_NAME" target="_blank">
<i class="fa fa-youtube"></i>
</a>
<a class="tw" href="https://twitter.com/USER_NAME" target="_blank">
<i class="fa fa-twitter"></i>
</a></div>

*غير مالونه ازرق بروابطك


 الشكل التالث
 شرح طريقة التركيب:
1.نتوجه لقالب >> تحرير .
2.ابحث عن <b:skin/><[[ ثم ضع كود الازرار فوقه.


.widget_social_apps{margin-left:-.5%;margin-right:-.5%}.widget_social_apps:before,.widget_social_apps:after{content:&quot; &quot;;display:table}.widget_social_apps:after{clear:both}.widget_social_apps .app_social{margin:0 .5% .5%;width:24%;float:left;text-align:center;background-color:#111;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.widget_social_apps .app_social.facebook{background-color:#3e64ad}.widget_social_apps .app_social.twitter{background-color:#58ccff}.widget_social_apps .app_social.pinterest{background-color:#de010d}.widget_social_apps .app_social.instagram{background-color:#125688}.widget_social_apps .app_social.google{background-color:#dd4b39}.widget_social_apps .app_social.linkedin{background-color:#007bb6}.widget_social_apps .app_social.flickr{background-color:#ff0084}.widget_social_apps .app_social.vine{background-color:#00bf8f}.widget_social_apps .app_social:hover{background-color:#111}.widget_social_apps .app_social a{display:block;color:#fff!important;padding:15px 5px}.widget_social_apps .app_social span{display:block}.widget_social_apps .app_social span.app_icon i{font-size:24px;margin-bottom:5px}.widget_social_apps .app_social span.app_count{font-weight:700;line-height:16px}.widget_social_apps .app_social span.app_type{font-size:14px;line-height:16px}

3.من "تخطيط" اختر اضافة أداة HTML/Javascript
<div class="widget_social_apps">
<div class="app_social facebook">
<a href="https://www.facebook.com/USER_NAME" target="_blank">
<span class="app_icon"><i class="fa fa-facebook"></i></span>
</a></div>
<div class="app_social twitter">
<a href="https://www.twitter.com/USER_NAME" target="_blank">
<span class="app_icon"><i class="fa fa-twitter"></i></span>
</a></div>
<div class="app_social pinterest">
<a href="https://www.pinterest.com/USER_NAME" target="_blank">
<span class="app_icon"><i class="fa fa-pinterest"></i></span>
</a></div>
<div class="app_social google">
<a href="https://www.google.com/USER_NAME" target="_blank">
<span class="app_icon"><i class="fa fa-google-plus"></i></span>
</a></div>
</div>


*غير مالونه احمر بروابطك

1 comments :

الاشتراك في: تعليقات الرسالة ( Atom )