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

معاينة الصفحة

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

1. أولا ستقوم بالدخول الى مدونتك على البلوجر
2. ثم الصفحات
3. وتقوم بالتغيير من تأليف الى Html
4. ثم تضع الاكواد التالية

<style>
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
@import url(http://fonts.googleapis.com/css?family=Lato:300italic,300,400italic);
.SocialMediaColors {
  text-align:center;
  color:white;
  font-size:24px;
}
.SocialMediaColors span {
  font-size:18px;
  font-weight:300;
  font-family: 'lato', Tahoma;
}
.item .index-body span, .item .index-body div {
    color: #ffffff;
    font-family: FontAwesome;
}
.facebook-color {
  width:100%;
  background-color:#3b5998;
  padding:0.5em 0;
  line-height:1.2em;
}
.twitter-color {
  width:100%;
  background-color:#00aced;
  padding:0.5em 0;
  line-height:1.2em;
}
.GooglePlus-color {
  width:100%;
  background-color:#dd4b39;
  padding:0.5em 0;
  line-height:1.2em;
}
.pinterest-color {
  width:100%;
  background-color:#cb2027;
  padding:0.5em 0;
  line-height:1.2em;
}
.linkedin-color {
  width:100%;
  background-color:#007bb6;
  padding:0.5em 0;
  line-height:1.2em;
}
.youtube-color {
  width:100%;
  background-color:#bb0000;
  padding:0.5em 0;
  line-height:1.2em;
}
.vimeo-color {
  width:100%;
  background-color:#aad450;
  padding:0.5em 0;
  line-height:1.2em;
}
.tumblr-color {
  width:100%;
  background-color:#32506d;
  padding:0.5em 0;
  line-height:1.2em;
}
.instagram-color {
  width:100%;
  background-color:#517fa4;
  padding:0.5em 0;
  line-height:1.2em;
}
.flickr-color {
  width:100%;
  background-color:#ff0084;
  padding:0.5em 0;
  line-height:1.2em;
}
.dribbble-color {
  width:100%;
  background-color:#ea4c89;
  padding:0.5em 0;
  line-height:1.2em;
}
.quora-color {
  width:100%;
  background-color:#a82400;
  padding:0.5em 0;
  line-height:1.2em;
}
.foursquare-color {
  width:100%;
  background-color:#0072b1;
  padding:0.5em 0;
  line-height:1.2em;
}
.vk-color {
  width:100%;
  background-color:#45668e;
  padding:0.5em 0;
  line-height:1.2em;
}
.wordpress-color {
  width:100%;
  background-color:#21759b;
  padding:0.5em 0;
  line-height:1.2em;
}
.stumbleupon-color {
  width:100%;
  background-color:#EB4823;
  padding:0.5em 0;
  line-height:1.2em;
}
.yahoo-color {
  width:100%;
  background-color:#7B0099;
  padding:0.5em 0;
  line-height:1.2em;
}
.blogger-color {
  width:100%;
  background-color:#fb8f3d;
  padding:0.5em 0;
  line-height:1.2em;
}
.soundcloud-color {
  width:100%;
  background-color:#ff3a00;
  padding:0.5em 0;
  line-height:1.2em;
}
.lastfm-color {
  width:100%;
  background-color:#d21309;
  padding:0.5em 0;
  line-height:1.2em;
}
.stackoverflow-color {
  width:100%;
  background-color:#f58233;
  padding:0.5em 0;
  line-height:1.2em;
}
</style><br /><div class="SocialMediaColors"><div class="facebook-color fa fa-facebook"><br />
Facebook<br />
Hex: #3b5998</div><div class="twitter-color fa fa-twitter"><br />
Twitter<br />
Hex: #00aced</div><div class="GooglePlus-color fa fa-google-plus"><br />
Google +<br />
Hex: #dd4b39</div><div class="pinterest-color fa fa-pinterest"><br />
Pinterest<br />
Hex: #cb2027</div><div class="linkedin-color fa fa-linkedin"><br />
Linkedin<br />
Hex: #007bb6</div><div class="youtube-color fa fa-youtube"><br />
Youtube<br />
Hex: #bb0000</div><div class="vimeo-color fa fa-vimeo-square"><br />
Vimeo<br />
Hex: #aad450</div><div class="tumblr-color fa fa-tumblr"><br />
Tumblr<br />
Hex: #32506d</div><div class="instagram-color fa fa-instagram"><br />
Instagram<br />
Hex: #517fa4</div><div class="flickr-color fa fa-flickr"><br />
Flickr<br />
Hex: #ff0084</div><div class="dribbble-color fa fa-dribbble"><br />
Dribbble<br />
Hex: #ea4c89</div><div class="quora-color fa fa-quora"><br />
Quora<br />
Hex: #a82400</div><div class="foursquare-color fa fa-foursquare"><br />
Foursquare<br />
Hex: #0072b1</div><div class="vk-color fa fa-vk"><br />
VK<br />
Hex: #45668e</div><div class="wordpress-color fa fa-wordpress"><br />
Wordpress<br />
Hex: #21759b</div><div class="stumbleupon-color fa fa-stumbleupon"><br />
StumbleUpon<br />
Hex: #EB4823</div><div class="yahoo-color fa fa-yahoo"><br />
Yahoo<br />
Hex: #7B0099</div><div class="blogger-color fa fa-blogger"><br />
Blogger<br />
Hex: #fb8f3d</div><div class="soundcloud-color fa fa-soundcloud"><br />
SoundCloud<br />
Hex: #ff3a00</div><div class="lastfm-color fa fa-lastfm"><br />
Last.fm<br />
Hex: #d21309</div><div class="stackoverflow-color fa fa-stack-overflow"><br />
Stack Overflow<br />
Hex: #f58233</div></div>