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

مرحبا بكل متابعي وزوار مدونة  PH3ahmed



لابد من كل صاحب موقع او مدونة يجب عليه إضافة أزرار مواقع التواصل الاجتماعي مثل فيس بوك تويتر جوجل بلس .. إلخ
وذلك لالتعرف عليه أكثر ومتابعة أخر مواضيعه إضافة لا بد منها وأنا اليوم قد حضرت لكم أجمل الأزرار بتقنية CSS لتعطي لمسة ساحرة تلفت النظر

كيفيية الإضافة

للإضافة إلى مدونات بلوجر إذهب الى لوحة التحكم في مدونتك ثم تخطيط ثم إضافة أداة أختر من بين الأدوات أداة HTML/JavaScript 
ثم نقوم بإضافة الأزرار التي تعجبك في مكان مناسب في مدونتك

• الشكل 1

الكود:

<style>#bdrs-social {margin:0px auto;width: 300px;}#bdrs-social .bdbox-social a:link,.bdbox-social a:visited{float:left;width:32px;height:32px;margin:0 5px;padding:0;text-indent:-9999em;box-shadow:3px 3px 3px rgba(0,0,0,0.3);background-color:transparent;background-size:100% auto;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjabJyMqf3Wz9ryADMigUP9JWcO0JI8C3ewoN2mzPGjml0oAqWqi5NtrPgimCvqANM2OR6umxe3RCZ3Hin8VyBF95d4UgdjY4k8f2JmapMC-UqmrYPEB6LNr2PeLvStyS6FJuK1za1po_w/s1600/BRS01-sosial.png');background-repeat:no-repeat;}#bdrs-social .bdbox-social a:hover,.bdbox-social a:active {box-shadow:3px 3px 7px #333 INSET;}#bdrs-social .bdbox-social a:first-child{margin-left:3px}#bdrs-social .bdbox-social a:last-child{margin-right:0}#bdrs-social .bdrs-rss{background-position:0 0}#bdrs-social .bdrs-goo{background-position:0 -32px}#bdrs-social .bdrs-fac{background-position:0 -64px}#bdrs-social .bdrs-lin{background-position:0 -96px}#bdrs-social .bdrs-tum{background-position:0 -128px}#bdrs-social .bdrs-twi{background-position:0 -160px}#bdrs-social .bdrs-wor{background-position:0 -192px}</style><!-- www.madad2.blogspot.com --><div id="bdrs-social"><div class="bdbox-social" >
<a class="bdrs-goo" href="رابط جوجل بلس" rel="publisher" target="_blank" title="جوجل بلس+">جوجل بلس+</a>
<a class="bdrs-fac" href="رابط صفحة فيس بوك" rel="nofollow" target="_blank" title="فيس بوك">فيس بوك</a>
<a class="bdrs-twi" href="رابط تويتر" rel="nofollow" target="_blank" title="تويتر">تويتر</a>
<a class="bdrs-lin" href="رابط ينكدين" rel="nofollow" target="_blank" title="LinkedIn">ينكدين</a>
<a class="bdrs-tum" href="رابط مدونة تومبر" rel="nofollow" target="_blank" title="Tumblr">نعرفكم</a>
<a class="bdrs-rss" href="رابط التغذية لمدونتك" rel="external" target="_self" title="RSS Feed">RSS Feed</a>
</div></div>

• الشكل 2

الكود:

<style>
#socialbdrssliding a{font-family: 'Open Sans', Helvetica, Arial, sans-serif;width: 40px;transition:width 0.4s;-webkit-transition:width 0.4s;-moz-transition:width 0.4s;overflow: hidden;}#socialbdrssliding a:hover{width: 100px;overflow: hidden;}#socialbdrssliding {float: right;position: relative;height: 40px;}#socialbdrssliding ul { margin: 0; }#socialbdrssliding li,#socialbdrssliding li a,#socialbdrssliding li .bdrs-thumb,#socialbdrssliding li .bdrs-title {display: block;position: relative;width: 40px;height: 40px;}#socialbdrssliding li,#socialbdrssliding li a,#socialbdrssliding li .bdrs-title {float: left;width: auto;overflow: hidden;}#socialbdrssliding li a {width: 40px;line-height: 40px;color: #E9E9E9;font-size: 11px;font-weight: bold;text-shadow: 1px 2px 2px #000;text-decoration: none;}#socialbdrssliding li .bdrs-thumb { float: left; }#socialbdrssliding li.bdrs-facebook a { background-color: #3B5998; }#socialbdrssliding li.bdrs-facebook .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT4e7ofx5x0o1GVpq5GIyg0ME15SceztsW67TKRzMRud9h2wZIRUzYhK0uS_rAUY_ELG-ZxgC9Ysd8MhJ9cDO8O32v5EQs8hiX07pgRNaN__v0y43gL6rfoMhf0Ja_tGtdt1Rk-HnITuA/s1600/FACEBOOK.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-gplus a { background-color: #d94a39; }#socialbdrssliding li.bdrs-gplus .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM9EuhLxiwxpJC_65YSWEp4v9wLsjogIdklWLdxEDgiqH8hzFHVkHHfRicFZTM1YUdlEJIO60fYls2WmI9WDt2mCyEecLdGk1r_3LC-pdzCkWb2b6VKcsAQ2bATIo5ROmyPeiXrgD2KEI/s1600/googleplus.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-twitter a { background-color: #3CF; }#socialbdrssliding li.bdrs-twitter .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfoYN5ADOjUn06VMceL8TUuSoizNBhqvPDgoDVhLHNmJxYkLoFOSbhXRz64E9M0tBn5KHOZtRlh7PdUkNpGGuNHmlmcg92CNdaMjXgw2qqJcgFyjFLhGow4SrfO9PlhvvXCbDUO3vNjlg/s1600/TWITTER.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-rss a { background-color: #F88F16; }#socialbdrssliding li.bdrs-rss .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwyR3unpEQrIY2hWY_1bUNANI1g3jZdbesiGsrh0o-XxhCDes4K9v96ly-MIOc5XB0Ho4GsEi2IZ59zI4GfoCjSzz1GJfRH0jrW3cK_hsU6rPllYYPJfGtNwo4jZgHFNrY8rcnmNB0h24/s1600/rssbd.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-youtube a { background-color: #BD3518; }#socialbdrssliding li.bdrs-youtube .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0hgp9qz9lYT2iOKKTP4hX8JFR-FQbFA88Ym0wfP7-noksQn-VEOnZ14vi-SzMvW1NeIJ-DV_ipamWEnfEpDEQQCT-X7lDd1B-VgObtuWL9sgB_eFlLpU6p6swPgcQh8jCjDeRWFxfN7I/s1600/youtube.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-facebook a:hover, #socialbdrssliding li.bdrs-youtube a:hover, #socialbdrssliding li.bdrs-rss a:hover, #socialbdrssliding li.bdrs-twitter a:hover, #socialbdrssliding li.bdrs-gplus a:hover {background-color:#666;}</style><!-- www.madad2.blogspot.com -->
<div id="socialbdrssliding"><ul><li class="bdrs-gplus"><a href="رابط جوجل بلس" target="_blank" rel="nofollow" title="جوجل بلس"><div class="bdrs-thumb"></div><div class="bdrs-title">جوجل بلس</div></a></li>
<li class="bdrs-facebook"><a href="رابط صفحة فيس بوك" target="_blank" rel="nofollow" title="فيس بوك"><div class="bdrs-thumb"></div><div class="bdrs-title">فيس بوك</div></a></li>
<li class="bdrs-twitter"><a href="رابط تويتر" target="_blank" rel="nofollow" title="تويتر"><div class="bdrs-thumb"></div><div class="bdrs-title">تويتر</div></a></li>
<li class="bdrs-rss"><a href="رابط التغذية فيدبورز" target="_blank" rel="nofollow" title="rss feed"><div class="bdrs-thumb"></div><div class="bdrs-title">RSS</div></a></li>
<li class="bdrs-youtube"><a href="رابط قناة يوتيوب" target="_blank" rel="nofollow" title="يوتيوب"><div class="bdrs-thumb"></div><div class="bdrs-title">يوتيوب</div></a></li></ul></div>

• الشكل 3

الكود:

<style>
.social-ballbdrs {padding: 5;margin-left:-30px;}.social-ballbdrs li, .social-ballbdrs li, .social-ballbdrs li {float: left;margin-right: 10px;background-color: #CCCCCC;display: inline;border-radius:50%;border:solid #999999 1px;box-shadow:0 0 5px 2px #999 inset;}.social-ballbdrs li a {-moz-transition: all 0.3s ease 0s;display: block;float: left;height: 100%;width: 40px;height: 40px;text-indent: -9999px;}.social-ballbdrs li.facebookball a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT4e7ofx5x0o1GVpq5GIyg0ME15SceztsW67TKRzMRud9h2wZIRUzYhK0uS_rAUY_ELG-ZxgC9Ysd8MhJ9cDO8O32v5EQs8hiX07pgRNaN__v0y43gL6rfoMhf0Ja_tGtdt1Rk-HnITuA/s1600/FACEBOOK.png') no-repeat 0 0;}.social-ballbdrs li.facebookball a:hover {background-color: #3b5998;}.social-ballbdrs li.googleplusball a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM9EuhLxiwxpJC_65YSWEp4v9wLsjogIdklWLdxEDgiqH8hzFHVkHHfRicFZTM1YUdlEJIO60fYls2WmI9WDt2mCyEecLdGk1r_3LC-pdzCkWb2b6VKcsAQ2bATIo5ROmyPeiXrgD2KEI/s1600/googleplus.png') no-repeat 0 0;}.social-ballbdrs li.googleplusball a:hover {background-color: #d94a39;}.social-ballbdrs li.rssball a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwyR3unpEQrIY2hWY_1bUNANI1g3jZdbesiGsrh0o-XxhCDes4K9v96ly-MIOc5XB0Ho4GsEi2IZ59zI4GfoCjSzz1GJfRH0jrW3cK_hsU6rPllYYPJfGtNwo4jZgHFNrY8rcnmNB0h24/s1600/rssbd.png') no-repeat 0 0;}.social-ballbdrs li.rssball a:hover {background-color: #fe9900;}.social-ballbdrs li.twitterball a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfoYN5ADOjUn06VMceL8TUuSoizNBhqvPDgoDVhLHNmJxYkLoFOSbhXRz64E9M0tBn5KHOZtRlh7PdUkNpGGuNHmlmcg92CNdaMjXgw2qqJcgFyjFLhGow4SrfO9PlhvvXCbDUO3vNjlg/s1600/TWITTER.png') no-repeat 0 0;}.social-ballbdrs li.twitterball a:hover {background-color: #48c4d2;}.social-ballbdrs li.youtubeball a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0hgp9qz9lYT2iOKKTP4hX8JFR-FQbFA88Ym0wfP7-noksQn-VEOnZ14vi-SzMvW1NeIJ-DV_ipamWEnfEpDEQQCT-X7lDd1B-VgObtuWL9sgB_eFlLpU6p6swPgcQh8jCjDeRWFxfN7I/s1600/youtube.png') no-repeat 0 0;}.social-ballbdrs li.youtubeball a:hover {background-color: #f45750;}.social-ballbdrs li a:hover {background-position: 0 -40px;box-shadow:3px 3px 10px 2px #333 INSET;border-radius:50%;}.social-ballbdrs li a:visited,.social-ballbdrs li a:active{background-position: 0 -40px;box-shadow:3px 3px 10px 2px #333 INSET;border-radius:50%;}</style><!-- www.madad2.blogspot.com --><div class="social-ballbdrs">
<ul><li class="twitterball"><a target="_blank" href="رابط تويتر" rel="nofollow" title="تويتر">تويتر</a></li>
<li class="googleplusball"><a target="_blank" href="رابط جوجل بلس" rel="nofollow" title="جوجل بلس">جوجل بلس</a></li>
<li class="facebookball"><a target="_blank" href="رابط فيس بوك" rel="nofollow" title="فيس بوك">فيس بوك</a></li>
<li class="rssball"><a target="_blank" href="رابط الخاص بالتغذية" rel="nofollow" title="rss">rss</a></li>
<li class="youtubeball"><a target="_blank" href="رابط قناة يوتيوب" rel="nofollow" title="يوتيوب">يوتيوب</a></li></ul>
</div>

لا تنسى بتغيير الكلمات المشار إليها باللون الأحمر بروابط صفحاتك على مواقع التواصل 

واختر الحفظ ومبروك عليك

.

هل أعجبك الموضوع ؟

Share

Tweet