بسم
الله الرحمن الرحيم اللهم صل علي نبينا محمد في الاولين وصل عليه في
الاخرين وصل عليه في كل وقت وحين وصل عليه في الملا الاعلي الي يوم الدين ,
متابعين مدونة كمبيوتر كوم اليوم لقد اتيت لكم باضافة تابعنا عبر الشبكات
الاجتماعية بشكل جميل وجذاب مثل مدونة المحترف :)
صورة الاضافة :
صورة الاضافة :
شرح تركيب الإضافة:
اولا
: توجه الى لوحة تحكم مدونتك ثم القالب ثم تحرير 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/AVvXsEgWxanm_0VN2Xt8tSJ4xBNzqb5wxM-HX62DUp6yxFZruWydYTLa9tDJJ1haKzgBOGy1lVPpXX2hnd9Jn8sLyKBKIaJtndJLRSdyo-pfJuUMcnqdB1vndF_vTkoiiBpJEve8rGwqifcEI9o/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/AVvXsEhfbmyBWsbVzjJayxIE7XAs-Q-JOjlJP_LsT4uukElPl8meJmFApVVZ4rsUomQdQSZZoT0PxxvS2W7xL768Bq2PUfJVBwV25pZ3mXbZLbq31BtcEQtoTtjUpLnWnU3Ig8OFuVsm_9ef-x4/s1600/youtube2.png)top
no-repeat;}
.twt-icone{
width: 50px;
height: 32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNKzpJqJHwVnxfYW88BUFi0m5tbGA0CvQT0dTQpitJpThAaD-_V6BJ8fGFZPl7FknyNxSeCzHMVoDan_MT3CQFKGE975zQKBfBik7n_oTGcCELErftvaJ3gxLKe4tbdR9a9h-Rqj6Pm9Q/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/AVvXsEgrJZGMbrj0dc6_MDrXjxSLaE2rGKGTHdPPv0dgtUh-9dEZt8CqZVIlSL763ZsLT_x6TqPj_lYqa2M6U2Mh7Kf4zed-71zN08mJXogU10M6Cjxo3coIvjpN4M_y8GSumcP-Fr7Z8y-r9eM/s1600/twitter2.png)top
no-repeat;}
.face-icone{
width: 50px;
height: 32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwC0TnPBlPmt_jzUGFayJP0myoNlY99OVKDQGdkUX2dXXtxWW3q6tJTBzUmxOeyu_QPdyTekALVkpLT4l0t7lcdYtWIZq-p9ZQISPpk9Ft7DSopFIK9GkBGHzgfbGIRnXwfEW8n18RGHA/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/AVvXsEjbW6V_MrevSyAYE-oTAeOCrT-Jf7F9e9FOJWgNgdivpS7Xx6-mNYDdlzTp7DYsiEjx2NqqxkRGodbIDS4ylhtoGzImewXFQ4FblWH9cJnh4mPdnUacblRlEcAZ4h_Ryf7TgDPk8McstpI/s1600/facebook2.png)top
no-repeat;}
.rss-icone{
width: 50px;
height: 32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjegZUIYi9OMbpvb7fXdEB7gSWuEuq2-PuaevNl8Kby4ocKiLCH5pQdYHyPMdGoD4YTnUpuoOBvyfG-C0cRdSoaFpOIPJpovJ1Rx0tZu6DFOZQDI0bOgh8atxUAO1VrMybgCur7SNLCgCI/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/AVvXsEjMhDCsmij8hVSG9oK8bRQH56Wz14DylySPV25otvh2_F-DpsPjfN2HU8LYuyNYspCfQmrXsp_mb5Z52a_MSijijRBPryEBPWnkqq0zT7Ili-aFEWBm9Cd5FxTfnczZTcfGkySqRcGlYm0/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>
----------------------------------------------------
هام : لا اسمح بنقل الموضوع دون ذكر المصدر
انتظرونا المرة القادمة :)
ليست هناك تعليقات :
إرسال تعليق