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

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

ادخل على التخطيط وبعدا اضافة اداة 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>

المؤلفAmmar Alsamerالتاريخ11:23:00 ص تعليق واحد

مشاركة

التسميات#اضافات بلوجر

تعليقات

الشاعر طلال حداد19 أغسطس 2019 في 1:40 ص
https://www.facebook.com/talal.1234.haddad/
ردحذف
الردود

إضافة تعليق