22 يوليو 2016


مرحبا بكم اصدقائي متابعين مدونة محترفي الحاسوب في إضافة جديدة وهي ازرار او ايقونات المواقع الاجتماعية v2 بعد ان قمنا بوضع "أزرار المواقع الإجتماعية بشكلها الجديد v1" ووضعنا"أزرار المواقع الإجتماعية بشكلها الجديد v2"وكانت مكونة من مجموعة من المواقع وهي فيسبوك وتويتر وجوجل+ ويوتيوب وخمسات وrss وهي نفسها الموجودة في هذه الإضافة ولكن بشكل أخر ومواقع جديدة وتأثيرات أخرى اكثر إحترافية ☺

شرح و كيفية تركيب + معاينة الاضافة من هنا  :
  1. انتقل إلى لوح تحكم مدونتك،
  2. إختر "تخطيط" ثم إضافة أداة ,ثم اختر HTML/Javascript
  3. والآن الصق داخل المستطيل الكود التالي :

<div class="content"><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.7K</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">2.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">9.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">3.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">1.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">2.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">4.9K</span></a></div></div></div></div></div><style>/* Social Media */.list-unstyled{padding-Right:0;list-style:none;margin:2px}.list-inline li{display:inline-block;padding-right: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{-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}.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:0 -8px}.tl-socialicons .tl-socialInner{position:relative;overflow:hidden;padding-Right:8px}.tl-socialicons .tl-social{float:right;width:25%}.tl-socialicons .tl-sinn{padding-right:8px}.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-sicon{-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease}.tl-socialicons .tl-scount{display:block;color:#eeeeee;background:#3d3d3d;padding:5px 0;position:relative;margin-bottom:8px;font-size:14px;font-weight:600}.tl-socialicons .tl-scount:after{bottom:100%;Right:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(238,238,238,0);border-bottom-color:#2e2e2e;border-width:4px;margin-Right:-4px}</style>
  1. داخل القالب تحرير html 
  2. ابحت عن هدا الوسم   <head/> تم ضع الكود التالي فوقه:
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>