في الدرس السابق شرحنا طريقة اضافة ايقونة ملونة للشبكات الاجتماعية على مدونة بلوجر
وفي هذا الدرس سنشرح طريقة اضافة ايقونة للشبكات الاجتماعية على المدونة
مع هذه الايقونة يمكنك ربط المدونة الخاصة بك مع شبكات التواصل الاجتماعي
اضافة الى قناة YouTube الخاصة بك وما يميز هذه الاضافة وجود عداد للمشتركين
تحت كل شبكات التواصل الاجتماعي كما هو موضح بالصورة بالاعلى .
طريقة الاضافة اذهب الى
1- لوحة التحكم الرئيسية واضغط على القائمة المنسدلة
2- اضغط على التخطيط
3- اضغط اضافة اداة
4- نختار HTML/JavaScript
ثم نضع الكود الكود التالي
<style>
.btrix_widget{
margin-bottom:20px;
overflow:hidden;
clear: both;
border: 1px solid black;
width: 300px;
}
.btrix_widget li{
line-height:15px;
float:left;
width:75px;
height:87px;
padding:7px 0 10px;
-moz-transition:.4s linear; -webkit-transition:.4s ease-out; transition:.4s linear;
list-style:none;
}
.btrix_widget li a{display:block;text-align:center;}
.btrix_widget li a strong{ background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJHPUOLwiaUSO33-LYD9emZPFNNiVjR9B0KfwGKVj_AxRNLoyYPMqAQySCQroz_j41P140PHi23zvyjFo_Qpek_zjmGb9A75rbRMsIbf_90yz5C4viukhrDqnzoIRXcO24fY5FYtMjMPVL/s1600/bt-icons.png) no-repeat;display:block; opacity:0.7; height:51px; margin-bottom:5px; -webkit-transition: opacity ease-in-out 0.4s; -moz-transition: opacity ease-in-out 0.4s; -o-transition: opacity ease-in-out 0.4s; transition: opacity ease-in-out 0.4s;}
.btrix_widget li a:hover strong{opacity:1;}
.btrix_widget li:hover a{text-decoration: none;}
.btrix_widget li.rss-subscribers a strong{ background-position:center -1084px ;}
.btrix_widget li.rss-subscribers a:hover strong{ background-position:center -1139px ;}
.btrix_widget li.rss-subscribers span{display:block;font-size:21px;}
.btrix_widget li.facebook-fans a strong { background-position:center -1192px ;}
.btrix_widget li.facebook-fans a:hover strong { background-position:center -1246px ;}
.btrix_widget li.twitter-followers a strong{ background-position:center -868px;}
.btrix_widget li.twitter-followers a:hover strong{ background-position:center -922px;}
.btrix_widget li.youtube-subs a strong{ background-position:center -976px;}
.btrix_widget li.youtube-subs a:hover strong{ background-position:center -1030px;}
.btrix_widget li span{display:block;font-size:21px;}
.btrix_widget li a small{color:#777;}
</style>
<br />
<br />
<div class="widget btrix_widget">
<ul style="margin-left: -40px;">
<center><h1>تواصل معنا</h1></center>
<li class="rss-subscribers">
<a href="http://feeds.feedburner.com/الاسم الخاص بك">
<strong></strong>
<span>548</span>
<small> تغذيةRSS </small>
</a>
</li>
<li class="twitter-followers">
<a href="http://www.twitter.com/الاسم الخاص بك">
<strong></strong>
<span>5,245</span>
<small>المتابعون</small>
</a>
</li>
<li class="facebook-fans">
<a href="http://facebook.com/الاسم الخاص بك">
<strong></strong>
<span>2,298</span>
<small>المعجبون</small>
</a>
</li>
<li class="youtube-subs">
<a href="http://www.youtube.com/الاسم الخاص بك">
<strong></strong>
<span>1,202</span>
<small>المشتركين</small>
</a>
</li>
</ul>
</div>
استبدل كلمة ( الاسم الخاص بك ) الى معرفك الخاص
تستطيع تغيير عدد المشتركين يدويا
