01-02-2018
أزرار مواقع التواصل الإجتماعي بشكل جديد
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
أزرار مواقع التواصل الإجتماعي بشكل جذاب
لابد من كل صاحب موقع او مدونة يجب عليه إضافة أزرار مواقع التواصل الاجتماعي مثل فيس بوك تويتر جوجل بلس .. إلخ
وذلك للتعرف عليه أكثر ومتابعة أخر مواضيعه إضافة لا بد منها .
أجمل الأزرار بتقنية CSS لتعطي لمسة ساحرة تلفت النظر
ثم نقوم بإضافة الأزرار التي تعجبك في مكان المناسب في موقعك
الشكل 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('http://3.bp.blogspot.com/-iqgS6_ZGsWI/VE1SXfAV_qI/AAAAAAAAcXY/AimDpPHiuSc/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" rel="nofollow" target="_blank" title="جوجل بلس+">
جوجل بلس+
</a>
<a class="bdrs-fac" href=" رابط صفحة فيس بوك" rel="nofollow" rel="nofollow" target="_blank" title="فيس بوك">
فيس بوك
</a>
<a class="bdrs-twi" href=" رابط تويتر" rel="nofollow" rel="nofollow" target="_blank" title="تويتر">
تويتر
</a>
<a class="bdrs-lin" href=" رابط ينكدين" rel="nofollow" rel="nofollow" target="_blank" title="LinkedIn">
ينكدين
</a>
<a class="bdrs-tum" href=" رابط مدونة تلنبر" rel="nofollow" rel="nofollow" target="_blank" title="Tumblr">
نعرفكم
</a>
<a class="bdrs-rss" href=" رابط التغذية لمدونتك" rel="external" rel="nofollow" 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("http://3.bp.blogspot.com/-5sEQcBjiYjQ/VE1S8fIjoMI/AAAAAAAAcXg/0kqO3wXqzIM/s1600/FACEBOOK.png")
no-repeat 0 -40px; }#socialbdrssliding li.bdrs-gplus
a { background-color: #d94a39; }#socialbdrssliding li.bdrs-gplus .bdrs-thumb { background:
url("http://2.bp.blogspot.com/-qDVgmgp3_Eo/VE1TJ_gjX1I/AAAAAAAAcXo/ZbtVqnxMiP4/s1600/googleplus.png")
no-repeat 0 -40px; }#socialbdrssliding li.bdrs-twitter a { background-color: #3CF; }
#socialbdrssliding li.bdrs-twitter .bdrs-thumb { background:
url("http://2.bp.blogspot.com/-wCHSN_3dksc/VE1TW_L8deI/AAAAAAAAcXw/hH-n_GApXmo/s1600/TWITTER.png")
no-repeat 0 -40px; }#socialbdrssliding li.bdrs-rss
a { background-color: #F88F16; }#socialbdrssliding li.bdrs-rss .bdrs-thumb { background:
url("http://1.bp.blogspot.com/-qyRlRA4baBs/VE1TqHrZLjI/AAAAAAAAcX4/gxJvtjLeZYg/s1600/rssbd.png")
no-repeat 0 -40px; }#socialbdrssliding li.bdrs-youtube
a { background-color: #BD3518; }#socialbdrssliding li.bdrs-youtube .bdrs-thumb { background:
url("http://4.bp.blogspot.com/-5dmv67RI4_E/VE1UDwXRpyI/AAAAAAAAcYA/TjjFwzLNpBk/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="#" rel="nofollow" target="_blank" rel="nofollow" title="جوجل بلس">
<div class="bdrs-thumb">
</div>
<div class="bdrs-title">
جوجل بلس
</div>
</a>
</li>
<li class="bdrs-facebook">
<a href="#" rel="nofollow" target="_blank" rel="nofollow" title="فيس بوك">
<div class="bdrs-thumb">
</div>
<div class="bdrs-title">
فيس بوك
</div>
</a>
</li>
<li class="bdrs-twitter">
<a href="#" rel="nofollow" target="_blank" rel="nofollow" title="تويتر">
<div class="bdrs-thumb">
</div>
<div class="bdrs-title">
تويتر
</div>
</a>
</li>
<li class="bdrs-rss">
<a href="#" rel="nofollow" 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="#" rel="nofollow" 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('http://3.bp.blogspot.com/-5sEQcBjiYjQ/VE1S8fIjoMI/AAAAAAAAcXg/0kqO3wXqzIM/s1600/FACEBOOK.png')
no-repeat 0 0;}.social-ballbdrs li.facebookball a:hover
{background-color: #3b5998;}.social-ballbdrs li.googleplusball a {background:
url('http://2.bp.blogspot.com/-qDVgmgp3_Eo/VE1TJ_gjX1I/AAAAAAAAcXo/ZbtVqnxMiP4/s1600/googleplus.png')
no-repeat 0 0;}.social-ballbdrs li.googleplusball
a:hover {background-color: #d94a39;}.social-ballbdrs li.rssball a {background:
url('http://1.bp.blogspot.com/-qyRlRA4baBs/VE1TqHrZLjI/AAAAAAAAcX4/gxJvtjLeZYg/s1600/rssbd.png')
no-repeat 0 0;}.social-ballbdrs li.rssball a:hover
{background-color: #fe9900;}.social-ballbdrs li.twitterball a {background:
url('http://2.bp.blogspot.com/-wCHSN_3dksc/VE1TW_L8deI/AAAAAAAAcXw/hH-n_GApXmo/s1600/TWITTER.png')
no-repeat 0 0;}.social-ballbdrs li.twitterball a:hover
{background-color: #48c4d2;}.social-ballbdrs li.youtubeball a {background:
url('http://4.bp.blogspot.com/-5dmv67RI4_E/VE1UDwXRpyI/AAAAAAAAcYA/TjjFwzLNpBk/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 rel="nofollow" target="_blank" href="#" rel="nofollow" title="تويتر">
تويتر
</a>
</li>
<li class="googleplusball">
<a rel="nofollow" target="_blank" href="#" rel="nofollow" title="جوجل بلس">
جوجل بلس
</a>
</li>
<li class="facebookball">
<a rel="nofollow" target="_blank" href="#" rel="nofollow" title="فيس بوك">
فيس بوك
</a>
</li>
<li class="rssball">
<a rel="nofollow" target="_blank" href="#" rel="nofollow" title="rss">
rss
</a>
</li>
<li class="youtubeball">
<a rel="nofollow" target="_blank" href="#" rel="nofollow" title="يوتيوب">
يوتيوب
</a>
</li>
</ul>
</div>
لا تنسى تغيير الرمز أو الكلمات التي تمت الإشارة إليها في اول كود بروابط صفحاتك على مواقع التواصل
كلمات البحث
برامج | سيارات | هاكات | استايلات | أكواد | الوان مجموعات | برمجه | منتديات عامه | العاب