بسم الله الرحمن الرحيم اللهم صل علي نبينا محمد في الاولين وصل عليه في الاخرين وصل عليه في كل وقت وحين وصل عليه في الملا الاعلي الي يوم الدين , متابعين مدونة كمبيوتر كوم اليوم لقد اتيت لكم باضافة تابعنا عبر الشبكات الاجتماعية بشكل جميل وجذاب مثل مدونة المحترف :)
صورة الاضافة :
<a href="http://www.youtube.com/user/geekraghib">
<div class="you-icone">
<b>99.000</b>
<span>مشترك</span>
</div>
</a>
<a href="http://www.twitter.com/mr_raghib">
<div class="twt-icone">
<b>4500</b>
<span>متابع</span>
</div>
</a>
<a href="https://www.facebook.com/TH3.professional">
<div class="face-icone">
<b>250 ألف</b>
<span>معجب</span>
</div>
</a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=raghib">
<div class="rss-icone">
<b>10.000</b>
<span>مشترك</span>
</div>
</a>
</div>
----------------------------------------------------
صورة الاضافة :
شرح تركيب الإضافة:
اولا : توجه الى لوحة تحكم مدونتك ثم القالب ثم تحرير html واضغط على متابعة و علم على خانة توسيع عناصر واجهة المستخدم ثم ابحث عن ]]></b:skin>
واضف قبلها هذا الكود :
.social-icone{ height:108px;}
.social-icone div{ margin: 8px 12px;}
.social-icone a{ text-decoration:none;}
.you-icone b, .twt-icone b,.face-icone b,.rss-icone b{ font:14px tahoma; color:#8c8b8b;}
.you-icone span,.twt-icone span,.face-icone span,.rss-icone span{font:11px tahoma; color:#a3a3a3; }
.you-icone{
width: 50px;
height: 32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbGcZ3YeJ7p2HW1fHQzV32-WuhuwDD94rpQtdTSUwKh7E27NgqRGQcGcbrZnlalmQxJlBgR42k-gZN1l4MlXdYOlCn6IfZLEdGY6J-r_jtk4A5erpKNtkV_k9mqIuXMcIeEejJJqtMqnw/s1600/youtube.png)top no-repeat;
text-align: center;
padding-top: 56px;
float:right;
}
.you-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGA7xZCikNhG0ePngB79SAdNc-qY0HGPiFPhyZ06rqklOOzZCOZVmtV1XK4_i_fOyqvJJ8u2BYoG0Ep3N2o00jaRvHZ47enz0uTR3FOdnqYOIQGYr-YREP6vd8LQiNPno2Aj1MyK89CO4/s1600/youtube2.png)top no-repeat;}
.twt-icone{
width: 50px;
height: 32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKzfn2rhn-Y4DnDVWc0fYdWnwqgKPXTGNG2by_PtghkJ737J6Wg86HQlVfm-LzPLlsvICDiWmmrdj_25caOmDhi_5oaltu-dTE1VgDVmNyJpSsm35GmB_D6-hQZyKUJJ_JbTmoIRQpYO8/s1600/twitter.png)top no-repeat;
text-align: center;
padding-top: 56px;
float:right;
}
.twt-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoMrDOHfqJlkUqHXHE59GNiku2FaL0PI8a6h9-WPZu-LhV7NirD7XsYtazI3g90fu8rNY_zzugQD4aiTZp6GxzUelRGa5WiZsaBDRU4O3I1amUxnBAi65XErRZBv2eB9GrIvZPeKNwMvQ/s1600/twitter2.png)top no-repeat;}
.face-icone{
width: 50px;
height: 32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMxUue8QhMVqUeBM3Pq9XGgsDb-7a0IrAXl1vKQg1v07NXgfNsSBbUMvaAwoPCYE7NLPuMDmJpBALb1i2S_VSeH4jgooeuE95pUaQ2iSiQkfOD_b6UERNoeOLdOZkKMHKJJ17TkxVDO5E/s1600/facebook.png)top no-repeat;
text-align: center;
padding-top: 56px;
float:right;
}
.face-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGqwAO-0a9UJq_vzh6amP4z3UUPgbm2D0BVFB-dw4POlX4YZKbuE_YDS0KQMgErZpK6DiblWddT-xGd3YYnr1DeLVNwxOwQ_vxne88iuVbGHiA7k4VzXU475DU0jT6UELSv7I4t3BoWjo/s1600/facebook2.png)top no-repeat;}
.rss-icone{
width: 50px;
height: 32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIWPOPeB-6RLqNbAMvyWNRdU7BkZh5rWLW81ZqIRoe9WqoghwTWtIZUc64QSVAt7Z3pSnryXpofc-sGXq3fHJK0DpFEf_WgYEVY6Gx7RV_EtC657DDvtmjTv17oJKRWtXUtZ560HwA_98/s1600/RSS.png)top no-repeat;
text-align: center;
padding-top: 56px;
float:right;
}
.rss-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoZ5ACVJjp8IvLTV32m0Mzdd76xP8eelO7kcvIvaEf3oZpr_xDqUF5UTqie5UkDJcIeruQgRwztEqAMLLV9vPCsKlZsSzLEaqyXOX4S-5Ppu22YiPZYEwH09S3qU8OJRKP3vYtW3N1XIE/s1600/RSS2.png)top no-repeat;}
.post-footer-line > * {
margin-left: 0;
}
ثم اضغط على حفظ :)
ثانيا : نذهب للوحة التحكم , التخطيط , ثم اضافة اداة جديدة جافا اسكربت وتضيف الكود التالي :
<div class="social-icone">
<a href="http://www.youtube.com/user/geekraghib">
<div class="you-icone">
<b>99.000</b>
<span>مشترك</span>
</div>
</a>
<a href="http://www.twitter.com/mr_raghib">
<div class="twt-icone">
<b>4500</b>
<span>متابع</span>
</div>
</a>
<a href="https://www.facebook.com/TH3.professional">
<div class="face-icone">
<b>250 ألف</b>
<span>معجب</span>
</div>
</a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=raghib">
<div class="rss-icone">
<b>10.000</b>
<span>مشترك</span>
</div>
</a>
</div>
----------------------------------------------------
تعليقات
إرسال تعليق