السلام عليكم اهلا بالجميع علي مدونة محترف بلوجر بعد افتتاح المدونة احببت ان اقدم لكم اضافة مواقع التواصل الاجتماعي مع عدد المتابعين بشكل احترافي هذه الاضافة في تحتاجها مدونات بلوجر بحيث ان الزائر يتعرف علي عدد متابعين هذه المدونة عبر هذه الاداة والاداة بها 12 موقع تواصل يمكنك اختيار الذي تريده وتمسح الذين لاتريدهم
لمعاينة الإضافة
معاينة
اضغط للمعاينة
شرح طريقة التركيب
- ]]></b:skin>قم بالتوجه الي قالب ثم تحرير HTML ثم قم بالبحث عن الوسم
- ثم قم بوضع هذا الكود فوقه
/*----------مواقع التواصل------------*/
.list-unstyled{padding-right:0;list-style:none;margin:2px}
.list-inline li{display:inline-block;padding-left:5px;padding-right:5px;margin-bottom:10px}
.tl-colored-social .fa,.tl-social-icons .fa{font-size:16px}
.tl-colored-social .fa,.tl-social-icons .fa{width:35px;height:35px;line-height:35px;text-align:center;color:#FFF;color:rgba(255,255,255,0.8)}
.tl-colored-social.icon-circle .fa,.tl-social-icons.icon-circle .fa{border-radius:50%}
.tl-colored-social.icon-rounded .fa,.tl-social-icons.icon-rounded .fa{border-radius:2px}
.tl-colored-social.icon-flat .fa,.tl-social-icons.icon-flat .fa{border-radius:0}
.tl-colored-social .fa:hover,.tl-colored-social .fa:active,.tl-social-icons .fa:hover,.tl-social-icons .fa:active{color:#FFF}
.tl-colored-social.icon-zoom .fa:hover,.tl-colored-social.icon-zoom .fa:active,.tl-social-icons.icon-zoom .fa:hover,.tl-social-icons.icon-zoom .fa:active,.tl-social-sidebar li:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}
.tl-colored-social.icon-rotate .fa:hover,.tl-colored-social.icon-rotate .fa:active,.tl-social-icons.icon-rotate .fa:hover,.tl-social-icons.icon-rotate .fa:active{-webkit-transform:scale(1.1) rotate(360deg);-moz-transform:scale(1.1) rotate(360deg);-ms-transform:scale(1.1) rotate(360deg);-o-transform:scale(1.1) rotate(360deg);transform:scale(1.1) rotate(360deg)}
.tl-colored-social .fa-dribbble,.tl-social-icons .fa-dribbble:hover,.tl-socialicons .tl-dribbble:hover .tl-sicon{background-color:#F46899}
.tl-colored-social .fa-stumbleupon,.tl-social-icons .fa-stumbleupon:hover{background-color:#eb4924}
.tl-colored-social .fa-reddit,.tl-social-icons .fa-reddit:hover{background-color:#5f99cf}
.tl-colored-social .fa-facebook,.tl-social-icons .fa-facebook:hover,.tl-socialicons .tl-facebook:hover .tl-sicon{background-color:#3C599F}
.tl-colored-social .fa-rss,.tl-social-icons .fa-rss:hover{background-color:#f26522}
.tl-colored-social .fa-lastfm,.tl-social-icons .fa-lastfm:hover{background-color:#d51007}
.tl-colored-social .fa-flickr,.tl-social-icons .fa-flickr:hover{background-color:#FF0084}
.tl-colored-social .fa-instagram,.tl-social-icons .fa-instagram:hover,.tl-socialicons .tl-instagram:hover .tl-sicon{background-color:#685243}
.tl-colored-social .fa-foursquare,.tl-social-icons .fa-foursquare:hover,.tl-socialicons .tl-foursquare:hover .tl-sicon{background-color:#0086BE}
.tl-colored-social .fa-github,.tl-social-icons .fa-github:hover,.tl-socialicons .tl-github:hover .tl-sicon{background-color:#070709}
.tl-colored-social .fa-google-plus,.tl-social-icons .fa-google-plus:hover,.tl-socialicons .tl-googleplus:hover .tl-sicon{background-color:#CF3D2E}
.tl-colored-social .fa-instagram,.tl-social-icons .fa-instagram:hover{background-color:#A1755C}
.tl-colored-social .fa-linkedin,.tl-social-icons .fa-linkedin:hover{background-color:#0085AE}
.tl-colored-social .fa-pinterest,.tl-social-icons .fa-pinterest:hover,.tl-socialicons .tl-pinterest:hover .tl-sicon{background-color:#CC2127}
.tl-colored-social .fa-twitter,.tl-social-icons .fa-twitter:hover,.tl-socialicons .tl-twitter:hover .tl-sicon{background-color:#32CCFE}
.tl-colored-social .fa-vk,.tl-social-icons .fa-vk:hover,.tl-socialicons .tl-vk:hover .tl-sicon{background-color:#375474}
.tl-colored-social .fa-soundcloud,.tl-social-icons .fa-soundcloud:hover,.tl-socialicons .tl-soundcloud:hover .tl-sicon{background-color:#FF4100}
.tl-colored-social .fa-vine,.tl-social-icons .fa-vine:hover,.tl-socialicons .tl-vine:hover .tl-sicon{background-color:#35B57C}
.tl-colored-social .fa-xing,.tl-social-icons .fa-xing:hover{background-color:#00555C}
.tl-colored-social .fa-youtube,.tl-social-icons .fa-youtube:hover,.tl-socialicons .tl-youtube:hover .tl-sicon{background-color:#C52F30}
.top-social ul li{margin:0;padding:0}
div#socialicons-top{float:right}
.top-social .list-unstyled{margin:0}
.tl-socialicons{text-align:center;overflow:auto;font-size:22px;margin-top:-5px}
.tl-socialicons .tl-socialInner{position:relative;overflow:hidden}
.tl-socialicons .tl-social{float:right;width:25%}
.tl-socialicons .tl-sinn:hover .tl-sicon{color:#fff}
.tl-socialicons .tl-sicon{display:block;padding:10px 0}
.tl-socialicons .tl-facebook .tl-sicon{color:#3B5998}
.tl-socialicons .tl-googleplus .tl-sicon{color:#DD4B39}
.tl-socialicons .tl-twitter .tl-sicon{color:#2AA9E0}
.tl-socialicons .tl-instagram .tl-sicon{color:#685243}
.tl-socialicons .tl-pinterest .tl-sicon{color:#CC2028}
.tl-socialicons .tl-youtube .tl-sicon{color:#DE1829}
.tl-socialicons .tl-vine .tl-sicon{color:#35B57C}
.tl-socialicons .tl-soundcloud .tl-sicon{color:#FF4100}
.tl-socialicons .tl-vk .tl-sicon{color:#45668e}
.tl-socialicons .tl-foursquare .tl-sicon{color:#f94877}
.tl-socialicons .tl-github .tl-sicon{color:#333333}
.tl-socialicons .tl-dribbble .tl-sicon{color:#ea4c89}
.tl-socialicons .tl-scount{font-family:Electrolize,ge_dinar_tworegular;display:block;color:$(body.text.c);padding:5px 0;position:relative;margin-bottom:8px;font-size:13px}
.tl-social:hover .tl-scount{background:$(keycolor);color:#FFF}
.tl-socialicons .tl-googleplus .tl-sicon{color:#DD4B39}
.tl-socialicons .tl-sicon{display:block;padding:10px 0}
.tl-social:hover .tl-scount{background:#7ac143;color:#FFF}
.tl-socialicons .tl-scount{font-family:Electrolize,ge_dinar_tworegular;display:block;color:#222222;padding:5px 0;position:relative;margin-bottom:8px;font-size:13px}
.tl-socialicons .tl-sinn:hover .tl-sicon{color:#fff}
.tl-colored-social .fa-google-plus,.tl-social-icons .fa-google-plus:hover,.tl-socialicons .tl-googleplus:hover .tl-sicon{background-color:#CF3D2E}
.tl-socialicons .tl-googleplus .tl-sicon{color:#DD4B39}
.tl-socialicons .tl-sicon{display:block;padding:10px 0}- قم بعمل حفظ للقالب والان توج الي التخطيط
- في السيد بار HTML/JavaScript ثم قم باضافة اداة
- ثم قم بوضع هذا الكود داخلها
- والان قم بتغير روابط مواقع التواصل الاجتماعي بما تريد وعدد المتابعين ايضأ
- قم بعمل حفظ للاضافة والان مبروك عليك
<div class="tl-socialicons">
<div class="tl-socialInner">
<!--Facebook-->
<div class="tl-social">
<div class="tl-facebook tl-sinn">
<a href='#' target='_blank' title="Facebook">
<span class="tl-sicon"><i class="fa fa-facebook"></i></span>
<span class="tl-scount">3.1K</span>
</a>
</div>
</div>
<!--Google Plus-->
<div class="tl-social">
<div class="tl-googleplus tl-sinn">
<a href='#' target='_blank' title="Google Plus">
<span class="tl-sicon"><i class="fa fa-google-plus"></i></span>
<span class="tl-scount">2K</span>
</a>
</div>
</div>
<!--Twitter-->
<div class="tl-social">
<div class="tl-twitter tl-sinn">
<a href='#' target='_blank' title="Twitter">
<span class="tl-sicon"><i class="fa fa-twitter"></i></span>
<span class="tl-scount">1.4K</span>
</a>
</div>
</div>
<!--Instagram-->
<div class="tl-social">
<div class="tl-instagram tl-sinn">
<a href='#' target='_blank' title="Instagram">
<span class="tl-sicon"><i class="fa fa-instagram"></i></span>
<span class="tl-scount">2K</span>
</a>
</div>
</div>
<!--Pinterest-->
<div class="tl-social">
<div class="tl-pinterest tl-sinn">
<a href='#' target='_blank' title="Pinterest">
<span class="tl-sicon"><i class="fa fa-pinterest"></i></span>
<span class="tl-scount">4.5K</span>
</a>
</div>
</div>
<!--Youtube-->
<div class="tl-social">
<div class="tl-youtube tl-sinn">
<a href='#' target='_blank' title="YouTube">
<span class="tl-sicon"><i class="fa fa-youtube"></i></span>
<span class="tl-scount">2.8K</span>
</a>
</div>
</div>
<!--Vine-->
<div class="tl-social">
<div class="tl-vine tl-sinn">
<a href='#' target='_blank' title="Vine">
<span class="tl-sicon"><i class="fa fa-vine"></i></span>
<span class="tl-scount">3.3K</span>
</a>
</div>
</div>
<!--SoundCloud-->
<div class="tl-social">
<div class="tl-soundcloud tl-sinn">
<a href='#' target='_blank' title="SoundCloud">
<span class="tl-sicon"><i class="fa fa-soundcloud"></i></span>
<span class="tl-scount">3.9K</span>
</a>
</div>
</div>
<!--VK-->
<div class="tl-social">
<div class="tl-vk tl-sinn">
<a href='#' target='_blank' title="VK">
<span class="tl-sicon"><i class="fa fa-vk"></i></span>
<span class="tl-scount">3.9K</span>
</a>
</div>
</div>
<!---->
<div class="tl-social">
<div class="tl-foursquare tl-sinn">
<a href='#' target='_blank' title="Foursquare">
<span class="tl-sicon"><i class="fa fa-foursquare"></i></span>
<span class="tl-scount">3.9K</span>
</a>
</div>
</div>
<!--GitHub-->
<div class="tl-social">
<div class="tl-github tl-sinn">
<a href='#' target='_blank' title="GitHub">
<span class="tl-sicon"><i class="fa fa-github"></i></span>
<span class="tl-scount">3.9K</span>
</a>
</div>
</div>
<!--Dribbble-->
<div class="tl-social">
<div class="tl-dribbble tl-sinn">
<a href='#' target='_blank' title="Dribbble">
<span class="tl-sicon"><i class="fa fa-dribbble"></i></span>
<span class="tl-scount">3.9K</span>
</a>
</div>
</div>
</div>
</div>
اذا واجهتك اي مشكلة في التركيب او اي شي فيمكنك كتابته في تعليق وسيتم الرد عليك في اقرب وقت
تجربة تعليق
ردحذف