اضافة اداة شبكات التواصل الاجتماعي لمدونات بلوجر بثلاث الوان مختلفة

اضافة التواصل بالشبكات التواصل الاجتماعي لمدونات بلوجر بثلاث الوان مختلفة

ادخل على التخطيط وبعدا اضافة اداة HTML/JavaScript

للتعديل على حجم الاداة تغيير width: 400px بما يناسبك

الاخضر

<style type="text/css">.btrix_socialwidget { width: 400px; } .btrix_socialwidget ul { border: 1px solid #CCCCCC; margin: 0; padding: 0; } .btrix_socialwidget ul li { list-style:none; padding: 0; text-transform: none; border-bottom: 1px solid #FFFFFF; border-top: 1px solid FA3131; } .btrix_socialwidget ul li:first-child { border-top: 0 none; } .btrix_socialwidget ul li:last-child { border-bottom: 0 none; } .btrix_socialwidget ul li a { background-color: #FFFFFF!important; color: #000000; display:block; } .btrix_socialwidget ul li a:hover { background-color: #58C013!important;color: #FFFFFF; } .btrix_socialwidget ul li .twitter { background: url("https://googledrive.com/host/0B2oZ0PltX1N8RWYyWmNpSmM3WVk/tw.png") no-repeat scroll 10px center #4CACEE; padding: 17.5px 60px;} .btrix_socialwidget ul li .facebook { background: url("https://googledrive.com/host/0B2oZ0PltX1N8RWYyWmNpSmM3WVk/fb.png") no-repeat scroll 10px center #3B5998; padding: 17.5px 60px; } .btrix_socialwidget ul li .google { background: url("https://googledrive.com/host/0B2oZ0PltX1N8RWYyWmNpSmM3WVk/gp.png") no-repeat scroll 10px center #D44937; padding: 17.5px 60px; } .btrix_socialwidget ul li .youtube { background: url("https://googledrive.com/host/0B2oZ0PltX1N8RWYyWmNpSmM3WVk/you.png") no-repeat scroll 10px center #C6312B; padding: 17.5px 60px; } .social-about { display: none; } </style><div class="btrix_socialwidget"><ul><li><a class="twitter" href="#">تواصل معنا على إشترك </a></li><li><a class="facebook" href="#">تواصل معنا على الفايسبوك</a></li><li><a class="google" href="#" rel="author">تواصل معنا على غوغل+ </a></li><li><a class="youtube" href="#">تواصل معنا على اليوتوب</a></li></ul></div>

الاحمر

<style type="text/css">.btrix_socialwidget { width: 400px; } .btrix_socialwidget ul { border: 1px solid #CCCCCC; margin: 0; padding: 0; } .btrix_socialwidget ul li { list-style:none; padding: 0; text-transform: none; border-bottom: 1px solid #FFFFFF; border-top: 1px solid FA3131; } .btrix_socialwidget ul li:first-child { border-top: 0 none; } .btrix_socialwidget ul li:last-child { border-bottom: 0 none; } .btrix_socialwidget ul li a { background-color: #FFFFFF!important; color: #000000; display:block; } .btrix_socialwidget ul li a:hover { background-color: #FC3B3B!important;color: #FFFFFF; } .btrix_socialwidget ul li .twitter { background: url("https://googledrive.com/host/0B2oZ0PltX1N8RWYyWmNpSmM3WVk/tw.png") no-repeat scroll 10px center #4CACEE; padding: 17.5px 60px;} .btrix_socialwidget ul li .facebook { background: url("https://googledrive.com/host/0B2oZ0PltX1N8RWYyWmNpSmM3WVk/fb.png") no-repeat scroll 10px center #3B5998; padding: 17.5px 60px; } .btrix_socialwidget ul li .google { background: url("https://googledrive.com/host/0B2oZ0PltX1N8RWYyWmNpSmM3WVk/gp.png") no-repeat scroll 10px center #D44937; padding: 17.5px 60px; } .btrix_socialwidget ul li .youtube { background: url("https://googledrive.com/host/0B2oZ0PltX1N8RWYyWmNpSmM3WVk/you.png") no-repeat scroll 10px center #C6312B; padding: 17.5px 60px; } .social-about { display: none; } </style><div class="btrix_socialwidget"><ul><li><a class="twitter" href="#">نواصل معنا على إشترك </a></li><li><a class="facebook" href="#">تواصل معنا على الفايسبوك</a></li><li><a class="google" href="#" rel="author">تواصل معنا على غوغل+ </a></li><li><a class="youtube" href="#">تواصل معنا على اليوتوب</a></li></ul></div>

الازرق

<style type="text/css">.btrix_socialwidget { width: 400px; } .btrix_socialwidget ul { border: 1px solid #CCCCCC; margin: 0; padding: 0; } .btrix_socialwidget ul li { list-style:none; padding: 0; text-transform: none; border-bottom: 1px solid #FFFFFF; border-top: 1px solid FA3131; } .btrix_socialwidget ul li:first-child { border-top: 0 none; } .btrix_socialwidget ul li:last-child { border-bottom: 0 none; } .btrix_socialwidget ul li a { background-color: #FFFFFF!important; color: #000000; display:block; } .btrix_socialwidget ul li a:hover { background-color: #4E4EFA!important;color: #FFFFFF; } .btrix_socialwidget ul li .twitter { background: url("https://googledrive.com/host/0B2oZ0PltX1N8RWYyWmNpSmM3WVk/tw.png") no-repeat scroll 10px center #4CACEE; padding: 17.5px 60px;} .btrix_socialwidget ul li .facebook { background: url("https://googledrive.com/host/0B2oZ0PltX1N8RWYyWmNpSmM3WVk/fb.png") no-repeat scroll 10px center #3B5998; padding: 17.5px 60px; } .btrix_socialwidget ul li .google { background: url("https://googledrive.com/host/0B2oZ0PltX1N8RWYyWmNpSmM3WVk/gp.png") no-repeat scroll 10px center #D44937; padding: 17.5px 60px; } .btrix_socialwidget ul li .youtube { background: url("https://googledrive.com/host/0B2oZ0PltX1N8RWYyWmNpSmM3WVk/you.png") no-repeat scroll 10px center #C6312B; padding: 17.5px 60px; } .social-about { display: none; } </style><div class="btrix_socialwidget"><ul><li><a class="twitter" href="#">تواصل معنا على إشترك </a></li><li><a class="facebook" href="#">تواصل معنا على الفايسبوك</a></li><li><a class="google" href="#" rel="author">تواصل معنا على غوغل+ </a></li><li><a class="youtube" href="#">تواصل معنا على اليوتوب</a></li></ul></div>