إضافة صفحة ألوان أيقونات التواصل الاجتماعي

آخر المواضيع

breaking/مقالات/9
بلوجر

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية

السبت، 25 فبراير، 2017

9:36:00 ص

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

  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>
ثم تضغط على نشر
ومبروك عليك اضافة الصفحة
أن واجهتك اي مشكلة في التركيب فباب التعليقات مفتوح للجميع
ولما لا تضعون آراءكم لموضوعنا لهذا اليوم لتحفزنا على تقديم كل ماهو حصري في هذا المجال
#تحياتي لكم من صميم قلبي وشكرا لكل من يساندنا ويتابعنا باستمرار 😍
  1. رائع اسماعيل استمر
    بقولك عايز اكلمك علي الفيس كلمني علي صفحتي يا اسماعيل ممكن في موضوع ضروري عيزك فيه
    https://www.facebook.com/WebFour4

    ردحذف
  2. أزال أحد مشرفي المدونة هذا التعليق.

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

      حذف

مقالات