اضافة تابعنا عبر الشبكات الاجتماعية ء مثل محترفي التكنولوجيا
بسم
الله الرحمن الرحيم اللهم صل علي نبينا محمد في الاولين وصل عليه في
الاخرين وصل عليه في كل وقت وحين وصل عليه في الملا الاعلي الي يوم الدين ,
متابعين مدونة كمبيوتر كوم اليوم لقد اتيت لكم باضافة تابعنا عبر الشبكات
الاجتماعية بشكل جميل وجذاب مثل مدونة المحترف :)
صورة الاضافة :
صورة الاضافة :
شرح تركيب الإضافة:
اولا
: توجه الى لوحة تحكم مدونتك ثم القالب ثم تحرير 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>
----------------------------------------------------
هام : لا اسمح بنقل الموضوع دون ذكر المصدر
انتظرونا المرة القادمة :)
ليست هناك تعليقات :
إرسال تعليق