بسم الله الرحمن الرحيم اللهم صل علي نبينا محمد في الاولين وصل عليه في الاخرين وصل عليه في كل وقت وحين وصل عليه في الملا الاعلي الي يوم الدين , متابعين مدونة كمبيوتر كوم اليوم لقد اتيت لكم باضافة تابعنا عبر الشبكات الاجتماعية بشكل جميل وجذاب مثل مدونة المحترف :)
صورة الاضافة :
<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>
----------------------------------------------------
هام : لا سمح بنقل الموضوع دون ذكر المصدر
انتظرونا المرة القادمة :)
صورة الاضافة :
شرح تركيب الإضافة:
اولا : توجه الى لوحة تحكم مدونتك ثم القالب ثم تحرير 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/AVvXsEjPu4zJqw1PI5MaGrGVab-jyE8c40G40CN83_vNlp5jfLY80TVFdBsybGKpCMXctmut9PsxvanhkVd6orolmkd03wJTvWf_ihvAagdpPQCvmDqnETHj3ZD-Za2eIAejBAxULgg9VackMNo/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/AVvXsEjgwcNXa1JRUW3xLM_nZ5bvEdxxaiqoTNYnfxeSZT-xAzaytrQV496Lr7yv6meoQ8dJfDxOim5A8TokzxCi3T1LJ5VcJ3dVy77RhYHGENeV93VpFJoyVW4hHWoGXdVgpTxNiIvwSwaZhHA/s1600/youtube2.png)top no-repeat;}
.twt-icone{
width: 50px;
height: 32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq0_pWOugDux8d62vsrx2wocjQkQEg266vA7E0c0p5VZk5rZLOnzt-sxjTH4auPmnXMOHjzkanYcwegRpM-IHCKgxBMz_DXSLkRo_xAQ3_IUR53T5YGsDjIRlEYYChdsPvd4IRgRpvQCo/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/AVvXsEjNdjAhyo493svBR5cGfNoZvdJtihcabuw8chrRtYwcLR4ff1GTXvNVTQCCTG-JK27nLx6NiA84gCjCV4EjFo1mI8Y_azNxg_1p97fLGjIMtylXwukHMqePmJU9tO_BRi-c6zqNPiziJCs/s1600/twitter2.png)top no-repeat;}
.face-icone{
width: 50px;
height: 32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmfIVxV3DyiMksshy2zZTWx2RsZ7oAM2cI89tbDqzKSJ7CTkg-b3NR2nXTlIKMlma5UOvggeiWgmgFwQJ8TVjQ0AtwEUKRAnTLIQIu6cPiJtVmREvRiHZarpgBWPxWpOafDCXPAz71zlc/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/AVvXsEjJFFiK_My7hDupqH97zx5DJVvm-phq-KgF3I0UHrDizm7gvtOGX2m2F67qOVC06RTAnA55cLlwXOmbbSSML38xSR2zopDLsEuIkXwiH8cZBTLCKEHWwDO0_vrSAPmwbVJdkcS_dcH1W8E/s1600/facebook2.png)top no-repeat;}
.rss-icone{
width: 50px;
height: 32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5DkOjPYjIPosD-2TyVXpu2T73ISWnQgUmptsLpicz7i_w8J8KoY-8hTNlHBH48CTzrqbydP-5WVXU4paTQ64C_Qte5zpa3ylkjdVnJpoj8fgU2EaAKkvvfM9yJfS0ZUQ3nylQ7CxV_Bk/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/AVvXsEhe5NCFHMzl8KTlFuGEOWVTa5AUXSW86REvtC8ofxglgjWzr1Eb9P5NxtLXUNNrikziOQc5z-6bE4G-WwRhkPeErmdT-w2mAQCUNmQ_OnKF8Ug41VlGvbsQ8DGJ3Uuq4u4wFXlUjplPdOQ/s1600/RSS2.png)top no-repeat;}
.post-footer-line > * {
margin-left: 0;
}
ثم اضغط على حفظ :)
ثانيا : نذهب للوحة التحكم , التخطيط , ثم اضافة اداة جديدة جافا اسكربت وتضيف الكود التالي :
<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>
----------------------------------------------------
هام : لا سمح بنقل الموضوع دون ذكر المصدر
انتظرونا المرة القادمة :)
هل أعجبك الموضوع ؟
ليست هناك تعليقات: