اضافة الازرار الاجتماعية بتقنية cssفي قمة الجمال

اضافة الازرار الاجتماعية بتقنية css في قمة الجمال

السلام عليكم ورحمة الله وبركاتة 

اضافة ازرار التواصل الاجتماعي بشكل جميل جدا ورهيب الاضافة بتقنيةcssوالاضافة تضم العديد من المواقع الاجتماعية ،الفيس بوك، وتويتر ، ويوتيوبوالخلاصة ،وجوجل بلس ، و بنترست،  وlinkedin والاضاتة تجعل مدونتك اكثر احترافية عن غيرها ، وتعطي مظهر جميل وجذاب الي المدونة الخاصة بك

صورة من الاضافة 

 

ولتركيب الاضافة علي مدونتك فقد اذهب الي لوحة تحكم مدونتك ثم اختار تخطيط كما واضح في الصور 

 

ثم اختار اضافة اداة كما موضح

بعد ذلك اختار html/javascriptكما واضح في الصورة

الصق الكود في المربع

<style>#NBT-SNS {width: 260px;margin: 5px 20px;padding:5px;}#NBT-SNS li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#NBT-SNS .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJuZYvrJEIrUso48AUWdxAloTOYIHM3Zc9ScoVd2nW-FajTdNFlDir9U9mqpj2WdRtFLviEuYXUbli4SIuVnHegpBj0MlDQxIsOMAYEwdRViYcufQrmI0WxJ9s5lfwxefQ9R4V1sUhI5A/s1600/NBT-Social_Button.png') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #141414;float:none;height: 48px;line-height: 48px;margin: 5px 0;position: relative;text-align: left;text-indent: 90px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;}#NBT-SNS span:hover {visibility: hidden;}#NBT-SNS span {display: block;top: 15px;position: absolute;left: 90px;}#NBT-SNS .icon {color: #fafafa;overflow: hidden;}#NBT-SNS .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -382px;}#NBT-SNS .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -430px;}#NBT-SNS .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -478px;}#NBT-SNS .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}#NBT-SNS .linked {background-color: rgba(0, 87, 114, .42);background-position: 0 -574px;}#NBT-SNS .ytube {background-color: rgba(170, 0, 0, .42);background-position: 0 -670px;}#NBT-SNS .rss {background-color: rgba(255, 109, 0, .42);background-position: 0 -718px;}#NBT-SNS li:hover .icon {width: 250px;}#NBT-SNS li:hover .icon {background-color: #d91e76;}#NBT-SNS li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}#NBT-SNS li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}#NBT-SNS li:hover .google {background-color: #A70000;background-position: 0 -94px;}#NBT-SNS li:hover .pint {background-color: #C00;background-position: 0 -142px;}#NBT-SNS li:hover .linked {background-color: #005772;background-position: 0 -190px;}#NBT-SNS li:hover .ytube {background-color: #A00;background-position: 0 -286px;}#NBT-SNS li:hover .rss {background-color: #EC5601;background-position: 0 -334px;}#NBT-SNS .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}</style><ul id="NBT-SNS">
<li><a href="http://www.facebook.com/رابط صفحتك علي الفيس " class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span> </li>
<li><a href="https://twitter.com/رابط تويتر" class="icon twit">Follow us on Twitter</a><span>Follow us on Twitter</span> </li>
<li><a href="https://plus.google.com/ رابط جوجل بلس" class="icon google">Follow us on Google+</a><span>Follow us on Google+</span> </li>
<li><a href="http://www.pinterest.com/رابط حسابك في بنترست" class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span> </li>
<li><a href="http://in.linkedin.com/ linkedin رابط حسابك في" class="icon linked">Follow us on LinkedIn</a><span>Follow us on LinkedIn</span> </li>
<li><a href="http://www.youtube.com/user/رابط اليوتيوب" class="icon ytube">Follow us on Youtube</a><span>Follow us on Youtube</span> </li>
<li><a href="http://feeds.feedburner.com/رابط الخلاصة " class="icon rss">Subscribe via RSS</a><span>Subscribe via RSS</span></li>
</ul>
<div style='clear: both;'>
</div>

 

ملاحظة يجب عليك تغير الكلمات الموجودة بروابط حسابك

 

 

1. رابط صفحتك علي الفيس 

2.رابط تويتر

3. رابط جوجل بلس

4. رابط حسابك في بنترست

5. رابط حسابك فيlinkedin

6. رابط اليوتيوب

7.رابط الخلاصة 
قم بتغير جميع الكلمات الموجودة في الكود بروابط حساباتك الخاصة 

هاده التدوينة منقولة